---
title: "Workflow with options | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/tutorials/workflow-options/"
---

# Workflow with options

> Let's imagine that your product is a wedding invitation, where you have the same design but different trim options. Customers will use this design and select different edge trimming options.

For such a workflow, you need to create a two-step workflow. At the first step, you will select a variant, edit it in the Design Editor, and then check the personalization result.

Let's consider some ideas where you may use such a workflow:

- Your product may contain only one option and differences are in the values.
- You may prepare only one design, but add minor differences to each variant.

![Workflow with options.](./images/options-only-overview.gif)

## Planning

Let's plan your future workflow: 

- The quantity of steps.
- The widgets you need.

### Steps

This workflow consists of two steps: 

- `Editor` for selecting a product variant and editing it.
- `Approval` for checking the personalization result and approving it.

```json
"steps": [
  {
    "name": "Editor"
  },
  {
    "name": "Approval"
  }
]
```

### Widgets 

Let's define what widgets you need for this workflow:

* `pim-ajax` to get data from a server.
* `pim-option` to represent options.
* `design-selector` to select a design
* `design-editor` to customize a design.
* `preview-mockup-slider` to show the result.
* `finish-group` to define the **Add to cart** button and the confirmation checkbox.
* `steps` to hide the **Finish** button in the Navigation panel.
* `order`  to create an order.

```json
"widgets": [
{
    "name": "my-pim-ajax",
    "type": "pim-ajax",
    "params": {...}
  },
 {
    "name": "my-pim-options",
    "type": "pim-options",
    "params": {...}
  },
  {
      "name": "my-pim-design-selector",
      "type": "pim-design-selector",
      "params": {...}
  },
  {
      "name": "my-editor",
      "type": "design-editor",
      "params": {...}
  },
    {
      "name": "preview-slider",
      "type": "preview-mockup-slider",
      "params": {...}
    },

  {
      "name": "my-finish-group",
      "type": "finish-group",
      "params": {...}
  },
  {
    "name": "steps",
    "type": "steps",
    "params": {...}
  },
  {
      "name": "my-order",
      "type": "order",
      "params": {...}
  }

]
```

## Getting data from a server

To get options and SKU from your server, use the `pim-ajax` widget. This widget retrieves options and designs, defines SKU and an option value.

```json
{
  "name": "my-pim-ajax",
  "type": "pim-ajax",
  "params": {
    "choices": "{{ $['my-pim-options']._ }}",
    "currentSku": "{{ $['my-pim-design-selector']._}}",
    "settings": {
      "designs": {
          "enabled": true
      }
    }
  }
}

```

## Getting designs from a server

The `pim-design-selector` allows you to select a design variant for the `design-editor` widget. Since we have only one design, we won't display this widget in the user interface.

```json
{
  "name": "my-pim-design-selector",
  "type": "pim-design-selector",
  "params": {
      "designs": "{{ $['my-pim-ajax'].designs }}"
  }
}
```

## Defining steps

### Editor

The `editor` step represents:
* Options by the `pim-option` widget. This widget allows you to select a value you need.
* Design Editor by the `design-editor` widget. In `design-editor`, you can customize a design.

![The Editor step.](./images/options-only-editor-step.png)

```json
"steps": [
  {
    "name": "Editor",
    "toolPanel": {
        "name": "my-option-group"
    },
    "mainPanel": {
        "name": "my-editor"
    }
  }
]
```

#### PIM option selector

This widget represents options and option values. Define this widget in the `group` widget for embedding in the `toolPanel`.

```json
{
  "name": "my-option-group",
  "type": "group",
  "params": {
    "type": "noncollapsible",
    "scrollable": true,
    "unifySelection": false,
    "tabs": [
      {
        "widgets": [
          {
            "name": "my-pim-options",
            "type": "pim-options",
            "params": {
                "options": "{{ $['my-pim-ajax'].options }}"
            }
          }
        ]
      }
    ]
  }
}
```

#### Design Editor

The `design-editor` widget allows you to customize designs. It loads the design selected in the `pim-design-selector` widget.

```json
{
  "name": "my-editor",
  "type": "design-editor",
  "params": {
    "changeDesignVariant": {
      "designVariant": "{{ $['my-pim-design-selector']._ ?? undefined }}"
    },
    "initial": {
      "productDefinition": {
      "surfaces": [
        {
          "width": "1",
          "height": "1"
        }
      ]
    },
    "showPreloader": true,
    "editorConfig": {
        "initialMode": "Advanced",
        "canvas": {
          "shadowEnabled": true,
        }
      }
    }
  }
}
```

### Approval

At the Approval step, you will see the personalization result and approve it.

![The Approval step.](./images/options-only-approval-step.png)

#### Preview mockup slider

The `preview-mockup-slider` shows the personalization result from the `design-editor` and `pim-design-selector` widgets.

```json
{
  "name": "my-preview-mockup-slider",
  "type": "preview-mockup-slider",
  "params": {
    "autoCompile": false,
    "productId": "{{ $['my-pim-design-selector']._.productId }}",
    "productVersionId": "{{ $['my-pim-design-selector']._.productVersionId }}",
    "productVariantId": "{{ $['my-pim-design-selector']._.productVariantId }}",
    "stateId": "{{ $['my-editor'].stateId }}",
    "previewSize": {
        "width": 1200,
        "height": 1200
    }
  }
}
```

#### Steps widget

The `steps` widget allows you to hide the **Finish** button in the **Navigation** panel, which appears by default.

```json
{
  "name": "steps",
  "type": "steps",
  "params": {
    "finishButton": {
      "visible": "false"
    }
  }
}
```

#### Finish group

The `finish-group` widget represents the **Add to cart** button and the confirmation checkbox. When the user clicks this button, the widget will render hi-res images.

```json
{
  "name": "my-finish-group",
  "type": "finish-group",
  "params": {
    "checkboxPrompt": "I have reviewed and approve my design.",
    "value": false,
    "checkboxEnabled": true,
    "checkboxVisible": true,
    "buttonText": "Add to cart",
    "buttonClassStyle": "primary",
    "onClick": [
      "{{#function main.showPreloader(true, 'Creating print files...')}}",
      "{{#function $['my-editor'].getHiResImages(1000,1000) }}",
      "{{#function $['my-preview-mockup-slider'].createPreviewResource()}}",
      "{{#function new Promise((res) => setTimeout(res, 2500)) }}",
      "{{#function main.showPreloader(false)}}"
    ]
  }
}
```

## Connecting steps

Here, you need to connect the `Editor` step and the `Approval` step. Once you switch to `Approval`, the personalized design will be saved.

```json
"steps": [
  {
    "name": "Editor",
    "toolPanel": {
        "name": "option-group"
    },
    "mainPanel": {
        "name": "my-editor"
    }
  },
  {
    "name": "Approval",
    "mainPanel": {
        "name": "preview-slider"
    },
    "onActivate": [
        "{{ #function main.showPreloader(true, 'Saving product...') }}",
        "{{ #function $['my-editor'].saveProduct($['my-editor'].stateId) }}",
        "{{ #function $['my-preview-mockup-slider'].compile() }}",
        "{{ #function main.showPreloader(false) }}"
    ],
    "bottomPanel": {
        "name": "finish"
    }
  }
]
```

## Creating an order

The `order` widget allows customers to create an order in the e-commerce system and a project in Customer's Canvas. This widget uses images from the `design-editor` widget and takes SKU from the `pim-design-selector` widget.

```json
{
  "name": "my-order",
  "type": "order",
  "params": {
    "props": {
      "_userId": "{{ $['my-editor'].userId }}",
      "_stateId": [
        "{{ $['my-editor'].stateId }}"
      ],
      "_hidden": {
        "images": "{{ [ $['my-preview-mockup-slider'].previewResourceUrl || '' ] }}",
        "originalProductId": "{{ product.id }}",
        "sku": "{{ $['my-pim-design-selector']._.sku || ''}}"
      }
    },
    "data": {
      "stateId": "{{ $['my-editor'].stateId }}",
      "sku": "{{ $['my-pim-design-selector']._.sku }}"
    }
  }
}
```

## Result

This is the whole workflow file. 

```json
{
  "widgets": [
    {
      "name": "pim-ajax",
      "type": "pim-ajax",
      "params": {
        "choices": "{{ $['pim-options']._ }}",
        "currentSku": "{{ $['design-selector']._ ?? null}}",
        "settings": {
          "designs": {
            "enabled": true
          }
        }
      }
    },
      {
        "name": "designs",
        "type": "group",
        "params": {
          "type": "noncollapsible",
          "scrollable": true,
          "unifySelection": false,
          "tabs": [
            {
              "widgets": [
                {
                  "name": "design-selector",
                  "type": "pim-design-selector",
                  "params": {
                    "designs": "{{ $['pim-ajax'].designs }}"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "name": "option-group",
        "type": "group",
        "params": {
          "type": "noncollapsible",
          "scrollable": true,
          "unifySelection": false,
          "tabs": [
            {
              "widgets": [
                {
                  "type": "pim-options",
                  "name": "pim-options",
                  "params": {
                      "options": "{{ $['pim-ajax'].options }}"
                  }
                }
              ]
            }
          ]
        }
      },
      {
        "name": "my-editor",
        "type": "design-editor",
        "params": {
          "changeDesignVariant": {
            "designVariant": "{{ $['design-selector']._ ?? undefined }}"
          },
          "initial": {
            "productDefinition": {
              "surfaces": [
                {
                  "width": "1",
                  "height": "1"
                }
              ]
            },
            "showPreloader": true,
            "editorConfig": {
              "initialMode": "Advanced",
              "canvas": {
                "violationWarningButtonsEnabled": true,
                "qualityChangeContainersEnabled": true,
                "containerColor": "#ffffff",
                "color": "#ffffff",
                "shadowEnabled": true,
                "rulers": {
                    "enabled": true
                }
              }
            }
          }
        }
      },
      {
        "name": "steps",
        "type": "steps",
        "params": {
          "finishButton": {
            "visible": "false"
          }
        }
      },
      {
        "name": "preview-slider",
        "type": "preview-mockup-slider",
        "params": {
          "autoCompile": false,
          "productId": "{{ $['design-selector']._.productId }}",
          "productVersionId": "{{ $['design-selector']._.productVersionId }}",
          "productVariantId": "{{ $['design-selector']._.productVariantId }}",
          "stateId": "{{ $['my-editor'].stateId }}",
          "previewSize": {
              "width": 1200,
              "height": 1200
          }
        }
      },
      {
        "name": "order",
        "type": "order",
        "params": {
          "props": {
          "_userId": "{{ $['my-editor'].userId }}",
          "_stateId": [
            "{{ $['my-editor'].stateId }}"
          ],
          "_hidden": {
            "images": "{{ [ $['preview-slider'].previewResourceUrl || '' ] }}",
            "originalProductId": "{{ product.id }}",
            "sku": "{{ $['design-selector']._.sku || ''}}"
          }
        },
        "data": {
          "stateId": "{{ $['my-editor'].stateId }}",
          "sku": "{{ $['design-selector']._.sku }}"
          }
        }
      },
      {
        "name": "finish",
        "type": "finish-group",
        "params": {
          "checkboxPrompt": "I have reviewed and approve my design.",
          "value": false,
          "checkboxEnabled": true,
          "checkboxVisible": true,
          "buttonText": "Add to cart",
          "buttonClassStyle": "primary",
          "onClick": [
            "{{#function main.showPreloader(true, 'Creating print files...')}}",
            "{{ #function $['my-editor'].getHiResImages(1000,1000) }}",
            "{{#function $['preview-slider'].createPreviewResource()}}",
            "{{ #function new Promise((res) => setTimeout(res, 2500)) }}",
            "{{#function main.showPreloader(false)}}"
          ]
        }
      }
    ],
  "steps": [
    {
      "name": "Editor",
      "toolPanel": {
          "name": "option-group"
      },
      "mainPanel": {
          "name": "my-editor"
      }
    },
    {
      "name": "Approval",
      "mainPanel": {
        "name": "preview-slider"
      },
      "onActivate": [
        "{{ #function main.showPreloader(true, 'Saving product...') }}",
        "{{ #function $['my-editor'].saveProduct($['my-editor'].stateId) }}",
        "{{ #function $['preview-slider'].compile() }}",
        "{{ #function main.showPreloader(false) }}"
      ],
      "bottomPanel": {
        "name": "finish"
      }
    }
  ]
}
```