Posts

Debug Logging in Content SDK Apps — A Developer’s Guide

When building headless applications with Sitecore Content SDK, debugging becomes crucial especially as your component structure and data dependencies grow. Instead of writing console.log everywhere, the Content SDK provides a much cleaner and controlled approach to logging. The SDK uses the popular debug module for displaying debugging information. This allows developers to enable or disable logging dynamically using environment variables, making it easier to troubleshoot issues without modifying code. Debug logging is disabled by default, keeping terminal noise to a minimum during normal development. Once you need insights into what the Content SDK is doing—just turn it on! Enabling Debug Logs Use the DEBUG environment variable to control what logs are shown. When logging is enabled and you run your application, all triggered instances of debug() relevant to the namespaces you choose to include will be displayed in your console. To enable ...
Post a Comment
Read more

Empower Your Components: Access Rendering Parameters via Sitecore Content SDK

When building components in Sitecore XM Cloud with the Content SDK, it’s common to let authors control certain visual aspects like background colours, layouts, or visibility options directly from the Page Builder. This is where Rendering Parameters come in. Rendering Parameters let you configure per-rendering options that are not tied to the data source item but instead linked to the component instance on a page. In this blog, let’s see how to: Create Rendering Parameters for styling options Attach them to a rendering Access and use them inside your component through the Content SDK API 1. Create a Rendering Parameters Template in XM Cloud In the Sitecore Content Editor , follow these steps: Navigate to /sitecore/templates/Project/DemoProject/Rendering Parameters Create a new template named CardList Rendering Parameters Add fields such as Styles (Single-Line Text or Droplist) Show Title (Checkbox) Save the template. This template defines the configuration fi...
Post a Comment
Read more

Create a Custom Component in Sitecore XM Cloud using the Content SDK

Image
In the previous blog , we saw how to set up and start working with the Sitecore Content SDK. Now, as promised, we’re back with the next blog on how to create component using the Content SDK and integrate it into your app. In this guide, we’ll create a custom component, register it in Sitecore XM Cloud, and make it available inside the Page Builder using the Content SDK. 1. Create a Component Item in Content Editor In Content Editor, navigate to: /sitecore/layout/Renderings/Project/DemoProject Clone an existing component or use Derivative Rendering to create a new one - Go to the rendering path you want to clone - /sitecore/layout/Renderings/Feature/DemoSite/CustomForm - Right click → Scripts → Clone Rendering Provide details in the clone wizard: - Rendering Name → RichTextBlockA - Module/Site → select your project/site name - For other tabs (Data, Parameters, etc.) → you can inherit or copy to change it as needed - Click Proceed   ...
Post a Comment
Read more

Kickstart XM Cloud Journey with Sitecore Content SDK

Image
The Sitecore Content SDK enables developers to build front-end applications that connect directly to content hosted in XM Cloud . In this post, we’ll walk through how to set up your local environment, connect to an XM Cloud instance, and get your first Content SDK app running locally. Prerequisites Before we start, make sure you have: Access to an XM Cloud instance Visual Studio Code installed The latest version of Node.js installed You can verify your Node.js installed version by running following command: node -v Create a New App Folder Let’s create a folder for our app. You can name it anything, for example: mkdir ContentSDKDemoApp cd ContentSDKDemoApp Create a New Content SDK App Run the following command to download and initialize a starter Content SDK template : npx @sitecore-content-sdk/create-sitecore-jss nextjs You’ll be prompted to confirm the app location, type y to proceed. Next, it will ask you to select between SSG (Static Site Generatio...
Post a Comment
Read more