How to configure UI Fields

Modified on Wed, 10 Apr 2024 at 11:59 AM

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.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article