Rendering in OmniDesign
Rendering in OmniDesign CMS
In OmniDesign 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 OmniDesign are used to display content or functionality on webpages. They help structure and present content from OmniDesign’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 OmniDesign 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 OmniDesign instance.
JSON Rendering:
Outputs data in JSON format from OmniDesign layouts and templates, allowing developers to create APIs and integrate OmniDesign content with other systems or applications.
JavaScript Rendering:
The OmniDesign 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 OmniDesign data.
Controller Rendering:
Connects OmniDesign 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 OmniDesign-powered websites.
Item Rendering:
Displays content stored in OmniDesign items on web pages, showing data dynamically from OmniDesign 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 OmniDesign.
Insert from Template:
A feature within the OmniDesign 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 OmniDesign
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 OmniDesign.
- 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 OmniDesign
Controller Rendering connects OmniDesign 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 OmniDesign-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: OmniDesign.DemoProject.MVC.Web.Controller.DemoController, OmniDesign.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