[Improved Post] Update SharePoint Metadata (Taxonomy) column with Angular JS

After earlier post on the same topic which is updating taxonomy (managed metadata) column with Angular and with JSOM. Thought of optimize the code with more readable and with JavaScript promises. There may be areas further to be improved, for now sample code as below;

(function () {
 'use strict';

 // define controller
 var controllerId = "MMSDevCtrl";

 angular
 .module('app')
 .controller(controllerId, ['$q', mmsDevController]);

 // create controller
 function mmsDevController($q) {

 //global var
 var vm = this;

 //value definitions
 var siteUrl = 'http://win2012/sites/MSSDevTest';
 var listName = 'MyDocumentLibrary';
 var fieldName = 'MMSDepartments'; //MMS Column one
 var fieldName2 = 'MMSDevLanguages'; //MMS Column two
 var itemIdUpdating = 1; // Item to be udated
 var termLabel = 'IT'; //'';
 var termLabel2 = 'Java'; //'';
 //add metadata column to sharepoint
 vm.submitMetadata = function () {
 // function for update managed metadata column
 SetManagedMetaDataField();
 }

 // Setting managed metadata to SharePoint List or Library
 function SetManagedMetaDataField() {
 var context = new SP.ClientContext(siteUrl);
 //Get item form ID
 var list = context.get_web().get_lists().getByTitle(listName); //listName
 var item = list.getItemById(itemIdUpdating); //itemID
 //MMS columns
 var field = list.get_fields().getByInternalNameOrTitle(fieldName); //Tx field one
 var txField = context.castTo(field, SP.Taxonomy.TaxonomyField);
 var field2 = list.get_fields().getByInternalNameOrTitle(fieldName2); //Tx fieldName two
 var txField2 = context.castTo(field2, SP.Taxonomy.TaxonomyField);

 //loading context
 context.load(field);
 context.load(txField);
 context.load(field2);
 context.load(txField2);
 context.load(item);

 //excute async of context
 context.executeQueryAsync(
 //Success
 Function.createDelegate(this
 , function () {
 //Getting term set IDs of the fields
 var termSetId = txField.get_termSetId().toString();
 var termSetId2 = txField2.get_termSetId().toString();

 //Getting ID for term
 getTermIdForTerm(context, termLabel, termSetId)
 .then(function (termID) {
 console.log("Returned term Id", termID);
 //check for not multi valued taxonomy column
 if (!txField.get_allowMultipleValues()) {
 var termValue = new SP.Taxonomy.TaxonomyFieldValue();
 termValue.set_label(termLabel);
 termValue.set_termGuid(termID);
 termValue.set_wssId(-1);
 txField.setFieldValueByValue(item, termValue);
 }
 });

 getTermIdForTerm(context, termLabel2, termSetId2)
 .then(function (termID) {
 console.log("Returned term Id 2", termID);
 //check for not multi valued taxonomy column
 if (!txField2.get_allowMultipleValues()) {
 var termValue2 = new SP.Taxonomy.TaxonomyFieldValue();
 termValue2.set_label(termLabel2);
 termValue2.set_termGuid(termID);
 termValue2.set_wssId(-1);
 txField2.setFieldValueByValue(item, termValue2);
 }
 });

 // Define other columns to be updated
 item.set_item('Title', 'New Item 9102016 C');
 // Update item
 item.update();
 //Execute query for update
 context.executeQueryAsync(
 function () {
 console.log('field updated with MMS column #TechCentro');
 }, function (sender, args) {
 console.error(args.get_message() + '\n' + args.get_stackTrace());
 });
 }
 , function (sender, args) {
 console.log(args.get_message() + '\n' + args.get_stackTrace());
 })
 //Failed
 , Function.createDelegate(this, function (err) {
 console.error(err.get_message());
 })
 )
 }
 // Getting ID of the Term
 function getTermIdForTerm(clientContext, termValue, termSetId) {
 var deferred = $q.defer();
 var termId = "";
 var tSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext);
 var ts = tSession.getDefaultSiteCollectionTermStore();
 var tset = ts.getTermSet(termSetId);
 var lmi = new SP.Taxonomy.LabelMatchInformation(clientContext);
 lmi.set_lcid(1033);
 lmi.set_trimUnavailable(true);
 lmi.set_termLabel(termValue);
 var termMatches = tset.getTerms(lmi);
 //context loading with taxanomy values
 clientContext.load(tSession);
 clientContext.load(ts);
 clientContext.load(tset);
 clientContext.load(termMatches);
 clientContext.executeQueryAsync(
 function () {
 if (termMatches && termMatches.get_count() > 0) {
 termId = termMatches.get_item(0).get_id().toString();
 deferred.resolve(termId);
 console.log("Resolved Term Id for Term " + termValue, termId);
 }
 else
 deferred.resolve(null);
 }, function (sender, args) {
 console.log("Error on retrieving term GUID", args);
 deferred.reject(null);
 });
 return deferred.promise;
 }

 };

})();

Markup as below;


<script src="../../_layouts/15/SP.Runtime.js"></script>
<script src="../../_layouts/15/SP.js"></script>
<script src="../../_layouts/15/SP.Taxonomy.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/App.js"></script>
<script src="../Scripts/mmsDev.controller.js"></script>
<div ng-app="app" ng-controller="MMSDevCtrl as vm">
{{}}
<input id="Text1" type="text" ng-model="vm.value"/>
<input id="Submit1" type="button" value="submit" ng-click="vm.submitMetadata()"/></div>

Click here to view old post.

Get | Resolve Term ID for Term Value in SharePoint Metadata Service

This may be generic function you can use when you play with managed metadata (taxonomy) columns or with Managed Managed Metadata Service.

Notes:

  • Used JSOM since no impletation in REST API to get done this task in SharePoint to date of post
  • Passing term set ID is must since there may may be many term values equivalent in the term store
  • For the example, I have retrieved the term set ID from the list field which glued with the managed metadata service.

Following code illustrate how to get term ID for term value provided.


// Resolve Term ID for the Term Value 
 function getTermIdForTermValue(siteUri, listName, fieldName, termValue) {
 //Define
 var deferred = $q.defer()
 , termId;
 var clientContext = new SP.ClientContext(siteUrl);
 var list = clientContext.get_web().get_lists().getByTitle(listName);
 //Tx field
 var field = list.get_fields().getByInternalNameOrTitle(fieldName);
 var txField = clientContext.castTo(field, SP.Taxonomy.TaxonomyField);
 //load context
 clientContext.load(field);
 clientContext.load(txField);
 // //excute async of context
 clientContext.executeQueryAsync(
 //Success on Async
 Function.createDelegate(this
 , function () {
 //Getting term set of the field
 var termSetId = txField.get_termSetId().toString();
 var tSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(clientContext);
 var ts = tSession.getDefaultSiteCollectionTermStore();
 var tset = ts.getTermSet(termSetId);
 //Define term label to match
 var lmi = new SP.Taxonomy.LabelMatchInformation(clientContext);
 lmi.set_lcid(1033);
 lmi.set_trimUnavailable(true);
 lmi.set_termLabel(termValue);
 var termMatches = tset.getTerms(lmi);
 //context loading with taxanomy values
 clientContext.load(tSession);
 clientContext.load(ts);
 clientContext.load(tset);
 clientContext.load(termMatches);
 clientContext.executeQueryAsync(
 function () {
 if (termMatches &amp;&amp; termMatches.get_count() &gt; 0) {
 termId = termMatches.get_item(0).get_id().toString();
 console.log("Resolved Term Id for Term " + termValue, termId);
 deferred.resolve(termId);
 }
 else {
 console.log("No IDs to resolved for Term " + termValue);
 deferred.resolve(null);
 }
 }
 , function (sender, args) {
 console.log("Error on resolving term ID", args);
 deferred.reject(null);
 });
 }
 , function (sender, args) {
 console.log(args.get_message() + '\n' + args.get_stackTrace());
 })
 //Failed on Async
 , Function.createDelegate(this, function (err) {
 console.error(err.get_message());
 })
 );
 return deferred.promise;
 }

Click here to view in gist.

For more details refer following links;

Update SharePoint Metadata (Taxonomy) column with Angular JS

Check following code which updates provided SharePoint list/ library item with Managed metadata column.

First it solves GUID from the Managed Metadata service then push that value and other column values to the SharePoint back end.

Before execute following code you need properly configured “Managed Metadata Service” and list configuration with MMS.

Click here above is not visible.

If this code helped, don’t miss to give feedback and following!