PnP Taxonomy Picker – Set Dynamic termset id

Ashwini Bapat — Wed, 15 Mar 2017 11:01:55 GMT

This post relates to the taxonomy picker from PnP. https://github.com/SharePoint/PnP/tree/dev/Components/Core.TaxonomyPicker An example of using it in your javascript and html would be as: <input type="hidden" id="taxPickerSkill" /> This will render a textbox and provide a SharePoint like taxonomy picker for the assigned termsetid. But for scenarios where the termsetid is dynamic or say you want to initialize a starting value(term) to the textbox, if you call the above function dynamically when needed, it ends up rendering a new textbox with taxonomy picker each time. These code changes ensure that the editor textbox, button and suggestion container don't get re-added each time. If the textbox already has an associated editor, button and suggestion container, use that. The taxonomy picker can now be called dynamically to change the termsetid associated or set an initial value. E.g:- $('#taxPickerSkill').val("[{\"Id\":\"" + term.TermGuid + "\", \"Name\": \"" + term.Label + "\"}]"); initializeTaxonomyPicker(); OR var context = new SP.ClientContext.get_current(); $('#taxPickerSkill').taxpicker({ isMulti: false, allowFillIn: false, termSetId: termSetId }, context); We need to make the following changes in the TaxonomyPicker.initialize function. //create a new wrapper for the control using a div this._control = jQuery('

'); //detach the hidden field from the parent and append to the wrapper var parent = this._hiddenValidated.parent(); if (!parent.hasClass('cam-taxpicker')) { this._hiddenValidated = this._hiddenValidated.detach(); parent.append(this._control); } else { this._control = parent; // this._initialValue = ''; this._selectedTerms = new Array(); } this._suggestionContainer = parent.find(".cam-taxpicker-suggestion-container").length > 0 ? parent.find(".cam-taxpicker-suggestion-container") : jQuery('

'); if (!this._enterFillIn) { this._dlgButton = parent.find(".cam-taxpicker-button").length > 0 ? parent.find(".cam-taxpicker-button") : jQuery('

'); } if (!this._isReadOnly) { this._editor = parent.find(".cam-taxpicker-editor").length > 0 ? parent.find(".cam-taxpicker-editor") : jQuery('

'); this._control.empty().append(this._editor).append(this._dlgButton).append(this._hiddenValidated); this._control.after(this._suggestionContainer); } else { this._editor = parent.find(".cam-taxpicker-editor-readonly").length > 0 ? parent.find(".cam-taxpicker-editor-readonly") : jQuery('

'); this._control.empty().append(this._editor).append(this._hiddenValidated); } //initialize value if it exists this._editor.html(''); if (this._initialValue != undefined && this._initialValue.length > 0) { var terms = JSON.parse(this._initialValue); for (var i = 0; i < terms.length; i++) { //add the term to selected terms array var t = new Term(null); t.Id = terms[i].Id; t.Name = terms[i].Name; this._selectedTerms.push(t); } this._editor.html(this.selectedTermsToHtml()); }

Hello world!

BharathNalla — Wed, 15 Mar 2017 04:08:48 GMT

Welcome to Developer Network. This is your first post. Edit or delete it, then start blogging!

SharePoint learnings

PnP Taxonomy Picker – Set Dynamic termset id

Hello world!