Topics

All topics

Link widget components

This article gives an overview of how widget components interact and how you connect them to create a complete widget.

EXAMPLE: Consider you have the following widget components:
  • Widget: HelloWorld.cs
  • Widget template: HelloWorld.asax
  • Designer: HelloWorldDesigner.cs
  • Designer template: HelloWorldDesigner.asax
  • Designer controller: HelloWorldDesigner.js

GitHubLogo SAMPLE: You can download all the widget files from folder \WebFormWidgetsSamples\HelloWorld in Sitefinity documentation-samples on GitHub.

Link the widget

GitHubLogo SAMPLE: For a sample code of a widget class, see HelloWorld.cs in Sitefinity documentation-samples on GitHub.:

  • Link to the designer
    You must associate the widget class with the control designer. This is done by the ControlDesignerAttribute class.

    In the HelloWord sample, the widget class is HelloWorld.cs and the control designer class is HelloWorldDesigner.cs. To link them together, you must add the attribute to the widget class.

  • Link the widget template
    In the HelloWorld sample, the widget class is HelloWorld.cs and the widget template is HelloWorld.ascx. The widget class needs to know which template file to load. You do this by overriding the LayoutTemplatePath property and passing a constant with the relative path to the widget template.

Link the designer

GitHubLogo SAMPLE: For a sample code of a widget designer, see HelloWorldDesigner.cs in Sitefinity documentation-samples on GitHub:

  • Link to the designer template
    In the HelloWorld sample, the designer class is HelloWorldDesigner.cs and the designer's template is HelloWorldDesigner.ascx. The designer class needs to know which template file to load. You do this by overriding the LayoutTemplatePath property. Because the template of the custom widget is always an Embedded Resource, you must enter a full path to the designer's template.
  • Register the control designer script
    In the HelloWorld sample, the control designer class is HelloWorldDesigner.js. You must register it in the designer by overriding the GetScriptReferences() method and passing the path to the JavaScript file. Provide a full path name to the JavaScript file including the assembly name.

Register the widget

When you are finished with the development of you widget, you must register it.
For more information, see Register a new widget in Sitefinity CMS toolbox.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

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.

Web Security for Sitefinity Administrators

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.

Foundations of Sitefinity ASP.NET Core Development

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.

Was this article helpful?