Data source for Sitecore component provide data points to be used in the components, such as controller renderings or view renderings. Content author can easily edit those data points (e.g. header title, body text or CSS style) to customise components. It is one of the techniques to make Sitecore component customisable. Data source can be assigned to a component.

Another advantage of using data source is that it makes it easier to create AB test or personalised content. Out of the box, Sitecore provides the ability for a component to reference different data source items and swap according to the rules.

In fact, we will create an AB test based on this component in the next post – How to Set up Content Tests with Data Source

To use data source, the component should reference to a template with or without default values. Actual data points are stored as items. Therefore, the component needs to know the location (folder) of the items.

In this post, we are going to create a controller rendering to render form with data source items. The template for the data source has two fields, Title as single-line text and Script as multi-line text. A form gets injected by writing JavaScript in the multi-line text field.

First, we need to create a template for the data source. Then, create a controller rendering that reference data source location and data template.

Once the page is created, it will have a folder template with data source.

Below is the summary diagram of how everything puts together.

In experience editor, we can add form component to the placeholder, col-wide-1. Make sure that the placeholder includes FrontEndTest as an available control.

As the component has data source, you can select an associated content once you insert the component. To insert associated content, you can click database plus icon on the component.

Form will be rendered.

Let’s check out the code.

FrontEndTest.cshtml

This is the razor view.

FrontEndTest.cs

We need a model to pass data to the view.

FrontEndTestRepository.cs

Controller gets the data source ID from the current rendering context. Repository access database to retrieve the value based on a data source id.

FrontEndTestController.cs

This should be fairly straight-forward. RenderingContext.Current.Rendering.DataSource will return the data source Id in string. It will be cast as ID object in the repository to call GetItem().

Scripts.js

Finally, this is the script in the multinet text field which injects form into the page.

Next steps
Let’s use this component to create an AB test. Creating a content test in Sitecore is easy when the component is set up correctly. Check this out: How to Set up Content Tests with Data Source.
Before creating the test, we should create the custom goal can be triggerd by AJAX call – check out this post for custom goal creation: : How to Set up Content Tests with Data Source.