Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Link widget components | WebForms

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.

Back To Top