This post I decided to write after I found this unanswered question on stackoverflow.
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).
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.
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
110D559FDEA542EA9C1C8A5DF7E70EF9 – id of item which is owner of edited field.
34EE4D2CF02849018CFC96B6D521B646 – id 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:
– 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