Form#

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.

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.

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.

   

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.).
   • Show Label - Determines if the Name property will be shown in the widget. This option is set to true by default.
   • 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 false by default.
   • Is Enabled - Determines if the field is enabled for user interaction. This option is set to true by default.
   • Is Barcode Scanning Enabled - Determines if the Smart Barcode Scanning feature is enabled for the widget. This option is set to true by default.
   • Barcode Field Name - This will be the unique identifier of the field when using the Smart Barcode Scanning feature. This field is only shown if you have enabled the option above.
   • 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.

   

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

   

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.

   

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

   

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.

   

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

   

3. Configure a converter for the link just created:

   

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":

   

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

   

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

   

Barcode Real Use Case#

The following scenario demonstrates how to create a Form widget in a UI Page that can be automatically populated using a barcode scanner.

1. In the Administration menu, navigate to the Configuration entity and configure the value in the /Cmf/Guis/Configuration/Common/BarcodeInputLabelSpecification/ entry to GS1.

   

   Info

   For more information, see Smart Barcode Scanning.

2. Go to the LabelSpecificationField Generic Table and add the fields that should be extracted from the barcode. Each field must reference a label prefix and the corresponding MES Target Field.

   

3. In this example, the following fields will be used:

   

4. In an empty UI Page, add a Form widget and define the required fields. Below are examples of how to configure each form field:

   Material NameMaterial TypeMaterial Product

   

   

   

   Note

   The Barcode Field Name must match with the Target Field defined in the LabelSpecificationField Generic Table.

5. With everything in place, you can now scan a barcode. The system will automatically parse its contents and populate the Form fields with the corresponding values.