Manage Child Item in Experience Editor

As for now (in version 9.3) Sitecore JSS does not support Edit Frames, which were traditionally used to manage metadata fields in Experience Editor.  Instead, Sitecore offers small enhancement in Experience Editor, a button where content authors can edit all non standard fields of data source item for selected component:

But what if we have more complex component, which displays child items, for example slider, or hero carousel. Fortunately Sitecore gives you another button, which you can assign to your rendering item:

If you setup correctly Datasource Location, Datasource Template and Insert Options for child items, this button allows content authors to add child items for your component’s data source (like e.g. adding new slides).

Additionally Sitecore gives you another button allowing to sort child items, which can be enhanced to allow to delete the items, like described in this blog. In following article we will extend this idea to allow all operations: sorting, deleting and editing child items from Experience Editor.

Complete source code of this module is available in Github.

Implementation

Command

Let’s start with inserting new command item in core database: /sitecore/content/Applications/WebEdit/Custom Experience Buttons/Manage Child Items inheriting from WebEdit Button template:

We can assign this command to our rendering item in “Experience Editor Buttons” field:

Now we need to implement the command:

And command options class, which tells Sitecore which pop-up it shall open:

You may notice that we inherit from Sitecore OOTB sort items command and options. We’ll do it all over the place, cause or pop-up just extend standard sort content window.

Next we link our implementation with command in Sitecore item:

Form

To implement the form we need to re-use some old-school SheerUI and SPEAK code:

Next we need to create UI for our form. Most of the code is a copy of Sitecore’s sort form and this blog. Under: /sitecore/shell/Applications/Dialogs/ we create new folder “Manage” with following files:

1. Manage.xml, full source code: https://github.com/whuu/Sc.ManageChildItems/blob/master/src/Feature/ManageChildItems/website/sitecore/shell/Applications/Dialogs/Manage/Manage.xml

Comparing to standard sort form we change code besides to our ManageForm class and add tow buttons:

2. Manage.js, full source code: https://github.com/whuu/Sc.ManageChildItems/blob/master/src/Feature/ManageChildItems/website/sitecore/shell/Applications/Dialogs/Manage/Manage.js where we handle new buttons:

3. Manage.css, full source code: https://github.com/whuu/Sc.ManageChildItems/blob/master/src/Feature/ManageChildItems/website/sitecore/shell/Applications/Dialogs/Manage/Manage.css where we just add additional style for removed item:

Results

Finally we can open Experience Editor, click our “Manage Child Items” button, select child item, sort, remove or edit fields:

  • Jon Morgan

    This was exactly what I was looking for and has been running fine for quite a while. However, recently I have got the following error when I click the ‘Edit’ button

    Calling TFSitecore.Foundation.Configuration.ManageChildItems.ManageForm.OnEdit method through reflection is not allowed.

    Any ideas?