Finish group

• 1 minute to read

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.

Configuring widget

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

{
    "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.

{
    "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.

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.

{
  "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.

For more details about configuration parameters, refer to IAuWidgetFinishGroupConfig.