Approve/Reject Buttons with Conditional Requiredness

See SAIL Recipes for information about how to work through recipes and adapt them to your application.

Goal

Present two buttons to the end user called "Approve" and "Reject" and only make the comments field required if the user clicks "Reject."

Note:

  • This design pattern is not recommended for offline interfaces because the conditional requiredness of a field based on user interaction requires a connection to the server.
  • validationGroup can have any string that you define. See also: Using Validation Groups

Expression

=load(
  local!comments,
  local!hasApproved,
  a!formLayout(
    label: "SAIL Example: Approve Reject Buttons with Conditional Requiredness",
    firstColumnContents: {
      a!paragraphField(
        label: "Comments",
        instructions: "This also shows an example of a custom required message",
        value: local!comments,
        saveInto: local!comments,
        required: true,
        requiredMessage: "You must enter comments when you reject",
        validationGroup: "reject"
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidgetSubmit(
          label: "Approve",
          value: true,
          saveInto: local!hasApproved
        ),
        a!buttonWidgetSubmit(
          label: "Reject",
          value: false,
          saveInto: local!hasApproved,
          validationGroup: "reject"
        )
      }
    )
  )
)

Test it out

  1. Click "Reject" without entering any comments. Notice that the custom required message that we configured using the requiredMessage parameter shows up rather than the generic product message.
  2. Click Approve without entering any comments.

To write your data to process

  1. Save your interface as sailRecipe
  2. Create interface inputs: comments (Text), hasApproved (Boolean)
  3. Remove the load() function
  4. Delete local variables: local!comments, local!hasApproved
  5. In your expression, replace:
    • local!comments with ri!comments
    • local!hasApproved with ri!hasApproved
  6. In your process model, on the process start form or forms tab of an activity, enter the name of your interface in the search box and select it
  7. Click Yes when the process modeler asks, "Do you want to import the interface inputs?"
    • On a task form, this will create create node inputs
    • On a start form, this will create parameterized process variables
FEEDBACK