---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, widgets, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: progressIndicator
layout: subsection
wd_wcptag: progressIndicator
---

<a id="section_N10021_N1001E_N10001"></a>
Displays numeric data as a progress bar.

Use `progressIndicator` when you want to display the progress of a task on view and edit pages.

## <a id="section_ms4_w1q_ypb"></a>Example

This `progressIndicator` widget uses PMD functions and project data to calculate the project hours used:

```
{
 "type": "progressIndicator",
 "value": "<%
   projects.data[0].totalResourcePlanLineHours == 0 ? 0 :
       number:toBigDecimal(projects.data[0].totalApprovedBillableHours / projects.data[0].totalResourcePlanLineHours, 2, 'HALF_UP')
  %>",
 "maximumValue": "100",
 "isPercentage": "true",
 "label": "Hours used"
}
```

## <a id="section-mobile-support"></a>Mobile Support

Android, iOS

## <a id="section_kt1_dkg_5cb"></a>Attributes

-   <b>enabled</b>

    Data type: dynamicBinding-Boolean

    If true, users can enter values on the widget. If false, users can only view the widget.

-   <b>fractionDigits</b>

    Data type: binding-Integer

    The number of decimal digits that a user can enter on the widget. The default is zero. The maximum is 12.

    On an edit page, the `number` widget displays an error if the number of decimal digits exceeds `fractionDigits`. If the value contains more than 12 decimal digits, the 12th decimal digit is rounded. The value rounds up if the next digit is 5 or greater; otherwise the value rounds down.

-   <b>helpText</b>

    Data type: binding-String

    Text that displays when a user hovers their cursor over the widget.

    <b>Note:</b> The Chrome browser truncates the tooltip to 1400 characters.

-   <b>id</b>

    Data type: binding-String

    Unique identifier used to reference this widget from other tags.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.
    -   To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD.
    -   Workday recommends that you include the `id` in your tag definitions for debugging purposes.

-   <b>isPercentage</b>

    Data type: binding-Boolean

    Determines whether or not decimals display as percentages. Example: If "true", 0.5 displays as 50%.

-   <b>label</b>

    Data type: dynamicBinding-String

    Text that displays beside or above most widgets. Often used in simple widgets that include inputs.

    The maximum number of characters is 255.

-   <b>maximumValue</b>

    Data type: binding-BigDecimal

    The maximum value that the widget allows. The default is 10.

    When you set `totalDigits` and `fractionDigits`, the verification of the user input takes these attributes into consideration. In this case, the default is `(10 ^ (totalDigits - fractionDigits)) - ( 1/(10^fractionDigits) )`, where `^` is the exponent operation.

    Example: If `"totalDigits": 5` and `"fractionDigits": 2`, the default `maximumValue` is `999.99`.

-   <b>minimumValue</b>

    Data type: binding-BigDecimal

    The minimum value the widget allows, which verifies upon user input. The default is zero.

-   <b>render</b>

    Data type: binding-Boolean

    If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true.

    Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value.

-   <b>required</b>

    Data type: dynamicBinding-Boolean

    If true, the user must enter a value on the widget before submitting the page.

-   <b>sortOrder</b>

    Data type: binding-String

    When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget.

    Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`.

    <b>Note:</b> The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget.

-   <b>totalDigits</b>

    Data type: binding-Integer

    Specifies the total number of digits (including the decimal digits) that a user can enter on the widget. The default is 12. The maximum is 15.

    On an edit page, the `number` widget displays an error if the total number of digits exceeds `totalDigits`.

    Use this attribute only on edit pages.

-   <b>value</b>

    Data type: dynamicBinding-BigDecimal

    Value determined when the page renders. Users can change this value on edit pages. Set the value between `0` and `100`, unless you use `isPercentage`.

-   <b>valueOutBinding</b>

    Data type: dynamicBinding-String

    A binding to the JSON field that stores the widget value in the outbound request payload.

    Example:

    ```
    {
    "type":"textArea",
    "id":"memo",
    "label":"Memo",
    "value":"<% queryParams.memo %>",
    "valueOutBinding": "expensesPostEndpoint.memo"
    }
    ```

    When the user submits the edit page, we send the request payload containing field values as specified in `valueOutBinding`.

    This sample JSON request payload contains the memo field sent to the sample `expensesPostEndpoint`:

    ```
    {"memo": "Sample value from the memo widget."}
    ```

    If you want to send an array of JSON values to the outbound endpoint, specify the path using this pattern: `anEndpointName.[].aJsonFieldName`.

    Example: To send this array to the sample outbound endpoint:

    ```
    [{"memo":"First memo"}, {"memo":"Second memo"}]
    ```

    Specify this `valueOutBinding`:

    ```
    "valueOutBinding" : "expensesPostEndpoint.[].memo"
    ```

    <b>Note:</b> If the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the widget's `valueOutBinding` data in the outbound payload. To include the `valueOutBinding` data in the payload, use the `onSend` event handler.

-   <b>valuesOut</b>

    Data type: list of outValue objects

    An array of values and their bindings to JSON fields in the outbound request payload.

    An array item consists of these attributes:

    -   `value` - An object binding of the value to include in the outbound JSON.
    -   `valueOutBinding` - A string binding of the JSON field that contains the value in the request payload. We send the request payload with the outbound endpoint when the user submits the page.

    You can use `valuesOut[]` to:

    -   Send a single piece of data to multiple outbound fields or endpoints. Example: A street address persisting to a Billing Address field and a Shipping Address field or different endpoints.
    -   Apply a function to the outbound value when persisting the data. Example: Convert a date to a specific format or convert a list to a string.

    In this example, the value of the `country` widget is sent to 2 different outbound fields `shippingAddress.country` and `billingAddress.country`.

    ```
    "valuesOut": [
    {
      "value": "<% country.value[0] %>",
      "valueOutBinding": "anOutboundEndpoint.shippingAddress.country.id"
    },
    {
      "value": "<% country.value[0] %>",
      "valueOutBinding": "anOutboundEndpoint.billingAddress.country.id"
    }
    ]
    ```

    This example uses PMD functions to extract the year and month from date values, and sends them separately to the outbound endpoint:

    ```
    "valuesOut": [
    {
      "value": "<% date:month(date1.value) %>",
      "valueOutBinding": "anOutboundEndpoint.dateMonth"
    },
    {
      "value": "<% string:toString(date:year(panelList1Date1.value)) %>",
      "valueOutBinding": "anOutboundEndpoint.dateYear"
    }
    ]
    ```

    <b>Note:</b> If the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the widget's `valuesOut` data in the outbound payload. To include the `valuesOut` data in the payload, use the `onSend` event handler.

-   <b>visible</b>

    Data type: dynamicBinding-Boolean

    If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false.

    <b>Notes:</b>

    -   When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`.
    -   When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler.



