Client Side Taxonomy Picker For SharePoint App

Here are the steps,

Add the following CSS and JS files references in app .aspx page as in the following image,

<!-- CSS Files -->
< link href = "../Content/Styles/taxonomypickercontrol.css"
rel = "stylesheet" / >
    <!-- Javacript Files -->
    < script type = "text/javascript"
        src = "../_layouts/15/SP.Taxonomy.js" >
    < /script>
    < script type = "text/javascript"
        src = "../Scripts/taxonomypickercontrol.js" >
    < /script>
    < script type = "text/javascript"
        src = "../Scripts/taxonomypickercontrol_resources.en.js" >
    < /script>

Then add the input control in placeholder main part as shown below,

Note: You can change the id of the input control.

<div>
   <input type="hidden" id="taxPickerKeywords" />
</div>

On Document ready add the following code to bind the term set for the taxonomy picker,

Here I added the Enterprise keyword term set,

$('#taxPickerKeywords').taxpicker({ isMulti: true, allowFillIn: true, termSetId: "bbe229c4-6127-4335-a6bb-c756ddcc6da0" }, context);

Term set ID will vary for each term sets.

From term store we can take the ID of term set,



Parameters

The first parameter of the Taxonomy Picker sets the options for the control. The properties that can be set include:

 

Parameter	Description
isMulti	Boolean indicating if taxonomy picker support multiple value.
isReadOnly	Boolean indicating if the taxonomy picker is rendered in read only mode.
allowFillIn	Boolean indicating if the control allows fill=ins (Open TermSets only).
termSetId	The GUID of the TermSet to bind against (available from Term Management).
useHashtags	Boolean indicating if the default hashtags TermSet should be used.
useKeyword	Boolean indicating if the default keywords TermSet should be used.
maxSuggestions	Integer for the max number of suggestions to list (defaults is 10).
lcid	The locale ID for creating terms (default is 1033).
language	The language code for the control (defaults to en=us) context.

The second parameter is an initialized SP.ClientContext object,

Make sure to provide permission to taxonomy in your appmanifest.xml file,



Finally deploy the solution, Taxonomy picker will be available in your apps page.





The terms option will be available on the pop up as in the following,



Summary

In this article we explored how to use the taxonomy picker in SharePoint Hosted apps.