Sitefinity CMS MVC-based widgets come with property editors based on the Bootstrap framework and AngularJS. For the UI of these widgets, Sitefinity CMS provides predefined packages based on different frontend frameworks that provide built-in styling options for your website.
You create new widgets from scratch and use them side by side with the default ones. You create a custom model, controller, and view and finally register the widget in the Sitefinity toolbox.
The following procedure demonstrates how to create a new Message widget.
IMPORTANT: When creating your widget files, make sure you abide by the naming conventions. For more information, see Naming conventions.
Create the custom model, controller, and view
- Open your project in Visual Studio.
- Depending on whether you are creating the widget in the Sitefinity project or in an external assembly, you do one of the following:
- Sitefinity project:
Proceed to step 5 of his procedure.
- External assembly:
- Create a new Class Library and name it MessageWidget.
NOTE: You can also create the Class Library outside of the SitefinityWebApp project in an external project. For more information, see Create widgets in external assemblies.
- Under MessageWidget class library, expand the Properties.
AssemblyInfo.cs and insert the following:
- Create the custom model
The model represents the data your application works with.
This example uses plain C# classes for the model. In general, classes are not persisted in storage.
To create the custom model, perform the following:
- Inside folder
Models, create a new class and name it MessageWidgetModel.
MessageWidgetModel.cs file and paste the following code:
- Create the controller
The controller stores all the Action methods of your widget. You need to also add the required Index action that returns a specific view. Finally, you implement the Controller class.
- Inside folder
Controllers, create a new class and name it MessageWidgetController.
IMPORTANT: The class must have the suffix Controller in its name.
MessageWidgetController.cs file and paste the following code:
In the code above, you build the model and pass it to the view. That is, you define the actions that correspond the UI, relative to the page, on which you place the widget. Your controller must inherit the
System.Web.Mvc.Controller class. You add an
Index method that returns an object of type
Index action returns a list of items from the model. You modify the code of the
Index action to populate the
Message of the
In addition, you decorate the controller with the ControllerToolboxItem attribute, which automatically registers your widget in the Sitefinity toolbox. For more information, see Register new widgets in Sitefinity CMS toolbox.
- Create the view
You implement the view that shows the message from the model, populated in the controller.
Perform the following:
- Under the class library, in folder
Mvc/Views/MessageWidget, create a new Code File and name it Default.cshtml.
NOTE: If you are creating the widget in an external project, in the Properties section of the files, set its Build Action to Embedded Resource. Make sure the Sitefinity version referenced in the external assembly is the same as the one your project is using.
- Define how the view displays the data, for example:
Raw helper method is introduced in MVC 3 and it helps to output any HTML without encoding it. You use the Raw method only when you trust the source of the embedded resource. In case you want to ensure your HTML content is safe, leverage Sitefinity CMS HTML sanitization.