Sunday, 13 August 2017

Creating and adding Datasource for custom Sitecore SXA rendering in experience editor

         Now that we have dragged and dropped our custom carousel in previous blog post, we can’t see an option to create datasource on the fly (i.e in experience editor mode) like we see for other SXA renderings.
    To achieve that we need to add some custom buttons(Edit frame buttons) on the experience editor component panel.

         We can achieve that by following steps:

Step 1: Creating edit frame buttons:
o   Switch to core DB in Sitecore

o   Create 2 folders for showing button to add a carousel item & other folder for adding carousel slides

o   We can add above buttons by copying from the existing buttons in the OOB carousel/any other component folder.

Note we can make editing the template fields for the carousel even easier by adding pipe separated field names in the edit item:



Step 2:  
Updating the view file:

  • Here we add a condition to check if the rendering is Editmode (Experience editor)
  • Then to avoid component being selected in experience edit mode, we create a edit frame and add a help text in span for user to select the component area.
  • Also, we add the custom buttons added in step 1 to these edit frame.
  • Note: Folder name in step 1 i.e “Custom Carousel Empty” should exactly match in view to pick up the correct edit frame buttons.
  • Then in the end we add 4 p tags just for the ease to add the title, description,  link and image to the carousel slide.

     After performing the above 2 steps we see a big difference now in the experience editor mode:


     Now, we have 2 buttons as highlighted above to add a carousel slide and edit the carousel properties    
    Clicking on plus button we get and option to insert the carousel slide, which we added on the carousel folder insert options.

     After adding the slide, we can see an easy way to create first carousel slide:


    Adding Title, Description, Link and Image:



  

We can simply add more slides by clicking the plus icon now:



  •          The above properties for each carousel slide are coming from the p tags we have added in the view in step 2.
  •          We can also click on the Edit button to find the fields we mentioned pipe separated in step 1 above:



      This concludes how to add a custom SXA rendering with all edit controls in experience editor.



No comments:

Post a Comment