Metadata API Search By Category

Content published by Percussion is decorated with properties and metadata that is indexed at Publish time.  This date can then be queried by JavaScript widgets on the Published website to achieve different behaviors.  Many of Percussion's out of the box Widgets use the DTS API for this purpose.  

This widget is an example of providing a Category based guided search widget on your website.  For the Widget to work, you must have defined categories and applied those categories to your pages.  As coded the example will only work the published website.  The example creates a category search box that is based on a dynamic list of categories returned from the DTS service.  The search box will auto complete to match available Categories and will return a list of pages that result.  This technique creates a customizable Category search box that could be further refined.  

To create the Widget follow the following steps:

1. Create a new Widget Builder Widget. 
2. Add a single text field to the Widget called searchTitle.
3. Copy the HTML and JavaScript block below into the Display Template of your Custom Widget. 
4. Update the URL's in the script to point at your DTS service.   For example, replace https://help.percussion.com/ with your website (this assumes you have the DTS deployed behind a proxy). 
5. Add the Widget to the Layout of a Page and edit the Content tab to give the list a title.  
6. Publish the page and test out the new search box.  

<!-- HTML -->

<h2>
Category Search Example
</h2>
<div id="search">
<datalist id="categories"></datalist>

<form id="search">
<label for="category_filter">Categories Filter:</label>
<input type="text" id="category_filter" list="categories"/><br/>
</form>
</div>
<div id="search-results">
<h3>$searchTitle</h3>
<ul id="searchlist">
</ul>
</div>

<!-- Java Script -->
<script>

function pagesByCategory(e){

document.getElementById("searchlist").innerHTML = "";

var request = new XMLHttpRequest();
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {

pageList = JSON.parse(request.responseText);
pageList.results.forEach(function (page){

var node = document.createElement("li"); // Create a <li> node
var a = document.createElement("a");
a.setAttribute("href",page.folder + page.name);
a.innerText = page.linktext;
node.appendChild(a); // Append the text to <li>
document.getElementById("searchlist").appendChild(node);

});

}
}
};

// Set up and make the request.
request.open('POST', 'https://help.percussion.com/perc-metadata-services/metadata/get', true);

request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var catQuery = { "criteria":["type = 'page'","perc:category LIKE '%/" + document.getElementById("category_filter").value + "/%'"],"orderBy":"dcterms:source desc","startIndex":0 }
request.send(JSON.stringify(catQuery));

}

var cat_list = document.getElementById('categories');
var tag_list = document.getElementById('tags');
var cat_input = document.getElementById('category_filter');
cat_input.addEventListener("change", pagesByCategory);
var tag_input = document.getElementById('tag_filter');
var free_input = document.getElementById('freetext_filter');

function walkTree (data) {
var result = [];
var temp = [];

if(data.children.length >0){
for(i = 0;i<data.children.length;i++){
result.push(data.children[i].category);
temp = walkTree(data.children[i]);
if(temp && temp.length > 0)
result = result.concat(temp);
}
}

return result;
}

// Create a new XMLHttpRequest.
var request = new XMLHttpRequest();

// Handle state changes for the request.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
// Parse the JSON
var jsonOptions = JSON.parse(request.responseText)[0];

var results = walkTree(jsonOptions);

// Loop over the JSON array.
results.forEach(function(item) {
// Create a new <option> element.
var option = document.createElement('option');
// Set the value using the item in the JSON array.
option.value = item;
// Add the <option> element to the <datalist>.
cat_list.appendChild(option);
});

// Update the placeholder text.
cat_input.placeholder = "e.g. News";
} else {
cat_input.placeholder = "Couldn't load categories :(";
}
}
};

// Update the placeholder text.
cat_input.placeholder = "Loading Categories...";

// Set up and make the request.
request.open('POST', 'https://help.percussion.com/perc-metadata-services/metadata/categories/get', true);

request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var catQuery = { "criteria":["type = 'page'"],"orderBy":"dcterms:source desc","startIndex":0 }
request.send(JSON.stringify(catQuery));
</script>