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,
  1. <!-- CSS Files -->  
  2. < link href = "../Content/Styles/taxonomypickercontrol.css"  
  3. rel = "stylesheet" / >  
  4.     <!-- Javacript Files -->  
  5.     < script type = "text/javascript"  
  6.         src = "../_layouts/15/SP.Taxonomy.js" >   
  7.     < /script>   
  8.     < script type = "text/javascript"  
  9.         src = "../Scripts/taxonomypickercontrol.js" >   
  10.     < /script>   
  11.     < script type = "text/javascript"  
  12.         src = "../Scripts/taxonomypickercontrol_resources.en.js" >   
  13.     < /script>  
CSS

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

Note: You can change the id of the input control.
  1. <div>  
  2.    <input type="hidden" id="taxPickerKeywords" />  
  3. </div>  
control

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,

identifier

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,

permission

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

Enter page title

Page title

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

kewword

Summary

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

Up Next
    Ebook Download
    View all
    Learn
    View all