Sitecore Experience Accelerator has been released not long ago. I guess that It is still quite new to most of Sitecore developers. Recently I was asked to implement SXA for our client. Obviously, there are many online documents about what SXA is and how SXA can be used for creating a website. However, It rarely has documents for developers who want to implement SXA with more advanced features. Therefore, I decided to share my experience with SXA.
In this post, I’m about to explain how to create custom components with SXA. If you don’t know about what SXA is, I would suggest to read the below listed articles before going further.
- Introduction of SXA - http://www.sitecore.net/en/products/sitecore-experience-platform/wcm/experience-accelerators
- Getting started with SXA - https://doc.sitecore.net/sitecore_experience_accelerator/getting_started_with_sxa
As you may already know, SXA has been implement with Helix principle. Helix principle, however, is out of scope in this post. If you want to get yourself familiar with Sitecore Helix, there are many resources available online.
Now, let’s start to create your own SXA component step by step together.
What we want to achieve here?
To create custom SXA component and register on the Tool bar so as to allow user to drag and drop into a page.
Getting started to create custom SXA component
Step 1 – Install Sitecore and SXA
I’m using SXA 1.3, it requires Sitecore 8.2 rev.170407. you can download from here. SXA heavily relies on Sitecore PowerShell Extensions. Please make sure you has installed PowerShell Extensions 4.5 before start.
Step 2 – Setup Helix solution
Setup Sitecore Solution with Helix principle. Sitecore also provided a sample Helix solution called Habitat on Github. Habitat is a good start, if you want to learn how to build website with Helix principle.
Step 3 – Create a new feature
There is no much difference for creating a SXA component. Almost the same way as you create standard component in Stiecore solution.
First, you will need to create a controller. The only difference here is that the controller need to inherit from SXA StandardController under Sitecore.XA.Foundation.Mvc.Controllers namespace as shown in below:
Then, create rendering model, called ImageRenderingModel, by inheriting from SXA RenderingModelBase under Sitecore.XA.Foundation.Mvc.Models namespace as shown in below:
After that, next is to create a repository for retrieving data from datasource. I created a model repository called ImageRepository by inheriting from ModelRepository under Sitecore.XA.Foundation.Mvc.Repositories.Base namespace as shown in below:
Finally, I’m going to create a rendering view as shown in below:
Step 4 – Register Image Repository in IoC
As you can see in the screenshot below, the MediaImge controller constructor has a IImageRepository parameter. In order to inject IImageRepository into the controller, it needs to be registered in IoC. SXA has implemented its own IocProcessor, which allows us to easily register custom repositories into the SXA IoC ServiceCollection via pipeline.
Here is the code for leveraging IocProcessor to register the ImageRepository.
Next, I will add the service I just created into pipeline as below:
Step 5 – Create rendering controller in Sitecore
I assumed you are Sitecore expert already, and i’m not going to explain how to create a rendering controller in Sitecore.
Step 6 – Add new component into SXA tool bar.
Finally, we are here. Select presentation –> Available Renderings –> Media and select the rendering controller we just created above.
Congratulation, now you successfully created your first SXA component.
Hope you found this article is useful. Follow my blog, if you like it, or email me if you have any questions about SXA.