Welcome! This is my personal blog about Web technologies, software development, open source and other related topics
The ideas and opinions expressed here are solely mine and don't represent those of others, either individuals or companies.The code snippets or references to software products or analogous are to be used without any warranty of any kind. If you enjoy the content, feel free to share it and re-use it as long as you provide a link to the original post.
GraphQL delivery API is used to access the published site content. Experience Edge for Experience Manager (XM) is an API-based service from Sitecore that gives you globally replicated, scalable access to your XM Cloud items, layout, and media. You can use the standard publish tools in XM Cloud , but instead of rendering content from a self-hosted Content Delivery environment, Experience Edge provides you a Sitecore-hosted GraphQL API.
To access the XM Cloud hosted published site content using Expereince Edge follow these steps-
Login to XM Cloud. Navigate to Projects ==> Environments ==>Details tab.
This should be the GraphQL Delivery token i.e. GQL token-
There are different ways to generate GQL Token. One of the way is generate from portal. Login to XM Cloud and navigate to Projects ==> Environments ==> Details tab
Click on Generate Delivery API Key (Note this key as this won’t be avilable again and needs to be re-generated again if lost)
Note this API key as this is required later whilst configuring the Vercel hosting.
Publish Site–
Publish the site to Edge before starting to configure Project in Vercel, since we are configuring GraphQL Delivery API token items in Sitecore needs to be published
Create a Project in Vercel
Login to Vercel and Create Project-
Since I have logged in using GitHub account it displays the repositories in Github the project will be based on-
Import the repository-
Configure Project
Once the project is created configure the project by selecting the Framework and repo folder FE code exists-
Choose the Nextjs Framework
Choose the sxastarter folder from the repo i.e. /src/sxastarter
Add following environment variables extracted earlier-
There are various ways you should be able to do this. I am adding 5 times more space to the existing indent-top style.
_indent.scss
// $middle-margin is defined in _margins.scss
.indent-large-top {
margin-top: calc($middle-margin * 5);
}
Apply a custom style to rendering
Select the component or container you want to apply style and choose option “Indent Large Top” in Spacing section
Now the space between the 2 component is increased and is 100px as per the requirement.
New style applied to container-
Apply style to specific renderings
As above when the style was created it was applied to all renderings.
If you want to restrict the style to be applied to only certain renderings you can do so by setting Allowed renderings field in new created Style item.
For “Indent Large Top” only SectionContainer will be able to see the new Spacing Style.
In Experience Editor you wont see the “Indent Large Top” for other renderings e.g.- for container rendering-
While for Section Container rendering the new style is available-
This is a very common scenario where a background image needs to be set to certain components. Banner’s on any page on your website is a very common place to have a background image.
This blog assumes you have setup the Foundation Head setup or have your own Nextjs project setup implemented using the Sitecore NextJS SDK.
Note: This is not specific to XM Cloud but for any Headless implementation
Foundation Head already has an example on setting the background image using params. In this blog post will explore how this works and where in Sitecore the image can be applied. Will see how this can applied using using OOTB _Background Image item.
To apply image background using rendering parameters to the container see this blog here
Applying background image using rendering field to the components
Background image can be applied to components inheriting the existing __Background Image item to the custom component template.
Create a template for your component. Here I am creating a Banner component-
Inherit _Background Image from /sitecore/templates/Foundation/Experience Accelerator/Presentation/_Background Image
_Background Image has “Background Image” and “Stretch mode” field.
Note that there is a space between the field names, although not recommended but this comes OOTB.
Create a “Banner” JSON Rendering and provide the “Parameters Template”, “Datasource Location” and “Datasource Template” as per your requirement and add this rendering to the “Available Renderings”
Create a Nextjs component in sxastarter project
Note below how the “Background Image” field is set. This is due to the same in field name. Not recommended but this is OOTB.
Add a newly created component (Banner) in Container placeholder-
Create or select associated content
Once the component is added you should see the button to Add Background Image ( ths is added when the template inherits from _Background Image template.
Select the Background Image and Save-
You should now able to see the background image to component-
This is a very common scenario where a background image needs to be set to certain components. Banner’s on any page on your website is a very common place to have a background image.
Note: This is not specific to XM Cloud but for any Headless implementation
Foundation Head already has an example on setting the background image using params. In this blog post will explore how this works and where in Sitecore the image can be applied. Will see how this can applied using Rendering Parameters and using OOTB _Background Image item.
Applying background image using rendering parameters
Background image can be applied to container. If you are using Foundation Head repo you can find this component OOTB.
Thre Container rendering is at following lcoation in Sitecore –
Note Other properties- IsRenderingsWithDynamicPlaceholders and IsRenderingsWithDynamicPlaceholders is set to true
Rendering parameter is located – /sitecore/templates/Feature/JSS Experience Accelerator/Page Structure/Rendering Parameters/Container
Rendering paramter template has the BackgroundImage field. The background image will be set based on the image selected in this field.
How the image is set in Head
Lets see background image set in nextjs (sxastarter) Container.tsx
// image string from the rendering parameters
let backgroundImage = props.params.BackgroundImage as string;
let backgroundStyle: { [key: string]: string } = {};
console.log('backgroundImage1');
console.log(backgroundImage);
if (backgroundImage) {
const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
backgroundImage = `${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()?.replace(/-/gi, '')}`;
backgroundStyle = {
backgroundImage: `url('${prefix}${backgroundImage}')`,
};
}
return (
<div className={`component container-default ${styles}`} id={id ? id : undefined}>
// style applied to <div> having background image
<div className="component-content" style={backgroundStyle}>
<div className="row">
<Placeholder name={phKey} rendering={props.rendering} />
</div>
</div>
</div>
);
};
Lets see this in working in experience editor and rendering host
In the experience editor main section add a container component.
Once the rendering is added, goto “Edit component properties” and add an background image
Now you are able to see the background image applied ot container and I have added RichText in containerto show the image in background-
Rendering Host displays the image in background-
Nested containers to apply differnt background image or component
If you add only one container the image will be applied to the main section.
To resolve this you can add a container within main container. add mutiple containers as per your requirements. To set the background image to specific container in this example contianer-2 select the parent(i.e. container) and set the image by Editing the Component properties
This should apply the different images for various other sections in the sampe page and since the Container rendering has IsRenderingsWithDynamicPlaceholders property set this should create a unique Id for each container.
Here for example container-2 and container-3 is a child of container-1
Rendering Host displays banckgroung images with there respective components-
Isusue- Here you can see there is a white patch when applied to child container and the image is applied to inner div.
To resolev this apply the image to the outer div instead in container.tsx
This blog post will guide you through the local environment setup for XM Cloud. You may refer this documentation to do this your own way. Althoug the documentation covers most of the setup, this blog post provides visual on the steps and errors with the resolution.
Once the Foundation Head from Sitecore Labs is forked s(se more details here) clone the copy to the local machine for creating a local instance required for XM Cloud development.
Pre-requisite –
You can find the pre-requisite in this documentation. Ensure your machine has this before setting the local development environment. Just noting down here-
Also make sure you are using Docker v.2, as explained here.
Access to XM Cloud – This blog post assumes you have admin access to XM Cloud where you should be able to craete/update/delete projects environments and deployment in your organisation.
I have this ready on my machine.
1. Clone the forked Foundation head repo.
I named the folder same as the repo on my local machine i.e. xmcloud-foundation-head. the same will be refered thoruhg this post.
Will see the following folder structure after cloned.
I use Visual Studio Code to make any environment related changes. You may use either Visual Studio 2022 or your choice of editor.
2. Open the .env at the root folder and you will see REPORTING_API_KEY, TELERIK_ENCRYPTION_KEY etc. empty.
3. Start the containers.
Prepare the environment
Before doing so make sure you stop the IIS and check if the port 443 (IIS Website) and 8984 (Solr service)is not used and the docker is running in Windows Containers mode. If not switch to Windows cotainers.
iisreset /stop
Get-Process -Id (Get-NetTCPConnection -LocalPort 443).OwningProcess
Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess
Stop-Service -Name "<the name of your service>"
Copy the license file to c:\license folder. If you wish to have this in other folder you also have to change the HOST_LICENSE_FOLDER in .env(root folder) with the path where the license resides.
To prepare the Sitecore container environment, run the script init.ps1 from the root directory of the project along with the license path and desired passowrd for your instance. this form the root folder from the downloaded the repo.
You may also noticed .env in root folder have added values in REPORTING_API_KEY, TELERIK_ENCRYPTION_KEY and MEDIA_REQUEST_PROTECTION_SHARED_SECRET, which was earlier empty.
Download the Sitecore Docker images, install and configure the containers and client application
Run the up.ps1 to download and install containers and client application
.\up.ps1
This is should download the images and start the containers
Once the containers are started, it should ask to confirm to login to Sitecore with the Device confirmation code. Confirm if this matches. It should also ask to login to XM Cloud isntance and confirm.
One this is done indexes will be rebuilt and the Sitecore instance should be up and running.
Also notice that any items in this case none is pushed to Sitecore instance and an api key is genereated with the name xmcloudpreview-
You may also notice a jss editing secret and SITECORE_API_KEY_xmcloudpreview are updated in .env fiel in root folder along with the Sitecore Admin password which was set whilst initialising the environment.
The highlighted key shoulld match the key while spinning up the containers.
Taking down the containers
To take down the containers run the down.ps1 from the root folder.
.\down.ps1
Errors
Invoke-RestMethod : Unable to connect to the remote server
This should be ideally staright forward but if you see any issues whilst getting CM instance up and runing. take down the container with down.ps1 command and delete any docker network.
docker network prune
Hope this helps to setup local Sitecore instance for XM Cloud development.
With Zapier you can inspect and create customised workflow in munites without wirting any code. Its a good way to automate any actions required once the webhooks in Sitecore are triggered.
In this blog post will quickly create a workflow in Zapier to send mail when a webhook event is trigerred.
Will take a scenario when a Home page is updated, so that the concern team knows about this change.
This is not a fully customised solution but you can extend this as per your requirements.
Create a Zapier account
Create a Zapier account if you don’t have already. There is free subscription available to try out.
Login to Zapier and create a new Zap
Configure a trigger- Select Webhook by Zappier
When a new zap is created select a Catch Hook event in App & Event section
In the test section it should provide the URL its listening to execute any autmation if applicable.
Test the trigger by copying the s URL and setup the same in your Webhokk Handler in Sitecore XM CLoud or local instance. See this blog post on how to create a webhook handler.
Update content in Home page and Save. This should triggere the webhook and call the Zapier endpoint configured in handler.
Test trigger and should see the request available to this endpoint-
Continue with Selected Record if you are happy with the request-
Apply Filter
We want to send mail only when Home page is changed, so lets apply filter
Configure the filter
Add the condition
Further action will be taken only if Item name is Home. This just an example you can select the list of action available.
Continue and select next action and in this case I selected to send a mail to Gmail
Select the event “Send Mail”
Setup your account.
Setup the action to whom the mail should be sent and other information required for the mail
Continue and Test the Step
Now you should have the Zap configured-
Publish the Zap
Change the name of the Zap and should be available in Dashboard-
Change a home page content in Sitecore XM Cloud-
In the Zap runs you should be able to see a mail is triggered-
Thats it. This took me few minutes to configure and test the mail for a simple sceanrio.
Zapier gives you full flexibility to configure the triggers without writing any code based on the conditions to tak action when a Webhook event is triggered in Sitecore XM Cloud.