Rendering in Sitecore
Rendering in Sitecore CMS
In Sitecore CMS, web pages are divided into blocks, each handled by separate components with specific functions. These components use logic to create HTML, known as renderings. When all renderings come together, they form the full HTML for the webpage. Renderings in Sitecore are used to display content or functionality on webpages. They help structure and present content from Sitecore’s content management system onto the website. Rendering refers to the implementation of a component or module that defines how content is rendered and displayed on a web page. Renderings are associated with placeholders within page layouts and are responsible for rendering the content dynamically within those designated areas.
Types of Renderings in Sitecore 10.3
XSL Rendering:
Transforms XML data into different formats for display, like HTML. It’s useful for customizing how content appears on web pages without directly modifying the original content.
WebControl:
Represents a web control, which is a server-side control encapsulating user interface and other related functionality.
Method Rendering:
Executes custom C# code and displays the result on a webpage. It’s useful for dynamic content or performing specific actions when rendering a page.
URL Rendering:
Generates web page URLs for content items, making it easy to link to specific pages on a website.
Rendering Folder:
Serves as a convenient location for managing and organizing the available renderings within the Sitecore instance.
JSON Rendering:
Outputs data in JSON format from Sitecore layouts and templates, allowing developers to create APIs and integrate Sitecore content with other systems or applications.
JavaScript Rendering:
The Sitecore JavaScript Rendering SDKs (JSS) represent a set of JavaScript packages and sample applications that add first-class support for JavaScript frameworks and enable the development of modern applications that consume Sitecore data.
Controller Rendering:
Connects Sitecore with external systems or custom logic by allowing developers to write code in C# that generates HTML content for webpages. It helps customize and extend the functionality of Sitecore-powered websites.
Item Rendering:
Displays content stored in Sitecore items on web pages, showing data dynamically from Sitecore on your website.
View Rendering:
Defines how content is presented to website visitors. It determines the layout and design of web pages by combining HTML markup with dynamic data from Sitecore.
Insert from Template:
A feature within the Sitecore Experience Editor that allows users to insert a rendering onto a webpage using a template-based approach. This feature provides a convenient way to add new renderings to a page layout by selecting from predefined templates.
Steps to Create a View Rendering in Sitecore
View Renderings are used to define how content is presented to website visitors. They determine the layout and design of web pages by combining HTML markup with dynamic data from Sitecore.
- Create a .cshtml File for Layout
Create a file named DemoLayout.cshtml.
- Create a Template
Create a template named DemoTemplateforViewRendering with fields Title, ProjectName, ImageName, Image, JSON, and URL.
- Create Content
Create content named Demo using the template DemoTemplateforViewRendering.
- Add Layout in Content
Navigate to: Demo → Present → Details → Edit → Layout → Add DemoLayout (created in step 1).
- Create a .cshtml File for View Rendering
Create a file named DemoViewRendering.cshtml in the Views folder.
- Create a View Rendering
Create a view rendering named DemoRendering with the path /Views/Demo/DemoViewRendering.cshtml.
- Add Control in Content
Navigate to: Demo → Present → Details → Edit → Controls → Add rendering with placeholder.
- Save, Publish Item, and Preview
Creating a Controller Rendering in Sitecore
Controller Rendering connects Sitecore with external systems or custom logic by allowing developers to write code in C# that generates HTML content for webpages. It helps customize and extend the functionality of Sitecore-powered websites.
Steps to Create a Controller Rendering
- Create a .cshtml File for Layout
Example: DemoLayout.cshtml
- Create a Template
Example: DemoTemplateforViewRendering with fields Title, ProjectName, ImageName, Image, JSON, and URL
- Create Content
Example: Demo using the template DemoTemplateforViewRendering
- Add Layout in Content
Navigate to: Demo → Present → Details → Edit → Layout → Add DemoLayout (created in step 1)
- Create a .cshtml File for Controller Rendering
Example: DemoControllerRendering.cshtml in the Views folder
- Create a Controller File
Example: DemoController.cs
- Create a ViewModel File
Example: DemoViewModel.cs
- Create a Controller Rendering
Example: DemoControllerRendering with:
Controller: Sitecore.DemoProject.MVC.Web.Controller.DemoController, Sitecore.DemoProject.MVC.Web
Controller Action: DemoControllerRendering- Add Control in Content
Navigate to: Demo → Present → Details → Edit → Controls → Add rendering with placeholder
- Save, Publish Item, and Preview