Skip to main content

Show multi-level approval process using the stepper feature in a list block

In this article, we'll walk through the process of configuring a multi-level approval process and displaying the progress of the approval in a list block using the stepper feature. We'll show you how to configure the standard approval workflow action and also how to handle being able to review the detail and either accept or reject the approval.

ListStepper.png

Process

  1. Department heads or managers submit a new vacancy.
  2. Workflow sets relevant properties to show the status and sends an approval to HR.
  3. The HR department reviews the new vacancy to make sure it's within policy.
  4. Workflow sets the relevant properties to show the change in status and if approved, sends the CEO a task to review for the final sign-off.
  5. The CEO reviews the details and either approves or rejects the vacancy.
  6. Workflow sets the relevant properties to show the change in status if 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, 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 achieve this process, we need to add a few new properties to the Vacancy model:

Properties.png

Add a new page

Create a new page called 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. You can either set the workflow to trigger when submitting the Post a vacancy form or to catch all new vacancies added, perhaps by an external system, when any new data is added to the Vacancy model, set the workflow to trigger when creating a new instance.

Set the trigger to either

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

Now to make the stepper display the correct step, the workflow must set the step counter property value, and to make sure the correct chip shows on the list item, the workflow must set all of 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 need to retrieve the person who is going to be the approver, so you need to 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 let the creator know.
  • 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 action the approval after a period of 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 rejected it.
  • Impact on workflow: Non-bocking (workflow continues on task creation)
  • Task actions: Remove 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 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 requestor. 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 another way you can perform an approval to show the approver more detail. For this, you'll need to add three more pages with a form on each.

Vacancy detail page

First, you need a page to show the detail of the vacancy so the approver can review the details. This page is used as the primary action on the task workflow action. 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 page with a form so that the CEO can write any 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 but we've kept this simple for this demonstration.

CEOApproveNotes.png

Next, you create a workflow triggered by the submission of this form and add the set property workflow actions like we did previously.

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. Note, you'll need to put a Retrieve information action before the Send notification action so you can pick the triggering user.

Rejection form and workflow

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

CEORejectNotes.png

Next, you create a workflow triggered by the submission of this form and add the set property workflow actions like we did previously.

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. 

Sections in this article