Sitecore 10 - SXA - Composite component - Show the data source field value

 Recently, I created and extend a few composite components like Accordion, tab etc, in one of the requirement, I wanted to use the data source field name for the data (analytics attribute) and for the deep linking, Just wanted to share as it's a simple and easy way to get the value.

CustomAccordionModel.AccordionName = this?.Rendering?.DataSourceItem?[Templates.CustomAccordion.Fields.AccordionName];

Usually, we use rendering parameters to set the additional settings and use it in the repository like below.

Rendering.Parameters.ParseInt(Constants.RenderingParameters.CustomAccordion.FiendName); like we can add field and setting as a rendering parameters or composite child item.

 @foreach (var composite in Model.CompositeItems)

                    {

var accordionItemName = composite.Value[Templates.CustomAccordionItem.Fields.AccordionItemName] ?? "";

}

Conclusion - While working on SXA component it's important to understand three options and places to get the item value.

1.  Component level settings (Rendering.Parameters) - will be used in experience editor, in that case, we need to add the field in the data source item and those fields will be accessible with the below code

Rendering.Parameters.ParseInt(Constants.RenderingParameters.CustomAccordion.FiendName);

2.  Composite Child Item additional fields -  Mostly we use this value in the view to show the data or add some conditions etc.

 @foreach (var composite in Model.CompositeItems)

                    {

var accordionItemName = composite.Value[Templates.CustomAccordionItem.Fields.AccordionItemName] ?? "";

}

3. Composite Item (Main data source) - Some time you would need that value to set the data attribute for the analytics or accessibility point of view.

CustomAccordionModel.AccordionName = this?.Rendering?.DataSourceItem?[Templates.CustomAccordion.Fields.AccordionName];

Ref - https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html