---
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: bpButton
layout: subsection
wd_wcptag: bpButton
---

<a id="section_N10021_N1001E_N10001"></a>
Creates a button on the button bar of `bpExtender`. You can use `bpButton` only inside `bpButtons[]` in `bpExtender` and only on edit pages.

The `id` attribute is required. When a user clicks a `bpButton`, `bpExtender` sets the `bpButton.value` attribute to its `id`. To determine which outbound endpoint to submit and to control the page flow when a user clicks a `bpButton`, you need to evaluate the `value` attribute. See [Page Flow Requirements for bpButtons](/wcp_docs/awq1559797247759.html#section-page-flow-requirements-for-bpbuttons) for details.

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

This snippet displays a sample`bpButtons[]` in `bpExtender`.

```
"extender": {
     "type" : "bpExtender",
     "bpButtons": [
       {
         "id": "approveButtonId",
         "type": "bpButton",
         "buttonType": "PRIMARY",
         "label": "Approve"
       },
       {
         "id": "denyButtonId",
         "type": "bpButton",
         "buttonType": "AUXILIARY",
         "label": "Deny"
       }
     ],
     . . .
}
```

## <a id="section-page-flow-requirements-for-bpbuttons"></a>Page Flow Requirements for bpButtons

<b>Set the id of each bpButton.</b>

For each `bpButton` in `bpButtons[]`, set the `id` attribute. When a user clicks a `bpButton`, `bpExtender` populates the `value` attribute of the clicked `bpButton` with its `id`.

Example: If `"id": "approveButtonId"`, `approveButtonId.value = approveButtonId.id` when the user clicks this button.

<b>Define a flow variable for each bpButton.</b>

In `outboundEndPoints[]`, define an `outboundVariable` with `"variableScope": "flow"`. Add a value in `values[]` for each `bpButton`:

```
"outboundEndPoints": [
  {
     "name": "transitionOutboundVars",
     "type": "outboundVariable",
     "variableScope": "flow",
     "values": [
        {
           "outboundPath": "bpButtonFlowVariable1",
           "value": "<% bpButtonId1.value %>"
        },
        {
           "outboundPath": "bpButtonFlowVariable2",
           "value": "<% bpButtonId2.value %>"
        }
    ]
  },
  . . .
]
```

Example: Assume `bpButtons[]` contains the sample `approveButtonId` and `denyButtonId`. Define a flow variable value for each `bpButton`:

```
"outboundData": {
   "outboundEndPoints": [
     {
       "name": "transitionOutboundVars",
       "type": "outboundVariable",
       "variableScope": "flow",
       "values": [
         {
           "outboundPath": "approveButton",
           "value": "<% approveButtonId.value %>"
         },
         {
           "outboundPath": "denyButton",
           "value": "<% denyButtonId.value %>"
         }
       ]
     },
     . . .
  ]
},
```

<b>Set the exclude attribute on the outbound endpoints.</b>

For each outbound endpoint that must execute when a user clicks a `bpButton`, set the `exclude` attribute. Because Presentation Components submits all outbound endpoints specified in `outboundEndPoints[]`, use `exclude` to define the logic that determines only the appropriate endpoint to submit. You can use this exclude logic pattern:

```
"exclude": "<% empty bpButtonId.value %>"
```

Example: Assume that `approveButtonId` posts to the `approveEndpoint` and that `denyButtonId` posts to the `denyEndpoint`. This snippet lists the outbound endpoints:

```
"outboundData": {
   "outboundEndPoints": [
     . . .
     {
       "name": "approveEndpoint",
       "url": "/approvals/post",
       "baseUrlType": "myApiHost",
       "exclude": "<% empty approveButtonId.value %>",
       "authType": "sso",
       "allowEmptyPayload": true
     },
     {
       "name": "denyEndpoint",
       "url": "/denials/post",
       "baseUrlType": "myApiHost",
       "exclude": "<% empty denyButtonId.value %>",
       "authType": "sso",
       "allowEmptyPayload": true
     },
     {
       "name" : "attachmentEndpoint",
       "url": "/files/post",
       "baseUrlType": "myApiHost",
       "authType" : "sso",
       "allowEmptyPayload" : true
   }
  ]
},
```

Let's say the user clicked `approveButtonId`. In this case, `approveButtonId.value` isn't empty because `approveButtonId.value = approveButtonId.id`. Because the user didn’t click the other button `denyButtonId`, `denyButtonId.value` is empty. Hence `"exclude": "<% empty approveButtonId.value %>"` evaluates to false, and `"exclude": "<% empty denyButtonId.value %>"` evaluates to true. And therefore the `denyEndpoint` is excluded from the outbound endpoint submissions.

<b>Evaluate the flow variable in the flow step transition.</b>

In a flow definition in the AMD, specify the step transition condition to determine which `bpButton` was clicked. If a `bpButton` flow variable isn't empty, it means that the user clicked that `bpButton`.

Example: Assume the same 2 `bpButton` tags: `approveButtonId` and `denyButtonId`, each with its own flow variable `approveButton` and `denyButton`, respectively. Note that the PMD passes these flow variables to the flow definition through the app variable `flowVariables`.

To determine whether to navigate to `submitPageStep` or `denyPageStep`, the `startStep` in this flow definition evaluates `flowVariables.approveButton`.

```
"flowDefinitions": [
   {
     "id": "bpfFlow",
     "name": "myFlow",
     "flowSteps": [
       {
         "id": "startStep",
         "taskId": "home",
         "transitions": [
           {
             "condition": "<% !(empty(flowVariables.approveButton)) %>",
             "order": "a",
             "value": "submitPageStep"
           },
           {
             "condition": "true",
             "order": "b",
             "value": "denyPageStep"
           }
         ]
       },
       {
         "id": "submitPageStep",
         "taskId": "submitPageStep"
       },
       {
         "id": "denyPageStep",
         "taskId": "denyPageStep"
       }
     ]
   }
],
```

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

Android, iOS

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

-   <b>buttonType</b>

    Data type: string

    The display style of the button. Valid values:

    -   `PRIMARY` - Displays a button with high emphasis. This display style is typically for designating the primary action that moves the user forward in a process.
    -   `AUXILIARY` - (Default) Displays a button with medium emphasis. This display style is typically for:

        -   Secondary actions on a screen.
        -   Canceling a process.
        -   Taking an action that moves the user away from a process.

    -   `LINK` - Displays a link. This display style is for a page navigation option. Not supported in the Workday mobile app.

-   <b>id</b>

    Data type: binding-String

    Required unique identifier of this `bpButton`. When a user clicks this `bpButton`, we set its `value` to the `id`. The `<bpButtonId>.value` determines which button is used to reference this `bpButton` in the outbound flow variables.

    Notes:

    -   The `id` must start with a letter.
    -   The `id` must be unique per page.

-   <b>label</b>

    Data type: dynamicBinding-String

    The text that displays on the button.



### Related Information

[bpExtender](/wcp_docs/khd1559765406895.html)

[bpTemplatedList](/wcp_docs/bvi1559973927931.html)