Autogenerated widget property editors

The new widget editors allow you enhanced editing experience for your custom widgets out of the box. Now you are able to:

• Edit the properties through more user-friendly type specific field editors;
  
• Group them in section and views;
  
• Validate the user input;
  
• Specify some of the fields to be displayed conditionally depending on your custom requirements.
  

With the new UI property editors, we provide enhanced user experience for editing custom MVC widgets out of the box. Now by default we recognize the types of public properties that you define inside your widget controllers and models and we autogenerate editor for them with the appropriate fields. For example, now you get enhanced field editors for the following property types without further development from your side:

• Boolean
  Displayed as Yes/No option
• Enum
  Displayed as dropdown selector with all available options for the enum
• Int, double
  Displayed as number field
• DateTime
  Displayed with date time picker

All other types will still be displayed through text field where you can type your values.

In addition you can easily enable validation for the properties of your fields by using the attributes provided in System.ComponentModel.DataAnnotations Namespace with your properties. We support the following attributes:

• EmailAddressAttribute    
  Validates an email address.
• MaxLengthAttribute    
  Specifies the maximum length of array or string data allowed in a property.
• MinLengthAttribute    
  Specifies the minimum length of array or string data allowed in a property.
• RangeAttribute    
  Specifies the numeric range constraints for the value of a data field.
• RegularExpressionAttribute    
  Specifies that a data field value in ASP.NET Dynamic Data must match the specified regular expression.
• RequiredAttribute    
  Specifies that a data field value is required.
• StringLengthAttribute    
  Specifies the minimum and maximum length of characters that are allowed in a data field.
• UrlAttribute
  Provides URL validation.

You can specify where all properties are displayed. We support two levels of diversion:

By views

You can specify if the properties will be displayed in the main view (basic) or in the advanced view. If you don’t specify anything, we will place the property directly in your basic view. This way you can separate the data that needs more technology-specific knowledge or data that is rarely edited, in the advanced view.

To move some property in advanced view, add the following attribute above its declaration:

[Category("Advanced")]
public bool AdvancedPropertyWithoutSection { get; set; }

This view can be accessed by the advanced button in the upper right corner of the property editor dialog:
  

By section

This will group the properties in different section inside the same screen and provide expand/collapse capability. You can specify the section title:

[ContentSection("Separate collapsed section title.")]
public bool SeparateSectionProperty { get; set; }


By using the ConditionalVisibilityAttribute, you can hide or display some fields, depending on the value of a related property. 
The attribute takes a parameter specified in JSON syntax and recognizes three objects - conditions, skipValidation, and operator. 

The conditions for showing or hiding an attribute are set in a conditions array. The array includes the fieldName key with a string value that is equal to a controller property, the operator key with one of the RuleConditionOperator values (Equals, NotEquals, Contains, NotContains), and the value key with the string value of the controller property.

A sample example for that functionality would be the following:

[ConditionalVisibilityAttribute("{\"conditions\":[{\"fieldName\":\"Title\",\"operator\":\"Equals\",\"value\":
\"My custom title\"}]}")]
public bool MyProperty { get; set; }

This adds a rule that shows the field MyProperty, only if the Title property from the controller is equal to My custom title.

The RuleOperator type of operator uses the operator key and supports the values and and or that are applied to the conditions array.

In the sample widget below, you can see an example of how a Boolean property is displayed, only if another Boolean property is set to true.
The skipValidation Boolean skips the validation for this property on the client and server side.

Model

Controller

In some scenarios, you may want to work with the property value by using it with the exact value with which it is persisted and see all the property values in one place no matter if they are in advanced or basic view of the editor. We allow you to do this by using our clipboard functionality. When you press CTRL+ALT+C all property names and values persisted for the widget will be copied to the clipboard. Then you can paste it to text editor of your choosing. 

You can also paste prepared values in the editor by using CTRL+ALT+V. In this case the values will still be validated, just like if they are typed directly in the field editors. For example, if you have two properties: CustomerName, CustomerAge you can paste the following input when you focus the widget editor view and their fields will be set with your input:

{"CustomerName":"MyName","CustomerAge":"5"}

NOTE: This feature is available only for Chrome browser

You can further customize the appearance of the fields with the following attributes:

• Browsable 
  
• DisplayName
  
• TypeConverter
  
  For more information, see Edit property values displayed inside the property editor