Canvas

Overview

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

Main toolbar

The main toolbar lets you:

• Return to the App Studio dashboard
• Switch between the Canvas, Resources and Logic flow tabs when creating your App
• Import an App in JSON format
• Export the current draft App that is open in the Canvas as a JSON file
• Save your App as a draft
• Preview your App
• Publish the current draft App that is open in the Canvas
• Manage credentials

Canvas toolbar

You use the Canvas toolbar to:

• See how your App renders when running on different device sizes (desktop, laptop, tablet and mobile)
• Resize the Canvas view and reset the size back to 100%
• Undo and redo your edits

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.

Layers

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

• Select
  • When you select a component in the Layers panel it gets highlighted on the canvas view and its properties become available in the Properties panel.
• Rearrange
  • You can rearrange components using drag and drop to move them along the Layers panel and the canvas view updates to show the new structure.
• Delete
  • You can delete components from layers and canvas by pressing the Delete or Backspace key, or using the trash can icon.

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

Components

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.

See Components for details on working with components.

Properties

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:

• Main
• Styles
• Validation
• Interactions
• HTML
• Advanced

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.

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.

Interactions

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.

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.

Validation

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.

Advanced

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.

Parameters

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.

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.

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:

• HTTP Request
• Trigger flow
• Reset
• Toast
• Modal
• Field validation

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

See Events and actions for a description of each action.