Skip to main content

Create a multi-level approval process with a Stepper in a list block

👉 Drag me

You can use this guide to configure a multi-level approval process and display its progress in a list block using the Stepper feature. You'll learn how to configure standard approval workflows, track status using chips and a Stepper, and give approvers a way to review details and approve or reject requests.

ListStepper.png

Process

  1. Department heads or managers submit a new vacancy.
  2. The workflow sets relevant properties to display the status and sends an approval to HR.
  3. The HR department reviews the new vacancy to make sure it's within policy.
  4. The workflow sets the relevant properties to display the change in status and, if approved, sends the CEO a task to review for final sign-off.
  5. The CEO reviews the details and either approves or rejects the vacancy.
  6. The workflow sets the relevant properties to display the change in status when the document is approved or rejected.
  7. Hiring managers can view the progress of their vacancy approval throughout the process.

Install the Job board template

For this example, you can install the Job Board template. We'll use the vacancy functionality added by the template as described in the section: Features for managers and recruiting teams. 

Add new properties to the Vacancy model

To enable this process, add the following properties to the Vacancy model:

Properties.png

Add a new page

Create a new page titled "Vacancy Approvals". See our knowledge base article, Add a new page.

Add a list block

Next, add a list block with the Text, Chips, Stepper, and Avatar/Icon/Image features. See our knowledge base article, Add a list block. You can use these settings:

  • Layouts: Row
  • Features:
    • Text:
      • Title: Title
      • Sub title: location
    • Chips:
      • Property:
        • Pending hr approval
        • Pending CEO approval
        • Approved
        • Rejected
      • Condition: is true
      • Text:
        • Awaiting HR approval
        • Awaiting CEO Approval
        • Approved
        • Rejected
    • Stepper:
      • Active step property: Step counter
      • Step ID:
        • 1
        • 2
        • 3
        • 4
      • Step title:
        • Vacancy submitted
        • Awaiting HR Approval
        • Awaiting CEO Approval
        • Approved
    • Avatar/icon/image:
      • Style: Avatar
      • Image property: Thumbnail

Add a workflow

Next, add a new workflow to the Vacancy model called "Approve new vacancy." See our knowledge base article, Create a workflow. Set the workflow to trigger when submitting the "Post a vacancy form" or when any new data is added to the Vacancy model, possibly by an external system. When new data is added to the Vacancy model, trigger the workflow upon creating a new instance.

Set the trigger to either

  • Form submissions: "Create new vacancy"
  • Changes to model data: "Create"

To display the correct step on the Stepper, the workflow must set the step counter property to the proper value. Additionally, to ensure the correct chip is shown in the list item, the workflow must set all the boolean properties.

Set property workflow action values

See our knowledge base article, Add a Set property workflow action.

Stepper

  • Target instance: Triggering vacancy
  • Target Property: Step counter
  • Base the value on:
    • A static value: 2

Booleans for the chips

HR:

  • Target instance: Triggering vacancy
  • Target Property: Pending hr approval
  • Base the value on:
    • A static value: is true

CEO:

  • Target instance: Triggering vacancy
  • Target Property: Pending ceo approval
  • Base the value on:
    • A static value: is false

Approved:

  • Target instance: Triggering vacancy
  • Target Property: Approved
  • Base the value on:
    • A static value: is false

Rejected:

  • Target instance: Triggering vacancy
  • Target Property: Rejected
  • Base the value on:
    • A static value: is false

HR Approval action

You'll need to identify the person who will be the approver, so you can add a 'Retrieve Info' workflow action. See our knowledge base article, Add a Retrieve information workflow action.

Add the approval workflow action with these settings:

  • Label: New vacancy approval
  • Approver: Retrieved user
  • Title: New vacancy approval
  • Notes: If the vacancy falls within budget, approve it. If it doesn't, reject it and notify the creator.
  • Task actions: You can include any secondary actions if you wish. See our knowledge base article, Add an Approval workflow action.
  • Task type: You can choose an existing one or create a new one here.
  • Due date and reminder: You can add a reminder if the approver doesn't take action on the approval after a specified time.

Approve branch

After you approve this, you want the workflow to set the new Stepper and Boolean values.

Stepper

  • Target instance: Triggering vacancy
  • Target Property: Step counter
  • Base the value on:
    • A static value: 3

Booleans for the chips

HR:

  • Target instance: Triggering vacancy
  • Target Property: Pending hr approval
  • Base the value on:
    • A static value: is false

CEO:

  • Target instance: Triggering vacancy
  • Target Property: Pending ceo approval
  • Base the value on:
    • A static value: is true

Approved:

  • Target instance: Triggering vacancy
  • Target Property: Approved
  • Base the value on:
    • A static value: is false

Rejected:

  • Target instance: Triggering vacancy
  • Target Property: Rejected
  • Base the value on:
    • A static value: is false

Retrieve information:

  • Retrieve from model: User
  • Label: User2
  • Conditions:
    • Property: Name
    • Criteria: is any of
    • Value: CEO name

Task:

  • Label: Send to CEO for approval
  • Assign to: Retrieved User2
  • Title: New vacancy approval
  • Notes: Review this vacancy request and either approve it or reject it.
  • Impact on workflow: Non-blocking (workflow continues on task creation)
  • Task actions: Remove the primary 'Mark as complete' action.
  • Primary action: Link to another page:
    • Link to page: CEO Vacancy Approval
    • Page instance ID: Triggering vacancy -id
  • Task type: You can use an existing one or create a new one.
  • Due date and reminder: Notify the assignee when created.

Reject branch

If you reject this, you want to set all the appropriate chips and reset the Stepper. You can also send a note to the requester. See our knowledge base article, Add a Send notification workflow action.

Stepper

  • Target instance: Triggering vacancy
  • Target Property: Step counter
  • Base the value on:
    • A static value: 0

Booleans for the chips

HR:

  • Target instance: Triggering vacancy
  • Target Property: Pending hr approval
  • Base the value on:
    • A static value: is false

CEO:

  • Target instance: Triggering vacancy
  • Target Property: Pending ceo approval
  • Base the value on:
    • A static value: is false

Approved:

  • Target instance: Triggering vacancy
  • Target Property: Approved
  • Base the value on:
    • A static value: is false

Rejected:

  • Target instance: Triggering vacancy
  • Target Property: Rejected
  • Base the value on:
    • A static value: is true

CEO approval process

You can use the approval workflow action, but we wanted to show you an alternative way to perform an approval, which provides the approver with more details. For this, you'll need to add three more pages with a form on each.

Vacancy detail page

First, you'll need a page to display the details of the vacancy so that the approver can review them. This page is selected in the primary action configuration in the task workflow. It opens when the approver selects the task on their Tasks page.

Add two action buttons to this page that open the other two pages, Edit & Approve and Reject.

CEOVacaApproval.png

Approval form and workflow

The page is a simple form that allows the CEO to write notes about the approval. The submit button is changed from the default label, SAVE, to APPROVE. See our knowledge base articles, Submission settings, and Edit submit button. You could also add the form to edit the vacancy details, or have the button open the edit detail page, and use that page to trigger the workflow. This guide shows a simplified example for demonstration purposes.

CEOApproveNotes.png

Next, you'll need to create a workflow triggered by the submission of this form and add the set property workflow actions, just as we did before.

Stepper

  • Target instance: Triggering vacancy
  • Target Property: Step counter
  • Base the value on:
    • A static value: 4

Booleans for the chips

HR:

  • Target instance: Triggering vacancy
  • Target Property: Pending hr approval
  • Base the value on:
    • A static value: is false

CEO:

  • Target instance: Triggering vacancy
  • Target Property: Pending ceo approval
  • Base the value on:
    • A static value: is false

Approved:

  • Target instance: Triggering vacancy
  • Target Property: Approved
  • Base the value on:
    • A static value: is true

Rejected:

  • Target instance: Triggering vacancy
  • Target Property: Rejected
  • Base the value on:
    • A static value: is false

You could also add an action to send a notification to the person who submitted the vacancy, but since the status on the page is updated, we'll leave this as is. Please note that you'll need to place a Retrieve information action before the Send notification action so that you can select the triggering user.

Rejection form and workflow

The reject form is similar to the Approval form but triggers a different workflow. You can also alter the default submit button for the form.

CEORejectNotes.png

Next, you'll need to create a workflow triggered by the submission of this form and add the set property workflow actions, just as we did before.

Stepper

  • Target instance: Triggering vacancy
  • Target Property: Step counter
  • Base the value on:
    • A static value: 0

Booleans for the chips

HR:

  • Target instance: Triggering vacancy
  • Target Property: Pending hr approval
  • Base the value on:
    • A static value: is false

CEO:

  • Target instance: Triggering vacancy
  • Target Property: Pending ceo approval
  • Base the value on:
    • A static value: is false

Approved:

  • Target instance: Triggering vacancy
  • Target Property: Approved
  • Base the value on:
    • A static value: is false

Rejected:

  • Target instance: Triggering vacancy
  • Target Property: Rejected
  • Base the value on:
    • A static value: is true

You could also add an action to send a notification to the person who submitted the vacancy, but since the status on the page is updated, we'll leave this as is.

You can add as many levels of approval as you want, but this was just a basic example to display the two different ways you can perform an approval. 

You can expand this setup to include additional approval levels or notifications as required. This guide demonstrates two standard methods for handling approval flows, both of which utilize workflow actions and custom pages.

Was this article helpful?

Help us improve our documentation

0 out of 0 found this helpful