You have to set the following configuration to true to get the detailed information on rendering parameters set.
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"> <sitecore> <settings> <setting name="LayoutService.DetailedRenderingParams" value="false"> <patch:attribute name="value">true</patch:attribute> </setting> </settings> </sitecore> </configuration>
By default this setting comes as false.If you are binding your component with the layout response but feel that if a custom property can come in the layout response and you could bind that in your component.
But as you know you can not insert the custom property in the layout response without heavy customisation but we have a way to do so.
We can achieve this on component level using useComponentProps and getStaticProps: GetStaticComponentProps methods in XM cloud.
Lets understand this quickly.
You have a component like follows:
In the component BlogIndexVariationOne we are passing the BlogIndexVariationOneProps. In this fields will be mapped from the layout response but rendering is worth to pay attention here that we will discuss the usage of it further in this blog.
Now assume that under this component you are returning the HTML with the data received in the fields object and additionaly you have a requirement to show the current page URL in any of the <div> tag also.
So as you know the current url will not work from window.location.href or writing the same in the useEffect() or even useLocation() won't work until you don't wrap your component in the <Router> tag.
So how can we get the current url then? Here we will use the getStaticProps: GetStaticComponentProps method as shown below:
export const getStaticProps: GetStaticComponentProps = async (
Here we are returning the requestPath provided by sitecore's context and it is returning the string type.
Now how will we use this in our component? Here comes the role of rendering that we passed in the component in the line const path = useComponentProps<string>(rendering?.uid);. So rendering?.uid in the useComponentProps tells the component that something is being passed from getStaticProps: GetStaticComponentProps as string return type so use that.
And voilla, now you can use the request path in your code.
So in place of context?.params?.requestPath you can use your any API fetch if you want it to be fetched using this although the best practice for getting the API data is to use in the useEffect() but this is also one more way to use.
Thanks!
To extend it further with one more example.
In Sitecore JSS / XM Cloud projects (especially with Next.js),
each component can export a getStaticProps method that defines how to fetch its data during build time or static regeneration.
The framework (Sitecore + Next.js) runs this function:
once at build time for static generation (next build), or
on demand when the page is rebuilt (ISR).
The result of this function gets attached to the component rendering JSON as componentProps — which is what useComponentProps(uid) later reads.
Suppose you have method as follows that get the data using graphql query:
export const getStaticProps: GetStaticComponentProps = async ( _rendering: ComponentRendering, layoutData: LayoutServiceData, context ) => { // Create a GraphQL client to talk to Sitecore XM Cloud const graphQLClient = new GraphQLRequestClient(config.graphQLEndpoint, { apiKey: config.sitecoreApiKey, }); // Get the current page path (used to construct URLs) const basePath = (layoutData?.sitecore?.context?.itemPath ?? '').replace(/\/,-w-,/, ''); /* page query param handling */ const page = (() => { const path = context?.params?.requestPath; if (path === undefined) return ''; if (!Array.isArray(path)) return ''; const pageNumber = parseInt(path[path.length - 1]); if (isNaN(pageNumber)) return ''; return pageNumber.toString(); })(); /* fetch blog articles */ let updatedResult = []; let query = CHILD_BLOGS_GQL; // Replace placeholders in the GraphQL query with actual IDs query = query.replaceAll('__ROOT_ID__', Constants?.Ids?.BlogItemParent); query = query.replaceAll('__TEMPLATE_ID__', Constants?.TemplateIds?.BlogDetailPage); // Execute the GraphQL query and return all articles updatedResult = await getAllItems<BlogTemplat>(graphQLClient, query); // Return the data that will be serialized into componentProps return { page: page, result: updatedResult, basePath: basePath }; };
and the top somewhere when you would have started your component, there will be code like
and,
then do you logic operation based on data variable.
We had one requirement to change the component's display on almost 1400 pages and doing so we had to follow following things:
1. Update the rendering parameters on the item
$parameters = [ordered]@{"DisplayContentInCard" = "1"; "ApplyBackground" = "1"; "AlignImageRight" = "1" }
$rendering | Set-RenderingParameter -Parameter $parameters | Set-Rendering -Item $pageItem -FinalLayout
2. Update the datasource item's field data.
3. Update the main page with one droplink field to be set with the specific item.
4. Export the info in the excel
Now the complete script is as follows:
Thanks!
Here are the troubleshooting steps below that helped personalization to work. We checked the events analytics in the page builder but it was...
