Progress Indicator Component

The Progress Indicator is a sample custom component developed by Skuid, but not included in the product core. This article shows how to download the component from GitHub 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:

image0

Step 1: Download the progressindicatorpack zip file from GitHub

image1

  1. Go to the progressindicatorpack.zip page.
  2. Click View Raw to download the zip file.

Step 2: Create a New Component pack

image2

  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.

Warning

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

image3

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

A. Enter a name and click Choose File

image4

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

    Warning

    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

image5

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

C. Click Save.

image6

Test it!

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

image7

Progress Indicator Overview

image8

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.