Feather: Create widgets

Feather MVC-based widgets differ from the standard Sitefinity CMS widgets by their design and functionality. These widgets come with new property editors based on the Bootstrap framework and AngularJS. For the UI of these widget Feather provides predefined packages based on different frontend frameworks that provide built-in styling options for your website.
For more information, see feather-packages and feather-widgets repositories on Sitefinity CMS GitHub.

The following tutorial demonstrates how to create a new Feather MVC widget.

1. Open your project in Visual Studio.
   If needed, save the solution file.
2. In the context menu of the solution, click Add » New Project…
3. In the left pane, select Visual C# » Windows.
4. Select Class Library and name it MyFirstMvcWidget.
5. Inside the created class library, delete the class that is automatically created by Visual Studio.
6. Under the new class library, create a new folder and name it Mvc.
7. Inside folder Mvc, create three new folders - Controllers, Models, and Views.
8. Under folder Views, create a new folder and name it MessageWidget.
9. In the new project, you must reference the following assemblies:
   • System.Web
   • System.Web.Mvc
   • Telerik.Sitefinity
   • Telerik.Sitefinity.Mvc
   • Telerik.Sitefinity.Frontend

1. Under MyFirstMvcWidget class library, expand the Properties.
2. Open AssemblyInfo.cs and insert the following:
   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. Classes are not persisted in storage, because this is out of the scope of this tutorial.
   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:
      namespace MyFirstMvcWidget.Mvc.Models

      {

          public class MessageWidgetModel

          {

              /// <summary>

              /// Gets or sets the message.

              /// </summary>

              public string Message { get; set; }

          }

      }
4. Create the controller
   1. Inside folder Controllers, create a new class and name it MessageWidgetController.
   2. Open MessageWidgetController.cs file and paste the following code:
      namespace MyFirstMvcWidget.Mvc.Controllers

       {

           [ControllerToolboxItem(Name = "MessageWidget", Title = "MessageWidget", 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);

               }

           }

       }

      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.

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.
   2. In the Properties section of the file, set its Build Action to Embedded Resource.
   3. Open the file and paste the following code:
      @model MyFirstMvcWidget.Mvc.Models.MessageWidgetModel

       

      <h1>

          @Html.Raw(Model.Message)

      </h1>

      NOTE: TheRaw helper method is introduced in MVC 3 and it helps to output any HTML without encoding it.

1. Build the solution.
2. In the SitefinityWebApp project, add a reference to assembly MyFirstMvcWidget.
   The widget is automatically registered in Sitefinity CMS toolbox.

You can use the widget from the MvcWidgets section on any page.