Progress Indicator Component

The Progress Indicator is a sample v1 custom component developed by Skuid, but not included in the product core. This article shows how to download the component pack files from the Skuid Labs GitHub repository and install it in a new Component Pack in your org.

The Progress Indicator Component connects to a tabset or wizard and shows users where they are in a process. Each step in the Progress Indicator connects to a single tab in a Tabset, or a step in a Wizard. You can also go through the JavaScript and CSS files for this component and see how it’s set up, to help you in developing your own custom components.

The Progress Indicator in action:


Step 1: Download the progressindicatorpack zip file from GitHub


  1. Go to the Progress Indicator page.
  2. Clone the Skuid Labs repository, or download each file in the Progress Indicator directory.
  3. Compress the files into a zip file with your archiving tool of choice, or use make pack.

Step 2: Create a New Component pack


  1. In the Skuid app, click Configure > Component Packs.
  2. Click on the plus sign to create a new component pack. (It is all green and tempting, but do not click on the New Component Pack button. It will make this process more complicated.)
  3. Name your new pack progressindicator.


This is the name of the component as defined in the package details of the progress indicator component, so do not change the name unless you edit the reference to “progressindicator” in the package definition files.

  1. Enter the Resource Name for the static resource. Remember this name! You’ll need to enter it as the name of the static resource you will create later on.
  2. You don’t need to enter a Resource Namespace.
  3. Choose whether the Pages in this pack should be available in Desktop, Mobile, or Any Composer.
  4. Choose the order that you want this component pack to appear (in the Components tab in the App Composer).
  5. Click to activate this component pack, to be able to use it in the Composer.

Step 3: In the appropriate Salesforce org, upload the zip file as a static resource


Go to Setup > Develop > Static Resources and click New.

A. Enter a name and click Choose File


  1. In this example, we’re naming it “progressindicatorpack.”


    We defined this name in a previous step. Make sure the name you enter for this static resource matches the name you established as the resource name when you created the component pack!

  1. Enter a description if you so desire.
  2. Click Choose File.

B. Select the progressindicatorpack file you just downloaded


  1. Select the Component Pack zip file from your computer.
  2. Click to upload this file.

C. Click Save.


Test it!

When you open the App Composer, the Progress Indicator should appear in the Components tab.


Progress Indicator Overview


Drag the Progress Indicator into your Composer.

  1. Connect this Progress Indicator to a Tabset or Wizard component using that component’s unique Id.
  2. Add one step in your Progress Indicator to correspond to each tab in your Tabset or step in your Wizard. (You can click on an Indicator step to change its name, or enter a descriptive title, e.g. “Create Contact,” “Create Related Cases,” “Confirm,” etc.).
  3. Choose the color in which you want the user’s current tab/step to be shown.
  4. Choose the color for previous steps.
  5. Choose the color for future steps.

Now, when your users are working through the process on this page, the progress indicator will light up the step that they’re on and show them where they are in the process.