21 thoughts on “Using SharePoint TaxonomyWebTaggingControl control: Access and manipulate from client side

  1. Hi, Vadim!

    Have you found any way to attach to the event when the user clicks OK button in WebTagging dialog and the value of termset field is changed?

  2. Hi Max,
    when the value of termset field is changed, event Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onTextChanged is raised by default.
    This event is registered for ScriptForWebTaggingUI control with the following line:

    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onTextChanged));

    It means that you could provide additional event handler when the value of termset field is changed:

    function initTaggingControl() {
    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));

    function onCustomTextChanged(sender, args) {
    //Some code after value of termset field is changed goes here...

    ExecuteOrDelayUntilScriptLoaded(initTaggingControl, 'ScriptForWebTaggingUI.js');

    Hope it helps,

    • Hi Vadim,
      I’m working on a different project now and come across your blog again while searching for different kind of information after a year and just noticed that I asked you a question and you actually answered it! 🙂
      I wish I had seen your answer before! Actually, a year ago I handle onchange event differently: http://maxim-dikhtyaruk.blogspot.com/2013/03/client-side-scripting-for-taxonomyterm.html
      Solution is definitely not elegant and right, but it worked for me :).
      Now, we are looking for possibility of using SharePoint taxonomy picker in our provider-hosted app. Presumably, it will work fine with client context…

  3. Great post Vadim! Very helpful.
    I need to go a little further. Is there a way to create the TaxonomyWebTaggingControl directly from client side?
    I need to create the control dynamically from javascript. Do you think there’s a way to do that?


    • Hi Guillermo, yes, I’m pretty sure it is doable.

      The list of some points that should be considered for implementing JavaScript based taxonomy control:

      • TaxonomyWebTaggingControl is rendered as a div container and hidden field for storing taxonomy value(s) on the client side
      • tagUI JavaScript object is used for storing Taxonomy information (SspId, TermSetId and etc.)
      • TaxonomyWebTaggingControl control utilizes internal service /_vti_bin/TaxonomyInternalService.json for communication with Taxonomy service application
      • Vadim, I finally managed to create the taxonomy control from client side code. Thanks for the help!
        I leave you a function to do this:

        //id: the id the control will have
        //parent: dom element where the field will be appended
        //SspId: SspId for the field in GUID format, ex: {00923257-fabc-4cd2-8442-ff475ed16743}
        //TermSetId: TermSetId for the field in GUID format, ex: {00923257-fabc-4cd2-8442-ff475ed16743}
        function generateTaxonomyField(id, parent, SspId, TermSetId) {
        //Generates required dom elements
        var span = $(“”);

        //Get the site collection url
        var wsUrl = window.location.protocol + “//” + window.location.host + _spPageContextInfo.siteServerRelativeUrl;
        wsUrl.replace(‘/’, ‘\u002f’);

        //initialize control
        var tagUI = document.getElementById(id + “_div”);
        if (tagUI) {
        tagUI[‘InputFieldId’] = id + “_input”;
        tagUI[‘SspId’] = SspId;
        tagUI[‘GroupId’] = ‘00000000-0000-0000-0000-000000000000’;
        tagUI[‘TermSetId’] = TermSetId;
        tagUI[‘AnchorId’] = ‘00000000-0000-0000-0000-000000000000’;
        tagUI[‘IsMulti’] = true;
        tagUI[‘AllowFillIn’] = true;
        tagUI[‘WidthCSS’] = ‘ms-taxonomy-width’;
        tagUI[‘JavascriptOnValidation’] = “”;
        tagUI[‘Lcid’] = 3082;
        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’] = false;
        tagUI[‘Disable’] = false;
        tagUI[‘ExcludeKeyword’] = false;
        tagUI[‘WebServiceUrl’] = wsUrl + ‘\u002f_vti_bin\u002fTaxonomyInternalService.json’;
        tagUI[‘FieldName’] = ‘Agregar t\u00E9rminos’;
        tagUI[‘FieldId’] = ‘00000000-0000-0000-0000-000000000000’;
        tagUI[‘DisplayPickerButton’] = true;
        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(id + “_div”); }

        var container = $(‘#container’);
        generateTaxonomyField(‘myTaxonomyField’, container, “{00923257-fabc-4cd2-8442-ff475ed16743}”, “{6abc6553-8a75-4a0b-8100-ce330ce4779b}”);

  4. It is possible to share a sample solution? Thanks.

    I’m having problems with getting the pop-up, of the taxonomyWebTaggingControl, to work. It remains empty. Filling out terms directly in the control, the suggestions, etc… all work. Only the the “select pop-up” is giving me a headache.

  5. Hi, I’m getting the following error, and the dialog remains empty:

    Refused to display ‘http://XXX/_layouts/15/WebTaggingDialog.aspx?Field=XXX&IsDlg=1’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’

    Any ideas ?

    • Got it.. I needed to lazy load init.js and strings.js before the call to ‘Microsoft.SharePoint.Taxonomy.ScriptForWebTaggingUI.onLoad(id + “_div”); }’

      My next issue here (I’ve had a lot so far) Is the autolookup in the input control..
      In the dialog it works like a charm though 🙂

      Any ideas ?

  6. This post was life saver. Works like charms. Other ways with javascript couldn’t actually save the value of the term on a Form of new item for a particular content type. I introduce the code via JSLink associated to the Content Type.

  7. Not sure how this has worked for others but I found the webTaggingId required isnt the control ID but the div that sits beneath that control ID, which you wont know at runtime. So I had to have this in the get function above:

    var webTaggingId = jQuery(“#” + elementId + “> div”).attr(“id”);

    Otherwise it doesnt work.

  8. I found the code required to render the taxonomy picker on the web but ovsleep is the only one I’ve found that has sample values. I spent a good number of hours ( more than I would like to admit ) trying to figure out why the picker was not rendering. Eventually I read through this post, and comments, and found out braces were required around the sspId and termSetId guids.

  9. I have problem with
    function initTaggingControl() {
    RTE.CanvasEvents.registerListener(RTE.CanvasEvents.editableRegionChangedEvent, Function.createDelegate(null, onCustomTextChanged));

    function onCustomTextChanged(sender, args) {
    //Some code after value of termset field is changed goes here…

    ExecuteOrDelayUntilScriptLoaded(initTaggingControl, ‘ScriptForWebTaggingUI.js’);

    tagUI[‘JavascriptOnValidation’] = “”

    Call more than one time on click or input term

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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.