The following tutorial demonstrates how to create a simple List widget based on the MVC framework. The List widget displays a list of items on the frontend and provides functionality for configurations via a customized designer. Using this tutorial, you learn how to create an MVC widget in a separate assembly that uses a custom designer.
You can have MVC widgets that are stored in separate assemblies. The following sample creates the List widget in a separate assembly.
Perform the following:
GITHUB EXAMPLE: For more information, see AssemblyInfo.cs in the Sitefinity CMS GitHub repository.
GITHUB EXAMPLE: For more information, see ListMode.csin the Sitefinity CMS GitHub repository.
Perform the following:
GITHUB EXAMPLE: For more information, see ListController.cs in the Sitefinity CMS GitHub repository.
You need to create an Index view because this is the only view that is used by the ListController. To do this, you must create a new Razor view named Index.cshtml and to place it in the MVC/Views/List folder.
GITHUB EXAMPLE: For more information, see Index.cshtml in the Sitefinity CMS GitHub repository.
NOTE: You can create a Razor view in a class library project by selecting HTML Page in the Add New Item dialog, and then renaming the file extension to .cshtml. In the file properties, set the view as Embedded Resource.
Sitefinity CMS provides a widget designer created using ASP.NET MVC, AngularJS, and Bootstrap framework. When an MVC widget is registered in the toolbox, Sitefinity CMS will automatically open for you the new MVC designer. This way you can edit the public properties of the widget though the designer without any additional configuration.
In addition to the default property editor view, you can add your custom views inside the widget designer. This way, you can show different editing options or more complex UI.
This tutorial demonstrates how to modify the MVC designer by adding two views to it – the Settings view and the Manage items view. The Settings view provides options for customizing the visual appearance of the items on your page, while the Manage items view provides simple UI for adding and deleting items from the list.
Customizing the outlook of the MVC designer that is associated with your custom widget does not require any specific configuration. You do it by following a naming convention. To add a custom view to the MVC designer, you must use the following rules:
properties.<Your property name>.PropertyValue
To create your custom view, add a DesignerView.ManageItems.cshtml file in folder MVC/Views/List.
GITHUB EXAMPLE: For more information, see DesignerView.ManageItems.cshtml in the Sitefinity CMS GitHub repository.
To create a Settings view for the List widget designer, perform the following:
NOTE: You can also easily modify properties of custom types.
GITHUB EXAMPLE: For more information, see DesignerView.Settings.cshtml in the Sitefinity CMS GitHub repository.
To meet specific business requirements, you may need to implement a complex UI logic in the widget designer. Sitefinity CMS provides a way for building custom views that contain heavy client-side logic.
This tutorial creates a custom view that will contain a more complex client-side logic for manipulating the value of the ListItems property of the List widget.
Perform the following:
NOTE: If you do not provide a custom Angular controller, the default one will be used.
GITHUB EXAMPLE: For more information, see designerview-manageitems.js in the Sitefinity CMS GitHub repository.
In this code, you update the $scope.properties.ListItems depending on the action that the user takes. This way, when the user clicks Save, Sitefinity CMS automatically saves the updated values of the widget properties. If the user clicks Cancel, Sitefinity CMS discards the changes applied on $scope.properties.
In this tutorial, you specify the Manage Items view as the view that is displayed when you open the designer of the List widget.
To do this, perform the following:
GITHUB EXAMPLE: For more information, see DesignerView.ManageItems.json in the Sitefinity CMS GitHub repository.
Back To Top
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important
Copyright © 2020 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.
Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.
Powered by Progress Sitefinity