[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.

Advertisements

One thought on “[Improved Post] Update SharePoint Metadata (Taxonomy) column with Angular JS

  1. In some instances this is not working in some environments. Following will fix the issues;

    var context = new SP.ClientContext(siteUrl);
    var list = context.get_web().get_lists().getByTitle(listName);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(“” +
    “” +
    “” +
    “” +
    “” + fieldId + “” +
    “” +
    “” +
    “”);
    var items = list.getItems(camlQuery);
    context.load(items);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s