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.
With this release, the interface designer doesn't yet show the modern component styling when you preview an interface using the live view. While you can still use the live view to test the functionality of your interface, you'll need to view the interface in Tempo, Sites, or Embedded in order to see what it looks like with the modern styling.
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.
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.
When a template 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.
Layout templates generate expressions for each of the basic layouts. These templates provide a layout to which you can add components.
Example templates 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
ri!cancel, which can be used in your process to indicate that the form was not completed.
See also: Configure a Cancel Button
If you start with the Example Offline Form template, the Make Available Offline checkbox is checked by default.
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.
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.
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 from a Record 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 From a Record in a Grid recipe.
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.
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.
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.
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 recipes:
For more information on how to modify a chart generated by the report builder, see the following recipes:
You can use the design view to easily manage the components in your interface.
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.
To remove a component, hover over the component in the design view and click the Delete icon, as shown below.
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.
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 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.
You can format your expression using the Format button at the bottom of the design pane, as shown below, or the keyboard shortcut that is available in the expression editor.
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.
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.
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.
To remove an input, click its name in the data pane, and then click Delete.
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.
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:
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:
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.
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.
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.
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.
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.
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.
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.