Instantly share code, notes, and snippets.
Created
July 6, 2017 09:11
-
Save AlexeyShevchenko/8ab1950e4ec57e095a866827602e6862 to your computer and use it in GitHub Desktop.
How to make a rendering refresh after an Experience Editor Button has been used
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@using Sitecore.Data.Fields | |
@using Sitecore.Data | |
@{ | |
var textOfTagFieldName = "Text of Tag"; | |
var tagsFieldRawId = "34EE4D2C-F028-4901-8CFC-96B6D521B646"; | |
var tagsFieldId = new ID(tagsFieldRawId); | |
var tagsField = new MultilistField(Sitecore.Context.Item.Fields[tagsFieldId]); | |
var tags = tagsField.TargetIDs.Select(id => Sitecore.Context.Database.GetItem(id)); | |
var regex = "/" + tagsFieldRawId.Replace("-", string.Empty) + "/"; | |
} | |
<div id="tags-source-container"> | |
<p>Tags:</p> | |
<div id="tags"> | |
@foreach (var tag in tags) | |
{ | |
@tag[textOfTagFieldName] | |
<br /> | |
} | |
</div> | |
</div> | |
<script> | |
var intervId; | |
var currentTagsIds; | |
var getJSON = function (url) { | |
return new Promise(function (resolve, reject) { | |
var xhr = new XMLHttpRequest(); | |
xhr.open('get', url, true); | |
xhr.responseType = 'json'; | |
xhr.onload = function () { | |
var status = xhr.status; | |
if (status == 200) { | |
resolve(xhr.response); | |
} else { | |
reject(status); | |
} | |
}; | |
xhr.send(); | |
}); | |
}; | |
window.onload = function () { | |
initInterval(); | |
}; | |
function initInterval() { | |
intervId = setInterval(updateTagsAsNeeded, 1000); | |
} | |
function updateTagsAsNeeded() { | |
var scFieldValuesElement = getScFieldValuesElement() | |
if (scFieldValuesElement == null) { | |
return; | |
} | |
var hiddenInputAssociatedWithTagsField = getHiddenInputAssociatedWithTagsField(scFieldValuesElement); | |
if (hiddenInputAssociatedWithTagsField == null) { | |
return; | |
} | |
var tagsIds = getTagsIds(hiddenInputAssociatedWithTagsField); | |
if (tagsIds == currentTagsIds) { | |
return; | |
} | |
currentTagsIds = tagsIds; | |
updateTags(currentTagsIds); | |
} | |
function getScFieldValuesElement() { | |
return document.getElementById('scFieldValues'); | |
} | |
// go through hidden inputs within <div id="scFieldValues"> | |
// using regex search for input which id contains 'Tags' field's id | |
// value attribute of necessary input contains ids of just selected tags | |
function getHiddenInputAssociatedWithTagsField(scFieldValuesElement) { | |
var regex = @regex; | |
for (i = 0; i < scFieldValuesElement.children.length; i++) { | |
var hiddenInput = scFieldValuesElement.children[i]; | |
if (regex.test(hiddenInput.id)) { | |
return hiddenInput; | |
} | |
} | |
return null; | |
} | |
function getTagsIds(hiddenInputAssociatedWithTagsField) { | |
return hiddenInputAssociatedWithTagsField.getAttribute("value"); | |
} | |
function updateTags(tagsIds) { | |
var tags = document.getElementById("tags"); | |
if (tagsIds.length == 0) { | |
tags.innerHTML = ''; | |
return; | |
} | |
var ids = tagsIds.split('|'); | |
var output = ''; | |
var arrayOfPromises = []; | |
for (i = 0; i < ids.length; i++) { | |
var tagId = ids[i]; | |
// use The ItemService API | |
var url = "/sitecore/api/ssc/item/" + tagId + "?fields=" + "@textOfTagFieldName"; | |
arrayOfPromises.push(getJSON(url)); | |
} | |
Promise.all(arrayOfPromises) | |
.then(function (res) { | |
res.forEach(function (item, index, array) { | |
var textOfTag = item["@textOfTagFieldName"]; | |
output += (textOfTag + '<br />'); | |
tags.innerHTML = output; | |
}); | |
}) | |
.catch(function (err) { | |
console.error(err); | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment