Interface Designer

Overview

The interface designer is an interactive tool that lets designers create, display, and immediately test interfaces as if they were live in Tempo, while detecting errors as they appear.

New interfaces are created from the context of an application. Use the New menu within an application to create a new interface and open it in the interface designer. For instructions on how to create a new interface from an application, see Create an Interface in the SAIL Tutorial.

Set Interface Properties

To modify the interface properties, go to Properties in the Settings menu, as shown below.

This opens the Interface Properties dialog, where you can modify the description, folder, and make the interface available for offline use. For more information about offline interfaces, see designing interfaces for offline use.

Templates and Builders

When the interface has not yet been defined, a list of template options are available in the design view (shown below). These options give you a starting point from which to build your interface.

Start with a Template or Example

When a template or example is selected, the interface definition is updated with the template and the live view displays the resulting interface. There are two categories of templates: layouts and examples.

Templates generate expressions for common layouts and use cases.

  • The Basic Form and Basic Page templates contain basic layouts and some common elements you'll typically put in them, such as sections and columns.
  • The Wizard template contains a fully functional, multi-page wiard with a confirmation at the end. To modify this for use in your interface, add your own components to the pre-defined pages and add new pages as necessary following the same pattern.
  • The Master-Detail template contains a grid that has a drilldown to view more information about a particular row in the grid. To modify this for use in your interface, replace the pre-defined data set with your data, update the links in the grid with the value you want to save, and add your own components to the details section.

Examples generate expressions for each type of interface and contain different components to display sample data. These templates demonstrate how different types of interfaces should be laid out and how different types of information can be displayed.

Each of the form templates contain both a Submit and a Cancel button. The Cancel button saves true into ri!cancel, which can be used in your process to indicate that the form was not completed.

If you start with the Example Offline Form template, the Make Available Offline checkbox is checked by default.

Use the Report Builder

The report builder allows you to create basic grids and charts to display data from a record type or data store entity using an intuitive interface.

Select the Data Source

First, select a constant that points to either a record type or a data store entity. This is used to populate the data for the report. The report has access to all data from the source; the grid uses a batch size of 20 to display the data in pages and the charts display all data at once.

Select the Fields to Display

Next, select the fields that are used for the grid or chart, as shown below.

You can add new columns by selecting the corresponding field from the dropdown and clicking the Add Field button. Only fields that are scalar and either a primitive data type (with the exception of Encrypted Text) or an Appian object data type can be used. For more information on how to display fields of a CDT, see the Display Data with CDT Fields in a Grid recipe.

Note: The text representation of data from Appian object data types will be displayed (such as [Group:1] for a group). For more information on how to format data that will be displayed in a grid, see the Format Data in a Grid recipe.

Aggregate Data

In addition to displaying the data, you can also aggregate data by selecting Group records by common fields. At least one field must set as a grouping field. You can also specify how all other fields are aggregated, as shown below.

Display the Data in a Read-Only Grid

To display the data in a paging grid, select the Grid option in the Choose Visualization section. You can also define the default sort order for the data. A preview of the grid is displayed, as shown below.

Display the Data in a Chart

To display the data in a chart, select one of the chart options in the Choose Visualization section. For bar, column, and line chart, you can add multiple data series and the display name for each data series will be displayed in the tooltip. A preview of the chart is displayed, as shown below.

Generate the Interface

When you've finished the basic configurations for the grid or chart, click the Generate button at the bottom to generate the corresponding interface. This interface definition includes both the query to return the data and the configuration for the component. You can then modify the interface to format the data or add dynamic behavior.

For more information on how to modify a grid generated by the report builder, see the following recipe:

For more information on how to modify a chart generated by the report builder, see the following recipes:

Manage Components

You can use the design view to easily manage the components in your interface.

Add a Component

You can add components to your interface using the Add Component link in the design view, as shown below. This link will be available at the top level when the interface is undefined as well as inside any column of a layout.

This opens the component picker, as shown below. The component picker only displays components that are allowed to be added. If you want to choose a rule or function rather than a component, you can enter an expression by clicking the enter an expression link.

You can also add a component in the middle of a list. To do this, hover over the component above or below where you want the new component and click the Add Component Above or Add Component Below icon, as shown below.

If you are designing a top-level interface, you should begin by selecting a layout.

Remove a Component

To remove a component, hover over the component in the design view and click the Delete icon, as shown below.

Move a Component

To move a component, hover over the component in the design view and click either the Move Up or Move Down icon, as shown below.

Configure a Component

  • You can configure many component properties using the provided inputs.
  • To configure a property using an expression function or rule, click the Edit as Expresion icon, as shown below.
    This will open the edit dialog, where you can use the expression editor to configure the property.
  • To convert a component to a different component, click the Convert icon, as shown below.
    The options in the menu will be restricted to components of similar types (such as the different types of pickers) or commonly used with the same types of inputs.

Add Dynamic Behavior Using the Expression View

To add dynamic behavior to your interface, you can switch to the expression view using the button at the bottom of the design pane, as shown below. This is useful for adding local variables, defining interactions between components, and other dynamic design patterns.

Manage Interface Inputs

Interface inputs are used to pass data in and out of your interface. To use interface inputs in your expression, each must be referenced by name in your expression using the ri domain like all other rule inputs.

All interface inputs are managed using the data pane.

Add an Input

To add an input, click the + button in the top right-hand corner of the data pane, as shown below.

This opens the New Interface Input dialog, where you can specify the variable's name, type, and whether or not it is an array. The type may be a system type or a custom data type.

Note: The following system types cannot be selected for an interface input: Community, Discussion Thread, Email Address, Email Recipient, Forum, LabelValueTable, Message, Page, Password. See the Data Types page for a complete list of system data types. Hidden CDTs also cannot be selected.

Edit an Input

To edit an input's attributes (name, type, or whether or not it is an array), you can click the input name in the data pane. However, if you are using the input in your expression, you may have to update the expression as well to avoid causing an evaluation error.

Remove an Input

To remove an input, click its name in the data pane, and then click Delete.

Test an Interface

The live view renders your interface for the current values of all interface inputs and local variables, displaying it exactly as it would appear in Tempo. As you configure your interface, the live view immediately updates the resulting interface. The interface displayed in the live view is interactive, meaning that you can test the dynamic behavior of its components. The current values of all interface inputs are displayed in the interface inputs pane, so you can see how the data changes as a result of testing an interaction in the live view.

Differences Between the Live View and Tempo

In general, most components behave exactly the same in the interface designer as they do on a SAIL 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 a SAIL 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 a SAIL 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.

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 of the interface designer window.
  • Set the default values of inputs to simulate the user loading the form for the first time. To do this:
    • Click the Test button in the top right corner of the interface designer window.
    • Enter default values for inputs in the Test Inputs dialog, as shown below.
      • As you enter an expression for an input, the Value column displays the evaluated result that will be used when testing the expression.
      • For many types, you can simply enter a value directly in the Value column.
    • 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 pick up the changes.

Save Default Test Values

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.

Optimize Interface Performance

The performance view shows you detailed performance information for your interface. This allows you to identify and address performance bottlenecks and to understand the impact of particular rules and functions. You can also access historical performance trends to help you understand how your interface is performing under real usage by showing the overall trends over time.

The performance view can be accessed using the Performance View button in the header. See the Performance View page for more information on how to use the performance view.

Versions

All versions of an interface are saved and designers can view the definitions of old versions, but when a user invokes an interface it is always the current version that executes. In order to access previous versions of your interface, select Versions in the Settings menu.

This option will open the Versions dialog, which displays basic information about all other versions of the interface and includes a link to each version. The version description is also shown here and can act as designer notes for descriptions that are not exposed to end users.

If you wish to revert your interface to an older version, open the version and click the Save button. This will create a new version of the interface with the definition that is currently loaded in the designer. Modifying a previous version and saving it as the latest version does not affect the old version. To avoid confusion, you should close the tab from which you opened the Versions dialog, since it now contains an old version.

Save Interface As

If your interface is intended to be used as a report or an application action, you can configure that within the interface designer using Save as... in the Settings menu.

Some fields in the Save As form may be pre-populated with information based on your interface definition and the application that contains the interface.

Save as Report

You can create a report directly from within the interface designer. This automatically creates a report that calls the interface and makes it available from the Reports tab in Tempo.

To save an interface as a report, use the Report option in the Save Interface As dialog.

When created, the report is added to the selected application. Reports created this way use the same default security as reports created from the application designer, as described here.

Save as Application Action

You can create an application action directly from within the interface designer. This automatically creates a process model with a start form that calls the interface, including a process parameter for each input, and creates an action on the selected application, making it available from the Actions tab in Tempo.

To save an interface as an action, use the Application Action option in the Save Interface As dialog.

You can use the Save & Edit button to open the process model and immediately begin building the rest of the process flow.

When created, the new process model is added to the selected application and the application is published. Process models created this way use the same default security as process models created from the application designer, as described here.

FEEDBACK