Package ui-framework
Classes
ActionsErrorToastConfig
Represents a toast to display errors.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"actionsErrorToast": {
"show": true,
"duration": 15000
}
}
}]
}
ApiParams
Au3dViewerBase
AuAbstractOption
AuBaseSelectorWidget
Declares methods used to retrieve the selected value in a widget and clear the selection.
AuBaseWidget
The base class for widgets.
AuCanvas
The base class for the AuWidgetCanvas widget.
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.
AuPIMDesignSelector
AuWidget3DViewer
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
}
}
]
}
AuWidgetCanvas
A widget that is used to integrate Customer's Canvas 4 to the editor. Deprecated. Instead, you can use the Design Editor widget.
{
"widgets": [
{
"name": "editor",
"type": "canvas",
"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)}}"
}
]
}
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"
}
]
}
}
]
}
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
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": "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
CanvasItemChanges
Represents item changes of the canvas widget.
CanvasItemData
CanvasTextItemData
CanvasWidgetCommand
Represents a canvas action.
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']._ }}"
}]
}
}
ChangeMockupCommand
A command that changes mockup images in the editor. A command that changes mockup images in the editor. For details, you can refer to the ICanvasDefinitionChangeMockup.
{
"widgets": [{
"type": "canvas",
"name": "editor",
"params": {
"inital": { ... },
"changeMockup": {
"data": [{
"mockup": {
"down": "{{$['color']._.props.mockup}}"
},
"previewMockups": "{{$['color']._.props.previews}}"
}]
}
}
}]
}
For details, you can refer to the IDesignEditorDefinitionChangeMockup.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"inital": { ... },
"changeMockup": {
"data": [{
"mockup": {
"down": "{{$['color']._.props.mockup}}"
},
"previewMockups": "{{$['color']._.props.previews}}"
}]
}
}
}]
}
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
InitialCommand
A command that defines a product and configures the editor. A command that defines a product and configures the editor. For details, you can refer to ICanvasDefinitionInitial.
{
"widgets": [{
"type": "canvas",
"name": "editor",
"params": {
"initial":{
"productDefinition":{
"surfaces":[{ "printAreas": [{ "designFile": "mytemplate" }] }]
},
"editorConfig": {
"initialMode": "Advanced"
}
}
}
}]
}
For details, you can refer to IDesignEditorDefinitionInitial.
{
"widgets": [{
"type": "design-editor",
"name": "editor",
"params": {
"initial":{
"productDefinition":{
"surfaces":[{ "printAreas": [{ "designFile": "mytemplate" }] }]
},
"editorConfig": {
"initialMode": "Advanced"
}
}
}
}]
}
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"
}
}
}
}
ModifyItemsCommand
A command that changes properties of design elements in the editor. A command that changes properties of design elements in the editor. For details, you can refer to ICanvasDefinitionModifyItems.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"modifyItems": {
"items": {
"Name": {
"value": "Neo"
},
"Company": {
"value": "Matrix"
}
}
}
}
}
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"modifyItems": {
"items": {
"Name": {
"value": "Neo"
},
"Company": {
"value": "Matrix"
}
}
}
}
}
OptionSummary
OptionWidget
OrigamiViewerParams
OriginModel
PreviewModel
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.
SetBackgroundCommand
A command that replaces the background image in the editor. A command that replaces the background image in the editor. For details, you can refer to IDesignEditorDefinitionSetBackground.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setBackground": {
"url": "public:bg_123.pdf"
}
}
}
For details, you can refer to the IDesignEditorDefinitionSetBackground.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setBackground": {
"url": "public:bg_123.pdf"
}
}
}
SetPrintAreaCommand
A command that sets up a print area. A command that sets up a print area. For details, you can refer to ICanvasDefinitionSetPrintArea.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setPrintArea": {
"options": {
"preserveUserChanges": true,
"updateRevertData": false
},
"data": {
"designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}"
}
}
}
}
For details, you can refer to IDesignEditorDefinitionSetPrintArea.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setPrintArea": {
"options": {
"preserveUserChanges": true,
"updateRevertData": false
},
"data": {
"designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}"
}
}
}
}
SetProductModel
SetRemoteMockupCommand
A command that changes mockups by direct URLs. A command that changes mockups by direct URLs. For details, you can refer to ISetRemoteMockupParams.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setRemoteMockup": [{
"surfaceIndex": 0,
"mockup": "down",
"url": "http://example.com/mockup.png"
}]
}
}
For details, you can refer to ISetRemoteMockupParams.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setRemoteMockup": [{
"surfaceIndex": 0,
"mockup": "down",
"url": "http://example.com/mockup.png"
}]
}
}
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"
}]
}
}
}
SetThemeCommand
A command that defines product themes. A command that defines product themes. For details, you can refer to ICanvasDefinitionSetTheme.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setTheme": {
"primary": "{{ "#f00" }}",
"secondary": "{{ "#0f0" }}"
}
}
}
For details, you can refer to IDesignEditorDefinitionSetTheme.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setTheme": {
"primary": "{{ "#f00" }}",
"secondary": "{{ "#0f0" }}"
}
}
}
SetViewerSettings
A command that defines the canvas zoom. A command that defines the canvas zoom. For details, you can refer to ICanvasDefinitionSetViewerSettings.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
For details, you can refer to IDesignEditorDefinitionSetViewerSettings.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
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"
}
}
}
}
UpdateContainerSettingsCommand
A command that updates channel containers with new parameters. A command that updates channel containers with new parameters. For details, see the IChannelContainerDefinition topic.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"updateContainerSettings": [
{
"Foil": {
"texture": "{{ $['foil']._.props.texture }}"
},
"Raised Ink": {
"texture": "{{ $['paper']._.props.textColor }}"
}
}
]
}
}
For details, see the IChannelContainerDefinition topic.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"updateContainerSettings": [
{
"Foil": {
"texture": "{{ $['foil']._.props.texture }}"
},
"Raised Ink": {
"texture": "{{ $['paper']._.props.textColor }}"
}
}
]
}
}
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"
}
}
]
}
ICanvasCommandDefinition
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": "canvas",
"name": "editor",
"params": {
"inital": { ... },
"setViewerSettings": "{{vars.zoomSettings[$['flyer-size']._.title]}}",
"setPrintArea": {
"data": {
"designFile": "{{$['flyer-gallery']._.name}}"
},
"after": [
"setViewerSettings"
]
}
}
}]
}
ICanvasDefinitionChangeLayout
Provides properties to replace design elements in the editor. For details, you can refer to the setSurfaces command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"changeLayout": [{
"discardChanges": false,
"data": {
"printAreas": [{
"designFile": "{{'flyer/'+$['layout']._.props.design}}"
}]
}
}]
}
}
ICanvasDefinitionChangeMockup
Provides properties to change mockups. For details, you can refer to the ChangeMockup command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"changeMockup": [{
"data": {
"mockup": {
"down": "{{$['color']._.props.mockup}}"
},
"previewMockups": "{{$['color']._.props.previews}}"
}
}]
}
}
ICanvasDefinitionInitial
Provides properties to initialize a product in the editor. For details, you can refer to the Initial command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
ICanvasDefinitionModifyItems
Provides properties to change properties of design elements in the editor. For details, you can refer to the ModifyItems command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"modifyItems": {
"items": {
"Name": {
"value": "Neo"
},
"Company": {
"value": "Matrix"
}
}
}
}
}
ICanvasDefinitionParams
Provides commands used in the canvas widget.
ICanvasDefinitionSetBackground
Provides properties to set a design background. For details, you can refer to the SetBackground command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setBackground": {
"url": "public:bg_123.pdf"
}
}
}
ICanvasDefinitionSetPrintArea
Provides properties to set up a print area. For details, you can refer to the SetPrintArea command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setPrintArea": {
"options": {
"preserveUserChanges": true,
"updateRevertData": false
},
"data": {
"designFile": "{{vars.designRoot + '/' + $['card-size']._.title}}"
}
}
}
}
ICanvasDefinitionSetTheme
Provides properties to define a product theme. For details, you can refer to the SetTheme command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setTheme": {
"primary": "{{ "#f00" }}",
"secondary": "{{ "#0f0" }}"
}
}
}
ICanvasDefinitionSetViewerSettings
Provides properties to define the canvas zoom.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setViewerSettings": {
"zoom": 0.1,
"zoomMode": 'bestFit',
"scrollPosition": {x: 0, y: 0}
}
}
}
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
IDefinition
IDepositPhotosItem
IDepositPhotosItemExtended
IDesignAtomsWidgetConfig
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
IEditorElement
Provides an e-commerce driver and the language of the user interface.
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() }}"
]
}
}
]
}
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.
IGetTokenParams
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
IRequestModel
Provides HTTP request properties.
IResources
IRestorableWidget
Provides methods for saving and restoring widget data.
IRestorationConfig
ISetBackgroundParam
ISetPrintAreaOptions
Additional configuration settings for the print areas.
ISetProductModelConfig
ISetRemoteMockup
Provides properties to change mockups by using direct URLs. Provides properties to change mockups by using direct URLs. For details, you can refer to the ChangeMockup command.
{
"type": "canvas",
"name": "editor",
"params": {
"initial": { ... },
"setRemoteMockup": [{
"surfaceIndex": 0,
"mockup": "down",
"url": "http://example.com/mockup.png"
}]
}
}
For details, you can refer to the ChangeMockup command.
{
"type": "design-editor",
"name": "editor",
"params": {
"initial": { ... },
"setRemoteMockup": [{
"surfaceIndex": 0,
"mockup": "down",
"url": "http://example.com/mockup.png"
}]
}
}
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.
ITokenUpdateRes
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.
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
}
}]
}
IWidgetDataDrivenParams
IWidgetDataSheetColumnScheme
Represents a column scheme for a table.
IWidgetDataSheetConfig
Provides properties that are used to create a Datasheet widget.
IWidgetDataSheetTexts
Represents table notification texts.
IWidgetOptionParam
Provides advanced settings for options.
IWidgetOptionValue
Provides a property to handle an option selection.
IWidgetStepsConfig
Provides properties for the steps widget.
You can use these properties in params of the AuWidgetSteps class.
{
"widgets": [
{
"name": "steps",
"type": "steps",
"params": {
"availabilityMode": "visited",
"steps": {
"Step 3": {
"enabled": "{{$['confirmation-checkbox']._}}"
}
}
}
}
]
}
ItemChangeObject
Provides the ID and name of a changed item.
ItemFunctions
PimOptionRestorationData
PreviewMockupSlider
PreviewMockupSliderConfig
ProductVariantDesign
ProductVariantOption
ProductVariantResource
ProductVariantResourcePreview
SimpleOptionValue
Option value description for 'Simple' option type.
StepHelpConfig
Provides properties for steps included in IAuWidgetHelpParams.
Tab
Provides properties for a group tab.
VariantSelector
VariantSelectorConfig
Enums
ButtonsPosition
Position of controls for the 3D Viewer. For more details, you can refer to the 3D-Viewer widget.
Direction
Arrangement of images in the AuWidgetSlider class.
GroupWidgetType
Style of the group widget.
MockupType
ModelType
3D Viewer models.
NavigationMode
Navigation modes.
OptionType
Available option types.
ProductVariantResourceType
Available product variant resource types.
ResizeMode
ResourceType
SurfaceDimensionsValue
Product size origin. Product size origin.
AssetStorageApiClientResult
AssetStorageClient
AssetType
DataSheetRow
DownloadPosition
EntityType
ErrorsCallback
Defines a function that should work when a request fails.
HelpType
A help style.
IMetadataType
IOldOptionSubType
IOldOptionType
ISetRemoteMockupParams
IconPosition
PreflightToolStep
A preflight step.
ResponseType
A response type specifying how to interpret the response received from the server.
THiResImagesOptions
TProofImagesOptions
Functions
getAppropriateOptionType(AppearanceDataType, boolean)
Declaration
function getAppropriateOptionType(type: AppearanceDataType, isMultiSelect: boolean)Parameters
| Type | Name | Description |
|---|---|---|
| AppearanceDataType | type | |
| boolean | isMultiSelect |
Returns
| Type | Description |
|---|---|
| IMetadataType |
getToken(Object)
Declaration
function getToken(__namedParameters: Object)Parameters
| Type | Name | Description |
|---|---|---|
| Object | __namedParameters |
Returns
| Type | Description |
|---|---|
| Promise<string> |
loadLocal()
Declaration
function loadLocal()Returns
| Type | Description |
|---|---|
| IResources> |
waitEditor(Document, string)
Declaration
function waitEditor<T>(doc: Document, tag: string)Parameters
| Type | Name | Description |
|---|---|---|
| Document | doc | |
| string | tag |
Returns
| Type | Description |
|---|---|
| Promise<T> |