Angularize SharePoint客户端分类选择器

问题描述：

模式和实践团队发布了客户端分类选择器，以便与SharePoint集成时使用。它运行良好，但使用jQuery和我的SharePoint应用程序内置Angular ...这似乎是一个增长的趋势。我想利用Angular中的客户端分类选择器，并不确定如何最好地实现这一点。这里是一个链接到组件：https://github.com/OfficeDev/PnP/tree/dev/Components/Core.TaxonomyPicker Angularize SharePoint客户端分类选择器

我在想这是一个指令，或者是否有非指令性方式来取代（也就是说，Angular如何管理替换/初始化），因为他们在这里执行：

HTML：

<input type="hidden" id="taxPickerGeography" />

jQuery函数获取当前语境下，并创建分类选取器

$(document).ready(function() { 
    var context; 

    context = SP.ClientContext.get_current(); 

    $('#taxPickerGeography').taxpicker({ 
     isMulti: false, 
     allowFillIn: false, 
     termSetId: '89206cf2-bfe9-4613-9575-2ff5444d1999' 
    }, context); 
});

我不需要脚本加载组件，如由PnP团队提供的示例中所示，因为我已将这些组件嵌入到我的应用程序中。

答

考虑到制作一个“响应式”Managed Metadata字段的挑战，我使用JavaScript Object Model建立了以下检索条件，然后将它们推送到Array中使用。这包括检索同义词。

// Query Term Store and get terms for use in Managed Metadata picker stored in an array named "termsArray". 

var termsArray = []; 

    function execOperation() { 

     // Current Context 
     var context = SP.ClientContext.get_current(); 
     // Current Taxonomy Session 
     var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context); 
     // Term Stores 
     var termStores = taxSession.get_termStores(); 
     // Name of the Term Store from which to get the Terms. Note, that if you receive the following error "Specified argument was out of the range of valid values. Parameter name: index", you may need to check the term store name under Term Store Management to ensure it was not changed by Microsoft 
     var termStore = termStores.getByName("TermStoreName"); 
     // GUID of Term Set from which to get the Terms 
     var termSet = termStore.getTermSet("TermSetGUIDHere"); 
     var terms = termSet.getAllTerms(); 
     context.load(terms); 
     context.executeQueryAsync(function() { 

      var termEnumerator = terms.getEnumerator(); 
      while (termEnumerator.moveNext()) { 
       var currentTerm = termEnumerator.get_current(); 
       var guid = currentTerm.get_id(); 
       var guidString = guid.toString(); 
       var termLabel = currentTerm.get_name(); 

       // Get labels (synonyms) for each term and push values to array 
       getLabels(guid, guidString, termLabel); 
      } 

      // Set $scope to terms array 
      $scope.$apply(function() { 
       $scope.termsArray = termsArray; 
      }); 

     }, function (sender, args) { 
      console.log(args.get_message()); 
     }); 

     // Get labels (synonyms) for each term and push values to array 
     function getLabels(termguid, guidString, termLabel) { 
      var clientContext = SP.ClientContext.get_current(); 
      var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext); 
      var termStores = taxSession.get_termStores(); 
      // The name of the term store. Note, that if you receive the following error "Specified argument was out of the range of valid values. Parameter name: index", you may need to check the term store name under Term Store Management to ensure it was not changed by Microsoft 
      var termStore = termStores.getByName("TermStoreName"); 
      // GUID of Term Set from which to get the Terms 
      var termSet = termStore.getTermSet("TermSetGUIDHere"); 
      var term = termSet.getTerm(termguid); 
      var labelColl = term.getAllLabels(1033); 

      clientContext.load(labelColl); 
      clientContext.executeQueryAsync(function() { 
       var labelEnumerator = labelColl.getEnumerator(); 
       var synonyms = ""; 
       while (labelEnumerator.moveNext()) { 
        var label = labelEnumerator.get_current(); 
        var value = label.get_value(); 
        synonyms += value + " | "; 
       } 
       termsArray.push({ 
        termName: termLabel, 
        termGUID: guidString, 
        termSynonyms: synonyms 
       }); 

      }, function (sender, args) { 
       console.log(args.get_message()); 
      }); 
     } 
    }; 

    // Execute function 
    execOperation();

Angularize SharePoint客户端分类选择器

相关推荐