Posts

How to Enable Voice Search in Sitecore Content Editor

Image
How to Enable Voice Search in Sitecore Content Editor Voice search is transforming the way users interact with digital content, and integrating it into the Sitecore Content Editor can greatly enhance content management efficiency.  In this blog, we’ll walk you through implementing a voice search feature in Sitecore, enabling content editor to find items faster using speech recognition. Customizing the Sitecore Search Bar in the Content Editor Step 1:  Locate and edit the Default.aspx file, where the search bar of the Content Editor can be found. The file is located at the following path. C:\inetpub\wwwroot\sc.dev.local\sitecore\shell\Applications\Content Manager\Default.aspx You will need to add some custom code to display the voice recognition icon on the search bar. <div class="speech" style="position:relative"> <input id="TreeSearch" class="scSearchInput scIgnoreModified" value="<%= Translate.Text(Texts.SEARCH) %>" ...

How to customize a general link button to create a dynamic link with an internal link and a data source in Sitecore

Image
I needed to generate a dynamic link with an internal link and data source item.  For example, I wanted to create a link like the one below. https://local.com / faq #heading- 4f8d1f56-54af-4f2b-9f9b-0dcc6bcdec0b /faq- Sitecore page item 4f8d1f56-54af-4f2b-9f9b-0dcc6bcdec0b -  data source item Let's dive deeper into the process. Switch to the core database in the CMS. Navigate to the folder path:  /sitecore/system/Field types/Link Types/General Link/Menu Create a new item for the custom link button and provide a display name for the message. **Message:** This is similar to the command action name.   Use: `contentlink:accordionlink(id=$Target)`  Expand the Link Field to include the custom button action. Use `" control:AccordionLink "` to find the AccordionLink control and open the dialog box. Create an XML file for a custom link to open a dialog box with an internal link and data source item. Extend a LinkForm field to develop a new custom submit action for a ...

Set up Sitecore XM Cloud using .NET Core on your local machine

Image
Are you a .NET enthusiast?  If so, here’s how to set up Sitecore XM Cloud using .NET Core on your local machine.  Follow these steps: Step 1:  Download the `xmcloud-starter-dotnet` from the link below. https://github.com/Sitecore/xmcloud-starter-dotnet.git Step 2:  Open the `aspnet-core-starter` solution and update the `appsettings.json` file with the following fields: "EdgeContextId" - Your Sitecore edge preview or live context ID. ("Use the preview ID for recommendations aimed at developers.") "DefaultSiteName" - The name of your site. "EditingSecret" - Your JSS editing secret ID. if you don't know how to get that information  Log into the  Sitecore Deploy Portal Click on the Developer Settings tab and make note of the  JSS_EDITING_SECRET  and  SITECORE_EDGE_CONTEXT_ID  values shown. Just hit F5, and you’re all set! **Note:** The Experience Editor does not function on the XMC page, so we need to follow the steps outlined below. Step 3:...

Changing Data Item Templates in Sitecore: What Happens Behind the Scenes?

Image
 What actually happens when you change the template of an item with multiple versions? Does each version hang on to the old template, except for the version where you hit the switch? Or do they all get a forced makeover with the new template fields? I have created an item with two versions using the Basic Message Template, each containing different content. Scenario 1:   Version 1 Version 2 Now I will update the item template for version 2 with  / sitecore/templates/Project/Change Basic Message. After changing the template, my existing template field data was lost. Additionally, the template change affected all versions of the item , not just the current version. Version 2 after the template change (all data lost). Version 1 after the template change (all data lost). Scenario 2: I have developed a new template, and some field names are identical to those in the existing template. Let's update the item template with  /sitecore/templates/Project/Change Basic Message P...

How to Create a Component in Next.js for XM Cloud

Image
Let’s create a component in the Next.js app.  If you want to know how that component is created in XM Cloud, please refer to my previous blog for more information. https://sitecoresathiya.blogspot.com/2024/10/how-to-create-component-in-nextjs-for-xmc.html I have pulled down the startup branch to my local environment. https://github.com/sitecorelabs/xmcloud-foundation-head Refer to the README file to learn how to run the Next.js app locally.  Navigate to the headapps/nextjs-starter folder and execute the following command to scaffold a new component:  jss scaffold "TextCard". Let's check if the component is rendered correctly. Run the command below to start your Next.js app locally in connected mode. npm run start:connected After that, your app will run on http://localhost:3000/ with the default port if the port is not in use.   Yes, it shows what I had in my TextCard.tsx file. How can we display the content from XMC? To map the component fields into my TextCardFields...

How to Create a Custom Component in XM Cloud.

Image
The best practice for creating a component module is to navigate to Settings -> Project -> [Site Name].  This allows us to use the component across different sites as well.  To create the module, right-click on the project, select "Insert," and then click on "Headless Module." A popup modal will appear.   Specify the module name as the component name. Choose the desired path for grouping the components. The best way to organize them is to select your site name folder under the project. Create a rendering. Instead of creating a rendering, it’s best to clone a rendering and then update it accordingly. For example, clone a Promo rendering and rename it to Text Card. /sitecore/layout/Renderings/Feature/JSS Experience Accelerator/Page Content/Promo To clone the rendering, right-click on the promo, select "Scripts," and then choose "Clone Rendering."   Update the rendering name and select the path to your component folder that was created during ...