---
title: "Finish group | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/finish-group/"
---

# Finish group

> This widget includes three controls that are usually presented on the approval page. It manages the confirmation checkbox, the button for downloading the result, and the **Finish** button.

![Finish-group widget.](images/finish-group.png)

## Configuring widget

To add a Fishish group to your editor, you must configure a widget of the `finish-group` type.

```json
{
    "name": "preview",
    "type": "finish-group",
    "params": {
        ...
    }
}
```

In `params`, you can set up the checkbox and buttons. For example, you can enable the checkbox, assign the `primary` style to the `Finish` button, and provide a link to download the preview image.

```json
{
    "name": "approval",
    "type": "finish-group",
    "params": {
        "checkboxPrompt": "I have reviewed and approved my design.",
        "value": false,
        "checkboxEnabled": true,
        "checkboxVisible": true,
        "buttonText": "Finish",
        "buttonClassStyle": "primary",
        "downloadText": "Download Preview",
        "downloadPosition": "left",
        "downloads": [
            {
                "filename": "preview",
                "url": "https://portal.customerscanvas.com/Users/xxxxxxxx-yyyy-xxxx-yyyy-xxxxxxxxxxxx/SimplePolygraphy/api/rendering/GetProofImage/default/yyyyyyyy-xxxx-yyyy-xxxx-xxxxxxxxxxxx/0_0.jpg"
            }
        ]
    }
}
```

For more details about configuration parameters, refer to [IAuWidgetFinishGroupConfig](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-finish-group.IAuWidgetFinishGroupConfig.md#finish-group.iauwidgetfinishgroupconfig).

## Config example

Now, let's see how you can configure a two-step editor where the `design-editor` opens at the first step and an approval page with the personalization results appears at the second step.

```json
{
  "widgets": [
    {
        "name": "canvas",
        "type": "design-editor",
        "params": {
            "initial": {
                "productDefinition": {
                    "surfaces": [ "Invitation_front", "Invitation_back" ]
                },
                "editorConfig": {
                    "initialMode": "Advanced"
                }
            }
        }
    },
    {
      "name": "approve-panel",
      "type": "group",
      "params": {
        "scrollable": false,
        "type": "noncollapsible",
        "tabs": [
          {
            "widgets": [
              {
                "name": "preview",
                "type": "slider",
                "params": {
                  "direction": "tile",
                  "rows": 1,
                  "columns": 2,
                  "images": [
                    {
                      "url": "{{ $['canvas'].proofImageUrls[0][0] }}"
                    },
                    {
                      "url": "{{ $['canvas'].proofImageUrls[1][0] }}"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    },
    {
      "name": "finish-group",
      "type": "finish-group",
      "params": {
        "checkboxPrompt": "I have reviewed and approved my design.",
        "value": false,
        "checkboxEnabled": true,
        "checkboxVisible": true,
        "buttonText": "Finish",
        "buttonClassStyle": "primary",
        "onClick": [
          "{{ #function main.showPreloader(true, 'Preparing pdf files') }}",
          "{{ #function $['canvas'].getHiResImages(800,800) }}",
          "{{ #function $['order'].widgetUpdated }}",
          "{{ #function main.showPreloader(false) }}"
        ]
      }
    },
    {
      "name": "order",
      "type": "order",
      "params": {
        "images": "{{ $['canvas'].proofImageUrls }}",
        "downloadUrls": "{{ $['canvas'].hiResUrls }}",
        "data": {
          "stateId": "{{ $['canvas'].stateId }}"
        }
      }
    }
  ],
  "steps": [
    {
      "name": "Design",
      "mainPanel": {
        "name": "canvas"
      }
    },
    {
      "name": "Preview",
      "mainPanel": {
        "name": "approve-panel"
      },
      "bottomPanel": {
        "name": "finish-group"
      },
      "onActivate": [
        "{{ #function $['canvas'].getProofImages(800,800) }}"
      ]
    }
  ]
}
```

---
You can find more details about the properties of this widget in [AuWidgetFinishGroup](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-finish-group.au-widget-finish-group.md#auwidgetfinishgroup).

For more details about configuration parameters, refer to [IAuWidgetFinishGroupConfig](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-finish-group.IAuWidgetFinishGroupConfig.md#iauwidgetfinishgroupconfig).