Design Mode

Overview

This page explains how to build interfaces in design mode.

Design mode offers drag and drop functionality to accelerate the layout and configuration of an interface.

For information about editing interfaces as an expression, see Expression Editor.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Design mode basics

Design mode is composed of three panels: the palette, the live view, and the configuration panel.

Palette

The palette is located on the left side of design mode.

The palette contains the primary elements you'll use to create interfaces:

• Components: The fundamental building blocks of interfaces. Components are organized in the palette by component type.
• Patterns: Combinations of components that represent common interface features.
• Design Library: Interface objects that are saved in the design library to help govern interface design, promote best practices, and create a consistent user experience in every application.

From the palette, you can drag and drop individual components, patterns, and design library interfaces into the live view. You can also preview and learn more about each component, pattern, and design library interface by hovering over it.

Learn more about using the palette.

Live view

The live view is the central panel in design mode that displays the interface components.

In the interface header, you can turn on the Preview toggle to temporarily hide certain developer capabilities, such as component highlighting and empty component placeholders.

You can also use the following preview options to preview your interface in different ways:

• Branding preview: Allows you to preview the branding configurations from a site or portal object.
• Device width preview: Allows you to see how your interface appears at different screen widths.

• Locale preview: Allows you to select an Appian-supported locale and preview how your interface is translated or localized in the selected locale. The interface will only be translated if you referenced translation strings in your components.

  

  Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Configuration panel

The configuration panel is on the right side of design mode.

When you view a new interface for the first time, a list of interface templates display that you can use to jump start your interface design.

Once you've added components to interface, the configuration panel consists of the following panes:

• Rule Inputs
• Local Variables
• Component Configuration

Using the palette

To get started creating an interface in design mode, start by adding a layout. Once you have a layout, add different interface components to make a beautiful, insightful user experience.

Components

The Components part of the palette holds the layouts and components that you can drag and drop into the live view to build your interfaces.

Add layouts first

You can drag any component from the palette over to the live view, but typically you'll want to start your interface with a layout component.

Drag and drop is pretty straight forward. Let's go ahead and drag over a columns layout.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

As soon as the columns layout is dragged over, notice that the live view changes with that layout.

Layout components appear with their own drag and drop areas where other components can be dropped.

Add components to layouts

You've got your layout in place. Now it's time to fill that layout with useful components.

Drag and drop components from the palette to where you want them to appear in the live view. You can find out where the component will drop by where the pink highlight bar is located. The dotted gray outline and label tell you which area of the interface your component will drop into.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

From here, we can continue to drag more components until we have the framework of our interface complete.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Add component plug-ins

If there are any component plug-ins installed, they will appear at the bottom of the Components tab of the palette under Custom Components. Each custom component includes a link in the palette to view more information about the component vendor, whether the component is supported by the vendor, the support contacts, and the available languages and browsers/mobile clients. This information is also available in the component function documentation in expression mode.

Handling errors with drag and drop

Drag and drop is designed to let you know when an interface doesn't work out quite right. For example, certain components are not supported in the billboard layout. So if we accidentally dragged over a card choices component, the interface would let us know about it.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

Fixing the issue is as easy as clicking the undo button or using the CTRL+Z or Cmd+Z keyboard shortcut.

Patterns

Patterns are combinations of components that represent a typical design of component arrangement and appearance with UX best practices already accounted for. But they are more than just a pretty face! Patterns also come with handling for basic interactivity out of the box where applicable. As such, utilizing patterns can really accelerate the creation of rich interfaces.

Patterns use hard-coded data to showcase the component appearance and interactivity. To use a pattern in your interface, you'll need to replace the hard-coded data with data from your application. In each pattern, the underlying expression has helpful comments to guide you on which variables should be updated for customization. Learn how to adapt a pattern for your application.

Design library

Once you've built some interfaces with your organization's design standards in mind, consider including interfaces in your design library. That way, you can easily govern interface design, promote best practices, and create a consistent user experience in every application. You can drag and drop an interface from the Design Library tab of the design mode palette into the live view while building and updating interfaces, just like any other component. Then, configure the rule inputs for the interface.

To include an interface in your design library, select Include in the design library when creating or editing an existing interface. Interfaces in your design library are organized by application. You may find it helpful to create a dedicated application for some design library interfaces to keep your design library organized.

You must be a member of the Design Library Editors system group to include or exclude interfaces from your design library.

To learn more about using the design library, view the following video:

Pass data into child interfaces

When you use a child interface with rule inputs inside a parent interface, such as a design library interface, you'll need to configure rule inputs in order to pass data back to the child interface.

If you drag and drop a child interface in design mode, a Configure Inputs dialog appears. Use the Value column for each input to define the input type. You can also enter an input value. If the child interface has a default test scenario, you can click LOAD DEFAULT TEST SCENARIO to load those values instead.

Check the Preview column to see a preview of the data that will be passed to the child interface for each rule input.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

You can also configure inputs after adding a child interface. To do this, select the child interface in the live view so that the selected interface is highlighted in blue. Click the down arrow next to the label, then click Configure Inputs.

Using the Component Configuration pane

Now that we have some data to work with, we can start to configure our components using the Component Configuration pane.

For more information about configuring individual components, see Interface Components.

Select components

To select the component in the live view, hover over the component until pink highlighting appears, then click the component.

The selected component will be highlighted in blue and the component's properties will display for editing in the Component Configuration pane. A label that identifies the component type will also appear as part of the highlighting. For example, in the following image, the highlight label reads Rich Text.

Scroll or drag to pan · ⌘+/⌘− to zoom · Esc to close

To quickly select the parent of the selected component, use the breadcrumbs in the Component Configuration pane. You can also hover over the label until the parent label appears above it, then click the parent label.

You can click the down arrow next to the component label to access a context menu of actions:

• Duplicate: Copy the selected component and insert it above the original component.
• Delete: Remove the selected component from the interface.
• Select Parent: Selects the parent component, instead of the original child component.
• Open: Displays when you hover over a Opens the component in a new tab.
• Configure Inputs: Change the value of rule inputs being passed to a referenced interface or expression rule.

Configure components

You can quickly configure components in the Component Configuration pane.

Parameters are organized into groups to help you find the parameter you're looking for:

Group	Description	Example parameters
Content	Controls what displays for the component.	Label, Help Tooltip, Content
Data	Controls the data of the component.	Data Source, User Filters, Refresh toggles
Behavior	Controls how things behave when users interact with the component.	Show When, Validations, Required
Styling	Controls how things display for the component.	Background Color, Margin Above, Padding

You can also use the search bar at the top of the Component Configuration pane to quickly find specific parameters by typing the parameter name.

Additionally, you can edit existing field labels and instructions directly in the live view.

Feedback