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.
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 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.
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
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.
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 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.
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 recipe:
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 undo the most recent changes to your interface using the Undo button in the header of the Interface Designer, or by using the keyboard shortcut (Ctrl-Z for Windows, Cmd-Z for Mac). This undoes the most recent change to the definition of your interface, and changes the design view to focus on the component that was modified.
If you change your mind on an Undo, you can restore the most recent changes to your interface using the Redo button that is next to the Undo button, or by using the keyboard shortcut (Shift-Ctrl-Z for Windows, Shift-Cmd-Z for Mac).
Changes you can undo and redo include modifying the interface definition as well as adding/editing/deleting rule inputs. The list of changes to undo or redo is cleared whenever the interface is saved.
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.
Rule inputs are used to pass data in and out of your interface. To use rule inputs in your expression, each must be referenced by name in your expression using the
ri domain like all other rule inputs.
All rule 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 Rule 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 rule 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.
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 of the interface designer window.
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 see the updated 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.
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 of the dropdown in the header. 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.
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 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 object are saved and designers can view the definitions of old versions; however, when invoked, it is always the latest version that executes.
Versions of a single object can be accessed by users with Viewer permissions, by doing one of the following:
This option opens the Versions dialog with a list of versions:
If you wish to revert to an older version, open that version by clicking on it and save it. This will create a new version of the object 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.
Versions can be deleted by users with Editor permissions and if there are multiple versions. A single version can be deleted by clicking the corresponding red X in the rightmost column of the versions grid.
Bulk deletion can be done by selecting filter criteria that returns multiple versions, which causes a message to appear that prompts you to delete the filtered versions. If the latest version is included in the filtered results, it will not be affected by the bulk deletion. This allows for easier and faster cleanup of object versions, in order to maintain useful versions and prevent version buildup that may affect engine memory.
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.
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.