Creating a UI view Computed

What are UI view computeds ?

Computeds can be used wherever fields can be used. The difference between the two is in the reading and writing of their value. A field contains a value directly whereas a Computed gets its value from an expression (the getter) and is reactive. A computed can be read-only (a getter but no setter) or read/write (a getter and a setter).

How to create a UI view Computed

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

You can then see a list of existing Computeds 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 Computed which will be used in the UI view template or the code of an action / rule / method.

DotNet data type

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

Getter

This is the C# code called to get the value of the Computed. The code must return a value.

Setter

This is the C# code called to set the value of the Computed. The variable value representing the assigned value is available in this code. The setter is optional. When it is empty, the Computed is read-only.

Description

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

Module name

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

Documentation

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

How to use UI view Computeds

Binding in the template

Computeds can be accessed in UI view templates using the @Computeds.MyComputedName 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 Computed value is : @Computeds.MyComputed
</text>

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

Example for component attribute value :

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

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

UI view code (actions, event rules, methods)

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

They can be called using the Computeds.MyComputedName syntax.

Example :

if (Computeds.MyBooleanComputed || Computeds.MyIntegerComputed > 0)
{
    Computeds.MyDateComputed = DateTime.Now;
}

In this example, if the MyBooleanComputed value is true or the MyIntegerComputed value is greater than zero, the MyDateComputed value will be set to the current date and time.

Examples of use

Displaying in the template the number of records in the Datasource

In a UI view, create a Computed with the following properties:

Name = Count
.NET data type = int
Getter = return Datasource.Count;

In your template, add a node to display the Computed:

<text>Item count: @Computeds.Count</text>

The record count is displayed and is reactive (it updates automatically when items are added or deleted). With a simple Field, the update should have been triggered manually on all events that have an impact on the records of the DataSource.

Reacting to a tab change in the template

In a UI view, create two fields with the following properties:

Name = Message
.NET data type = string

Name = TabIndex
.NET data type = int

Create a Computed with the following properties:

Name = TabIndex
.NET data type = int
Getter = return Fields.TabIndex;
Setter = Fields.TabIndex = value;
Fields.Message += $"Tab {Fields.TabIndex} selected\n";

In your template, add a tab component and a text:

<tabs selected-index="@Computeds.TabIndex">
    <tab-item caption="Tab 1">
    </tab-item>
    <tab-item caption="Tab 2">
    </tab-item>
    <tab-item caption="Tab 3">
    </tab-item>
</tabs>
<text>@Fields.Message</text>

Here, the use of a Computed allows to execute code (the update of the message) when the selected tab changes.

Frequently asked questions

When to use a Computed instead of a field?

When the value is an expression and you want the value to be updated automatically when one of the variables used in the expression changes its value
When you want to execute code when the value is modified

When to use a Computed instead of a property with a getter?

The answer is not obvious but the following elements should help you make the right choice :

Computeds are created on the view model and properties on the model.
If your expression only uses DataSourceCurrent (the model current instance), that's probably a clue that it should be a property.
A property will be usable in datagrid and form-field components.
Properties data type is limited to Neos types.
Computeds data type can be any transpiled .NET data type.

Table of Contents