Creating a UI view field

What are UI view fields ?

A UI view has properties which are of simple types (string, number, etc.).
UI view fields are object instances in the UI view scope and they can be of any C# type.

Their main goal is to provide an extension to the UI view properties and therefore be used in UI view binding, actions, rules and methods.

Warning

You should not use Fields to store data of type SystemEnvironment.Window because Fields are reactive properties of viewModel and will be not recognized as the original window by the web browser. You could use ContextData to store the window data instead.

How to create a UI view field

When editing a UI view, you can modify or create fields by clicking on the Fields tab.

You can then see a list of existing fields for the edited UI view, and you can create a new one by clicking on the + button of the toolbar.

Name

This is the name of the field which will be used in the UI view template or the code of an action / rule / method.

.NET data type

This is the C# type used for the field. When editing some code and using the field, this is the type which will be used for intellisense.

C# default value

This optional property allows you to initialize the field value to a C# value.

For example, you can initialize an int field with the value 123, or a string field with the value "Example string".

By default, the field will be initialized with the C# language default value defined for the .NET data type (ex: false for a bool, 0 for an int).

Note

Any C# expression corresponding to the field data type is considered valid.
The this keyword of the executed code represents the view model of the UI view.

Description

This optional parameter is the short description of what the field will be used for. It will be displayed by the code editor intellisense.

Module name

This is the module to which the field will be associated. By default this is the same module as the UI view.

Documentation

This optional parameter is the complementary documentation for the field. It will be displayed by the code editor intellisense.

How to use UI view fields

Binding in the template

Fields can be accessed in UI view templates using the @Fields.MyFieldName syntax, either for displaying text or providing a value to a component attribute.

Example for direct text display :

<text>
This is some text, and the field value is : @Fields.MyField
</text>

In this example, consider we have a MyField field of type string which has a value of lorem ipsum.
The rendered text will be This is some text, and the field value is : lorem ipsum.

Example for component attribute value :

<if condition="@Fields.MyBooleanField">
    <!-- The following node will be displayed if MyBooleanField is true -->
    <input-date value="@Fields.MyDateField" label="@Fields.MyDateLabel" />
</if>

In this example, when the MyBooleanField field has a value of true, a date input will be displayed.
The date input will have a label corresponding to the MyDateLabel field value.
Finally, when the user will change the value of the input, it will update the value of the MyDateField field.

UI view code (actions, event rules, methods)

Fields can be accessed in UI view code (action, event rule, or method).

They can be called using the Fields.MyFieldName syntax.

Example :

if (Fields.MyBooleanField || Fields.MyIntegerField > 0)
{
    Fields.MyDateField = DateTime.Now;
}

In this example, if the MyBooleanField value is true or the MyIntegerField value is greater than zero, the MyDateField value will be set to the current date and time.

Table of Contents