mvc5 html.widget,Widget designers

Widget designersOverview

Widgets have properties that you set per widget and that modify the functionality of the particular widget. If you want to display blog posts using the Blog posts widget, you need to tell the widget which blog to use, how many posts to display on one page, and how to display them. You configure a widget through its widget designer, that is, in the Edit mode of widgets. Additionally, you can predefine the properties of any type of widget, so that once dropped on the page, the widget is preconfigured and ready to use. For more information, see Set predefined values for widget properties.

You can configure a widget in two ways:

Advanced mode

The Advancedmode of a widget displays an automatically generated list of properties. When you build a widget, you must declare all properties that can be modified as public. Sitefinity CMS automatically generates the list of properties that can be directly modified in a browser. Sitefinity CMS saves all the values that you modify in the database. This property list, the Advancedmode, lists all public properties.

Simple mode – the widget designer

The other way to setup the properties of a widget is by using the widget designer, which is called Simplemode. Not all build-in widgets have widget designers. In the widget designer, you can create any desired user interface to make widget setup more user-friendly.

To open and use the widget designer:

In Sitefinity CMS backend, open for editing the page that contains the widget.

Click the Editbutton in the upper-right corner of the widget.

The widget designer appears. If the widget does not have a designer, the advanced configuration mode of the widget appears. The advanced mode contains an editable list of all public widget properties.

To switch between Simpleand Advancedmodes, use the button in the lower-right corner of the widget.

Technical overview

With Sitefinity CMS, you can work with the widget designer framework, based on client technologies like HTML, JavaScript, AngularJS, and Bootstrap. You can also benefit from a library of reusable client components.

А widget designer is an AngularJs module, in which each view has an AngularJs controller. By default, Sitefinity CMS exposes all public properties available in the widget controller, so they can be edited through the widget’s designer. All of these properties are available in $scope.properties of the AngularJs controller. When you edit any of these properties and save the designer, your changes are persisted in the database. Using $scope.properties enables you to bind properties of the widget directly in your designer view template without writing any additional code. The property service object enables you to get all widget controller properties and use them in the widget designer controller.

Controllers are separate components, so can be easily reused between views.

For more information, see AngularJs and  AngularJs Scopes.

Widget designers load a predefined AngularJs controller that handles populating and saving of widget properties through the designer. If you want to modify this default AngularJs controller, you can extend the designer with additional client logic. For more information, see Extend default widget designers.

When working with or extending default widget designers and your designer views use only client components:

The JSON file with scripts registration is automatically generated.

The JavaScript file with all Angular dependencies is automatically generated.

If no other designer views with explicitly set priority exists, the priority of the designer view is set to 1.

NOTE: If you have JSON or JavaScript files that match the naming conventions, even if these files are empty, automatic scripts registration or dependencies registration do not occur.

For more information, see Client components.