How to Create a Progress Tracker

This post goes through how to set up a process bar at the top of your app so that users can see which step they are on, like below. For a video on this please click here

Step 1 - Make the images

The first thing to do is create the images for your progress steps - we have an example here:

This can be done in PowerPoint using shapes and icons. You can then save this image to be used in your app.

Step 2 - Find the Image IDs

You will need the IDs of the images so that you can use this in an image field to give the process steps a banner-like look.

To find the ID of the images that you have created, you will need to upload them into a record and then export this data.

Under the assumption that this app is live, we will create a form that is only visible to you so that you do not disrupt the users.

You will need to create an image field for each step, we have 5 in total (0 to 4) and so we will create 5 image fields like so:

Create a Template for each of these steps as well and add the corresponding image field to each, as shown:

Create a new form - this will be the one that is only visible to you. (This is a temporary measure to get the IDs of the images and then we will delete the form when it is no longer needed.) 

Add the templates that you have just made to the hidden form like so:

Add in a form rule - the rule should be something like this:
$filter=[Date] ne 'XXXX'

It needs to be something that will always be true - so this is if the date field is not XXX, then this rule will be in effect

You then hide the form for all teams except for yours 

Click save and publish

Go to workspace and go to a record in your app that you can export easily, or create a new record if this is easier.

Go to your hidden form and you should see your templates with each image field in, like this:

Add each process step that you made to the corresponding image fields. You will end up with something like this:

Now you can export your record (for more information on this, click here - https://support.softools.net/hc/en-gb/articles/115003117786-Export-to-CSV)

Go to the image fields in the csv that you exported like this:

You will see multiple columns for each image field. The one that you need is the column with just the ID in - so the first one shown above. The string of numbers and letters in this column is the images' ID. Find each of the IDs for your process steps.

Delete the hidden form - it is no longer needed

Step 3 - Input the images into the image fields

To add the images to the image fields, you will need to make the ID the default initial value. 

Go to your image fields in app studio - pick one and scroll down to the expression section as shown:

Find the image ID from your csv export, copy this and paste it into the default initial value box as shown:

Repeat for all of the image field steps. You have now created image fields that will automatically have the process step image within them. 

Note - as this is the default initial value, this will only show up on new records - for old records, you will need to either export the records as a csv, delete  the records and import them which will create them as new, or temporarily turn on "make default value as expression" and then export and re-import so that the expression runs - here is an article on bulk updating expressions:

https://support.softools.net/hc/en-gb/articles/6726731608977-Bulk-Updating-Expressions

Step 4 - Implementing the Process Steps

Now that you have set up the image fields and templates, you can implement them into your app properly.

Add these templates to your desired form and hide the template header for all of them. 

Decide how the process steps will be determined - e.g. is there a specific bit field that needs to be ticked to move on to the next stage/speficic value in a text field.

With this, set up form rules so that each step template is only visible when the user is on this step.

Here is an example using a bit field for the user to signify that step 0 has been completed:

This will mean that when the user has completed step 0, they will tick the bit field and the Step 0 template will be hidden.

Repeat this for all steps so that they only show when the user is on this step

For more information on form rules, click here:

https://support.softools.net/hc/en-gb/articles/360015743678-Form-Rules-Form-and-Template-Visiblity

I hope this has helped!