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.

   NOTE: You can also create the Class Library in the SitefinityWebApp project and not necessarily in an external project.

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

In case you are creating the MVC views and .CSHTML files in an external assembly. However, this results in not having the Code IntelliSense feature of Visual Studio not enabled and you do not get the suggestions and autocomplete for your code.

NOTE: You need to make sure Telerik.Sitefinity.Feather.Core NuGet package in the class library project is the corresponding version as the one in the SitefinityWebApp project. 

To enable Code IntelliSense in Visual Studio:

1. Close all currently open .CSHTML files.
2. In the context menu of the Class Library node, click Properties.
3. Open the Build tab page and change the class library Output path to bin\.

   NOTE: In case you complete this step for all build modes (Debug and Release, by default), the compiler will always output the .DLL files in ~/bin folder, instead of the default bin/Debug and bin/Release folders. As a result, all build configuration modes will output to the one and the same path. If, for the Release build, you do not modify the output path from bin/Release/ to bin/, Code IntelliSense is not enabled for the Release build. 

4. In the root of the project, create a web.config file.

   NOTE: This web.config file is only used to enable the Code IntelliSense feature. All other configurations must be made in the web.config file of the SitefinityWebApp project.

5. Paste the following code snippet:
   
    
6. Clean and build the solution.

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

      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:
       

      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.

NOTE: The target .NET framework of the SitefinityWebApp project and the MyFirstMvcWidget project must be the same.