Create and register widgets

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

1. Open your project in Visual Studio.
2. 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 3 of his procedure.
   • External assembly :

     1. 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.

     2. Under MessageWidget class library, expand the Properties.

     3. Open AssemblyInfo.cs and insert the following:

     C#

         using Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes;
         [assembly: ControllerContainer]

3. 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:

   1. Inside folder Models, create a new class and name it MessageWidgetModel.

   2. Open MessageWidgetModel.cs file and paste the following code:

      C#

      namespace MyFirstMvcWidget.Mvc.Models
      {
          public class MessageWidgetModel
          {
              /// <summary> 
              /// Gets or sets the message. 
              /// </summary> 
              public string Message { get; set; }
          }
      }

4. 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 Controllerclass.

   1. Inside folder Controllers, create a new class and name it MessageWidgetController.

      IMPORTANT: The class must have the suffix Controller in its name.

   2. Open MessageWidgetController.cs file and paste the following code:

      C#

      using MyFirstMvcWidget.Mvc.Models;
      using System.ComponentModel;
      using System.Web.Mvc;
      using Telerik.Sitefinity.Mvc;
      
      namespace MyFirstMvcWidget.Mvc.Controllers
      {
          // The ControllerToolboxItem attribute registers the widget in Sitefinity backend
          [ControllerToolboxItem(Name = "MessageWidget", Title = "Message Widget", SectionName = "MvcWidgets")]
          public class MessageWidgetController : Controller
          {
              /// <summary> 
              /// Gets or sets the message. 
              /// </summary>
              [Category("String Properties")]
              public string Message { get; set; }
      
              /// <summary> 
              /// This is the default Action. 
              /// </summary> 
              public ActionResult Index()
              {
                  var model = new MessageWidgetModel();
      
                  if (string.IsNullOrEmpty(this.Message))
                  {
                      model.Message = "Hello, World!";
                  }
                  else
                  {
                      model.Message = this.Message;
                  }
      
                  return View("Default", model);
              }
          }
      }

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 ActionResult. The Index action returns a list of items from the model. You modify the code of the Index action to populate the Message of the Model.
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. 5. Create the view You implement the view that shows the message from the model, populated in the controller.
Perform the following:

1. 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.

2. Define how the view displays the data, for example:  

        @model MyFirstMvcWidget.Mvc.Models.MessageWidgetModel
        
        <h1>
            @Html.Raw(Model.Message)
        </h1>

NOTE: The 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.