---
title: "UI Framework"
canonical: https://customerscanvas.com/docs/cc6/product-editors.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "UI Framework"
    versions: ["4.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# UI Framework

**Applies to:** Customer's Canvas On-Premises; UI Framework 4.x (may differ) · **Archived documentation**
 
Customer's Canvas provides a powerful API for web-to-print solutions. You can easily integrate this API into any website or e-commerce platform no matter what server technology you use. On the other hand, some tasks - such as integration into e-commerce systems - are routine, and many of our customers have to implement very similar functionality over and over again.
 
To simplify this process, Aurigma has developed a new technology that helps connect Customer's Canvas with any e-commerce system with minimal effort. From a technical point of view, it is a series of JavaScript applications that we call the *UI Framework*. Unlike the Design Editor, which operates with PSD templates and images, the UI Framework is a higher-level application that works with product options, attributes, variants, etc. It knows as much about the product as your e-commerce system.
 
## UI Framework
  
The ordering and personalization process can be organized on a step-by-step basis. For example, your users may:
 
- Edit the front side of the product.
- Select an envelope.
- Edit the back side.
- Specify any order options.

Even more complicated workflows may exist.
 
The UI Framework allows you to implement such a step-by-step sequence by composing your application with widgets, which act as building blocks from a configuration file. This makes Customer's Canvas more flexible, even for non-programmers, whether you need a simple editor or a multi-step wizard.
 
### Widget Containers
 
The UI Framework arranges the widgets in corresponding containers. The following image illustrates available containers:
 
- The **Navigation panel** allows for switching the steps.
- The **Main panel** holds a basic widget like the design editor, preview, or preflight tool.
- The **Tool panel** may include an option selector, context-dependent blocks, a gallery or combination of these.
- The **Bottom panel** allows you to enable additional widgets like a gallery.

![Widget containers in the UI Framework.](https://customerscanvas.com/docs/cc6/images/UiFrameworkPanels.png)
 
### Widgets
 
The UI Framework implements the following widgets:
 
- Ajax
- Button
- DesignEditor
- Checkbox
- Gallery
- Group
- Html
- ImageCarousel
- InputText
- Option
- Order
- StaticText
- Steps
- [and more↗](https://customerscanvas.com/support/ui-framework/widgets/readme.md)

There are no mandatory widgets, but without certain widgets, it is unlikely that you will be able to build a usable editor. In most cases, all your configs will contain **DesignEditor**, some **Option** widgets, and you will configure the output from the editor through the **Order** widget. Use the **ImageCarousel** to organize a preview section.
 
Another important widget is **Ajax**. It allows for receiving data from a server, such as a list of images, dynamically generated images, or any other data you may need. Combined with **StaticImage**, you can update the image dynamically by using the [REST API](https://customerscanvas.com/docs/cc6/dynamic-image-api.htm.md).
 
### Steps
 
Since the ordering process can be a step-by-step process, you need to associate required widgets in each of the containers with a step. For example:
 
- **The first step**: the **Main panel** displays the Design Editor, while the **Tool panel** displays color options.
- **The second step**: the **Main panel** displays an approval page, while the **Tool panel** displays delivery options.

For more details, you can refer to the [UI Framework Tutorials↗](https://customerscanvas.com/support/ui-framework).
 
## See Also
  
### Manual
 
- [Getting started with the UI Framework](https://customerscanvas.com/docs/cc6/getting-started-with-uif.htm.md)
- [Integration with E-commerce Overview](https://customerscanvas.com/docs/cc6/integration-with-e-commerce.htm.md)
- [UI Framework tutorials↗](https://customerscanvas.com/support/ui-framework)
- [Dynamic Image API↗](https://customerscanvas.com/support/dynamic-image)