Create and edit widget templates

With Sitefinity CMS, you can control the rendered HTML and modify the markup of MVC widget templates according to your preferences. 

All MVC widget templates are located in the ResourcePackages folder in the root of your project. There is a dedicated folder for the Bootstrap 4 framework, supported by Sitefinity CMS. For more information about frontend frameworks, see Overview: Resource packages. 

RECOMMENDATION: When modifying a widget template, to make upgrades easier, we recommend that you do not change the default widget templates. If you need to make changes to a default template, it is generally better to create a new template altogether by duplicating the original template in the file system. Only after, you modify and make changes to the duplicated template.

RECOMMENDATION: We recommend that you store the widget templates in your resource package. For information about file priorities, see Priorities for resolving views.

You can easily edit widget templates by opening the template in the file system and modifying the markup.

In the following example, you are using the Bootstrap 4 package and you modify the markup of the News widget. To do so:

1. Navigate to %project-root%/ResourcePackages/Bootstrap4/MVC/Views/News
2. Choose the template you want to edit.
   Detail or List.
3. Edit the file and save it.
4. Refresh the browser.

As a result, the template of the News widget is changed.

You can create a new widget template either in the file system or via the Sitefinity CMS backend, depending on where your templates are located. We recommend that you store the widget templates in your resource package and create new templates by duplicating and customizing the default templates, instead of directly modifying them. Thus, you do not lose your changes upon upgrade.

NOTE: You can find the default widget templates in the GitHub repository.

In the file system

Generally, MVC widget templates comprise of List and Detail views and you can create new templates for each, following the Naming conventions. Some widgets, such as the Content block, do not have List and Detail views, so you just create the template with a name of your choice and place it in the Mvc » Views » ContentBlock folder.

Create List or Detail views

The following example demonstrates how to create a new List or Detail view for the News widget when you are using the Bootstrap 4 package:

1. Navigate to the %project-root%/ResourcePackages/Bootstrap4/MVC/Views/News folder.

2. Depending on what view you want to create, duplicate one of the following:
   • List template to create a new List view
   • Details template to create a new Details view
3. Name the new file, using the following convention:
   List.[ViewName].cshtml or Detail.[ViewName].cshtml

   NOTE: The view name is the name that is used for the file and how it is displayed in the backend. For more information about naming your files, see Naming conventions.

   IMPORTANT: If you are creating a template for a dynamic content widget, make sure you follow the naming convention: ~/MVC/Views/<DynamicContentTypeName>/DesignerView.<ViewName>.cshtml where <DynamicContentTypeName> is the name of the dynamic content type, for example Country. If you created a dynamic type with name Countries, the folder name must be named with singular form.

4. Open the file and make your changes.
5. Save the file.

Create Content block view

The Content block widget is an example of a widget that does not have Detail or List views. To create a view for the Content block widget, do the following:

1. In Visual Studio, open your SitefinityWebApp project and click MVC » Views.

2. Create a new folder and name it ContentBlock.

   NOTE: The name of the folder must correspond to the name of the widget whose template you want to change. In case, for example, you need to change the template of the Navigation widget, you must name the folder Navigation. For more information, see Naming conventions.

3. Open the context menu of folder ContentBlock and add new file with name Default.cshtml.
   The name of the file must be Default, because the ContentBlockController renders a view named Default. The extension .cshtml is valid for Razor view engine.

   NOTE: For any other widget the name of the newly created file must match the name of the template that you are trying to replace - List or Detail. 

   IMPORTANT: You can use only alphanumeric characters and underscore. For more information about naming your files, see Naming conventions.

4. Enter a sample text inside.
   For example, enter Testing new template.
5. Build the solution and run it.
6. Create a new page in Sitefinity CMS and place the ContentBlock widget that is located in the MvcWidgets toolbox section.

As a result, the Testing new template text is displayed. 

In cases when you are not using a specific package or you want your widgets to use the same view independently of the package used, you can also create views in the root of the project. You also use this approach when working in Hybrid page mode. To do this:

1. Navigate to your project folder ~\MVC\Views.
2. Create a <widget type> folder.
3. Add a new view as a .cshtml file with <widget type> in its name. Once you create the new template, you can use it when you open the respective widget for editing.

   EXAMPLE: If you are creating a template for Login form widget, create a LoginForm folder. Include LoginWidget in the name of your new view file. 

To create a new widget template for the Login form widget in the backend:

1. Navigate to Design » Widget Templates » Create a template.
   The Create template form appears.
2. In This template is applied to... dropdown box, select the type of widget that you want to create a template for.
3. Add the code.
4. Name your template.

   NOTE: The name of your template must start with the type of view that it applies to. For more information, see Naming conventions. In addition, you can see all built-in views and their names in your project's /ResourcePackages/Bootstrap4/MVC/Views/ folder.

   EXAMPLE: If you are creating a template for Login form widget, select LoginForm (MVC) and start your template name with LoginForm, e.g. LoginForm.<yourtemplatename>. Once you create the new template, you can use it when you open the Login form widget for editing.

   EXAMPLE: When creating a template with a List or Detail view, the template name must start with List or Detail, e.g. List.<yourtemplatename> or Detail.<yourtemplatename>.

5. To save your changes and create the template, click Create this template.