Workflow

• Last updated on April 9, 2024
• •
• 1 minute to read

In this article, you will learn how to get Simple Editor workflows defined in Customer's Canvas BackOffice and use them in your application.

Getting a workflow

The endpoint Products_GetPersonalizationWorkflow allows you to get a workflow selected for a product. Using the product ID, you can get such details as the workflow type and definition.

In the response, you can find the content property with editor settings and workflowType with the editor name.

{
  "id": 202,
  "content": "{\n    \"settings\": {\n        \"general\": {\n            \"showAddToCartLoader\": false,\n            \"showPrice\": false,\n            \"showApprovalCheckbox\": true,\n            \"proofRenderingConfig\": {\n                \"width\": 1400,\n                \"height\": 1400\n            }\n        },\n        \"downloadPdfButton\": {\n            \"enabled\": true,\n            \"newTab\": true\n        }\n    }\n}",
  "workflowType": "SimpleEditor"
}

Adding scripts to a page

First, retrieve a link to the actual version of the Simple Editor deployed in your tenant by using the endpoint TenantInfo_GetApplicationsInfo.

In the response, find the simpleEditorUrl.

{
  "uiFrameworkUrl": "https://staticjs-aurigma.azureedge.net/ui-framework/stable",
  "simpleEditorUrl": "https://staticjs-aurigma.azureedge.net/simple-editor/stable",
  ...
}

Now, you can use this link to add the editor script and styles to a page.

// Simple Editor styles
const editorStylesUrl = simpleEditorUrl + '/styles.css';
const editorStylesElement = document.createElement('link');
editorStylesElement.href = editorStylesUrl;
editorStylesElement.rel = 'stylesheet';
document.head.appendChild(editorStylesElement);

// Simple Editor script
const editorScriptUrl = simpleEditorUrl + '/editor.js';
const editorScriptElement = document.createElement('script');
editorScriptElement.src = editorScriptUrl;
document.head.appendChild(editorScriptElement);

Initializing Simple Editor

To place the editor on the page, you need a container.

<main class="main">
    <au-simple-editor></au-simple-editor>
</main>

This is how you can paste the editor into the container.

editorScriptElement.onload = () => {
    const simpleEditor = document.getElementsByTagName('au-simple-editor').item(0);
    simpleEditor?.init({
        integration: {
            tenantId: 123,
            user: {
                id: "sam.brown",
                token: "<userToken>"
            },
            storefrontId: 20011,
            cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
        },
        product: {
            productId: 12345
        },
        settings: {<settings>},
    });
};

Here, you must pass a token generated for a user. The endpoint StorefrontUsers_Create adds users to your application, and StorefrontUsers_GetToken generates tokens for them as described in the Registering customers topic.

To get your tenantId, navigate to your Customer's Canvas account, click Settings > Tenant, and copy the number from the Tenant ID field. To determine the storefrontId, in your Customer's Canvas account, go to Settings > Integrations and use the ID from the left column. The cchubApiGatewayUrl is either https://eu.customerscanvashub.com or https://customerscanvashub.com, depending on where your tenant is hosted, in the EU or US environment.

In the settings, pass the workflow content obtained at the first step.