How to make a rendering refresh after an Experience Editor Button has been used

This post I decided to write after I found this unanswered question on stackoverflow.

Input data:
We have an item which contains treelist field ‘Tags’.
We put rendering called ‘Listing of Tags’ on this item (1).
We add Experience Editor Button (2) to the ‘Listing of Tags’ rendering to let the editor edits ‘Tags’ field. So after editor clicks on (2) button modal window (3) appears, editor selects necessary tags and click the ok button (4).

Screenshot_1

The question is how to immediately reflect the set tags when the editor presses the ok button (4), before having to save the whole item.

Let’s start from some Sitecore ‘under the hood’ things. So, one of such thing – during editing content via Experience Editor Sitecore stores all unsaved changes within div with id scFieldValues.

scFieldValues

Inside that div there’re hidden inputs and each of them has id attribute (which btw the same with name one) which looks like that: fld_110D559FDEA542EA9C1C8A5DF7E70EF9_34EE4D2CF02849018CFC96B6D521B646_en_1_f450cdfa-2bf3-4bcc-a4d9-a6e746224166_999
Where:
110D559FDEA542EA9C1C8A5DF7E70EF9id of item which is owner of edited field.
34EE4D2CF02849018CFC96B6D521B646id of field which is edited. ‘Tags’ treelist field in our case.
Also, hidden input has value attribute. It is interesting point ’cause here Sitecore stores new raw value of the field. In our case after we selected ‘Tag 1’ and ‘Tag 2’ e.g. – ids of these items fall into the value attribute.

The trick is to detect changes in value attribute of appropriate hidden input and update html of ‘Listing of Tags’ component.

So that’s code: gist.github.com

In action it looks like:

demo

Note:
– I did not test it when there are more than one ‘Listing of Tags’ rendering on the page.
– After adding ‘Listing of Tags’ rendering on the page, it should be saved. After that, it works in the proper way.

Useful link: The ItemService

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s