Skip to content

Form#

formIcon

Overview#

The Form widget displays a set of fields that can be used to collect inputs or display data. An example of a UI Page is shown below, where a Form widget is used to collect a Barcode.

formExample

General Steps#

To use the Form widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Form from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image. You can also select the navigation mode behavior: open a new page, replace the current page, or none.

formGeneral

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color, Font, Font Size, Font Color, and Horizontal Alignment. These styles will act as defaults for all fields unless further customization is applied to any specific field.

    formStyle

  2. In the Fields tab, configure the properties to be displayed in the widget. After adding a new field, specify:

    • Name - This will be the unique identifier of the field and the text displayed in the Form.
    • Value Units - Optional units to be displayed alongside the value in the Form (e.g., kg, cm, etc.).
    • Value Type - Select the type of value from the available options (e.g., entity type, integer, reference type, among others).
    • Is Visible - Determines if the field is visible in the Form. This option is set to true by default.
    • Is Read-Only - Determines if the field is read-only, meaning it cannot be edited. This option is set to true by default.
    • Is Enabled - Determines if the field is enabled for user interaction. This option is set to false by default.
    • Is Required - Specifies if the field is mandatory and must be filled out by the user. This option is set to false by default.

    The Style properties configured in step 1 will be applied to all the fields in the Form by default. However, you can also customize the Style of each label in this wizard by specifying:

    • Label Font
    • Label Font Size
    • Label Font Color
    • Label Horizontal Alignment

    If a field has the Is Read Only toggle button set to true, there is also the option to configure the Value Font family, Font Size, Font Color, and Horizontal Alignment.

    Warning

    The styles configured in the Fields tab will override the ones defined in the Styles tab.

    formFields

  3. Optionally, define the Links between this widget and other elements of the UI Page.

    formLinks

  4. Select Save and Close to complete the widget configuration.

Real Use Case 1#

A Form field can be easily adapted to be used as an Entity lookup to help the you provide the correct entry.

  1. Configure the Fields tab by selecting the Type as ReferenceType, the ReferenceType as EntityType, and specify the ReferenceType name field. In this example, Resource was chosen.

  2. Optionally, use a Query if further filtering of the possible entities for selection is needed.

    form_use_case_example

  3. On the UI page, the form field will display as shown below:

    image-20210518141046284

Real Use Case 2#

If a Query includes parameters, these can be easily provided using, for example, a Form widget. Each parameter can be linked to a separate Form field. Here are some examples of the different possibilities depending on different Query parameter setups.

Query Parameter: Name#

For a Query parameter configured for an entity name, a string value must be passed to the query. This can be done in two ways:

  • String Name - Use a string field for free text user entry without needing a converter.
  • Selected Entity - Use a selected entity field as shown in previous example. In this case, use the Get Entity Name converter to transform the selected entity and retrieve the entity name, which is then supplied as a string.

Using the Selected Entity method, you should:

  1. Add a Query task in the UI Page Settings wizard. In this example, the Query task selected was the MaintenanceActivitiesForResourceViewQuery.

    form_to_query_parameter

  2. Link the entity Form field to the Query task configured in the previous step:

    form_to_query_parameter01

  3. Configure a converter for the link just created:

    form_to_query_parameter02

Query Parameter: Entity#

If the Query parameter is the entity itself, used the Any To Any Property converter. In this case, the Query expects the database entity ID (normally not known to the user) rather than the familiar entity name. The Any To Any Property converter retrieves the entity ID from a selected entity object, requiring a converter parameter to specify which property to retrieve. In this example, we want to retrieve the database entity ID and feed it to the Query.

  1. Add in the page properties an additional string property with value "Id":

    form_to_query_entity_parameter

  2. Link the entity Form field to the Query task:

    form_to_query_entity_parameter01

  3. Configure the Any To Any Property converter using the Key Property Id for the link just created:

    form_to_query_entity_parameter02