Adding user-configurable properties

Unless your component is really simple, you might want it to have some user configurable properties. Adding such properties to a component is as simple as adding public properties to the component.

Unless your component is really simple, you might want it to have some user configurable properties. Adding such properties to a component is as simple as adding public properties to the component.

Here's an example with a string property, which will allow the user to type in a string.

[EditorBrowsable]
[Parameter]
[Description("Type a string, any string!")]
[Category("General")]
[DisplayName("String")]
public string StringProperty { get; set; }

The first two attributes, [EditorBrowsable] and [Parameter] are required. The former tells Veva that this property should be shown in the UI for the user to fill it in, the latter is required for Blazor to populate the property dynamically.

The other attributes shown in this example, [DisplayName], [Category] and [Description] are optional. The [DisplayName] will change the label of the property. If it's omitted, the actual name of the property will be shown as a label (StringProperty in this case). The value of the [Description] attribute will be shown as a help-text/hint below the property. The [Category] attribute can be used to group properties under a common "category" name, which is useful if your component has a lot of properties.

Furthermore, you can use the [DefaultValue()] attribute to provide a default value for the property, which will then also be shown in the UI by default. When using the DefaultValue attribute, we also recommend that you use Auto-Property initializers to assign a value to the property, like so:

[DefaultValue("This the default value")]
public string StringProperty { get; set; } = "This the default value";

Controlling the UI editor type

Veva automatically recognizes the most common simple types in C# and displays the correct UI editor, i.e. a string property will be shown as a single-line input box for text, a boolean property will be shown as a checkbox, enums will be shown as a dropdown, flags-enums as multi-select dropdowns etc.

You can explicitly control which editor is used by using the [Editor()] attribute. Here's an example of a string property on a component which will use the built-in CSS class selector, instead of a simple input box for string entry:

[EditorBrowsable]
[DisplayName("Class")]
[Category("Design")]
[Parameter]
[Editor("css-class-editor", "")]
[EditorArgument("cssScope", "a")]
public string Class { get; set; }

In this example, we are also using the [EditorArgument()] attribute to pass data to the editor. In this case we are passing the cssScope argument which tells the CSS class selector which CSS classes to display.

The mapping between the types in the C# code and which editor is shown is handled by the StandardPropertyEditorResolver which is an implementation of the IPropertyEditorResolver interface. In very advanced scenarios, you can actually implement your own property editor resolver. For more information, check this out: Developer reference:Writing Extensions:Misc - IPropertyEditorResolver

How do I use the property in the component?

That's simple - just reference it by it's name in the code or razor markup:

Now, run the project again and go to the page on which you added the custom component.  Click it and you should see that Veva no longer reports the component with no configurable properties - you should see a UI where you can specify a value for the StringProperty and also a dropdown to select CSS classes.