PnP Taxonomy Picker – Set Dynamic termset id

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('<div class="cam-taxpicker"></div>');

//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('<div class="cam-taxpicker-suggestion-container"></div>');

if (!this._enterFillIn) {

this._dlgButton = parent.find(".cam-taxpicker-button").length > 0 ? parent.find(".cam-taxpicker-button") : jQuery('<div class="cam-taxpicker-button"></div>');

}

if (!this._isReadOnly) {

this._editor = parent.find(".cam-taxpicker-editor").length > 0 ? parent.find(".cam-taxpicker-editor") : jQuery('<div class="cam-taxpicker-editor" contenteditable="true"></div>');

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('<div class="cam-taxpicker-editor-readonly" contenteditable="false"></div>');

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());

}