Angularize SharePoint Client Side Taxonomy Picker

Question

The Patterns and Practices team has released a client side taxonomy picker for use when integrating with SharePoint. It works well, but uses jQuery and my SharePoint App is built in Angular... which seems to be a growing trend. I would like to leverage the client side taxonomy picker in Angular and was unsure of how best to achieve this. Here is a link to the component: https://github.com/OfficeDev/PnP/tree/dev/Components/Core.TaxonomyPicker

I am thinking it would be a directive, or is there a non-directive manner to replace (aka, how does Angular manage a replace/initialization) as they are doing here:

HTML:

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

jQuery Function that gets the Current Context and creates the Taxonomy Picker

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

    context = SP.ClientContext.get_current();

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

I don't need the script loading components as illustrated in the example provided by the PnP team, as I have these already embedded in my App.

Answer 1

Given the challenges of making a "responsive" Managed Metadata field, I built the following using the JavaScript Object Model to retrieve terms and then push them for use in an Array. This includes retrieving Synonyms.

// 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();