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
- 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:
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: