Package ui-framework

Classes

ActionsErrorToastConfig

Represents a toast to display errors.

{
  "widgets": [{
    "type": "design-editor",
    "name": "editor",
    "params": {
      "inital": { ... },
      "actionsErrorToast": {
        "show": true,
        "duration": 15000
      }
    }
  }]
}

AuBaseSelectorWidget

Declares methods used to retrieve the selected value in a widget and clear the selection.

AuDesignEditor

The base class for the AuWidgetDesignEditor widget.

AuOptionBase

Provides properties for options obtained from the e-commerce driver. For details, you can refer to the Option widget topic.

An element of the AuWidgetOption class implements properties of this abstract class.

A widget that is used to render 3D previews based on DAE models. The following example illustrates how you can use proof images obtained from the DesignEditor to visualize a model in the 3D-Viewer widget.

{
  "widgets": [
   {
     "name": "previewer",
     "type": "3d-viewer",
     "params": {
       "showAnimationButtons": false,
       "showCameraButtons": true,
       "items": [
         {
           "images": "{{ $['editor'].proofImageUrls }}",
           "model": "models/trifold.dae"
         }
       ]
     }
   }
 ]
}

AuWidgetAjax

A non-visual widget that is used to send requests to the server and receive responses, which can be used in other widgets. For details, see the Ajax widget topic.

The following example illustrates how you can populate a gallery with images obtained through an HTTP request.

{
  "widgets": [
   {
     "name": "bg-request",
     "type": "ajax",
     "params": {
       "lock": "gallery",
       "url": "{{vars.apiUrl + '/api/images?subfolder=backgrounds'}}",
       "method": "GET",
       "responseType": "json"
     }
   },
   {
     "name": "gallery",
     "title": "Gallery",
     "type": "gallery",
     "params": {
       "prompt": "Set a background",
       "showTitle": false,
       "forceSelection": true,
       "items": "{{ $['bg-request'].response.items }}"
     }
   }
 ]
}

AuWidgetAssetStorageAjax

A non-visual widget that is used to send requests to the server and receive responses, which can be used in other widgets. The following example illustrates how you can populate a gallery with images obtained through an HTTP request.

{
  "widgets": [
   {
     "name": "bg-request",
     "type": "asset-storage-ajax",
     "params": {
          "autoCompile": false,
          "assetType": "designs",
          "folder": "",
          "entriesFilter": [
              "{{ #function(asset) asset.metadata.surfaces[0].width > 100 }}"
          ],
          "previewOptions": {
              "name": "medium",
              "namespace": "storefront",
              "width": 600,
              "height": 600
          }
     }
   },
   {
     "name": "gallery",
     "title": "Gallery",
     "type": "gallery",
     "params": {
       "prompt": "Set a background",
       "showTitle": false,
       "forceSelection": true,
       "items": "{{ $['bg-request'].response }}"
     }
   }
 ]
}

AuWidgetButton

A widget that represents a button. For details, you can refer to the Button widget topic.

The following example illustrates how you can define a button for adding logs to the console.

{
  "widgets": [
   {
     "type": "button",
     "name": "console-log",
     "params": {
       "text": "hello",
       "classStyle": "success",
       "onClick": "{{#function console.log('Hello world!');}}",
       "enabled": true,
       "visible": true
     }
   }
 ]
}

AuWidgetCart

A widget that is used to initialize several products in your editor and receive several orders, either of which is bound to a separate product. This widget can be used instead of the Order widget.

For details, you can refer to the Cart widget topic.

{
  "widgets": [
    {
      "name": "cart",
      "type": "cart",
      "params": {
        "lineItems": [
          {
            "productIndex": 0,
            "images": "{{ getOrDefault(\" $['editor'].proofImageUrls.map(item=>item[0])\",[]) }}",
            "downloadUrls": "{{ getOrDefault(\" $['editor'].hiResUrls \",[]) }}",
            "data": {
              "stateId": "{{ getOrDefault(\" $['editor'].stateId \",'') }}",
              "orderUrl": "{{ getOrDefault(\" settings.customersCanvasBaseUrl.toLowerCase().split('users')[0] + '/orders/DepositPhotos?userId=' + $['editor'].userId + '&stateId=' + $['editor'].stateId\",'') }}"
            },
            "props": { }
          }
        ]
      }
    }
  ]
}

AuWidgetCheckbox

A widget that adds a checkbox. For details, you can refer to the Checkbox widget topic.

{
  "widgets": [
    {
      "name": "agree-checkbox",
      "type": "checkbox",
      "params": {
        "prompt": "I approve the design.",
        "autoReset": true,
        "value": true
      }
    }
  ]
}

AuWidgetColorPicker

A widget that is used to select colors in the editor.

{
  "widgets": [
    {
      "title": "Background Color",
      "name": "colors",
      "type": "color-picker",
      "params": {
        "text": "Choose a background",
        "type": "color",
        "colors": [
          {
            "value": "Beige",
            "displayColor": "#dac0a3"
          },
          {
            "value": "Kelly Green",
            "displayColor": "#017c60"
          },
          {
            "value": "Yellow",
            "displayColor": "#fed505"
          },
          {
            "value": "Teal",
            "displayColor": "#009ead"
          }
        ]
      }
    }
  ]
}

AuWidgetColorSelector

A widget that is used to select colors in the editor.

{
  "widgets": [
      {
          "title": "Color picks",
          "name": "colorSelector1",
          "type": "color-selector",
          "params": {
              "text": "Our color picks",
              "popupText": "Our color picks",
              "svg": "<svg viewBox='0 0 20 20'><path d='m5 5h10v10h-10z' fill='currentColor'/></svg>",
              "colors": [
                  {
                      "title": "Pastel Pink / Salmon",
                      "value": [
                          "#F4CDD3",
                          "#E08697"
                      ]
                  },
                  {
                      "title": "Fog/Navy",
                      "value": [
                          "#DCDCDC",
                          "#151B4E"
                      ]
                  },
                  {
                      "title": "Eggshell / Seamist",
                      "value": [
                          "#F6F4EC",
                          "#717BA1"
                      ]
                  }
              ]
          }
      },
      {
          "title": "Text color",
          "name": "colorSelector2",
          "type": "color-selector",
          "params": {
              "text": "Text color",
              "popupText": "Select text color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": ["#F4CDD3"]
                  },
                  {
                      "title": "Salmon",
                      "value": ["#D7877C"]
                  }
              ]
          }
      },
      {
          "title": "Base color",
          "name": "colorSelector3",
          "type": "color-selector",
          "params": {
              "text": "Base color",
              "popupText": "Select base color",
              "colors": [
                  {
                      "title": "Pastel Pink",
                      "value": "#F4CDD3"
                  },
                  {
                      "title": "Salmon",
                      "value": "#D7877C"
                  }
              ]
          }
      }
  ]
}

AuWidgetDataDrivenEditor

Represents a Data-Driven Editor widget, enabling users to fill out pre-configured forms and modify designs accordingly. For details, you can refer to the Data-Driven Editor widget topic.

{
  "widgets": [
    {
      "name": "dde",
      "type": "data-driven-editor",
      "params": {
        "config": {
          "access": {
            "tenantId": "12345",
            "userId": "jon.snow",
            "token": "..."
          },
          "design": {
            "designId": "68e74591f70c72b7ce14f889",
            "dataSetId": "68a24768aa00e6f0203564dc"
          },
          "api": {
            "designAtoms": "https://api.example.com/atoms",
            "assetProcessor": "https://api.example.com/processor",
            "assetStorage": "https://api.example.com/storage"
          },
          "settings": {
            "lang": "en",
            "allowManipulations": false,
            "itemsSnapLines": true
          },
          "renderer": {
            "watermarkEnabled": true,
            "watermarkOpacity": 0.5,
            "format": "jpeg"
          }
        }
      }
    }
  ]
}

AuWidgetDataSheet

A widget that is used to display tables. The following example illustrates how you can configure the editor, display a product preview, and create a table of variable fields.

{
  "widgets": [
    {
      "name": "canvas",
      "type": "canvas",
      "params": {
        "initial": { ... }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    },
    {
      "name": "table",
      "type": "datasheet",
      "params": {
        "data": "{{ $['canvas'].variableData }}"
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name": "canvas" }
    },
    {
      "name": "user data",
      "title": "2. Your data",
      "onActivate": [
        "{{ #function $['canvas'].saveProduct() }}",
        "{{ #function $['canvas'].getVariableData() }}"
      ],
      "mainPanel": { "name": "preview" },
      "bottomPanel": {
        "name": "table",
        "height": "50%"
      }
    }
  ]
}

AuWidgetDesignAtoms

AuWidgetDesignEditor

A widget that is used to integrate Customer's Canvas 6 or Customer's Canvas 5 to the editor. For details, you can refer to the DesignEditor widget topic.

{
  "widgets": [
    {
      "name": "editor",
      "type": "design-editor",
      "title": "Personalize your flyer",
      "params": {
        "initial": {
          "productDefinition": {
            "surfaces": [{
              "width": 436.6,
              "height": 612.2
            }]
          },
          "editorConfig": { "initialMode": "Advanced" }
        }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name":"editor" }
    },
    {
      "name": "approve",
      "title": "2. Preview",
      "mainPanel": {"name":"preview"},
      "onActivate": "{{#function $['editor'].getHiResImages(800,800)}}"
    }
  ]
}

AuWidgetDndController

AuWidgetFinishButton

A widget representing a button that finishes product personalization and places an order. For details, you can refer to the FinishButton widget topic.

{
  "widgets": [
    {
      "name": "agree-checkbox",
      "type": "checkbox",
      "params": {
        "prompt": "I approve the design.",
        "value": false
      }
    },
    {
      "name": "finish-btn",
      "type": "finish-button",
      "params": {
        "enabled": "{{$['agree-checkbox']._}}",
        "onClick": [
          "{{ #function cart.submit() }}"
        ]
      }
    }
  ]
}

AuWidgetFinishGroup

AuWidgetFunctionTrigger

A non-visual widget that is used to listen for property changes to execute custom functions. Can be used in other widgets. The following example illustrates how you can listen for property changes to execute custom functions.

{
  "widgets": [
   {
      "name": "name",
      "type": "option",
      "params": {
          "type": "list",
          "title": "Name",
          "prompt": "Choose a name",
          "values": [
              { "title": "Jack" },
              { "title": "James" },
              { "title": "John" }
           ]
      }
   },
   {
     "name": "myFunction",
     "type": "function-trigger",
     "params": {
          "arguments": [
             "{{ $['name']._.title }}",
             "{{ $['name']._.title }}"
          ],
          "callback": [
              "{{ #function(arg1, arg2) console.log(arg1, arg2) }}",
              "{{ #asyncFunction await new Promise(...) }}"
          ]
          "catch": [
             "{{ #function console.error("failed") }}",
          ],
          "finally": [
             "{{ #function console.log("cleanup") }}",
          ]
     }
   }
 ]
}

AuWidgetGallery

A widget that is used to display a list of images and allows you to select an image. For details, you can refer to the Gallery widget topic.

{
  "widgets": [
   {
     "type": "gallery",
     "name": "backgrounds",
     "title": "Background",
     "params": {
       "prompt": "Choose a background image",
       "showTitle": true,
       "items": [{
         "title": "Football",
         "name": "something",
         "previewUrl": "/assets/img/something.jpg"
       }]
     }
   }
  ]
}

AuWidgetGroup

A widget that is used to group multiple widgets together. For details, you can refer to the Group widget topic.

{
  "widgets": [
    {
      "name": "option-list",
      "type": "group",
      "params": {
        "type": "noncollapsible",
        "tabs": [
          {
            "widgets": [
              {
                "title": "Corner Type",
                "name": "corners",
                "type": "option",
                "params": { ... }
              },
              {
                "title": "Lamination",
                "name": "lamination",
                "type": "option",
                "params": { ... }
              }
            ]
          }
        ]
      }
    }
  ]
}

AuWidgetHelp

A widget that is used to display webpages and modal windows. In the following example, we define a modal window to be displayed in the help widget.

{
  "modals": [
    {
      "name": "faq",
      "header": "F.A.Q.",
      "showOnStartup": true,
      "externalContent": {
        "url": "https://example.com/pages/faq",
      }
    }
  ],
  "widgets": [
    {
      "name": "help",
      "type": "help",
      "title": "help",
      "params": {
        "steps": {
          "0": {
            "type": "modal",
            "content": "faq"
          },
          "1": {
            "type": "page",
            "content": "http://customerscanvas.com"
          }
        }
      }
    }
  ]
}

AuWidgetHtml

A widget that is used to display text and HTML markup. For details, you can refer to the Html widget topic.

The following example implements a SPAN element.

{
  "widgets": [
    {
      "name": "simple",
      "type": "html",
      "title": "Simple span",
      "params": {
        "template": {
          "<>": "span",
          "text": "Hello world"
        }
      }
    }
  ]
}

This will result in:

<span>Hello world</span>

AuWidgetImageCarousel

A widget that is used to display multiple images arranged as an image carousel. For details, you can refer to the ImageCarousel widget topic.

{
  "widgets": [
    {
      "name": "images",
      "type": "image-carousel",
      "params": {
        "images": [
          {
            "title": "Front Side",
            "url": "http://example.com/some/url/1/front.jpg"
          },
          {
            "title": "Back Side",
            "url": "http://example.com/some/url/1/back.jpg"
          }
        ]
      }
    }
  ]
}

AuWidgetInputText

A widget representing a text input field. For details, you can refer to the InputText widget topic.

{
  "widgets": [
    {
      {
        "name": "quantity-selector",
        "type": "input-text",
        "title": "How many cards?",
        "params": {
          "prompt": "Select quantity",
          "defaultValue": "{{ Math.max(order.quantity, 25) }}",
          "type": "number",
          "min": 25
        }
      }
    }
  ]
}

AuWidgetMockup3DViewer

{
  "widgets": [
   {
     "name": "previewer",
     "type": "3d-viewer",
     "params": {
       "showAnimationButtons": false,
       "showCameraButtons": true,
       "items": [
         {
           "images": "{{ $['editor'].proofImageUrls }}",
           "model": "64057c8e12287dfc3d0ecebc"
         }
       ]
     }
   }
 ]
}

AuWidgetOption

A widget that is used to select product options provided by an e-commerce system such as paper types, colors, sizes, etc. For details, you can refer to the Option widget topic.

{
  "widgets": [
    {
      "title": "Book Size (Inches)",
      "name": "books",
      "type": "option",
      "params": {
        "type": "list",
        "title": "Book Size (Inches)",
        "initWithEmptyValue": true,
        "placeholderText": "Select a book size",
        "values": []
      }
    },
    {
      "title": "Type of Pages",
      "name": "pages",
      "type": "option",
      "params": {
        "type": "radio",
        "subType": "compact",
        "title": "Type of Pages",
        "initWithEmptyValue": true,
        "placeholderText": "Select a type",
        "values": []
      }
    }
  ]
}

AuWidgetOrder

A widget that is used to control the data that will be passed to the e-commerce driver when the user finishes editing data. For details, you can refer to the Order widget topic.

{
  "widgets": [
    {
      "name": "order-details",
      "type": "order",
      "params": {
        "images": "{{$['editor'].proofImages}}",
        "downloadUrls": "{{$['editor'].hiResUrls}}",
        "data": {
          "stateId": "{{$['editor'].stateId}}"
        },
        "props": {
          "_hidden": {},
          "_fields": {},
        }
      }
    }
  ]
}

AuWidgetPantoneColorPicker

AuWidgetPantoneColorPickerConfig

AuWidgetPimOption

AuWidgetPimOptions

AuWidgetPreflight

A widget that is used to verify that pre-designed user files are compatible with your printing equipment. For details, you can refer to the Preflight widget topic.

{
  "widgets": [{
    "name": "preflight",
    "type": "preflight",
    "params": {
      "config": {
        "backendUrl": "http://preflight.example.com",
        "product": {
          "dpi": 300,
          "size": {
            "width": 595,
            "height": 842
          },
          "bleed": 20,
          "safetyLines": [{
            "color": "#00ff00",
            "altColor": "#00ff00",
            "margin": 40
          }]
        },
        "rules": [
          {
            "type": "colorspace",
            "severity": "error",
            "enableFix": true,
            "params": {
              "allowedColorSpaces": [ "cmyk" ]
            }
          }
        ],
        ...
     }
  }]
}

You can find the detailed description of the preflight configuration in the config reference.

AuWidgetPreflightConfig

Provides properties for the preflight widget. For details, you can refer to the Preflight widget topic.

{
  "widgets": [{
    "name": "preflight",
    "type": "preflight",
    "params": {
      "files": [ "http://example.com/printfiles/flyer.pdf" ],
      "config": {
        "backendUrl": "http://preflight.example.com",
        "startFromUploader": false,
        "product": {
          "dpi": 300,
          "size": {
            "width": 595,
            "height": 842
          },
          "bleed": 20,
          "safetyLines": [{
            "color": "#00ff00",
            "altColor": "#00ff00",
            "margin": 40
          }]
        },
        "rules": [
          {
            "type": "colorspace",
            "severity": "error",
            "enableFix": true,
            "params": {
              "allowedColorSpaces": [ "cmyk" ]
            }
          }
        ],
        ...
     },
     "onPageChange": [
       "{{ #function(page) page==='editor' && main.stepIndex === 0 ? main.nextStep() : ''  }}"
     ]
  }]
}

AuWidgetPreviewMockupSlider

AuWidgetProductInformationAJAX

AuWidgetSlider

A widget that is used to display multiple images together. The following example illustrates how you can initialize a slider with proof images obtained from the Design Editor.

{
  "widgets": [{
    "name": "preview",
    "type": "slider",
    "params": {
      "style": {
        "--au-widget-background": "#ffffff",
        "--au-widget-height": "480px"
      },
      "direction": "tile",
      "rows": 1,
      "columns": 2,
      "showImageIndex": false,
      "lightbox": false,
      "images": {
        "{{ #each $['editor'].proofImageUrls as url }}": {
          "url": "{{ url[0] }}"
        }
      }
    }
  }]
}

AuWidgetStaticText

A widget that is used to display a static text. For details, you can refer to the StaticText widget topic.

{
  "widgets": [
    {
      "type": "static-text",
      "name": "stub",
      "params": {
        "text": "No options available."
      }
    }
  ]
}

AuWidgetSteps

A widget that is used to control what steps are available for the user. For details, you can refer to the Steps widget topic.

{
  "widgets": [
    {
      "name": "steps",
      "type": "steps",
      "params": {
        "availabilityMode": "visited"
      }
    }
  ]
}

AuWidgetUploader

A widget that is used to upload files to a server.

{
  "widgets": [
    {
      "name": "logo-upload",
      "type": "uploader",
      "params": {
        "multiple": false,
        "text": "Upload logo",
        "destination": "{{ vars.backendUrl  + '/api/upload/image' }}",
        "fileTypes": [ ".jpg", ".jpeg", ".png", ".svg" ],
        "buttonText": "click me"
      }
    }
  ]
}

AuWidgetVariantSelector

AuWizard

Implements a multi-step editor.

AuWizardConfig

Represents the configuration of a multistep editor.

CameraButtonDefinition

CanvasImageItemData

CanvasItemData

CanvasTextItemData

ChangeDesignVariantCommand

A command that changes product design variants. Here, we open the selected design variant.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "changeDesignVariant": [{
        "designVariant": "{{ $['pim-design-selector']._ }}"
    }]
  }
}

ChangedSurface

CmykColor

ColumnScheme

CreateImageItemCommand

A command that defines product themes. For details, you can refer to the ICreateImageItem.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "createImageItem": {
      "url": "public:test.png",
      "name": "layerName",
      "position": {
         "x": 0,
         "y": 0
      },
      "size": {
         "width": 100,
         "height": 100
      }
    }
  }
}

DataSheetCellError

DataSheetFieldData

DataSheetTableTexts

Represents table notification texts.

DesignEditorItemChanges

Represents item changes of the design-editor widget.

DesignEditorWidgetCommand

Represents a DesignEditor action.

DownloadingModel

DuplicateSurfacesCommand

A command that duplicates one surface to several other surfaces.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "duplicateSurfaces": [{
        "surfaceToDuplicateId": 0,
        "surfacesToChangeIds": [ 1 ]
    }]
  }
}

ErrorModel

EventCallbacks

FailedChecksModel

FinishModel

Initial

ItemDescription

LoadUserInfoCommand

A command that changes properties of design elements in the editor.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "loadUserInfo": {
      "data": {
        "Name": "Neo"
        "Company": "Matrix"
        }
    }
  }
}

OptionSummary

OptionWidget

OrigamiViewerParams

OriginModel

PreviewModel

ProductInformation

ProductInformationDesign

ProductInformationDesignResources

ProductInformationMockup

ProductInformationOption

ProductInformationOptionValue

ProductInformationVariant

ProductInformationVariantOption

ResizeItemsCommand

A command that resizes the whole product or only predefined items. For details, you can refer to IDesignEditorDefinitionResizeItems.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "resize": {
       "resizeParams": {
         "targetType": "product",
         "width": "1000",
         "height": "1000",
         "defaultOptions": {
            "resize": 0, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
            "resetPlaceholderContent": false
          },
          "containerOptions": {
            "Background": {
             "resize": 2, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
              "resetPlaceholderContent": true
            }
          }
        }
       }
  }
}

ResponseErrorContext

Provides HTTP response properties.

RgbColor

RuleDisplayResult

RuleResult

SerializedLayout

Represents a serialized layout model. Represents a serialized layout model. Used in changeLayout.

Used in changeLayout.

SetProductModel

SetSerializedProduct

A command that deserializes a product and loads it into the editor. For details, you can refer to ISetSerializedProductConfig.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setSerializedProduct": {
      "serializedProduct": "<serializedProduct>"
    }
  }
}

SetSurfacesCommand

A command that sets up a print area. For details, you can refer to ISetSurfacesOptions.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setSurfaces": {
      "surfaces": [{
        "123-456-678"
      }]
    }
  }
}

StepChangedEventDetails

StepConditionConfig

SwapSurfacesCommand

Swaps two surfaces (pages) in the product. Here, we swap the first page of the loaded product with the second page.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "swapSurfaces": [{
        "lhsSurfaceIndex": 0,
        "rhsSurfaceIndex": 1,
    }]
  }
}

SwitchItemContentModel

TranslateItemsCommand

A command that moves predefined items. For details, you can refer to IDesignEditorDefinitionSetBackground.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "translate": {
         "translateParams": {
          "items": ["Name"], // item name
          "translateX": "10",
          "translateY": "10"
        }
      }
  }
}

UpdateItems

A command that updates channel containers with new parameters. For details, you can refer to IUpdateItemsCommandDefinition.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "updateItems": {
      "items": {
        "Bleed Zone Radius": {
          "name": "Bleed Zone Radius",
          "visualizationPermissions": {
            "noShow": "{{ $['corners']._.props.hideRadiusItem }}"
          }
        },
        "Bleed Zone Square": {
          "name": "Bleed Zone Square",
          "visualizationPermissions": {
            "noShow": "{{ $['corners']._.props.hideSquareItem }}"
          }
        }
      }
    ]
  }
}

UpdateSurfacesCommand

A command that replaces product pages. Here, we replace the first page of the loaded product with the third page of a state file.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "updateSurfaces": [{
        "definition": "{{ $['options']._.props.id  }}",
        "surfaces": [0],
        "newProductSurfaces": [2],
        "replaceAll": true
    }]
  }
}

VariableManager

Manages variables in the editor scope.

WidgetOutput

WidgetParams

Interfaces

AdvancedISliderConfig

Provides properties for arranging images in the AuWidgetSlider class.

AuWidgetGroupParam

Provides properties of the group widget. You can use these properties in params of the AuWidgetGroup class.

{
  "widgets": [
    {
      "name": "option-list",
      "type": "group",
      "params": {
        "type": "noncollapsible",
        "tabs": [
          {
            "widgets": [
              {
                "title": "Corner Type",
                "name": "corners",
                "type": "option",
                "params": { ... }
              },
              {
                "title": "Lamination",
                "name": "lamination",
                "type": "option",
                "params": { ... }
              }
            ]
          }
        ]
      }
    }
  ]
}

CameraSetting

Camera settings.

I3DItem

Provides properties that are used to visualize 3D models. The following example illustrates how you can specify a two-sided model in the 3D-Viewer widget.

{
    "widgets": [{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "http://localhost:8081/box.dae"
            }]
        }
    }]
}

For more details, you can refer to the 3D-Viewer widget.

The following example illustrates how you can specify a two-sided model in the 3D-Viewer widget.

{
    "widgets": [{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "http://localhost:8081/box.dae"
            }]
        }
    }]
}

I3DViewerNewParams

Provides properties that are used to visualize 3D models. For more details, you can refer to the 3D-Viewer widget.

The following example illustrates how you can specify a two-sided model in the 3D-Viewer widget.

{
    "widgets": [{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "showAnimationButtons": false,
            "showCameraButtons": false,
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "64057c8e12287dfc3d0ecebc"
            }]
        }
    }]
}

I3DViewerParams

Provides properties that are used to visualize 3D models. For more details, you can refer to the AuWidget3DViewer widget.

The following example illustrates how you can specify a two-sided model in the 3D-Viewer widget.

{
    "widgets": [{
        "name": "preview",
        "type": "3d-viewer",
        "params": {
            "showAnimationButtons": false,
            "showCameraButtons": false,
            "items": [{
                "images": [
                    "https://example.com/800/600",
                    "https://example.com/1000/601"
                ],
                "model": "http://localhost:8081/box.dae"
            }]
        }
    }]
}

IAbstractValue

IApiPointParams

IArtLinkItem

IArtLinkItemExtended

IAssetDataResult

IAuWidgetAjaxConfig

Provides properties that are used to send requests to the server and receive responses. You can use these properties in params of the AuWidgetAjax class.

The following example illustrates how you can populate a gallery with images obtained through an HTTP request.

{
  "widgets": [
   {
     "name": "gallery-images",
     "type": "ajax",
     "params": {
       "lock": "gallery",
       "url": "https://example.com/api/images?subfolder=cats",
       "method": "GET",
       "responseType": "json"
     }
   }
 ]
}

IAuWidgetAssetStorageAjaxConfig

IAuWidgetFinishGroupConfig

IAuWidgetFunctionTriggerConfig

Provides properties that are used to execute synchronous or async functions. You can use these properties in params of the AuWidgetFunctionTrigger class.

The following example illustrates how you can listen for property changes to execute a custom function.

{
  "widgets": [
   {
      "name": "name",
      "type": "option",
      "params": {
          "type": "list",
          "title": "Name",
          "prompt": "Choose a name",
          "values": [
              { "title": "Jack" },
              { "title": "James" },
              { "title": "John" }
           ]
      }
   },
   {
     "name": "myFunction",
     "type": "function-trigger",
     "params": {
          "arguments": [
             "{{ $['name']._.title }}",
             "{{ $['name']._.title }}"
          ],
          "callback": [
              "{{ #function(arg1, arg2) console.log(arg1, arg2) }}",
              "{{ #asyncFunction await new Promise(...) }}"
          ]
          "catch": [
             "{{ #function console.error("failed") }}",
          ],
          "finally": [
             "{{ #function console.log("cleanup") }}",
          ]
     }
   }
 ]
}

IAuWidgetHelpParams

Provides properties of the help widget. You can use these properties in params of the AuWidgetHelp class.

{
  "widgets": [
    {
      "name": "help",
      "type": "help",
      "params": {
        "steps": {
          "0": {
            "type": "modal",
            "content": "faq"
          },
          "1": {
            "type": "page",
            "content": "http://customerscanvas.com"
          }
        }
      }
    }
  ]
}

IBackToProductButton

IBottomPanelStep

IBoundsData

IButtonConfig

Provides button properties. The following example illustrates how you can define a button that navigates to the next step in the editor.

{
  "widgets": [
   {
     "type": "button",
     "name": "next-btn",
     "params": {
       "text": "Next",
       "onClick": "{{#function main.nextStep()}}",
       "classStyle": "primary"
     }
   }
 ]
}

ICanvasPreloaderConfig

ICartConfig

Provides items for AuWidgetCart. The following example illustrates how you can define carts.

{
  "widgets": [{
    "name": "cart",
    "type": "cart",
    "params": {
      "lineItems": [
        {
          "productIndex": 0,
          "images": "{{ getOrDefault(\" $['cc'].proofImageUrls.map(item=>item[0])\",[]) }}",
          "downloadUrls": "{{ getOrDefault(\" $['cc'].hiResUrls \",[]) }}",
          "data": {
            "stateId": "{{ getOrDefault(\" $['cc'].stateId \",'') }}",
            "orderUrl": "{{ getOrDefault(\" settings.customersCanvasBaseUrl.toLowerCase().split('users')[0] + '/orders/DepositPhotos?userId=' + $['cc'].userId + '&stateId=' + $['cc'].stateId\",'') }}"
          }
        }
      ]
    }
  }]
}

IChangeDesignVariantCommandDefinition

IChangeDesignVariantProductDefinition

IChangeDesignVariantSurfaceFromState

ICheckboxConfig

Provides properties for AuWidgetCheckbox.

IColor

Provides properties for AuWidgetColorPicker and AuWidgetColorSelector.

IColorPickerConfig

Provides properties for AuWidgetColorPicker.

IColorPickerData

IColorSelectorConfig

Provides properties for a color-selector.

IConfig

IConfigProductInformationAJAX

A widget that is used to get product interface.

{
  "widgets": [
    {
      "name": "pim-ajax",
      "type": "pim-ajax",
      "params": {
        "productId": "{{ Product.id }}",
        "options": {"7804":"11519"},  // { "opt1_id": "opt1_val1_id, opt1_val2_id", "opt2_id": "opt2_val1_id" }
        "settings": {
             "designs": {
                 "enabled": true
              },
             "variants": {
                 "enabled": true
              },
             "mockups": {
                 "enabled": true
              }
         },
         "eventsCallbacks": {
              "options": {
                "onError": "{{ #function(err) console.warn(err); }}",
                "onSuccess": "{{ #function(response) console.warn(response); }}"
              },
              "designs": {
                 "onError": "{{ #function(err) console.warn(err); }}",
                 "onSuccess": "{{ #function(response) console.warn(response); }}"
              },
              "variants": {
                 "onError": "{{ #function(err) console.warn(err); }}",
                 "onSuccess": "{{ #function(response) console.warn(response); }}"
              }
          }
          }
        ]
      }
    }
  ]
}

IConfiglResizeArgs

Provides parameters to resize the whole product or some items. For details, you can refer to the docs.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "resize": {
        "resizeParams": {
          "targetType": "items",
          "targets": [ "itemName1", "itemName2" ],
          "width": "60%",
          "height": "60%",
          "defaultOptions": {
            "resize": 0, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
            "resetPlaceholderContent": false
          },
          "containerOptions": {
            "Background": {
              "resize": 2, // available resize modes: Fit (0, default), Fill (1), Arbitrary (2), Original (3)
              "resetPlaceholderContent": true
            }
          }
        }
      }
  }
}

ICreateImageItem

IDataDrivenEditor

Describes the Data-Driven Editor element and its methods.

IDefinition

IDepositPhotosItem

IDepositPhotosItemExtended

IDesignAtomsWidgetConfig

IDesignConfig

Describes the design configuration for the editor.

IDesignEditorCommandDefinition

Provides the after property to support a queue of commands. The following example illustrates how you can run the setViewerSettings command after setPrintArea completes.

{
  "widgets": [{
    "type": "design-editor",
    "name": "editor",
    "params": {
      "inital": { ... },
      "setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
      "setPrintArea": {
        "data": {
          "designFile": "{{$['flyer-gallery']._.name}}"
        },
        "after": [
          "setViewerSettings"
        ]
      }
    }
  }]
}

IDesignEditorDefinitionChangeLayout

Provides properties to replace design elements in the editor.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "changeLayout": [{
      "discardChanges": false,
      "data": {
        "printAreas": [{
          "designFile": "{{'flyer/'+$['layout']._.props.design}}"
        }]
      }
    }]
  }
}

IDesignEditorDefinitionChangeMockup

Provides properties to change mockups. For details, you can refer to the ChangeMockup command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "changeMockup": [{
      "data": {
        "mockup": {
          "down": "{{$['color']._.props.mockup}}"
        },
        "previewMockups": "{{$['color']._.props.previews}}"
      }
    }]
  }
}

IDesignEditorDefinitionInitial

Provides properties to initialize a product in the editor. For details, you can refer to the Initial command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": {
      "OnBoundsNotificationCb": "{{ #function(arg) console.log(arg) }}",
      ...
    },
    "setViewerSettings": {
      "zoom": 0.1,
      "zoomMode": 'bestFit',
      "scrollPosition": {x: 0, y: 0}
    }
  }
}

IDesignEditorDefinitionModifyItems

IDesignEditorDefinitionParams

Provides commands used in the design-editor widget.

IDesignEditorDefinitionResizeItems

IDesignEditorDefinitionSetBackground

Provides properties to set a design background. For details, you can refer to the SetBackground command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setBackground": {
      "url": "public:bg_123.pdf"
    }
  }
}

IDesignEditorDefinitionSetPrintArea

Provides properties to set up a print area. For details, you can refer to the SetPrintArea command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setPrintArea": {
      "options": {
        "preserveUserChanges": true,
        "updateRevertData": false
      },
      "data": {
        "designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}"
      }
    }
  }
}

IDesignEditorDefinitionSetTheme

Provides properties to define a product theme. For details, you can refer to the SetTheme command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setTheme": {
      "primary": "{{ "#f00" }}",
      "secondary": "{{ "#0f0" }}"
    }
  }
}

IDesignEditorDefinitionSetViewerSettings

Provides properties to define the canvas zoom.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setViewerSettings": {
      "zoom": 0.1,
      "zoomMode": 'bestFit',
      "scrollPosition": {x: 0, y: 0}
    }
  }
}

IDesignEditorDefinitionTranslateItems

IDesignEditorLoadUserInfoParams

IDesignEditorPreloaderConfig

IDesignSelectorConfig

Provides gallery properties. You can use these properties in params of the AuWidgetGallery class.

   {
   "type": "pim-design-selector",
   "name": "pim-design-selector",
   "params": {
      "designs": "{{ $['pim-ajax'].output.designs }}",
      "onChange": "{{ #function console.warn($['pim-design-selector']._); }}",
      "itemWidth": "200px"
    }
  }

IDndControllerConfig

Provides properties that are used to organize the drag-and-drop behavior.

IDrawer

IDuplicateSurfacesCommandDefinition

IEditorAPI

Describes the API endpoints for the editor services.

IEditorAccess

Describes access credentials for the editor.

IEditorConfig

Provides the main configuration for the Data-Driven Editor. Example:

{
  "access": { "tenantId": "tenant1", "userId": "user1", "token": "token1" },
  "design": { "designId": "design1", "dataSetId": "dataset1" },
  "api": { "designAtoms": "https://api.example.com/design-atoms" },
  "settings": { "lang": "en", "allowManipulations": false },
  "renderer": { "width": 800, "height": 600, "format": "Pdf" }
}

IEditorElement

Provides an e-commerce driver and the language of the user interface.

IEditorSettings

Describes the settings for the Data-Driven Editor.

IEventCallbacks

IFilter

IFinishButtonConfig

Provides button properties. For details, you can refer to the FinishButton widget topic.

{
  "widgets": [
    {
      "type": "finish-button",
      "name": "finish-btn",
      "params": {
        "enabled": true,
        "onClick": [
          "{{ #function cart.submit() }}"
        ]
      }
    }
  ]
}

IFormDataConfig

IFormatWidget

IGalleryConfig

Provides gallery properties. You can use these properties in params of the AuWidgetGallery class.

{
  "widgets": [
    {
      "name": "bg-request",
      "type": "ajax",
      "params": {
        "url": "http://example.com/api/backgrounds/christmas",
        "method": "GET"
      }
    },
    {
      "name": "bg-gallery",
      "type": "gallery",
      "params": {
        "prompt": "Choose a background",
        "items": "{{$['bg-request'].response}}"
      }
    }
  ]
}

IGalleryItem

Provides properties for a gallery item.

IHtmlConfig

Provides properties for the html widget. You can use these properties in params of the AuWidgetHtml class.

{
  "widgets": [
    {
      "name": "data-based",
      "type": "html",
      "title": "HTML with data",
      "params": {
        "data": [
          {
            "title": "Color",
            "value": "Space Gray"
          },
          {
            "title": "Shape",
            "value": "Rounded Rect"
          }
        ],
        "template": {
          "<>": "div",
          "html": [
            {
              "<>": "span",
              "text": "${title}: ",
              "style": "font-weight: bold"
            },
            {
              "<>": "span",
              "text": "${value}"
            }
          ]
        }
      }
    }
  ]
}

This will result in:

<div>
    <span style="font-weight: bold">Color: </span>
    <span>Space Gray</span>
</div>
<div>
    <span style="font-weight: bold">Shape: </span>
    <span>Rounded Rect</span>
</div>

IIcon

IImage

Provides IImageCarouselConfig properties.

IImageCarouselConfig

Provides properties for the image-carousel widget. You can use these properties in params of the AuWidgetImageCarousel class.

{
  "widgets": [
    {
      "name": "images",
      "type": "image-carousel",
      "params": {
        "images": [
          {
            "title": "Front Side",
            "url": "http://example.com/some/url/1/front.jpg"
          },
          {
            "title": "Back Side",
            "url": "http://example.com/some/url/1/back.jpg"
          }
        ]
      }
    }
  ]
}

IImageCarouselPreloaderConfig

Preloader configuration

IImagesSlider

IInitialConfig

IInputTextConfig

Provides properties for an input field. You can use these properties in params of the AuWidgetInputText class.

{
  "widgets": [
    {
      "name": "quantity",
      "title": "Quantity",
      "type": "input-text",
      "params": {
        "defaultValue": "{{ order.quantity }}",
        "placeholder": "Quantity",
        "type": "number",
        "min": "1"
      }
    }
  ]
}

IItemFromSource

ILineItem

Provides properties for a single order in a cart.

ILogo

IMetadataComponent

IMetadataConfig

IMobileLayoutToolPanelConfig

IMobileToolPanelsConfig

IModalWindowDefinition

IOption

IOptionConfig

PIM selector list config example.

{
  "widgets": [
    {
      "name": "pim-option",
      "type": "pim-option",
      "params": {
        "option": {
            "type": "radio",
            "name": "Option1",
            "id": 1,
            "values": [
                {
                    "name": "dog",
                    "id": 0
                },
                {
                    "name": "cat",
                    "id": 1
                }
            ],
            "selected": 1,
            "tooltip": "its a tooltip",
            "description": "its a desc"
        },
        "onChange": "{{ #function console.warn($['pim-option']._); }}"
      }
    }
  ]
}

IOptionModifier

IOptionParams

IOptionSummaryItem

IOptionsConfig

IOrderConfig

Provides properties for the personalized orders. You can use these properties in params of the AuWidgetOrder class.

{
  "widgets": [
    {
      "name": "order-details",
      "type": "order",
      "params": {
        "images": "{{$['editor'].proofImages}}",
        "downloadUrls": "{{$['editor'].hiResUrls}}",
        "data": {
          "stateId": "{{$['editor'].stateId}}"
        }
      }
    }
  ]
}

IOrderInitModel

Provides properites for the order model.

IPanelDefinition

IPanelStep

IPreviewOptions

IRendererConfig

Describes the rendering configuration for the final files.

IRequestModel

Provides HTTP request properties.

IRestorableWidget

Provides methods for saving and restoring widget data.

IRestorationConfig

ISetBackgroundParam

ISetPrintAreaOptions

Additional configuration settings for the print areas.

ISetProductModelConfig

ISetSerializedProductConfig

Provides properties to set up a print area. For details, you can refer to the SetSerializedProduct command.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "setSerializedProduct": {
      "serializedProduct": "<serializedProduct>"
    }
  }
}

ISetSurfacesOptions

Provides properties to replace design elements in the editor. For details, you can refer to the setSurfaces command.

ISetViewerSettingsConfig

ISliderConfig

ISourcedItemsInfo

IStaticTextConfig

Provides properties for the static-text widget. You can use these properties in params of the AuWidgetStaticText class.

IStep

IStepData

Provides the title and index for manipulating steps.

ISwapSurfacesCommandDefinition

Provides properties for swapping surfaces through the swapSurfaces command.

ITemplateConfig

Provides markup elements to format an HTML page.

IToolPanel

IToolParam

ITopPanelStep

ITranslateItemCommandConfigArgs

Provides parameters to resize a product or some items. For details, you can refer to the docs.

{
  "type": "design-editor",
  "name": "editor",
  "params": {
    "initial": { ... },
    "translate": {
        "translateParams": {
         "items": ["Name"], // the item name
         "translateX": "10",
         "translateY": "10"
       }
     }
  }
}

IUpdateItemsCommandDefinition

IUpdateItemsConfig

IUpdateSurfacesCommandDefinition

Replaces a multipage product. For details, you can refer to the IUpdateSurfaceOptionsByDefinition.

IUploaderConfig

Provides properties for the AuWidgetUploader widget.

IVariableManager

Provides methods and properties for managing configuration variables.

IViewerSettings

IWidget

Provides basic properties for all widgets.

{
  "widgets": [{
    "type": "option",
    "title": "Choose size",
    "name": "size-selector",
    "params": {
      "id": 0
    }
 }]
}

IWidgetDataDrivenEditor

Describes the API and properties of the Data-Driven Editor widget.

IWidgetDataDrivenParams

Provides configuration for the Data-Driven Editor widget. You can use this interface to define the params of the widget.

{
  "name": "dd-editor",
  "type": "data-driven-editor",
  "params": {
    "config": {
      "access": { "tenantId": "tenant1", "userId": "user1", "token": "token1" },
      "design": { "designId": "design1", "dataSetId": "dataset1" },
      "api": { "designAtoms": "https://api.example.com/design-atoms" },
      "settings": { "lang": "en", "allowManipulations": false }
    },
    "onReady": "{{#function \$['dd-editor'].setUserInfo({ 'Name': 'John' }) }}"
  }
}

{
  "widgets": [
    {
      "name": "steps",
      "type": "steps",
      "params": {
        "availabilityMode": "visited",
        "steps": {
          "Step 3": {
            "enabled": "{{$['confirmation-checkbox']._}}"
          }
        }
      }
    }
  ]
}

Functions

getAppropriateOptionType(AppearanceDataType, boolean)

Declaration

function getAppropriateOptionType(type: AppearanceDataType, isMultiSelect: boolean)

Parameters

Type	Name	Description
AppearanceDataType	type
boolean	isMultiSelect

Returns

Type	Description
IMetadataType