Sitecore 8.1 - 'Add' button to custom field type and Experience Editor

Question

Question that covers both the Experience (Page) Editor and the Content Editor.

I have a Timeline spotlight that users can add to a page - it has a list of decades at the top and underneath each decade there is a list of Years (with their text and images).

I have created a number of controls that link to various data sources but I'm finding the user experience lacking.

If I go to the Experience Editor:

Select Timeline Placeholder and Add Item
Popup comes up to select/create the data source

Then the only way to add a decade is by going to the Decade datasource, creating a new item there and then going back to the Timeline data source and adding this item their.

What I'm thinking of is:

Content Editor - Against the Timeline data item their is a multi-list field of 'Decades' - is there any easy way to add a 'Create' button next to it that would replicate the same event as if you went to the Decades data source and clicked insert item
Experience Editor - Remove the use of the Placeholder and add a similar 'Create' button that will replicate the insert item event - once item created and properties set refresh the control to display according.

Anyone came across something similar before? Any better solutions?

Thanks, Dan

Jihyun Jihyun · Accepted Answer · 2015-12-18T21:10:33

I'm actually working on the same features for our new implementation.

In Content editor, you might need to update core db.
In xEditor, you can use sitecore JS commands with ajax and back-end codes. My suggestion is that you can create a rendering component and assign the component into the named placeholder instead of remvoing it. Then, call the back-end and javascript events on the rendering item.

This could be a starting point. Javascript function:

function setDataSrc(itemID, templatePath, suffix, renderingID, dbName, deviceID, renderingUID, reload, callBack) {
    var postReq = $.post("/handlePostRequest.aspx (or .cshtml)", {
        method: 'methodName'
        , itemID: itemID
        , templatePath: templatePath
        , suffix: suffix
        , renderingID: renderingID
        , dbName: dbName
        , deviceID: deviceID
        , renderingUID: renderingUID
    });

    postReq.done(function (data) {
        if (reload != false) {
            location.reload(true);
        }
        if (typeof callBack == 'function') {
            callBack(data);
        }
    });
}

Sitecore 8.1 - 'Add' button to custom field type and Experience Editor

2 Answers