Skip to main content
⚠️ Archived Version

You are viewing documentation for Design Editor version 7.3, which is no longer actively maintained. For the latest features and updates, please refer to the current version (7.4).

Class: RuntimeConfiguration

Allows you to get and set the user ID and PDF metadata of a product at runtime.

Constructors​

Constructor​

new RuntimeConfiguration(postMessageClient): RuntimeConfiguration

Parameters​

postMessageClient​

Client

Returns​

RuntimeConfiguration

Methods​

getPdfMetadata()​

getPdfMetadata(): Promise<IPdfMetadata>

Reads PDF metadata of the current product.

Returns​

Promise<IPdfMetadata>

The IPdfMetadata structure with data to be saved in the hi-res output.

Example​

const data = await editor.configuration.getPdfMetadata()
.catch(error => console.error("Retrieving PDF metadata failed with exception: ", error));

console.info("getPdfMetadata returned: " + data.title);

setPdfMetadata()​

setPdfMetadata(config): Promise<void>

Sets PDF metadata to the current product.

Parameters​

config​

IPdfMetadata

PDF metadata to be saved in the hi-res output.

Returns​

Promise<void>

Example​

editor.configuration.setPdfMetadata({
author: "John Wood",
title: "Postcard template with flowers",
keywords: "red,flower,postcard"
})
.catch(error => console.error("setPdfMetadata failed with exception: ", error));

getUserId()​

getUserId(): Promise<string>

Reads ID of the user working on the product.

Returns​

Promise<string>

The user identifier.

Example​

let editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, config);
console.log(await editor.configuration.getUserId());

getImageMetadata()​

getImageMetadata(url, fromDesignImages?): Promise<ImageMetaData>

Loads metadata of an image.

Parameters​

url​

string

The link to the image.

fromDesignImages?​

boolean

If true, gets metadata from the design gallery.

Returns​

Promise<ImageMetaData>

Image properties.

Example​

// Get metadata of an image in the public gallery.
const metaData = await editor.configuration.getImageMetadata("public:backgrounds/azure.jpg");

setUserId()​

setUserId(userId): Promise<void>

Sets a new user identifier and moves user files to this user's folders.

Parameters​

userId​

string

The new user identifier that needs to be set for the product.

Returns​

Promise<void>

Remarks​

Before using this method, you must enable the secure mode and update an authentication token by using the additionalUserId parameter with the new user identifier.

Example​

<html>
<head>
<title>Setting a new user ID</title>
<!-- The IFrame API script. IMPORTANT! Do not remove or change the ID. -->
<script id="CcIframeApiScript" type="text/javascript" src="https://example.com/Resources/Generated/IframeApi.js">
</script>
</head>
<body>
<!-- The iframe to display the editor in. -->
<iframe id="editorFrame" width="100%" height="800px"></iframe>
<input type="button" value="Set User ID" onclick="setUserID()" />

<script>
let editor = null;

document.addEventListener('DOMContentLoaded', async () => {
// Initialize product with an Invitation template.
const productDefinition = { surfaces: ["invitation"] };
// Get the iframe element to display the editor in.
const iframe = document.getElementById("editorFrame");
// Load the editor.
editor = await CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition)
// If there was an error thrown when loading the editor.
.catch(e => console.log(e));
});

// Set JohnWood as a new user ID.
async function setUserID() {
let userId = await editor.configuration.getUserId();
// Get an active token for the current user.
let token = (await (await fetch("https://example.com/api/Auth/Users/" + userId + "/Tokens",
{
method: "GET",
headers: { "X-CustomersCanvasAPIKey": "UniqueSecurityKey" }
})).json()).tokens[0].tokenId;

// Update the token for another user.
await fetch("https://example.com/api/Auth/Tokens/" + token + "?AdditionalUserId=JohnWood", {
method: "PUT",
headers: { "X-CustomersCanvasAPIKey": "UniqueSecurityKey" }
});

// Copy user files.
editor.configuration.setUserId("JohnWood")
.catch(e => console.log(e));
}
</script>
</body>
</html>
Was this page helpful?