New online demos available.  

Command: ChangeLayout

This command partially replaces design with a specified design. It ignores the background of a design, tries to merge the placeholder and text content and may add/remove some elements (depending on markers). See the Layouts toolbox button description for details.

Params

  • data - the same syntax as a productDefinition (although instead of an array only one item is allowed). You may also pass a stateId instead of a surface definition.
  • discardChanges - when true, a design always loaded from a scratch, if false or omitted - trying to merge a design as explained above.
  • sourceSurfaceIndex - if we are loading a multipage state as a design, it specifies what surface is used as a layout.
  • dimesions - canvas | config - if the design and the currently loaded product have different dimensions, which size is preferred.

Example

{
   "type": "option",
   "name": "layout",
   "params": {
       "title": "Layouts",
       "prompt": "Choose a flyer layout",
       "type": "list",
       "values": [
          { "title": "Full-page", "props": { "design": "full-page" }, "preselected": true },
          { "title": "50/50", "props": { "design": "half-to-full" } },
          { "title": "25/25/50", "props": { "design": "three" } }
      ]
   } 
},
...
{
    "type": "canvas", 
    "name": "cc",
    "params": {
        "inital": { ... }, 
        "changeLayout": [{
            "discardChanges": false,
            "data": {
                  "printAreas": [{
                      "designFile": "{{'demos/flyer/'+$['layout']._.props.design}}"
                 }]
            }
        }]
     }
}