Wednesday, 3 January 2018

Create custom Sitecore SXA renderings and components

The blog post example has been created on following versions:
  •          Using Sitecore 8.2 (rev 170407) update 3
  •         Sitecore Experience Accelerator 1.3 rev. 170519 for 8.2.zip
     Below we will see the steps to create SXA compatible custom rendering.
     
       SXA compatibility should have the following features:
  •          Available in toolbox
  •          Would support drag and drop
  •          Will help content authors with help text and areas where they can insert
  •          Can have multiple variants
  •          Will support SXA OOB styling

Here, I am taking an example of a custom carousel where we have the following requirements:
Carousel will have following global settings:
  •          Can have a background colour

Each carousel slide can have:
  •          Title
  •          Description
  •          Image
  •           Link


a  







Following steps are required to create the above carousel:
Step 1: Creating Sitecore templates for required custom fields:


  •          As SXA is made on Helix principles I have chosen “Media” as a feature to create carousel in.
  •          Media folder will have 2 sub folder : Datasource and Rendering Parameters
  •          Datasource will have Carousel folder where all carousels will be created; Carousel template having global carousel properties like background colour and Carousel slide with each slide properties
  •          Rendering Parameters folder will have Carousel rendering parameters and can inherit from OOB templates like: 











    Step 2: Then we create a custom carousel controller rendering:











And we need to add this rendering to the list of Available renderings to make it appear in the SXA toolbox:










Now jumping to the code:
Step 3: We need to add a controller “CustomCurouselController” to feature Media:














  • As we see in above screenshot the controller needs to be inherited from “StandardContoller”, which can be found under namespace “Sitecore.XA.Foundation.Mvc.Controllers”
  •          You may have note that we did not add any “ActionResult” to the controller class and nor did we have it in Sitecore rendering. This is because the Standard controller will take care of your routing from controller to view with default action result “Index”. We can also add and override “Index” Actionresult here in the controller if required.

Step 4: We need a carousel model to create and fetch custom carousel properties:




















   Our custom model should inherit from “VariantRenderingModel” which will hold some base SXA properties like: Datasource item, css class, heading tag, IsEdit etc.



Step 5:  The repository will be as follows:















  •          Should inherit from “VariantsRepository”, which will make our custom carousel rendering extendible through variants.
  •          “FillBaseProperties” is an OOB SXA method found under namespace “Sitecore.XA.Foundation.RenderingVariants.Repositories” which will fill the base SXA properties in our model.

Step 6: Adding a View to the Media project for custom carousel:


















  •          Note: Every SXA component should be wrapped inside a div “component” and “component-content”
  •          Also, “Model.Attribute” will be used to add styles from the rendering parameters. (Refer any existing SXA View)

That should be it.

We can see the new custom carousel in the toolbox and drag and drop it:
-        Add a new partial view to quickly test it:




















We can see the rendering in the toolbox:



















The above rendering can be dragged and dropped, but will have an issue to create the datsource using experience editor mode.
Below is the blog explaining the issue and its solution in detail:

5 comments:

  1. var item = ItemExtensions.DatasourceItem();
    This line is giving error. "ItemExtensions" does not contain a definition for DatasourceItem. And when you are creating Controller rendering you have given CustomCarouselController in controller section of Data field.

    ReplyDelete
  2. var item = ItemExtensions.DatasourceItem();
    This line is giving error. "ItemExtensions" does not contain a definition for DatasourceItem. And when you are creating Controller rendering you have given CustomCarouselController in controller section of Data field.

    ReplyDelete
    Replies
    1. I think it just helper class(extension class write by author in project.) We can use Sitecore.Context.Item instead of it

      Delete
    2. Hi,
      It would be great if you provide the code without Itemextions for repository.

      Thanks,
      Seethalakshmi Ponnusamy

      Delete
  3. You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part. This is great content for your readers. relojes militares fuerzas especiales

    ReplyDelete