Approve/Reject Buttons with Multiple Validation Rules

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

Also display a comments field. The number of characters in the comments field must not exceed 100 characters, regardless of the button clicked. Additionally, the user must enter comments if she clicks "Reject" (comments are required in this case).

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.
  • We recommend that you go through the Approve/Reject Buttons with Conditional Requiredness recipe before working on this one.

Expression

=load(
  local!comment,
  local!hasApproved,
  a!formLayout(
    label: "SAIL Example: Approve Reject Buttons with Multiple Validation Rules",
    firstColumnContents: {
      with(
        local!commentIsValid: if(len(local!comment)<=100, true, false),
        a!paragraphField(
          label: "Comments",
          instructions: "Comments must have no more than 100 characters, regardless of the button clicked. Comments are required if rejecting.",
          value: local!comment,
          saveInto: local!comment,
          required: local!commentIsValid,
          requiredMessage: "You must enter comments when you reject",
          validations: if(local!commentIsValid, "", "Comments must have no more than 100 characters"),
          validationGroup: if(local!commentIsValid, "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. Enter more than 100 characters as comments, and click "Reject". Click "Approve'. You shouldn't be able to submit in either case.
  3. 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