Add predefined styles

When you create your custom widget, you can use a CssClass property to set different CSS classes that change your widget’s appearance on different pages. Most of the built-in widgets have this property. You can set this property value in two ways. The first one is to enter it as an input value; the second one is by selecting one of several predefined values in a dropdown.

In order to have those predefined values for your custom widget, you first need to add them. Your custom widget’s designer has a designerview-simple.js file. For more information, see Create custom designer views. 

You need to set the predefined classes per widget template as a value to the designer AngularJS module. The following example demonstrates what format to use:

In the code above:

• value is the name of your CSS class
• title is the title for the class that is displayed in the dropdown menu in the widget designer

CSS styles are grouped by the name of the view where their style can be applied.
In the example above you have two views – List and Details. They have different set of styles.

NOTE: When you select a value from this dropdown menu, a class with the same name is applied to the upper element defined in the particular widget view. If you want to apply this style to another element, you can edit the template for this view and move the style binding to it using the following code: <div class="@Model.CssClass">