Taxonomy field to filter related items
I have been working on a form that includes a number of taxonomy fields and a related item control.
The related item control is connected to a wiki page library that has an additional taxonomy field.
The intention is to have a 'category field' on the form which when edited, filters the related items that have that same 'category tag' to show a select set of relevent wiki page links.
With some help from Dmitry I managed to retrieve the values from the taxonomy field and could use window.location.hash to apply the filter to the related items control.
The problem I ran into was that with internet explorer, I could not return the focus properly to the taxonomy field. To work around this I came up with a solution that involves not calling window.location.hash until we know that the taxonomy field has a valid term.
I thought I would share it here in case it is useful for anyone else...
window.CategorySetHash = function (force) {
// Get container to use for taxonomy control object
var container = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy').get(0);
// Get editable div that is part of taxonomy control
var editable = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy-writeableregion').get(0);
// Set up a variable to hold the active document element
var currentID = editable.id;
// If we can get an active document element then use it for current ID
if ($(document.activeElement).get(0)){currentID = $(document.activeElement).get(0).id;}
// Check if the active element is the field we want or force = true (which should mean page is loading)
if (currentID == editable.id || force == true){
// Create a taxonomy control object from our container element
var taxCtlObj = new Microsoft.SharePoint.Taxonomy.ControlObject(container);
var termValue = taxCtlObj.getRawText();
var n = termValue.indexOf('|');
var termGuid = termValue.substring(n + 1);
var termName = termValue.substring(0, n);
// console.log("termname= " + termName + " termguid= " + termGuid);
if (termName == "(None)") {
termName = "";
}
// Checking if we have a valid GUID which means the term has been resolved
if ((termGuid !== "00000000-0000-0000-0000-000000000000" && termGuid !== "") || force == true){
termName = encodeURIComponent(escape(termName)).replace(/\-/g, "%252D");
// Set the URL’s hash value to filter our related items control
window.location.hash = "InplviewHash" + $(".related-wiki [webpartid]").attr("webpartid") + '=-FilterField=KGITIssueCategory-FilterValue=' + termName;
// Try to return focus to our field. Mileage may vary. Works in Chrome for me but not in IE.
$(fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy-writeableregion').get(0)).focus();
}
}
}
CategorySetHash(true);
// Attach an on-change handler that will call the filtering function wherever the value of the field changes
var container = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy').get(0);
container.JavascriptOnValidation = "CategorySetHash()";
The related item control is connected to a wiki page library that has an additional taxonomy field.
The intention is to have a 'category field' on the form which when edited, filters the related items that have that same 'category tag' to show a select set of relevent wiki page links.
With some help from Dmitry I managed to retrieve the values from the taxonomy field and could use window.location.hash to apply the filter to the related items control.
The problem I ran into was that with internet explorer, I could not return the focus properly to the taxonomy field. To work around this I came up with a solution that involves not calling window.location.hash until we know that the taxonomy field has a valid term.
I thought I would share it here in case it is useful for anyone else...
window.CategorySetHash = function (force) {
// Get container to use for taxonomy control object
var container = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy').get(0);
// Get editable div that is part of taxonomy control
var editable = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy-writeableregion').get(0);
// Set up a variable to hold the active document element
var currentID = editable.id;
// If we can get an active document element then use it for current ID
if ($(document.activeElement).get(0)){currentID = $(document.activeElement).get(0).id;}
// Check if the active element is the field we want or force = true (which should mean page is loading)
if (currentID == editable.id || force == true){
// Create a taxonomy control object from our container element
var taxCtlObj = new Microsoft.SharePoint.Taxonomy.ControlObject(container);
var termValue = taxCtlObj.getRawText();
var n = termValue.indexOf('|');
var termGuid = termValue.substring(n + 1);
var termName = termValue.substring(0, n);
// console.log("termname= " + termName + " termguid= " + termGuid);
if (termName == "(None)") {
termName = "";
}
// Checking if we have a valid GUID which means the term has been resolved
if ((termGuid !== "00000000-0000-0000-0000-000000000000" && termGuid !== "") || force == true){
termName = encodeURIComponent(escape(termName)).replace(/\-/g, "%252D");
// Set the URL’s hash value to filter our related items control
window.location.hash = "InplviewHash" + $(".related-wiki [webpartid]").attr("webpartid") + '=-FilterField=KGITIssueCategory-FilterValue=' + termName;
// Try to return focus to our field. Mileage may vary. Works in Chrome for me but not in IE.
$(fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy-writeableregion').get(0)).focus();
}
}
}
CategorySetHash(true);
// Attach an on-change handler that will call the filtering function wherever the value of the field changes
var container = fd.field('KGITIssueCategory').control()._el().find('.ms-taxonomy').get(0);
container.JavascriptOnValidation = "CategorySetHash()";
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests