--- title: "Class: Editor | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Editor.Editor/" --- # Class: Editor > Represents the Design Editor. ## Constructors ### Constructor > **new Editor**(`iframe`, `postMessageClient`, `editorUrl`, `config?`): `Editor` #### Parameters ##### iframe `HTMLIFrameElement` ##### postMessageClient [`Client`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/Client.Client.md) ##### editorUrl `string` ##### config? [`IConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) #### Returns `Editor` ## Properties ### commandManager > **commandManager**: [`CommandManager`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/CommandManager.CommandManager.md) Performs operations on design elements, surfaces, print areas, and the entire product. ## Accessors ### version #### Get Signature > **get** `static` **version**(): `string` ##### Returns `string` *** ### configuration #### Get Signature > **get** **configuration**(): [`RuntimeConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/RuntimeConfiguration.RuntimeConfiguration.md) ##### Returns [`RuntimeConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/RuntimeConfiguration.RuntimeConfiguration.md) ## Methods ### getProofImages() > **getProofImages**(`options?`, `data?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IProofResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IProofResult.md)\> Renders proof images (72 DPI). #### Parameters ##### options? [`IGetProofImagesOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IGetProofImagesOptions.md) Parameters of proof images. Note, when defining the width and height, the resulting image will be proportionally resized to fit the defined rectangle. For example, if the maximum width and height are both set to `640` pixels, then a `1280 x 960` px image will be resized to `640 x 480` px. When using _mockups_, specify the size of proof images more than or equal to the preview mockup size to avoid loss of the image quality. ##### data? [`IVdpData`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IVdpData.md) Parameters of variable data printing. You can pass either `dataSet` or `itemsData` into this method. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IProofResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IProofResult.md)\> Returns an array of temporary links to proof images. #### Example ``` js // Getting links to proof images. const renderingResults = await editor.getProofImages({maxHeight: 720, maxWidth: 720, pregeneratePreviewImages: true}) // If an error occurred while getting links to proof images. .catch(error => console.error("Getting proof images failed with exception: ", error)); // If the links to proof images were generated successfully, get the links from the promise properties. proofImageUrls = renderingResults.proofImageUrls; ``` *** ### finishProductDesign() > **finishProductDesign**(`options?`, `data?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IFinishDesignResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IFinishDesignResult.md)\> Saves the current product state and returns links to the hi-res output. #### Parameters ##### options? [`IFinishProductDesignOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IFinishProductDesignOptions.md) Parameters of the hi-res and preview images. ##### data? [`IVdpData`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IVdpData.md) Parameters of variable data printing. You can pass either `dataSet` or `itemsData` into this method. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IFinishDesignResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IFinishDesignResult.md)\> Returns a promise with the resulting product details: the bounding rectangle, links to the hi-res output, permanent links to proof images, a return-to-edit URL, user changes, userId, and stateId. #### Example ``` js // Completing product customization. const productDetails = await editor.finishProductDesign() // If an error occurred while completing product customization. .catch(error => console.error("Completing product customization failed with exception: ", error)); // If product customization is completed successfully, get the promise properties. stateId = productDetails.stateId; userId = productDetails.userId; userChanges = productDetails.userChanges; console.log("Text user changes: ", userChanges.texts); ``` *** ### parseStringColor() > **parseStringColor**(`colorString`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`IColor`\> #### Parameters ##### colorString `string` #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`IColor`\> *** ### saveProduct() > **saveProduct**(`stateId?`, `data?`, `options?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`ISaveProductResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.ISaveProductResult.md)\> Saves a product current state. #### Parameters ##### stateId? `string` Specifies a state file name without an extension, up to 36 symbols length. If such a file exists, it will be overwritten. You can pass this parameter for any user except `master` and `default`. If you omit this parameter, then a new file name is generated. ##### data? [`IVdpData`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IVdpData.md) Data for personalization. You can pass either `dataSet` or `itemsData` into this method. ##### options? [`ISaveProductOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.ISaveProductOptions.md) Define how the personalization data should be applied. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`ISaveProductResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.ISaveProductResult.md)\> Returns a promise with a return-to-edit URL, userId, and stateId. #### Example ``` js // Saving a product to the "t-shirt.st" file. const savingResults = await editor.saveProduct("t-shirt") // If an error occurred while saving the product. .catch(error => console.error("Saving product failed with exception: ", error)); // If the product is saved correctly, get the promise properties. userId = savingResults.userId; stateId = savingResults.stateId; returnToEditUrl = savingResults.returnToEditUrl; console.log("User " + userId + " successfully saved state " + stateId); ``` *** ### revertProduct() > **revertProduct**(`revertToinitial?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Cancels all changes made by a user. #### Parameters ##### revertToinitial? `boolean` Enables reverting the user changes to the initial product state. `false` allows for reverting to the print areas which were set by `Surface.setPrintAreas()` with `updateRevertData` set to `true`. `true` allows for reverting to the initial product despite the `updateRevertData` parameter. The default value is `false`. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> *** ### undo() > **undo**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Reverts the last user action on the canvas. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> *** ### redo() > **redo**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Recovers the last user action on the canvas, which was reverted by the **Undo** command/button. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> *** ### loadUserInfo() > **loadUserInfo**(`data?`, `options?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Populates a product with user data. #### Parameters ##### data? [`IUserInfo`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IUserInfo.md) An object holding key-value pairs. The key is a layer name or an in-string placeholder name without markers and extra symbols. The value is a text or barcode data you want to insert into it. If you omit this parameter, then the `userInfo` passed to the editor during the initial `loadEditor` call is used. ##### options? [`ILoadUserInfoOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.ILoadUserInfoOptions.md) Options defining how the user info should be reflected in the history. You can now skip adding these changes to the history as well as replace the last snapshot. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Remarks Warning! This method is time-consuming. For optimization, you can populate a product template when it is loading into the editor with [autoLoadUserInfo https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html\|autoLoadUserInfo](https://customerscanvas.com/dev/editors/iframe-api/howto/user-info.html) enabled. #### Example ``` js let data = { "Name": "Alex Smith", "Position": "Manager", "ID": { "BarcodeFormat": "EAN_8", "BarcodeValue": "1234567" } }; // Load the web-to-print editor. let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration); // Populate the product with user data. editor.loadUserInfo(data); ``` *** ### validateUserInfo() > **validateUserInfo**(`data`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IValidationResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IValidationResult.md)\> Validates the provided user info. #### Parameters ##### data [`IUserInfo`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IUserInfo.md) An object holdsing key-value pairs. The key is a layer name or an in-string placeholder name without markers and extra symbols. The value is a text or barcode date you want to load into the editor. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IValidationResult`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IValidationResult.md)\> #### Example ``` js const data = { "Name": "Alex Smith", "Position": "Manager", "ID": { "BarcodeFormat": "EAN_8", "BarcodeValue": "1234567" } }; // Load the web-to-print editor. const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration)) // If an error occurred while loading the editor. .catch(e => console.log(e)); // Validate userInfo. const validationResults = await editor.validateUserInfo(data); if (validationResults.error) { // Output the error. console.error(validationResults); return; } // Populate the product with valid user data. editor.loadUserInfo(data); ``` *** ### getUnchangedItems() > **getUnchangedItems**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IUnchangedItems`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IUnchangedItems.md)\> Gets a list of layers that have not been personalized by the user. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`IUnchangedItems`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IUnchangedItems.md)\> A list of layers that have not been personalized by the user. #### Remarks The resulting list will only contain text items and placeholders that were not changed by the user. #### Example ``` js const unchangedItems = editor.getUnchangedItems(); if (unchangedItems.items.length > 0) { unchangedItems.items.forEach(function (logItems) { console.log(logItems); }); } else { console.log("There are no unchanged items"); } ``` *** ### subscribe() > **subscribe**(`event`, `handler`): `void` Links an event with a handler function. #### Parameters ##### event `string` The event to link the handler function with. ##### handler (...`args`) => `void` The handler function to link with the given event. #### Returns `void` #### Remarks The `Events` object contains the supported events. #### Example ``` js const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition); editor.subscribe(CustomersCanvas.IframeApi.PostMessage.Events.BoundsNotification, (args) => { console.log("BoundsNotification was triggered."); console.log(JSON.stringify(args, null, 4)); }); editor.subscribe(CustomersCanvas.IframeApi.PostMessage.Events.PrintAreaBoundsChanged, (args) => { console.log("PrintAreaBoundsChanged"); console.log(args); }); ``` *** ### getProduct() > **getProduct**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\> Returns the product currently loaded in the editor. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Product`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Product.md)\> The product loaded in the editor. #### Example ``` js // Let us add a back side to the postcard. editor.getProduct() // When we get the product. .then(function(product) { // If postcard has no back side. if (product.surfaces.length < 2) { // Adding the back to the loaded product. return product.addSurface( { // Defining the template file. printAreas: `[{ designFile: "postcard_side2"}]` }) // If the back side is added to the postcard. .then(function(newProduct) { // Replace the loaded product with the new one. product = newProduct; }); } }) // If an error occurred while getting the product or adding a back side to the postcard. .catch(function (error) { console.error("Adding surface failed with exception: ", error); }); ``` *** ### replaceInterpolationPlaceholders() > **replaceInterpolationPlaceholders**(): `void` #### Returns `void` *** ### applyProductTheme() > **applyProductTheme**(`theme`, `options?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Applies a color theme to the loaded product. #### Parameters ##### theme `any` The name of a color theme defined for the configuration or a theme definition. ##### options? [`IApplyProductThemeOptions`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ObjectModel.IApplyProductThemeOptions.md) = `...` Options for managing the history of user actions. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Example ``` js // Define a color theme. const productTheme = { "violet": { "C01": "rgb(102,45,145)", "C02": "rgb(150,67,214)", "C03": "rgb(190,107,255)", "C04": "rgb(32,18,77)" } }; // Enable the violet theme. const editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, { productThemes: productTheme, defaultProductTheme: "violet" }) // If an error occurred while loading the editor. .catch(error => console.error("The editor failed to load with an exception: ", error)); // If the editor has been successfully loaded, change the color theme. await editor.applyProductTheme({ "C01": "rgb(241,160,175)", "C02": "rgb(255,200,214)", "C03": "rgb(255,255,255)", "C04": "rgb(224,102,102)" }, // Don't save the theme change to the history. { addToHistory: false }); ``` *** ### eval() > **eval**(`code`, ...`args`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`any`\> #### Parameters ##### code `string` \| `Function` ##### args ...`any`[] #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`any`\> *** ### dispose() > **dispose**(): `void` Releases all resources used by the editor. #### Returns `void` *** ### getSelectedItems() > **getSelectedItems**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Item`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Item.md)[]\> Gets an array of selected design elements. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<[`Item`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/classes/ObjectModel.Item.md)[]\> #### Example ``` js const ids = (await editor.getSelectedItems()).map(item => item.id); if (ids.length > 0) { var product = await editor.getProduct(); var rectangles = await product.getItemRectangles(ids); var message = ""; for (let i = 0; i < rectangles.length; i++) { const rotatedRect = rectangles[i]; const rect = rotatedRect.toRectangleF(); message += "Item with " + ids[i] + " has: width: " + rect.width.toFixed(2) + ", height: " + rect.height.toFixed(2) + ", location: (" + rect.left.toFixed(2) + ", " + rect.top.toFixed(2) + ")" + ", angle: " + rotatedRect.angle.toFixed(2) + "\n"; } console.log(message); } ``` *** ### selectItems() > **selectItems**(`items`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Selects the specified design elements on the current surface. #### Parameters ##### items `CcItem`[] An array of objects that contain design element names. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Remarks You can call (Editor:class).getSelectedItems to access the items. #### Example ``` js editor.selectItems([ { "name": "Contact" }, { "name": "Address" } ]); ``` *** ### clearSelection() > **clearSelection**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Deselects design elements on the current surface. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Example ``` js editor.clearSelection(); ``` *** ### selectAllItems() > **selectAllItems**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Selects all design elements on the current surface. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Remarks You can call (Editor:class).getSelectedItems to access the items. #### Example ``` js editor.selectAllItems(); ``` *** ### setViewerSettings() > **setViewerSettings**(`settings`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> Changes Parameters of displaying the propuct on the canvas. #### Parameters ##### settings [`IViewerSettings`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/Editor.Editor.IViewerSettings.md) An object defining the appearance of the canvas. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> #### Example ``` js // Changing the zoom and scroll position. editor.setViewerSettings({zoom: 0.1, zoomMode: 'bestFit', scrollPosition: {x: 0, y: 0}}) .catch(error => { console.error("Changing the canvas settings failed with exception: ", error); }); ``` *** ### openGallery() > **openGallery**(`params?`, `action?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> Opens the Asset Manager with the listed asset tabs to add a new image to the design. #### Parameters ##### params? Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. ###### tabs? `string`[] ##### action? `"layout"` \| `"fillPlaceholders"` An action that should be applied to the product, either `"layout"` to change layouts or `"fillPlaceholders"` to automatically fill out image placeholders. By default, the Action Manager opens to add an image to the design. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> #### Examples ``` js let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); editor.openGallery({ tabs: ["My Files", "Deposit Photos"] }); ``` ``` js editor.openGallery({ tabs: ["Layouts"] }, "layout"); ``` *** ### openGalleryForBackground() > **openGalleryForBackground**(`params?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> Opens the Asset Manager to select an image for the background layer. #### Parameters ##### params? Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. ###### tabs? `string`[] #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`unknown`\> #### Example ``` js let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); editor.openGalleryForBackground({ tabs: ["Backgrounds"] }); ``` *** ### openGalleryForItem() > **openGalleryForItem**(`name`, `params?`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Opens the Asset Manager to select an image for the specified item. #### Parameters ##### name `string` The name of the image you want to change. ##### params? Parameters defining the appearance of the Asset Manager. In the `params.tabs` array, pass the names of the required asset sources. ###### tabs? `string`[] #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Example ``` js let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); editor.openGalleryForItem("Company Logo", { tabs: ["Logos"] }); ``` *** ### setThemeConfiguration() > **setThemeConfiguration**(`conf`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Changes a preloader image and the primary theme color. #### Parameters ##### conf [`IThemeConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IThemeConfiguration.md) Defines the primary color and a new image for the standard preloader. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Example ``` js let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); await editor.setThemeConfiguration({ primaryColor: "rgb(120, 24, 123)" }); ``` *** ### updateConfiguration() > **updateConfiguration**(`config`): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Parameters ##### config [`IConfiguration`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> *** ### toggleObjectInspector() > **toggleObjectInspector**(): [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> Changes the visibility of the Object Inspector. It allows for displaying or hiding the Object Inspector during the editing process. #### Returns [`Promise`](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/finally.Promise.md)\<`void`\> #### Example ```js let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, product, config); await editor.toggleObjectInspector(); ```