Access content from Sitecore XMCloud with Asp.net Rendering Host

-
    

    

If we need to use the Asp.net RenderingHost instead of Next.js or React.js and to access the content from XMCloud. 

There are 2 ways to access the content from XM cloud. 

  • Using Edge GraphQL(published content)
  • Without Edge (from master database layoutservice)

Steps for creating asp.net solution for xmcloud

  • Create an asp.net renderinghost project manually and update all necessary configuration or use the following command to get the getting started template for creating the project
  • dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json
  • Then Run following command to create the project 
  • dotnet new sitecore.aspnet.gettingstarted -n MyXmCloud

Note:

The above command will create project with following structure, from here use the RenderingHost project to access the XM cloud content and design the pages accordingly.

 

Steps for accessing the content from XM cloud using without Edge GraphQL

  • Open Appesttings.config file and configure the following settings.

"LayoutService": {

    "Handler": {

      "Name": "jss-endpoint",

      "Uri": "https://xmcloudsitecoredomainname/sitecore/api/layout/render/jss",

      "RequestDefaults": {

        "sc_apikey": "{8C9133A0-8640-43E5-8EFB-864ACD1A7F4C}", // api key

        "sc_site": "myfirstsite" //name of the site from which content to be retrieved

      }

    }

  },

  "RenderingEngine": {

    "ExperienceEditor": {

      "Endpoint": "/jss-render"

    }

  },

  "JSS_EDITING_SECRET": "xxxxxxxxxxxxxxxx", //This setting used for experience editor and should match sitecore setting JavaScriptServices.ViewEngine.Http.JssEditingSecret

  "Analytics": {

    "SitecoreInstanceUri": "https://xmcloudsitecoredomainname/"

  }

  • Create component name RichText by creating model in the project with the same name of the rendering created in sitecore XMCloud.

using Sitecore.LayoutService.Client.Response.Model.Fields;

namespace MyProject.Models

{

    public class RichText

    {

        public RichTextField Text { get; set; }

    }

}

  • Create the necessary view(RichText.cshtml) file to bind the model content coming from layoutservice

@model RichText

@{

 

  <div class="col-sm">

    <div class="contentDescription">

     MyRichtext: <sc-text asp-for="Text" />

    </div>

  </div>

}

 

  • Map this new model and view as component in startup.cs as below

                services.AddSitecoreRenderingEngine(options =>

                {

                    options                      

                        .AddModelBoundView<ContentBlock>("ContentBlock")                     

                        .AddModelBoundView<RichText>("Richtext") //new component added

                        .AddDefaultPartialView("_ComponentNotFound");

                })

 

Steps for accessing the content from XM cloud using Edge

  • Access the content using Preview edge endpoint /sitecore/api/graph/edge 
  • Access the content using live edge endpoint  /api/graphql/v1
  • open appsettings.development.json and update the following settings   

          Sitecore: {
            "InstanceUri": "https://domainname/",
            "LayoutServicePath": "/sitecore/api/graph/edge", //Replace this with live edge endpoint
            "DefaultSiteName": "MySite",
            "ExperienceEdgeToken": "{8C9133A0-8640-43E5-8EFB-864ACD1A7F4C}",//This is point to sitecore api key for                 preview,replace this with edge token for live edge
            "MvpDirectoryGraphQLQueryPageSize": 1000,
            "MvpDirectoryGraphQLQueryCacheTimeout": 1
        }

 


Comments

Post a Comment

Popular posts from this blog

Custom Item Url and resolving the item in Sitecore - Buckets

-
Image
I have a situation to update the Item URL to be SEO friendly as my items in content tree looks like below. In the above image in order to resolve the item, Sitecore will find the item from the below URL http://domainname/en/dine/nv/chicken but I need to form a URL that is more SEO friendly like http://domainname/en/chicken In Sitecore by Out of box, we can achieve this by using Aliases , we can create an Aliases under System à Aliases and in the Linked Item field select the target item. But this is very tedious as we need to go to every item in the content tree and create Aliases, instead of that we will be going to do it programmatically using custom pipelines. ·          Link Provider (Provides the custom URL for the item based on the templates) ·          Item Resolver (Resolves the item based on the custom URL generated by CustomLinkProvider , that we going to create later...
Read more

Fixing Sitecore Buckets folder path - Items created after 12 AM server time zone

-
Image
We are working on a 24/7 content publishing site, so it is important to have articles published on the correct date and time.  We are using Sitecore buckets to manage article items. In the Sitecore content tree, when the content author tries to look at the items created after 12 AM server time, the items are created under the previous day folder only,  but it is supposed to be created in the current day folder( ie. new bucket day folder to be created and the items to be added in this new day folder ). We have hosted the site in Azure VM in the UAE region. UAE is 4 hours ahead of GMT/UTC (UTC+04:00) so items created between 12 AM to 4 AM are always created under the previous day's folder, but when the item created after 4 AM is properly created under the current day folder in the content tree. Example: If the item was created on 2024 à 09 à 24 between 12 AM to 4 AM then still the item is made under the bucket folder of 2024 à 09 à 23 The created date and the updated ...
Read more

Sitecore Search - API Crawler with Edge Pagination

-
Image
Sitecore Search provides different ways to index the items from 3rd party systems with the help of Source Connectors. There are different types of Source Connectors available: API Crawler API Push Feed Crawler Web Crawler Web Crawler(Advanced) I have provided more details here about the different sources for crawling different types of documents to get indexed into Sitecore Search. In this article, I would like to share the details about API Crawler in more real-time querying data and adding to the index. We have a scenario where I need to index all the items along with their placeholder components based on a specific template that has a layout assigned to it. I decided to utilize the Experience EDGE GraphQL Query to get the data and index it to Sitecore Search. We can use this for non-layout items as well. This article covers the following: GraphQL - Layout Query with Components GraphQL - Item Query GraphQL - Item Query with Pagination GraphQL - Search Query with Pagination Graph...
Read more