Design Mode

Overview

example_interface_design_objects.png

This topic 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 more information about editing interfaces as an expression, see the expression mode section of the Interfaces page.

We will be recreating the Sales Team Dashboard example displayed when you first create the interface.

Using the Component Palette

Components are organized in the palette by component type: Layouts, Inputs, Selection, Display, Action, Grids, Charts, Pickers, and Browsers. These are the fundamental building blocks for Interfaces. From the component palette, you can drag & drop individual components into the live view.

Layouts First

While any component can be dragged over to the live view, typically layouts are the first thing to go into the live view.

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

column_drag_and_drop.gif

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

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

Safari users will need to drag components from their non-interactive areas. For example, you cannot drag from the input area of a text field.

Adding Components to a Layout

You can find out where the component will drop by where the pink highlight bar is located. The dotted gray outline and label tells you which area of the interface your component will drop into.

drag_and_drop_column_below.png

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

Duplicate is a very helpful feature when working if with interfaces. If you have a layout that requires the same or similar type of components, it's generally easier to create one set of components and duplicate as many as you need.

design_mode_component_framework.png

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, section layouts should not be nested within each other. So if we accidentally dragged over a section into another section, the interface would let us know about it.

design_mode_section_error.png

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

Component Configuration

Once we've got our components laid out in our live view, we can start to configure each component using the component configuration pane on the right.

Rule Inputs

Before we start any configuration, it's important to know where we're getting or sending our data. For this Interface, it is assumed that Appian is passing in a rule input to retrieve data. However, this can also be handled via local variables.

Adding Test Values

After creating some rule inputs, it's useful to set default test data. To get a more accurate representation of what our users will see, lets add test values to the interfaces.

design_mode_rule_input_test.png

Click on the Set as default test values link in the test inputs dialog. That way the next time you open this interface, it will be pre-populated with data.

Component Configuration

Now that we have some data to work with, we can start to configure each component. To configure a component, we have to click on the component view in the live view. Whichever component appears highlighted in the live view.

design_mode_compoent_exmaple.png

If you are working in a heavily nested set of components, it can sometimes be difficult to select the right one directly in the live view. Instead, hover over the selected component to reveal all of the components in that click area of the live view.

Once you've configured all the fields in the component configuration pane your interface is ready to use with other objects in your application.

desing_mode_final.png

Testing and Troubleshooting

As you configure your interface, the interactive live view immediately updates, allowing you to test the dynamic behavior of its components. The current values of all rule inputs are displayed in the Rule Inputs pane, so you can see how the data changes as a result of an interaction in the live view. You can also simulate different scenarios using the Test button in the top right corner.

Change the Value of a Variable

The value of a variable can be changed by interacting with the component in the live view that saves into that variable. However, you may wish to change the values of these variables outside of interactions with the live view. There are three ways to do this:

  • Change input values individually (including indexes of an array and CDT fields) by editing the value in the Interface Inputs pane.
  • Reset local variables to their initial values as defined in the expression by clicking the Test button in the top right corner.
  • Set the default values of inputs to simulate the user loading the form for the first time. To do this:
    1. Click the Test button in the top right corner.
    2. Enter default values for inputs in the Test Inputs dialog, as shown below.
      1. As you enter an expression for an input, the Value column displays the evaluated result that will be used when testing the expression.
      2. For many types, you can simply enter a value directly in the Value column.
    3. Click the Test Interface button to evaluate the interface using the provided values.

Note: Values of local variables defined using the load() function are persisted across reevaluations in the live view just as they would be in Tempo. Therefore, if you change the default value for a load variable in your expression, you need to click the Test button to see the updated changes.

Save Default Test Values

Designers have an option to save a set of default test values with the interface. This allows you to save a common test scenario that can be used by any designer who modifies or tests the interface.

Test values may be expressions or literal values. All expression or text values have a 4,000 character limit. Additionally, the designer must have access to all selected users, groups, documents, or folders to save as a test value.

To save a set of default test values, enter the values in the Test Inputs dialog and click the Set as default test values link below the grid. Once set, the default values will be saved with the interface.

Previewing Interfaces for Mobile

images:interface_designer_mobile.png

While the default live view displays your interface exactly as it would appear on a desktop web browser, you can also preview the layout of your interface on a tablet or phone by using those options on the upper right of the Preview tab (below the Save button). Please note that while the tablet and phone options do show an accurate representation of the behavior of the interface, they do not show a pixel perfect (native) rendering of the individual components. For example, a dropdown menu in the live view will not have the same appearance as an iOS dropdown, but will have the same layout and behavior, allowing you to plan your interface for mobile use.

Differences Between the Live View and Tempo

In general, most components behave exactly the same in the interface live view as they do on an interface in Tempo. However, there are a few exceptions listed below:

  • Links to internal objects, such as process tasks or records, open in the same tab by default when clicked in an interface in Tempo, but open in a new tab when clicked in the live view.
  • The Submit button on a process form submits the form and navigates away from the form (either by going to the next task in an activity chain or by going back to the Task or Action list) when clicked in an interface in Tempo, but does not navigate away when clicked in the live view. All other behavior of the Submit button is the same.
  • In Tempo, the org chart component displays a user card when hovering over a user's profile photo or name. The component does not display user cards in the live view.

Exporting and Importing Default Test Values

Default test values are always exported with the interface, but can only imported if the destination environment has the Allow Test Values to Be Imported with Design Objects setting enabled. For more about this configuration, see the Deployment section of the Appian Administration Console page.

FEEDBACK