The WYSIWYG page editor of Sitefinity CMS works with reusable components called widgets. Widgets provide configurable and reusable parts for page building, which can vary from simple visual element to complex components for displaying content with rich logic. The Sitefinity Next.js renderer framework provides essential features out of the box, including integration with the WYSIWYG page editor. What is left is writing the code for the React widgets. Developing widgets for the Next.js renderer follows the development principles of React and Next.js components. There are some specific integration points that need to be followed to ensure seamless integration with the Sitefinity CMS. This is demonstrated in the Hello World tutorial below.
First you need to create a file that hosts the React component:
.tsx
NOTE: The htmlAttributes function generates the necessary HTML attributes that are required by the WYSIWYG editor to recognize the generated HTML snippet as a widget with its metadata and display its operation and widget designer.
htmlAttributes
Next create an entity file, that would describe the widget designer. We have created the Sitefinity Widget Designers SDK to make the process of defining the entity metadata as easy as possible. For additional information, see the SDK’s documentation on npm. The approach is aiming for parity with the existing Sitefinity autogenerated widget designers. For more information, see Widget designers.
ts
hello-world.entity.ts
The next step is to register the component implementation and the designer metadata with the Next.js renderer. The Sitefnity Next.js SDK will automatically generate the needed designer metadata based on the defined entity. The registry is used to find the component function reference for the widget from the response of the Page Layout service. It is also used when generating metadata for the widget when it is used in the WYSIWYG page editor – labels, visuals etc.
After you implement new widgets, you register them with the renderer as shown above so they can appear in the widget toolbox dialog. With the widget entry in the registry using the editorMetadata property you can define the following optional properties of the widget:
Title
Name
Category
Section
EmptyIcon
EmptyIconText
ЕmptyIconAction
Order
IconName
IconUrl
Toolbox
HasQuickEditOperation
InitialProperties
The Sitefnity Next.js SDK provides implementations for some of the standard Sitefinity widgets. For more information, see Next.js renderer widgets. The widgets’ code can be found as a reference in the public source repository on GitHub.
The Sitefnity Next.js SDK comes out of the box with an SDK that facilitates the communication with the Sitefnity services both server side and on the front end. It provides a way to query content items and their properties, make modifications to them, get page layout, perform searches etc. The following example demonstrates how to query content items from Sitefinity CMS. Note that the full type name should be used as the parameter for the request – in the case of news items it should be Telerik.Sitefinity.News.Model.NewsItem. The RestSDK has some of the basic content types predefined under RestSdkTypes:
Telerik.Sitefinity.News.Model.NewsItem
For more information, see the Sitefinity Next.js SDK at npm.
The Sitefnity Next.js SDK provides SanitizerService.sanitizeHtml(html, config?) static method that uses server side and client side DomPurify. For more information on DomPurify, see the npm package page of DomPurify Isomorphic DOMPurify.
The default configuration allows for some additional tags and attributes and could be overridden via SanitizerService.configure(config) where the configuration object is a partial implementation of the DomPurify. For more information on DomPurify configuration, see the GitHub readme DOMPurify.
Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.
This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.
This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.
The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important