The Canvas is where you design and edit your Apps and consists of the following panes:

  1. Main toolbar
  2. Canvas toolbar
  3. Canvas view
  4. Layers
  5. Components
  6. Properties grouped into Main, Styles, Interactions, HTML and Advanced
  7. Logic map

Drag and drop component example

Main toolbar

Main toolbar

The main toolbar lets you:

Canvas toolbar

Toolbar functions

You use the Canvas toolbar to:

Canvas view

You create and edit content on a canvas using the Canvas view. All associated panels and toolbars are placed around the editable area, which is in the centre of the page. You can drag components from the Components panel onto the canvas and arrange them as required.


The Layers panel shows the components used in your App and how they are structured. You can use the Layers panel to:

NOTE: You can hide layers and collapse/expand each layer group.

Example on how to use Layers


App Studio offers high design flexibility by allowing you to drag and drop elements from the Components panel on to the central Canvas view area. You can build both simple and complex interfaces once you get familiar with how the tool works.

Start using App Studio by dragging components to the canvas and defining their properties and styles. You can use nested containers to produce more complex layouts.

Drag and drop component example

See Components for details on working with components.


The Properties panel is where you define the various properties and styles that each component or components group can have.

Properties are used to add data and values for the component to use. The properties panel allows you to define how your UI components behave, how they show data and other information, and how they are connected to app data. The Properties appear in the right panel when you select a component.

Component properties have the following categories:

Not all components share all of the same properties, and additionally components have style properties which can be changed inside the styles tab.

Main properties

The Main properties define the template ID, what title and placeholder text the component has, and input properties to define the default value and which input data is used to populate it. The Properties input fields can also be expanded to make it easier to work with Liquid template development. See Liquid support for more details about working with Liquid templates.

Input field expand for Liquid templating Input field expand for Liquid templating

Styles properties

Components also have Styles properties and these are used to define certain field attributes such as the height, width, whether the field appears disabled, contains an inline label, if a switch is checked by default or a button is enabled or not. For the clickable components Button, Icon button and Icon the displayed icon can also be selected.

Icon selection for clickable components


The Interactions properties allow you to define rules for when a field is hidden, disabled, or read only. If an interaction rule is set on a component, this is shown in the component toolbar, with the Eye slash icon for Hidden, and the Eye icon for Disabled or Read only as shown below.

Interaction Hidden icon in component toolbar Interaction Disable and Readonly icon in component toolbar

Note that if overlapping interactions occur, then the hierarchy is: Hidden > Disabled > Read only. For example, if a component is set as Disabled and Read only at the same time, then the component would only appear as Disabled.

Interactions properties


The Validation properties allow you to define validation rules for input fields based on common patterns and additional validation rules for required fields, and error, warning and information message conditions. For more details , see Validation.


The components can receive a selection of Bootstrap v4.1 classes for advanced customization purposes and these are presented in the Advanced tab. You can find the supported classes in the Usage Tab of our NextGen Design System.

CAUTION: Modifying some attributes in the Styles Panel may cause visual or functional problems in some components and/or layouts. Please always follow the component and pattern guidelines.

Example component style change


Standard Extension Kit parameters are supported in component properties via templating to make App design agnostic of tenant configuration, and to allow values used across Apps and flows to be referenced as parameters.

Component property parameters

When you click the + box next to the property field, or in the expanded field, the list of available properties is displayed as options. You can also reference the parameters directly using Liquid by typing {{parameters.parameterName}}. These properties are defined in the Parameters section in the Extension Kit main menu. See Parameters for more details.

When you hover the cursor over a parameter its value is displayed. Sensitive parameters are displayed as locked and their values are not shown.

Parameters are resolved when rendering the App. If a parameter is not defined, an empty value is shown in the user interface, and if the parameter is sensitive it is not shown and the Liquid formula used to reference it is displayed instead.

Note that when you import an App, all parameters are also imported and you must verify that the imported parameters are still valid in the imported App.

Logic map

The Logic map section applies to the clickable components Button and Icon button and allows you to define how they behave when clicked.

Logic map tab

Logic map event and actions

The Logic map window has the controls Zoom in, Zoom out, Fit to content and Maximize.

A clickable component has the Click event and you can define the following actions for this event:

The Click event has only have one output which leads to the configured action.

See Events and actions for a description of each action.