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”
/>

function initializeTaxonomyPicker() {

var context = new SP.ClientContext.get_current();

$(‘#taxPickerSkill’).taxpicker({

isMulti: false,

allowFillIn: false,

termSetId: ’81c6dc2a-8afb-4cf5-bd5c-8e515b154485′

}, context);

}

This will render a textbox and provide terms selection for the assigned termsetid ‘81c6dc2a-8afb-4cf5-bd5c-8e515b154485′.

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.

To avoid this, we can 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

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

}

 

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