Interface Components

Working with Interface Components

Interfaces in Tempo are made up of components. This page lists all the components and supporting configurations delivered with Appian.

To understand the Interface design, concepts, and functionality available, see also: Interface Object

To display a component on an interface, you need to create an expression that returns the component. For each component, we've listed the function that returns the component along with the parameters for that function.

If you want to display multiple components, you can either place them in an array within a specific layout component, or simply place them in an array and let the system display them by default with a single-column layout.

Notes

  • Functions use the a! domain instead of the fn! domain used in most other Appian functions. You are required to indicate this a! domain when calling your interface functions.
  • Functions return data types. Do not use fields from these data types in your expressions because they often change between versions and hotfixes.

See also: Interface Tutorial, Interface Recipes

Layouts

Billboard Layout - Displays a background color, image, or video with optional overlay content.

Box Layout - Displays any arrangement of layouts and components within a box on an interface.

Card Layout - Displays any arrangement of layouts and components within a card on an interface. Can be styled or linked.

Columns Layout - Displays any number of columns alongside each other. On narrow screens and mobile devices, columns are stacked.

Dashboard Layout - Displays any arrangement of layouts and components. Use this as the top-level layout for record views and Tempo reports.

Form Layout - Displays any arrangement of layouts and components beneath a title and above buttons. Use this as the top-level layout for start and task forms.

Section Layout - Displays any arrangement of layouts and components beneath a section title on an interface.

Side By Side Layout - Displays components alongside each other.

Layout Elements

Column Layout - Displays a column that can be used within the columns layout.

Side By Side Item - Displays one item within a side by side layout.

Inputs

Barcode - Displays a field that allows entry of a barcode value using a barcode scanner or manual input.

Date - Displays and allows entry of a single date (year, month, day). When the field is editable, users can input dates by typing or by picking from a calendar.

Date and Time - Displays and allows entry of a single date and time (year, month, day, hour, minute, second). When the field is editable, users can input dates by typing or by picking from a calendar and then select the time from a dropdown.

Decimal (Floating Point) - Displays and allows entry of a single decimal number, stored with a floating point representation.

Encrypted Text - Allows entry of a single line of text that is encrypted when saved into a variable.

File Upload - Allows users to upload a file.

Integer - Displays and allows entry of a single integer number.

Paragraph - Displays and allows entry of multiple lines of text.

Text - Displays and allows entry of a single line of text.

Selection

Checkbox By Index - Displays a limited set of choices from which the user may select none, one, or many items and saves the indices of the selected choices.

Checkbox - Displays a limited set of choices from which the user may select none, one, or many items and saves the values of the selected choices.

Dropdown By Index - Displays a limited set of exclusive choices from which the user must select one item and saves the index of the selected choice.

Dropdown - Displays a limited set of exclusive choices from which the user must select one item and saves a value based on the selected choice.

Multiple Dropdown By Index - Displays a long list of choices from which the user may select none, one, or many items and saves the indices of the selected choices.

Multiple Dropdown - Displays a long list of choices from which the user may select none, one, or many items and saves values based on the selected choices.

Radio Button By Index - Displays a limited set of choices from which the user must select one item and saves a value based on the selected choice.

Radio Button - Displays a limited set of choices from which the user must select one item and saves a value based on the selected choice.

Display

Rich Text Types

Bulleted List - Displays a bulleted list within a rich text component.

Header Text - Displays heading-styled text within a rich text component.

Inline Image - Displays an image within a rich text component.

List Item - Displays a numbered list within a rich text component.

Numbered List - Displays a numbered list within a rich text component.

Styled Icon - Displays a style icon within a rich text component.

Styled Text - Displays styled text within a rich text component.

Image Types

Document Image - Displays an image from document management.

User Image - Displays a user's profile photo.

Web Image - Displays an image from the web.

Document Viewer - Displays a document from document management on an interface.

Image - Displays an image from document management or the web.

Milestone - Displays the completed, current, and future steps of a process or sequence, such as a user's current step in a wizard or the current state of a business process.

Progress Bar - Displays a completion percentage, such as receiving all the necessary approval tasks, completing a certain number of on-boarding processes, or completing a single process.

Rich Text - Displays text in variety of styles, including bold, italics, underline, links, headers, and numbered and bulleted lists.

Time Display - Displays a single time (hour, minute, second). Does not take an input.

Video - Displays a video from the web

Web Content Field - Displays content from an external source.

Web Video - Displays a video from the web for use in a video field.

Action

Button Array Layout - Displays a list of buttons in the order they are specified.

Button Layout - Displays a list of buttons grouped by prominence. Use this layout in cases where prominence needs to be explicitly specified.

Link - Display one or more links of any type. Link types serve two main purposes: to navigate to objects, such as tasks and records, or to perform actions, such as downloading documents or starting processes.

Button Types

Button - Displays a button that can conditionally be used to submit a form.

Submit Button - Displays a button that can conditionally be used to submit a form.

Authorization Link - Defines a link to authorize a user for a connected system that uses OAuth 2.0.

Document Download Link - Defines a link used to download a document.

Dynamic Link - Defines a link that triggers updates to one or more variables.

News Entry Link - Defines a link to news entries.

Process Task Link - Defines a link to a process task.

Record Link - Defines a link to a record view.

Report Link - Defines a link to a report.

Start Process Link - Defines a link to start a process and navigates the user through any initial chained forms.

Submit Link - Defines a link to trigger form submission.

User Record Link - Defines a link to a user record.

Web Link - Defines a link to an external web page.

Grids

Editable Grid - Arranges interface components in a tabular layout to provide quick inline editing of fields.

Paging Grid - Displays read-only text, links, and images in a grid that supports selecting, sorting, and paging.

Editable Grid Elements

Editable Grid Column Configuration - Defines a column configuration for use in an Editable Grid.

Editable Grid Header - Defines a column header for use in an Editable Grid.

Editable Grid Row - Displays a row of components within an editable grid.

Paging Grid Elements

Paging Grid Image Column - Displays a column of images within a paging grid.

Paging Grid Selection - Creates a selection configuration for use with a paging grid.

Paging Grid Text Column - Displays a column of text within a paging grid.

Charts

Bar Chart - Displays numerical data as horizontal bars. Use a bar chart to display several values at the same point in time.

Column Chart - Displays numerical data as vertical bars. Use a column chart to graphically display data that changes over time.

Line Chart - Displays a series of numerical data as points connected by lines. Use a line chart to visualize trends of data that changes over time.

Pie Chart - Represents numerical data as slices of a single circle. Use a pie chart to graphically display parts of a whole.

Chart Data

Chart Reference Line - Contains the reference line value for each threshold that is defined on a column, bar, or line chart.

Chart Series - Defines a series of data for a bar, column, line, or pie chart.

Pickers

Custom Picker - Displays an autocompleting input for the selection of one or more items from an arbitrary data set.

Document Picker - Displays an autocompleting input for the selection of one or more documents.

Document and Folder Picker - Displays an autocompleting input for the selection of one or more documents or folders.

Folder Picker - Displays an autocompleting input for selecting one or more folders.

Group Picker - Displays an autocompleting input for selecting one or more groups.

Record Picker - Displays an autocompleting input for the selection of one or more records, filtered by a single record type. Suggestions and picker tokens use the title of the record.

User Picker - Displays an autocompleting input for the selection of one or more users.

User and Group Picker - Displays an autocompleting input for selecting one or more users or groups.

Browsers

Document Browser - Displays the contents of a folder and allows users to navigate through a series of folders to find and download documents.

Document and Folder Browser - Displays the contents of a folder and allows users to navigate through a series of folders to find and select a folder or document.

Folder Browser - Displays the contents of a folder and allows users to navigate through a series of folders to find and select a folder.

Group Browser - Displays group membership structure in columns. Users can navigate through the structure and select a single user.

Hierarchy Browser (Columns) - Displays hierarchical data in the form of drillable columns with selectable cells.

Hierarchy Browser (Tree) - Displays hierarchical data in the form of a drillable tree.

Org Chart - Displays the organizational structure of users within Appian based on the users' Supervisor field values.

User Browser - Displays group membership structure in columns. Users can navigate through the structure and select a single user.

User and Group Browser - Displays group membership structure in columns. Users can navigate through the structure and select a single user or group.

Hierarchy Browser Elements

Hierarchy Browser Node (Columns) - Returns a Hierarchy Browser Field Columns Node, used in the Node Configurations parameter of the Columns Browser to determine how items in the hierarchy are displayed.

Hierarchy Browser Node (Tree) - Returns a Tree Node, used in the Node Configurations parameter of the Tree Browser Component to determine how items in the hierarchy are displayed.

FEEDBACK