JSOM SharePoint Online Create Term with custom shared and local properties

The sp.Taxonomy.js can be used to create a term in the taxonomy store. I wanted to create Shared Custom properties on the term. However the JavaScript library on MSDN  mentions only  the method setLocalCustomProperty which creates or updates a local custom property.

The SetCustomProperty is mentioned in MSDN to use in CSOM managed code to create or update shared custom property on a term. There is a lack of documentation how to use the method in JSOM.  Following the convention of method name in JavaScript ,i.e. camelCase , I called the  method on a term object in JavaScript and it worked.

term.setCustomProperty("ClientId",1234);

The JSOM code below provides a UI to specify the term to create. To test the code, copy and paste the code into a JavaScript file, upload the JavaScript file into the site and reference the JavaScript file from a Content Editor WebPart.

CreateTerm

When the button “Create Term” is clicked, the term is created with the shared and local custom property.

TermWithCustomProperties


<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>
<script type="text/javascript">
//declare namespace
var ConfigureSiteSettings = ConfigureSiteSettings || {};
ConfigureSiteSettings.CreateTerm = (function(clientTerm)
{
var newGuid = new SP.Guid.newGuid();
var term = document.getElementById("ClientName").value;
if(!!term )
{
//Current Context
var context = SP.ClientContext.get_current();
//Current Taxonomy Session
var taxSession = SP.Taxonomy.TaxonomySession.getTaxonomySession(context);
//termstores
var termStores = taxSession.get_termStores();
//Term Store under which to create the term.
var termStore = termStores.getByName("Taxonomy_3wUnpxYHSE6OFk/vN07VBQ==");
//get the parent term ID for "Clients"
var parentTerm = termStore.getTermSet('c2e65e7b-1fdb-4966-8340-0bec832bb02d');
var terms = parentTerm.getAllTerms();
context.load(terms);
context.executeQueryAsync(function(){
var termEnumerator = terms.getEnumerator();
var termList = "Terms: \n";
var termExists;
while(termEnumerator.moveNext()){
var currentTerm = termEnumerator.get_current();
termList += currentTerm.get_name() + "\n";
if(currentTerm.get_name() ==term) {
termExists = true;
break;
}
}
if(!termExists) {
// Create 1st term
var newTerm = parentTerm.createTerm(term, 1033, newGuid);
newTerm.setCustomProperty("Clientid", 4567);
newTerm.setLocalCustomProperty("ClientURL", 7894);
context.load(newTerm);
context.executeQueryAsync(function() {alert(term + " created with shared property Clientid and local property ClientRef")},function(sender,args){
console.log(args.get_message());});
}
// alert(termList);
},function(sender,args){
console.log(args.get_message());
});
}
else
{
alert("ClientName Empty ! ");
}
});
</script>
<div>
<p>
<br />
<b>Configure Term Store Settings</b>
<br />
<label>Client Name</label><input type="text" value="" id="ClientName" />
<br />
<button type="button" id="CreateTerm" onclick="ConfigureSiteSettings.CreateTerm()">Create Term </button>
</p>
</div>

 

Search Display Template js file not created when HTML file for Item_ThreeLines is created

On a SharePoint Online site collection where Publishing feature was initially turned on and subsequently turned off, js file was not automatically created/updated whenever a display template was created/edited.

We wanted to have a search content web part with three lines instead of two lines. We created a new display template by following the steps below.

  • Navigate to Site Settings>Master Pages>Display Templates>Content Web Parts.
  • Download the file Item_TwoLines.html
  • Rename it to Item_ThreeLines.html
  • Edit title to Three Lines and wherever reference to Line 2 is made add corresponding reference to Line 3


<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Three lines</title>
<!–[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Line 1'{Line 1}:'Title','Line 2'{Line 2}:'','Line 3'{Line 3}:'','FileExtension','SecondaryFileExtension'</mso:ManagedPropertyMapping>
<mso:MasterPageDescription msdt:dt="string">This Item Display Template will show a small thumbnail icon next to a hyperlink of the item title, with an additional line that is available for a custom managed property.</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:CrawlerXSLFile msdt:dt="string"></mso:CrawlerXSLFile>
<mso:Document_x0020_Keywords msdt:dt="string"></mso:Document_x0020_Keywords>
<mso:HtmlDesignPreviewUrl msdt:dt="string"></mso:HtmlDesignPreviewUrl>
<mso:e5d92da0edd245adb95230b7aa959123 msdt:dt="string"></mso:e5d92da0edd245adb95230b7aa959123>
<mso:i2c47d1133a34593844095ebd5012a5e msdt:dt="string"></mso:i2c47d1133a34593844095ebd5012a5e>
<mso:Artelia_x0020_Filing_x0020_Structure msdt:dt="string"></mso:Artelia_x0020_Filing_x0020_Structure>
<mso:TaxCatchAll msdt:dt="string"></mso:TaxCatchAll>
</mso:CustomDocumentProperties>
</xml><![endif]–>
</head>
<body>
<!–
Warning: Do not try to add HTML to this section. Only the contents of the first <div>
inside the <body> tag will be used while executing Display Template code. Any HTML that
you add to this section will NOT become part of your Display Template.
–>
<script>
$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>
<!–
Use the div below to author your Display Template. Here are some things to keep in mind:
* Surround any JavaScript logic as shown below using a "pound underscore" (#_ … _#) token
inside a comment.
* Use the values assigned to your variables using an "underscore pound equals"
(_#= … =#_) token.
–>
<div id="ThreeLines">
<!–#_
var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_2lines_");
var linkURL = $getItemValue(ctx, "Link URL");
linkURL.overrideValueRenderer($urlHtmlEncodeValueObject);
var iconURL = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem);
var line1 = $getItemValue(ctx, "Line 1");
var line2 = $getItemValue(ctx, "Line 2");
var line3 = $getItemValue(ctx, "Line 3");
line1.overrideValueRenderer($contentLineText);
line2.overrideValueRenderer($contentLineText);
line3.overrideValueRenderer($contentLineText);
var containerId = encodedId + "container";
var pictureLinkId = encodedId + "pictureLink";
var pictureId = encodedId + "picture";
var dataContainerId = encodedId + "dataContainer";
var line1LinkId = encodedId + "line1Link";
var line1Id = encodedId + "line1";
var line2Id = encodedId + "line2";
var line3Id = encodedId + "line3";
_#–>
<div class="cbs-Item" id="_#= containerId =#_" data-displaytemplate="Item2Lines">
<a class="cbs-ItemLink" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_">
<img class="cbs-Thumbnail" src="_#= $urlHtmlEncodeString(iconURL) =#_" alt="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureId =#_" />
</a>
<div class="cbs-Detail" id="_#= dataContainerId =#_">
<a class="cbs-Line1Link ms-noWrap ms-displayBlock" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a>
<!–#_
if(!line2.isEmpty)
{
_#–>
<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_">_#= line2 =#_</div>
<!–#_
}
_#–>
<!–#_
if(!line3.isEmpty)
{
_#–>
<div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line3.defaultValueRenderer(line3)) =#_" id="_#= line3Id =#_">_#= line3 =#_</div>
<!–#_
}
_#–>
</div>
</div>
</div>
</body>
</html>

  • Import the file into the  Site Settings>Master Pages>Display Templates>Content Web Parts library

However the js file was not created automatically since publishing feature was turned off.

The only option was to create the html display template in a site collection with publishing feature turned on, wait until the js is created automatically and migrate the js file and HTML file into the site collection where publishing feature is turned off. If the properties below are not set automatically, manually set the highlighted properties while uploading.

Item_ThreeLinesjs

The Item Template is accessible from any search web part added to the non publishing site collection

3_lines_Content_By_Search_WP.png