Client side Taxonomy field control manipulation in Sharepoint Online using?

Question

I have a taxonomy filed as a user profile property in Sharepoint online. The challenge with it is that I want to give a control on a page which will allow users to select the taxonomy field values. Once they select that then the user profile property needs to be updated. The question here is:

How to first put a Taxonomy picker control through a client side code using Jquery or Javascript to a page?

The other part of the question would be how to change the values which are present in the user profile property after a user selects them in this people picker. Basically I need to update the existing user profile property value to this new one.

Please note everything needs to be in Javascript or Jquery code can either be in CSOM or using REST.

Any help is appreciated.

Thanks in advance.

Answer 1

To Add OOTB Taxonomy Picker

Edit the masterpage and add:

<SharePoint:ScriptLink ID="ScriptLink2" name="scriptforwebtaggingui.js" OnDemand="true" runat="server" Localizable="false" />
    <SharePoint:ScriptLink ID="ScriptLink1" name="sp.taxonomy.js" OnDemand="true" runat="server" Localizable="false" />    

In your HTML/page/script editor add

   <input name="countryTaxControl" type="hidden" id="countryTaxControl">
  <div id="countryTaxControlContent" class="ms-taxonomy ms-taxonomy-height ms-taxonomy-width"></div> 

JS to set

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
SP.SOD.executeFunc('sp.taxonomy.js', 'SP.Taxonomy.TaxonomySession', init);

});

//Code to initialize the Taxonomy picker control

 var tagUI = document.getElementById(taxControlContentId);
   if (tagUI) {
       tagUI['InputFieldId'] = taxControlInputId;
        tagUI['SspId'] = sspId;
        tagUI['GroupId'] = '00000000-0000-0000-0000-000000000000';
        tagUI['TermSetId'] = termSetId;
        tagUI['AnchorId'] = '00000000-0000-0000-0000-000000000000';
        tagUI['IsMulti'] = isMulti;
        tagUI['AllowFillIn'] = false;
       tagUI['WidthCSS'] = 'ms-taxonomy-width';
       tagUI['JavascriptOnValidation'] = "";
       tagUI['Lcid'] = 1033;
       tagUI['IsSpanTermSets'] = false;
       tagUI['IsSpanTermStores'] = false;
       tagUI['IsIgnoreFormatting'] = false;
       tagUI['IsIncludeDeprecated'] = false;
       tagUI['IsIncludeUnavailable'] = false;
       tagUI['IsIncludeTermSetName'] = false;
       tagUI['IsAddTerms'] = false;
       tagUI['IsIncludePathData'] = false;
       tagUI['IsUseCommaAsDelimiter'] = true;
       tagUI['Disable'] = false;
       tagUI['ExcludeKeyword'] = false;
       tagUI['WebServiceUrl'] = _spPageContextInfo.webServerRelativeUrl + 'u002f_vti_binu002fTaxonomyInternalService.json';
       tagUI['FieldName'] = fieldName;
       tagUI['FieldId'] = '00000000-0000-0000-0000-000000000000';
       tagUI['DisplayPickerButton'] = showPickerButton;
       var _emmTaggingLoadCall;
       if (_emmTaggingLoadCall == null) {
           _emmTaggingLoadCall = true;
           SP.SOD.executeFunc('ScriptForWebTaggingUI.js', 'Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.taggingLoad',
               function () {
                   Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.resetEventsRegistered();
               });
       }
       SP.SOD.executeFunc('ScriptForWebTaggingUI.js', 'Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onLoad',
           function () {
               Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onLoad(taxControlContentId);
           });
   } 

for more information visit : http://geeks.ms/lmanez/2014/06/23/using-the-oob-taxonomy-picker-control-just-from-javascript-code-in-sharepoint-online/

And to write the user profile property using the REST, very nice blog written by Vardhamn: http://www.vrdmn.com/2016/06/sharepoint-online-write-user-profile.html

Code from that for reference:

(function ($) {
    'use strict';

    var requestHeaders = {
        'X-RequestDigest': $("#__REQUESTDIGEST").val(),
        "accept": "application/json; odata=nometadata",
        "content-type": "application/json;odata=nometadata"
    };

    var userData = {
        'accountName': "i:0#.f|membership|[email protected]",
        'propertyName': 'AboutMe', //can also be used to set custom single value profile properties
        'propertyValue': 'Value set from REST API!'
    }

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/SetSingleValueProfileProperty",
        type: "POST",
        headers: requestHeaders,
        data: JSON.stringify(userData),
        success: function (data) {
            console.log(data)
        },
        error: function (jqxr, errorCode, errorThrown) {
            console.log(jqxr.responseText);
        }
    });

})(jQuery);