I am going to use a simple set of terms using state names in the From Sharepoint Deparment. My terms are included in a group named Classification and a Term Set named City and Department. Here is what my term store looks like.
We then need to add a heap of JavaScript references. Some of these are included already, but specifically we need to load SP.Taxonomy.js. We also need to include init.js as I mentioned in an earlier blog post.
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.taxonomy.js"></script>
You’ll need to download this and include it in your project or pull it from a CDN.
<script type="text/javascript" src="../Scripts/AutocompleteWebPart.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.9.1.custom.min.js"></script>
Lastly to use jQuery UI, you need to include it’s CSS file in the Content folder of your project.
<link rel="Stylesheet" type="text/css" href="../Content/jquery-ui-1.8.22.custom.css" />
Now, I am just going to add a textbox to the body of our page.
<body>
<div>
<input id="City" type="text" />
</div>
</body>
<div>
<input id="City" type="text" />
</div>
</body>
We’ll start by adding some global variables. We’ll populate these as we go.
var context;
var session;
var termStore;
var groups;
var termSets;
var termsArray = [];
var session;
var termStore;
var groups;
var termSets;
var termsArray = [];
We’ll start in a document ready function. We use the standard code to get a reference to the current context. We’ll need this to create a new TaxonomySession object. We thensession.GetDefaultSiteCollectionTermStore() to get the default term store. From there, we need to context.load on the session and termStore objects. We then use a typical executeQueryAsync method to execute our query. The onTaxonomySession method will handle success and we’ll use a sharedonTaxonomyFailed method to handle any failures.
$(document).ready(
function () {
context = new SP.ClientContext.get_current();
session = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
termStore = session.getDefaultSiteCollectionTermStore();
context.load(session);
context.load(termStore);
context.executeQueryAsync(onTaxonomySession, onTaxonomyFailed);
});
function () {
context = new SP.ClientContext.get_current();
session = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
termStore = session.getDefaultSiteCollectionTermStore();
context.load(session);
context.load(termStore);
context.executeQueryAsync(onTaxonomySession, onTaxonomyFailed);
});
he onTaxonomySession method then retrieves a list of groups. We have to retrieve all groups because there isn’t a method to just retrieve one by name. Although there is a method to retrieve a group by id. Since we don’t want to hard code any GUIDs though. We have to retrieve all groups and iterate them to find the one we want. A successful query will call onGroupsLoaded.
function onTaxonomySession() {
groups = termStore.get_groups();
context.load(groups);
context.executeQueryAsync(onGroupsLoaded, onTaxonomyFailed);
}
groups = termStore.get_groups();
context.load(groups);
context.executeQueryAsync(onGroupsLoaded, onTaxonomyFailed);
}
In this method we have a list of the groups so we need to iterate through them and find the one we want. In this case, Classification. The code isn’t ideal but it works. We start by getting an enumerator withgetEnumerator(). We then use this enumerator to examine the groups. In our loop, we use get_current() to get currentGroup. We then use get_name() to compare against the one we want. When a match is found, we call another method getTermSets and pass the term set.
function onGroupsLoaded() {
// iterate termStores
var groupEnumerator = groups.getEnumerator();
while (groupEnumerator.moveNext()) {
var currentGroup = groupEnumerator.get_current();
if (currentGroup.get_name() == 'Classification')
getTermSets(currentGroup);
}
}
// iterate termStores
var groupEnumerator = groups.getEnumerator();
while (groupEnumerator.moveNext()) {
var currentGroup = groupEnumerator.get_current();
if (currentGroup.get_name() == 'Classification')
getTermSets(currentGroup);
}
}
In the getTermSets method, we call get_termSets.
function getTermSets(currentGroup) {
termSets = currentGroup.get_termSets();
context.load(termSets);
context.executeQueryAsync(onTermSetsLoaded, onTaxonomyFailed);
}
termSets = currentGroup.get_termSets();
context.load(termSets);
context.executeQueryAsync(onTermSetsLoaded, onTaxonomyFailed);
}
The onTermSetLoaded method will then iterate through the term sets returned and compare by name in the same way. In this case, we are looking for the term set named States. When the match is found, we callgetTerms().
function onTermSetsLoaded() {
var termSetEnumerator = termSets.getEnumerator();
while (termSetEnumerator.moveNext()) {
var currentTermSet = termSetEnumerator.get_current();
var termSetName = currentTermSet.get_name();
if (termSetName == 'City')
getTerms(currentTermSet);
}
}
var termSetEnumerator = termSets.getEnumerator();
while (termSetEnumerator.moveNext()) {
var currentTermSet = termSetEnumerator.get_current();
var termSetName = currentTermSet.get_name();
if (termSetName == 'City')
getTerms(currentTermSet);
}
}
This is now the last call we need to make. This retrieves all of the terms for the term set. Unfortunately, we have to get all of them (as far as I know) which is why I don’t recommend this with large term sets.
function getTerms(termSet) {
terms = termSet.get_terms();
context.load(terms);
context.executeQueryAsync(onTermsLoaded, onTaxonomyFailed);
}
terms = termSet.get_terms();
context.load(terms);
context.executeQueryAsync(onTermsLoaded, onTaxonomyFailed);
}
The onTermsLoaded method will iterate through the terms and add them to an array that the jQuery UI autocomplete method will accept. There you have it all of the code to get items from a term set without a hard coded GUID. It’s a lot of code, but not too bad once you get used to it.
Lastly, we’ll get a reference to our textbox and use the .autocomplete() method passing in the value of our array.
function onTermsLoaded() {
var termsEnumerator = terms.getEnumerator();
while (termsEnumerator.moveNext()) {
var currentTerm = termsEnumerator.get_current();
termsArray.push(currentTerm.get_name());
}
$("#City").autocomplete({ source: termsArray });
}
var termsEnumerator = terms.getEnumerator();
while (termsEnumerator.moveNext()) {
var currentTerm = termsEnumerator.get_current();
termsArray.push(currentTerm.get_name());
}
$("#City").autocomplete({ source: termsArray });
}
At this point, we are done, but we do need to implement our failure method.
function onTaxonomyFailed(sender, args) {
alert('Taxonomy Error:' + args.get_message());
}
At this point, we can test it. Deploy your app and add the app part to a page.
alert('Taxonomy Error:' + args.get_message());
}
At this point, we can test it. Deploy your app and add the app part to a page.
Comments