Has your team had trouble remembering any process in Rock? Use progress bars to help your team know where they are in the process.

Before we get started, I just wanted to give a huge hat tip for Michael Allen and Chris Rea for answering questions lava questions in the Rock Community! These guys are true Rock Stars!

Problem:

We're currently restructuring our Volunteer Onboarding Process at LCBC Church. As we are going through building out our new Volunteer Onboarding Process, we realized that people have a hard time remembering the actual process. Can anyone relate?

Solution:

We created a progress bar to help our staff know where their volunteers are in our Volunteer Onboarding Process.

As you can see, we have divided our Volunteer Onboarding Process into 6 steps: Interest Form, Profile Check, Test Drive, Application & Clearances, Ministry Training and Celebration.

In the previous process, we were doing some form of all of these steps, but we wanted to create a global process with clear on-ramps and off-ramps for volunteers in any ministry area.

However, this recipe will allow you to create a progress bar for any process you have in Rock.

How to Create a Progress Bar

If you're not very technical, you may think you need to know a lot of HTML or CSS to build a cool progress bar like this. The good news you don't need to be! These styles are already built into Rock. Here's where you can steal the HTML for your progress bar:

<div class="wizard">
     <div class="wizard-item active">
            <div class="wizard-item-icon">
                <i class="fa fa-edit"></i>
            </div>
            <div class="wizard-item-label">
                Interest Form
            </div>
        </div>
    <div class="wizard-item">
        <div class="wizard-item-icon">
           <i class="fa fa-user-check"></i>
       </div>
       <div class="wizard-item-label">
           Profile Check
       </div>
    </div>
    <div class="wizard-item">
        <div class="wizard-item-icon">
            <i class="fa fa-stopwatch"></i>
        </div>
        <div class="wizard-item-label">
            Test Drive
        </div>
    </div>
    <div class="wizard-item">
        <div class="wizard-item-icon">
           <i class="fa fa-shield"></i>
       </div>
       <div class="wizard-item-label">
           Application & Clearances
       </div>
   </div>
   
   <div class="wizard-item">
       <div class="wizard-item-icon">
           <i class="fa fa-seedling"></i>
       </div>
       <div class="wizard-item-label">
           Ministry Training
       </div>
   </div>
   
   <div class="wizard-item">
       <div class="wizard-item-icon">
           <i class="fa fa-gift"></i>
       </div>
       <div class="wizard-item-label">
           Celebration
       </div>
   </div>
</div>

Now you're ready to go construct your progress bar on any page. For this example, we're going to use a Connection Request as part of our Volunteer Onboarding Process.

Create an HTML Content Block

We're going to start by creating an HTML block and moving it to the top of the page.

1. Turn on Page Zones

2. Select the Main Zone

3. Add an HTML Content block

4. Turn on Block Configuration

5. Edit the New HTML Content block

6. Paste the HTML code from above

Voila! We have a brand new progress bar at the top of our Connection Requests page. Here's what this visually looks like on the Connection Request page.

Now we need to modify the HTML Content block to reflect the steps we want to measure in our process. 

Write Lava

We want the icons to dynamically change to an active state when volunteers complete different steps of the Volunteer Onboarding Process, to show the progress of where they are at in the process.

To do this, we need the powerhouse templating language that Rock is built on - lava.

It's important to note, we are showing progress in the process via two ways: Activities and Person Attributes. Below, we'll show you the Lava to pull in Connection Request Activities and later on we'll show you how the Lava to pull in Person Attributes.

Using Lava to Pull Connection Request Activities

1. Assign variables for each step in the process

{% assign ProfileCheckCompleted = 'No' %}
{% assign TestDriven = 'No' %}
{% assign ApplicationCompleted = 'No' %}
{% assign MinistryTraining = 'No' %}
{% assign Celebration = 'No' %}
{% assign FollowUp = 'No' %}

2. Use If/Else statements to point lava to the activities we're using the change the icon state

{% for activity in Context.ConnectionRequest.ConnectionRequestActivities %}
    {% if activity.ConnectionActivityType.Name == "Profile Check" %}
        {% assign ProfileCheckCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Test Driven" %}
        {% assign TestDriven = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Ministry Training" %}
        {% assign MinistryTrainingCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Celebration" %}
        {% assign CelebrationCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Follow Up" %}
        {% assign FollowUpCompleted = 'Yes' %}
    {% endif %}
{% endfor %}

3. Add If/Else statements into the HTML stating: IF activity == 'Yes', assign the icon ACTIVE

<div class="wizard-item {% if ProfileCheckCompleted == 'Yes' %}active{% endif %}">
       <div class="wizard-item-icon">
           <i class="fa fa-user-check"></i>
       </div>
       <div class="wizard-item-label">
           Profile Check
       </div>
   </div>
   <div class="wizard-item {% if TestDriven == 'Yes' %}active{% endif %}">
        <div class="wizard-item-icon">
            <i class="fa fa-steering-wheel"></i>
        </div>
        <div class="wizard-item-label">
            Test Drive
        </div>
    </div>
...

Now, let's say we were to just copy and paste this code into the HTML block. Let's test out our code. I'll add an activity to the Connection Request and test our Progress Bar.

NO RESULTS?! Why didn't anything happen?

It's all because of this piece of code here:

{% for activity in Context.ConnectionRequest.ConnectionRequestActivities %}

We’re looking for the context. If you need to brush up on Context Parameters, here’s a screenshot of the documentation:

How to Set Context Parameters

HTML Content blocks have the ability to choose which Entity they want as a context. Some other blocks in Rock require a Context like a Person Context. Here's how you choose your Context - Entity Type:

1. Turn on Block Configuration

2. Select Settings on your HTML Content block

3. Scroll to the bottom of the settings and choose your Context - Entity Type

For our context, we want to select the Connection Request. Then, we need to make sure the context is defined under the Page Properties.

4. Navigate to the Page Properties.

5. Select Advanced Settings

6. Choose your Connection Request Parameter Name under Context Parameters.

Now that the request is being recognized by the context, we should be able to populate those variables with our current code. Refresh the page and... BOOM!!!

Now, we have a working progress bar! At this point, anytime one of these activities added will change the icon state to active, marking another step taken in the Volunteer Onboarding Process.

But what if you wanted to change an icon state based on a Person Attribute, not just an activity? Great question!

Using Lava to Pull Person Attributes

For our Application & Clearances step, we wanted to pull this information off a Person Attribute from a Person Profile. This would be useful if we had a current volunteer start a connection request to serve in a different ministry area. Here's the code:

{% assign VolunteerApplicationDate = Context.ConnectionRequest.PersonAlias.Person | Attribute:'VolunteerApplicationDate' %}
    {% if VolunteerApplicationDate and VolunteerApplicationDate != empty %}
        {% assign ApplicationCompleted = 'Yes' %}
    {% endif %}

If the Volunteer Application Date attribute is not empty, the ApplicationCompleted = 'Yes'.

So, there we go! A working progress bar now exists to lead people through the process.

However, what if you didn't want people to move through the process out of order? Right now, any activity can be added at any time. Introducing the Rollup feature.

Rollup Feature

As we built this feature, we didn't want Ministry Training to show as an active state, if the volunteer hadn't completed their Application & Clearances. Here's the lava (hat tip to Chris Rea for this one):

{% assign rollup = 'Yes' %}
   <div class="wizard-item {% if ProfileCheckCompleted == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">

In the above case, the first step that they are missing in the process will switch rollup to No and then, every subsequent test will fail in turn.

Now we have a fully functional progress bar for any process in Rock AND it promotes process adherence!

Any Questions?

We hope this was helpful! Please let us know if you have any questions or like what we built. You can reach me on RockChat @braderb.

Full Code:

{% assign ProfileCheckCompleted = 'No' %}
{% assign TestDriven = 'No' %}
{% assign ApplicationCompleted = 'No' %}
{% assign MinistryTraining = 'No' %}
{% assign Celebration = 'No' %}
{% assign FollowUp = 'No' %}
{% assign VolunteerApplicationDate = Context.ConnectionRequest.PersonAlias.Person | Attribute:'VolunteerApplicationDate' %}
    {% if VolunteerApplicationDate and VolunteerApplicationDate != empty %}
        {% assign ApplicationCompleted = 'Yes' %}
    {% endif %}
    
{% for activity in Context.ConnectionRequest.ConnectionRequestActivities %}
    {% if activity.ConnectionActivityType.Name == "Profile Check" %}
        {% assign ProfileCheckCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Test Driven" %}
        {% assign TestDriven = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Ministry Training" %}
        {% assign MinistryTrainingCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Celebration" %}
        {% assign CelebrationCompleted = 'Yes' %}
    {% elseif activity.ConnectionActivityType.Name == "Follow Up" %}
        {% assign FollowUpCompleted = 'Yes' %}
    {% endif %}
{% endfor %}
<div class="wizard">
<div class="wizard-item active">
           <div class="wizard-item-icon">
               <i class="fa fa-edit"></i>
           </div>
           <div class="wizard-item-label">
               Interest Form
           </div>
   </div>
{% assign rollup = 'Yes' %}
   <div class="wizard-item {% if ProfileCheckCompleted == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">
       <div class="wizard-item-icon">
           <i class="fa fa-user-check"></i>
       </div>
       <div class="wizard-item-label">
           Profile Check
       </div>
   </div>
   <div class="wizard-item {% if TestDriven == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">
        <div class="wizard-item-icon">
            <i class="fa fa-stopwatch"></i>
        </div>
        <div class="wizard-item-label">
            Test Drive
        </div>
    </div>
   
   <div class="wizard-item {% if ApplicationCompleted == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">
       <div class="wizard-item-icon">
           <i class="fa fa-shield"></i>
       </div>
       <div class="wizard-item-label">
           Application & Clearances
       </div>
   </div>
   <div class="wizard-item {% if MinistryTrainingCompleted == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">
       <div class="wizard-item-icon">
           <i class="fa fa-seedling"></i>
       </div>
       <div class="wizard-item-label">
           Ministry Training
       </div>
   </div>
   
   <div class="wizard-item {% if CelebrationCompleted == 'Yes' and rollup == 'Yes' %}active{% else %}{% assign rollup = 'No' %}{% endif %}">
       <div class="wizard-item-icon">
           <i class="fa fa-gift"></i>
       </div>
       <div class="wizard-item-label">
           Celebration
       </div>
   </div>
</div>