XM Cloud : Not able to map templates as available data sources in Component builder(FEaaS)?

We recently migrated from an Azure Hosted 10.3 Sitecore SXA Headless Solution to XM Cloud.

We faced 3 major issues while setting up component builder for our web authors:

1. XM Cloud templates were not available at FEaaS components for mapping to display dynamic data.
2. When we fixed the above issue, we noticed all fields from a template were not available at FEaaS Components for mapping.
3. When we try to drop an FEaaS component onto a page in page builder, we get an error - The component cannot be dropped into this placeholder

XM Cloud Components builder is a no-code tool that empowers anyone, regardless of their technical skill (like Marketers/Content Authors), to create website components. These Front-End as a Service (FEaaS) components are built visually within the XM Cloud interface, making site management more accessible to the whole team.

You can either create static content in these components or utilize your templates to create data sources and use those to read data dynamically in components.

Problem 1 - XM Cloud templates were not available at FEaaS components for mapping

Step 1:

As per the official Sitecore Document Go to Setting node of your site(You Tenant/Your Site/Settings) > Go to FEaaS component data source templates in Site configuration section and select your template.

Step 2:

But oddly enough, FEaaS fields were not available in our Settings item.

As stated earlier, we migrated our site from an Azure hosted 10.3 Sitecore SXA Headless solution to XMC. We didn't create a new Tenant or site in XM cloud, we brought it to XMC instance from our previous headless implementation through Sitecore Package. Sitecore 10.3 doesn't have a field for FEaaS in Setting template(/sitecore/templates/Project/[YourProject]/JSS Settings).

To fix this i inherited below mentioned templates in Settings item template(/sitecore/templates/Project/[YourProject]/JSS Settings):

1. IFEaaSComponents data source templates --> /sitecore/templates/Foundation/Experience Accelerator/FEaaS/IFEaaSComponents data source templates
2. IFEaaSComponents editor script URL --> /sitecore/templates/Foundation/Experience Accelerator/FEaaS/IFEaaSComponents editor script URL

After this, the template was available to be mapped.

You can refer this Official Document to learn more about how to map data.

Problem 2 : Not all fields in the template were available to be mapped:

Our template had some of its own fields and rest of the fields were getting inherited from other templates. 

Let's say, you have a template A << Which inherit from Template B << and Template B inherits fields from Template C -->  Currently, only one level of inherited fields are supported. Therefore, if you are mapping Template A to be a data source, only fields from Template A and B would be available to be mapped at the component.

Hence, you should either create all the fields in the Template A or only have one level of inheritance while working with XM cloud components(FEaaS).

We have raised a Sitecore support ticket for this and they acknowledged it as a bug and currently working to fix it under reference number SITES-2799. 

Moving on to the next problem :)

Problem 3: When we try to drop an FEaaS component onto a page in page builder, we get an error - The component cannot be dropped into this placeholder

Since we migrated from Azure Hosted 10.3 SXA headless implementation, we hade to follow few more steps to enable FEaaS components in page builder:

Add FEaaS Wrapper rendering in available renderings and when you are at it add BYOC wrapper as well.

I added it our shared Global site, so that it is available at all sites. You can add it as per your requirement.

These renderings are available at below location: /sitecore/layout/Renderings/Foundation/JSS Experience Accelerator/FEaaS

Optional : You can add these renderings in your placeholders as well, if you want to add placeholder restrictions.

You are all set now to use XM Cloud Components (FEaaS) with dynamic data.

I'll be posting more about XM Cloud.

Stay tuned and Keep Learning :)

ArreyNitesh

Email - arreynitesh@gmail.com