Table of Contents

Creating a UI component parameter

What are UI component parameters ?

As UI components are isolated and do not directly depend on a Datasource, parameters allow them to receive the data they need to operate. It is their parent UI view or UI component that provides them.

Parameters can either be one-way or two-way bound :

  • One-way bound parameters can only be displayed or used in calculations without being modified.
    If a UI component changes the value of a one-way bound parameter, it will have no effect on the value of the element that is passed as a parameter in the parent UI view or UI component.
  • Two-way bound parameters can be modified by the UI component and those changes are propagated to the element that is passed as a parameter in the parent UI view or UI component.

Creating a UI component parameter

When editing a UI component, you can modify or create parameters by clicking on the Parameters tab.

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

Name

This is the name of the parameter which will be used in the UI component template or the code of a method. It must use camel case like method parameters. However, when used in the UI template or in the code of a method, its name will be in pascal case.

.NET data type

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

Default value

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

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

By default, the parameter 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 parameter data type is considered valid.
The this keyword of the executed code represents the ViewModel of the UI component.

Binding mode

This value will determine whether the value of the parameter can be changed by the UI component and be propagated to the element bound to the parameter in the parent UI view or UI component.

Description

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

Module name

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

Documentation

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

Using UI component parameters

Binding in the template

Parameters can be accessed in UI component templates using the @Parameters.MyParameterName 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 parameter value is : @Parameters.MyParameter
</text>

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

Example for component attribute value :

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

In this example, when the MyBooleanParameter parameter has a value of true, a date input will be displayed.
The date input will have a label corresponding to the MyDateLabel parameter value.
When the user will change the value of the input, it will update the value of the MyDateParameter parameter. If the parameter is two-way bound, this will also update the value of the element that was passed as a parameter on the parent UI view or UI component.

UI component code (computeds, methods)

Parameters can be accessed in UI component code (computeds, methods).

They can be called using the Parameters.MyParameterName syntax.

Example :

if (Parameters.MyBooleanParameter || Parameters.MyIntegerParameter > 0)
{
    Parameters.MyDateParameter = DateTime.Now;
}

In this example, if the MyBooleanParameter value is true or the MyIntegerParameter value is greater than zero, the MyDateParameter value will be set to the current date and time.