Aurigma Customer's Canvas SDK - Design Atoms Framework

Design Atoms is a part of Customer's Canvas SDK which allows manipulating individual elements of a design edited in the Customer's Canvas web-to-print editor. If you think of Customer's Canvas editor as a browser, you may consider Design Atoms as a DOM API.

For example, you may import a template to Customer's Canvas, then use Design Atoms to iterate all items, find, say, text elements named, say, Name and change its value. Or you can create a brand new design and pass it to Customer's Canvas.

Important! This package won't work alone. Design Atoms consists of a frontend part (this package) and a backend part (search for a package called Aurigma.DesignAtoms in NuGet). To be able to use Design Atoms, you need to connect it to a backend. See below for details.

Getting started

Install Design Atoms frontend library

Just run

npm install @aurigma/design-atoms --save

Then, you may import modules to your project and start using them.

import { Product } from "@aurigma/design-atoms/Model/Product";

let product = new Product([new Surface(100, 100)]);
// ...  

However, to be able to use it in a full force, you need to connect it with a backend.

There are two main ways to get a backend - create your own backend using the Aurigma.DesignAtoms NuGet package or hook it to an existing Customer's Canvas instance.

Creating a custom backend

This way is a good option if you don't need the editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, it is a way to go if you want to create a custom editor based on the Viewer control. Another purpose is to handle the output from Customer's Canvas in a separate application.

To do it, you need to create a .NET Web API project, add a reference to Aurigma.DesignAtoms NuGet package and expose the necessary endpoints.

You can download a sample backend implementation from GitHub and use this sample solution as a separate object or merge it with your existing ASP.NET application.

Connecting to Backend

You can use a running instance of either custom backend or Customer's Canvas 5. To connect to your backend, add the following code.

const backendUrl = "http://<yourInstanceUrl>";
const holderId = "#id-of-your-div";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

What's next?

Refer Customer's Canvas documentation for more details on how to use this package:

• Deploying the Design Atoms Framework
• Sample Project
• IFrame API 5