Feather: Create custom designer views
All Feather widgets have designers where you configure widget properties. By default, Feather widgets have two designer modes – simple and advanced. Simple mode is the simpler way to configure a widget. In the advanced mode, you configure individual properties of the widget. You can also add more custom views to the widget designer by adding new template files. The following tutorial demonstrates how to create new custom designer view.
Create the template file
To create a custom view for your widget designer, you need to create a new template file. The file name of this template must follow the convention below:
~/Mvc/Views/[WidgetName]/DesignerView.[ViewName].cshtml
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.
The following image illustrates the folder structure of a custom designer view for a ContentBlock widget:
Create the template file content
EXAMPLE: You want to add simple text input in the new view of the designer and to allow the user to change the content of the Content Block through this new input. To achieve this, you need to paste the following code line in the file:
<input ng-model="properties.Content.PropertyValue" type="text" />
This way, you create a binding to a widget property of the Content Block widget named Content.
When you run your project and open the widget designer, a new view with a text field appears. When you type in a value and save it, this value is displayed inside the Content Block widget.
The widget designer is an AngularJs module where each view has an AngularJs controller. By default, Feather 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. Feather takes care that if you edit any of these properties and save the designer, your changes will be 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.
For more information, see AngularJs and AngularJs Scopes.
The Feather designers load a predefine AngularJs controller that handles the populating and the 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 Feather: Extend designers with client logic.
Result
When you open your project in a browser, you can drag and drop the ContentBlock widget on any page. In the widget designer, you can see the button for MyView custom view:
When you click on the MyView button, you see your custom widget designer view:
Make your designer view the default one
By default, the new designer view you created is not the default one you see when you open the designer. To change that, you need to create a ~/Mvc/Views/[WidgetName]/DesignerView.[ViewName].json file. This file is used both for specifying the priority of your designer view and the custom component and script dependencies it has.
For details on script dependencies, see Feather: Extend designers with client logic.
To make your designer view the default one, you set its priority to 1 (the highest priority). Your file should look similar to this: