getProgress()

The getProgress() function (client-side) controls a progress popup indicator associated with a configuration process. You can use it to show, hide, update, or query the progress indicator as users move through multi-step tasks. It's useful for providing visual feedback and make long or multi-step tasks clearer to users.

To create a progress popup, edit a product and go to the Progress Popups subtab. Then, click New CPQC Progress Popup and complete all required fields and any additional fields as needed.

Syntax

Use this syntax for the getProgress() function:

            getProgress('PROGRESS_POPUP_CODE');

Return Value

The getProgress() function returns an object that provides several methods to work with the progress popup. The following table outlines each method with its purpose.

Method	Description
`show()`	Makes the progress indicator visible.
`hide(delay)`	Hides the progress indicator immediately or after a delay specified in milliseconds.
`set(idx)`	Sets the current step to the specified index.
`inc()`	Increments the current step by one.
`setTotal(tot)`	Sets the total number of steps and resets the index.
`getTotal()`	Returns the total number of steps.
`getCode()`	Returns the code associated with the progress indicator.
`isComplete()`	Returns `true` if the current index equals the total. Otherwise, it returns `false`.

Method

Description

show()

Makes the progress indicator visible.

hide(delay)

Hides the progress indicator immediately or after a delay specified in milliseconds.

set(idx)

Sets the current step to the specified index.

inc()

Increments the current step by one.

setTotal(tot)

Sets the total number of steps and resets the index.

getTotal()

Returns the total number of steps.

getCode()

Returns the code associated with the progress indicator.

isComplete()

Returns true if the current index equals the total. Otherwise, it returns false.

Parameters

The getProgress() function accepts the code of the progress popup indicator as a required string parameter. You can find the code in the Code field on the progress popup record.

Examples

The following examples show how to use the getProgress() function.

Showing a Progress Bar and Defining the Total Steps

In this example, the code retrieves a progress indicator with the code IMPORT and makes the indicator visible. Then, it sets the total number of steps to 10, so users know how many steps to expect.

              const prog = getProgress('IMPORT');
if (prog) {
    prog.show();
    prog.setTotal(10);
}

Setting and Hiding the Progress Indicator After Completion

This example sets the total steps to 5. Then, it sets the current step to the end of the process (step 5) and hides the progress bar after a 2-second delay.

              const prog = getProgress('IMPORT');
if (prog) {
  prog.setTotal(5);
  prog.set(5);
  prog.hide(2000);
}