Sitecore 2021 Virtual Developer Day Session: "Sitecore Rendering Host introduction

An excellent session by Guido van Tricht.

Sitecore-mvp site GitHub repo: https://github.com/Sitecore/MVP-Site

Specs to create and use the jumbotron component (.net core 3.1)-

How to add jumbotron component to the home page:

In Sitecore,

1. Create Data template

- Title

- Description

- Go to Jumbo page

2. Create JSON Rendering

- Set the data template/source

- Set query - need to check

Also, Check what is layout service in the context of rendering host

3. Set the rendering in the main placeholder

4. Back in VS csproj;

4.a Create a model in csproj for the jumbotron component

- Will have the same fields as in the Sitecore data template

Data types in the C# model (XP Editor support):

C# - Sitecore data type

TextField (C#) - SingleLineText

RichTextField - RichLineText

HyperLinkField - general link

Note: Name in the C# property must correspond to data template field names

4.b Next create a view (cshtml) in the csproj

under Views -> Shared -> Components Folder structure

4.c In cshtml, some of the attributes:

asp-for - simple text field

sc-text - for rich text field

sc-link - general link

Next, Rendering host / engine should know the view that has the model bound to it

Crucial: In VS project, Startup.cs for configuration

5. In startup.cs you can define the component by registering with AddSitecoreRenderingEngine

In RenderingEngineOptionsExtensions class, AddFeatureBasicContent method, add your component with the associated model

6. Publish VS project.

7. Sitecore Publish and check!

NAVANSITECORENOTES