LinkedIn
Copied!

Table of Contents

Configuring field behavior

Applicable to Cosmos React applications

Ensure that users complete the fields that are relevant to their case by defining the conditions that govern the fields' behavior. Depending on your business needs, you can mark fields as required, disable them under certain circumstances, or hide them completely.

For example, in a loan application, you can mark the fields that contain the name and address of the applicant as required. In this way, you ensure that the user who completes the form does not skip information that is crucial to process the case successfully.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.

  2. On the User interface tab, click the column-based view that you want to edit.

  3. In the Edit view section, click the Configure icon next to the field whose behavior you want to change.

  4. In the Edit field dialog box, in the Conditions section, define the target behavior of the field:

    1. In the Required list, specify whether the field must be completed by the user.

    2. In the Disable list, specify when the field is visible but not available to users.

    3. In the Visibility list, define when the form should display the field.

    You can use conditional logic to define the behavior of a field. Select Custom condition, and then use the builder tool to create a conditional phrase. For more information, see Using conditional logic in Cosmos React.
  5. In the Edit field dialog box, click Save.

Adding text to a field

Applicable to Cosmos React applications

Ensure that users fill in the forms in an application correctly by supplying brief instructions. By using labels, helper text, and placeholders, you define what kind of input goes into each control, which reduces the time that is required to fill in a form.

For example, a helper text might clarify differences in available options depending on the context:

Sample helper text
An example of helper text that gives context to the options in a drop-down
                    list

Text prompts are also important for accessibility, because they provide users who rely on assistive technologies with screen-reader-friendly guidance.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.

  2. On the User interface tab, click the column-based view that you want to edit.

  3. In the Edit view section, click the Configure icon next to the field that you want to edit.

  4. In the Edit field dialog box, in the Field label field, enter the name that you want the application to display next to the field.

  5. In the Input settings section, define additional text for the field:

    • To specify the text that appears in the field when the field has no value assigned, in the Placeholder field, enter the text that you want to use.
    • To specify the text that appears below the field, in the Helper text field, enter the text that you want to use.
  6. In the Edit field dialog box, click Save.

Managing editing options for a field

Applicable to Cosmos React applications

Control the data in your application by defining the conditions in which users can input new information. You can configure a control to be fully editable, fully non-editable (read-only), or to switch to read-only mode under specific circumstances.

For example, when you create a new user account in an application, the text fields that contain the personal data of the customer are editable. During the next step, when the user has to confirm the data, you can configure the form to be read-only, and disable editing.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.

  2. On the User interface tab, click the column-based view that you want to edit.

  3. In the Edit view section, click the Configure icon next to the field whose behavior you want to change.

  4. In the Edit field dialog box, in the Edit mode list, define the target behavior of the field:

    • To copy edit settings from the parent view, select Auto.
    • To disable editing, select Read-only.
    • To disable editing under specific conditions, select Read-only (custom condition), and then click the Properties icon to define the logic in the condition builder.
    For more information on conditional logic, see Using conditional logic in Cosmos React.
  5. In the Edit field dialog box, click Save.

Did you find this content helpful?

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.