Samples of Workflow Elements

The source code of the Workflow Element samples is available at:

https://github.com/aurigma/CCHubSample_WorkflowElements

This repo contains several examples that will allow you to try out the API in action:

• Simple Editor
• Handy Editor
• Template Editor

These examples show how to authenticate in Customer's Canvas Hub, display an editor on a React page, and submit results to the server to start the rendering process.

Technical details

This sample is based on React as a frontend framework and basic Node.js Express-based backend.

Getting started

Configuration

Once you clone this repo, you need to configure the .env file. To do this, create a copy of the .env.sample file and add your Customer's Canvas details to the new file.

The environment variables are divided into two groups:

1. General Customer's Canvas Hub variables: These are available only on the backend.
2. Frontend-specific variables: These are typically used for certain samples and have the VITE_ prefix.

General variables

The following variables specify your tenant settings:

• CCHUB_BASEURL: Depending on your instance, it is either https://customerscanvashub.com (US), https://eu.customerscanvashub.com (Europe), or https://au.customerscanvashub.com (Australia).
• CCHUB_STOREFRONTID: A storefront (or integration) record ID, created as per the Help Center > Admin's Guide > Settings > Integrations.
• CCHUB_CLIENTID and CCHUB_CLIENTSECRET: OAuth2 Client Credentials of your app, registered in your tenant as per the Help Center > Admin's Guide > Settings > External Apps.
• CCHUB_TENANTID: Specify your tenant ID. See the Help Center > Admin's Guide > Settings > Tenant.
• VITE_CCHUB_ENVIRONMENT: The location of your tenant — us, eu, or au.

Basic Samples-specific variables

For basic code examples, both Simple Editor and Handy Editor, specify:

• VITE_BASICSAMPLE_CCHUB_PRODUCTID: Create a product in Customer's Canvas as per the Help Center > Admin's Guide > PIM Module > Creating products and set its ID here.

No-PIM Handy Editor-specific variables

Samples illustrating how to load the Handy Editor without the PIM module require:

• VITE_NOPIMSAMPLE_CCHUB_PUBLICDESIGNID: A public design ID. You can obtain it through the admin panel (Assets > Designs) as explained at Help Center > Admin's Guide > Assets > File Manager.
• VITE_NOPIMSAMPLE_CCHUB_EDITORMOCKUPID: A comma-separated list of mockup IDs for the editor. You can obtain the ID through the admin panel Assets > Mockups.
• VITE_NOPIMSAMPLE_CCHUB_PREVIEWMOCKUPID: A comma-separated list of mockup IDs for the preview. You can obtain the ID through the admin panel Assets > Mockups.

Template Editor-specific variables

For the sample illustrating how to work with the Template Editor, specify:

• VITE_TEMPLATEEDITOR_CCHUB_PUBLICDESIGNID: A public design ID to open in the Template Editor.

Install and run

Run

npm install

Then

npm run dev

The app opens at http://localhost:3000