What is UI Framework?

• 4 minutes to read

UI Framework is a JS library that helps you simplify the integration of Customer's Canvas editors when you need to define different editors for different products in a single application.

For example, let's imagine that you are building an online store where you need to offer quite different products, for example, promo products and commercial printing. These two kinds of products require different user interfaces. If you are just using the Design Editor JS library, you will end up creating two completely different pages for these products. The situation will get worse if you introduce more product types.

To avoid this, it is necessary to turn the "editor" into a single configuration file that can be loaded in the same unified way regardless of the product type. Making this possible is the main purpose of the UI Framework.

Where do I get the UI Framework?

There are several options for getting the UI Framework:

1. A cloud version. We will provide you with access to the Customer's Canvas BackOffice application to manage its data as well as URLs to the UI Framework and other applications and services you may want to deal with.
2. An on-premises version. You can download and install the package @aurigma/ui-framework by using npm.
3. An Azure CDN version. You can import the UI Framework to your application from Azure CDN. In this case, you don't even need a local copy of the library.

For more details about using the UI Framework, you can refer to the Getting started topic.

UI Framework configurations

Configuration files represent JSON files that include a description of the editor steps (screens).

On each step, you may use the widgets - e.g. the image list, editor, button, options, etc. To learn more what widgets are supported, refer the Widgets section.

Combining widgets in multiple steps, you may implement a wide range of personalization scenarios - from a form-based editor through the complicated ordering workflows consisting of multiple products, like a postcard with an envelop.

For example, you may want to define a two-step personalization process with the following widgets:

1. The user personalizes a product design: the main panel displays the Design Editor, and the tool panel displays the color options.
2. The user approves the order: the main panel displays an approval page, and the tool panel displays the delivery options.

A structure of configuration files is described in the Configs topic.

Cuztomizing the user interface

When configuring the user interface, you first split the user actions into several steps and arrange widgets on panels — widget containers. After that, you can fine-tune the user interface:

• Select one of mobile layouts.
• Apply your brand styles.
• Customize the preloader.
• Add a new localization.

See the User interface section for more details.

Dynamic configuration

The main issue to turn the editor into a configuration file is that it is not enough just to describe the editor settings in a large JSON file. You have to add a code, which determines the dependencies between different widgets. For example, you may want the editor to reload the design in the editor widget when a user clicks a thumbnail in an image gallery.

To make it possible, we introduced a special syntax, which makes the config file dynamic. For example, instead of specifying a value consisting of a design file name, you can write a single-line JS code like this:

{
   ...
  "design": "{{ $['gallery']._.name }}"
   ... 
}

Once UI Framework detects any changes in the widget called Gallery, it will recalculate the JSON file and replace this expression with a real value.

We have also introduced a special syntax, similar to the templating systems like Handlebars or Mustache, to make it possible to add conditions, loops, work with arrays and objects, etc. Unlike other templating systems, a configuration file with these dynamic expressions always remains a valid JSON. It means that you can easily store it, manipulate both on the client and server side, modify it at runtime.

You can learn more about it in the Dynamic expressions topic.

Integrating with e-commerce systems

You can integrate UI Framework with e-commerce systems through drivers. We have already created e-commerce driver modules, which work with our plugins for nopCommerce, Shopify, WooCommerce, and Magento. They make it possible to create configs that work in the same way in all systems.

However, these systems are not the only e-commerce apps available. So, you may wonder how to get the UI Framework seamlessly integrated with these other systems.

The simplest way to do it is to use a Default Driver. The idea of this driver is that you create all necessary e-commerce driver objects described in our JSON format and use several events to work with the e-commerce system.

You can learn how this can be done in the Integration with e-commerce systems topic.