How to configure UI Fields

Whenever you wish to display a value in a field based on certain values entered in other fields, and you desire to exhibit this on the UI in real-time without saving the record in objects, UI Fields employ the merge text functionality.

Merge Text: Merge text is a key feature of the noKodr application, enabling users to showcase field values on the UI. Depending on the field data type, users can perform mathematical operations . For instance, if you aim to display a calculated total price based on the quantity and unit price entered by the user on a sales order form, and you wish to dynamically display this on the UI without initially saving the record in the database, you can accomplish this using the UI fields of the noKodr application.

For better comprehension, consider the following example: Upon entering the first name and last name, if you desire to display the full name on the UI by concatenating these two fields without saving the record first to preview the appearance, you can utilize the UI field for this purpose.

Below are the steps on how to use the UI field in your noKodr layout

1. Open the created layout.
2. On the left-hand side, click on "Model."
3. Create a new Model by clicking on "+".
4. Select the desired object, for example, "Contacts," and create a single record model.
5. On the left-hand side, click on "UI Fields."
6. Click on "New."
7. Provide a name for this field.
8. Click on the Gear icon to provide the merge text. This merge text will display the value of the field which you will add in the merge text. For example, provide the First name & Last Name as merge text.
9. Click on the source type and select "Model," as we need to obtain the first name and last name for concatenation
10. Select the created model.
11. Choose the field whose value you want to display, for example, "First Name."
12. Click on "+" to add the merge text.
13. Following similar steps, add the last name as well
14. Click on "Save" and assign the created model to the form component.
15. Save and run the layout to preview the applied changes.