SXA + JSS: How to setup Json Rendering to have a local data source

Recently I’m preparing a POC in Sitecore having SXA based website powered by JSS. I used the Sitecore first approach to develop JSS based application.

I started my work by creating first the SXA tenant and SXA site under the tenant. I created all the necessary templates following Helix architecture to make sure my work meets the Helix requirements.

Then I started developing different components in the JSS app. As I’ve used the Sitecore first approach, I avoided using the ‘jss deploy app’ or ‘jss deploy component’ commands to make sure I do not get into any issues.

For any new component I created in the JSS app, I create the associated rendering manually and map it with the JSS component. I know this is a little bit long process but makes me sure that no unwanted components are imported or no custom settings applied on exiting components get overwritten when JSS commands used.

The work is going well with the data source items created under the ‘Data’ folder which is created by the SXA site creation process. The first demo with the client went well and the client is happy with what is done so far. However, during the demo, he requested to have local data source item to be used which are created below the page when the component is added to the page.

This is the very first project for me where I’ve used SXA + JSS together and I need to dig inside now how I can achieve this.

At first instance, I tried setting the Datasource Location with different queries based on the existing SXA site components where we can find and refer to how to set up the rendering with Datasource Location to use site-specific and shared site component. But that did not serve my purpose.

I started looking for the SXA documentation where I should get how the rendering is set up to have local data source item created when the component is added to the page. After carefully going through the documentation I found one property for the rendering which draw my attention to try it.

So, when you set the ‘IsAutoDatasourceRendering’ property for the Json Rendering component, the auto-generated data source feature in SXA creates the data source item just below the page where this component is inserted.

Taking you through an example, I need to use local data source items when I add a Teaser component to the page and for that purpose, I set the ‘IsAutoDatasourceRendering’ property value to true.

After setting this property, when I added the component to the page, it automatically created the teaser item based on the Datasource Template property set on the rendering.

Yes, my JSS components are not yet compatible with Experience Editor editing, but my next step is to the components editable in Experience Editor.

Another thing is, this auto-generated data source feature is not as powerful in SXA + JSS as a native SXA site, but it works well to serve my purpose.

I hope this will help others if they are using Sitecore first JSS + SXA.