Interface Components

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

• If you're looking for information about the PATTERNS tab of the component palette, see Interface Patterns.
• To understand the Interface design, concepts, and functionality available, see Interface Object.
• If you're new to Appian, check out Academy Online.

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.

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.

Header Content Layout - Displays any arrangement of layouts and components beneath a card or billboard flush with the edge of the page.

Section Layout - This layout requires Appian for Mobile Devices version 17.2 or later. 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

• Bar Overlay - Displays a horizontal bar overlay for use in billboard layout.

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

• Column Overlay - Displays a vertical column overlay for use in billboard layout.

• Full Overlay - Displays an overlay that covers the entire billboard layout.

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

Inputs

Barcode - Displays and 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). To display a read-only date using a custom format, use a text component.

Date and Time - Displays and allows entry of a single date and time (year, month, day, hour, minute, second). To display a read-only date and time using a custom format, use a text component.

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. The value remains encrypted while on the server and is only decrypted when displayed in the component.

File Upload - Allows users to upload one or more files. File upload is only supported on start forms and task forms. Uploaded documents are not accessible until after form submission.

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

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

Signature - Allows users to capture and save a .png signature file.

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

Selection

Card Choices - Displays a set of cards from which the user may select one or many cards and saves a value based on the selected choice.

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 list of choices for the user to select one item and saves the index of the selected choice.

Dropdown - Displays a list of choices for the user to select one item and saves a value based on the selected choice.

Multiple Dropdown By Index - Displays a list of choices for the user to select multiple items and saves the indices of the selected choices.

Multiple Dropdown - Displays a list of choices for the user to select multiple 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 the index of 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.

Card Choices Templates

• Bars (Text Stacked) Template - Displays a bar card template with an icon and stacked primary text and secondary text. For use in the Card Choice Field cardTemplate parameter.

• Bars Template - Displays a bar card template with an icon, primary text, and secondary text justified on either side of the card. For use in the Card Choice Field cardTemplate parameter.

• Tiles Template - Displays a tile card template with a stacked icon, primary text, and secondary text. For use in the Card Choice Field cardTemplate parameter.

Display

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

Gauge - Displays completion percentage in a circular style with optional text.

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

Milestone - Displays the completed, current, and future steps of a process or sequence.

Progress Bar - Displays a completion percentage in bar style.

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

Stamp - Displays an icon and/or text on a colored circular background.

Tag Component - Displays a list of short text labels with colored background to highlight important attributes.

Tag Item - Displays a short text label with colored background for use with a!tagField.

Time Display - Displays a single time (hour, minute, second) but cannot take input.

Video - Creates a Video component.

Web Content Field - Displays content inline from an external source.

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

Gauge Types

• Gauge Fraction - Displays text in fractional format for use within the gauge field primary text parameter.

• Gauge Icon - Displays an icon for use within the gauge field primary text parameter.

• Gauge Percentage - Displays the configured percentage of the gauge as an integer for use within the gauge field primary text parameter.

Image Types

• Document Image - Displays an image from document management.

• User Image - Displays the profile photo of the user.

• Web Image - Displays an image from the web.

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.

Action

Button Array Layout - Displays a list of buttons in the order they are specified. Use this layout for buttons within interfaces rather than for submission buttons at the bottom of forms

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

Link - Displays one or more links of any link type, including document links, task links, record view links, external web page links, and dynamic links that update variables.

Record Actions - Displays a list of record actions with a consistent style. A record action is an end-user action configured within a record type object, such as a related action or record list action.

Action Types

• Record Action Item - Displays a record action defined within a record action field or a read-only grid that uses a record type as the data source. A record action is an end-user action configured within a record type object, such as a related action or a record list action.

Button Types

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

Link Types

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

• 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 configured in the record type.

• Report Link - Defines a link to a report.

• Safe Link - Defines a link to an external web page.

• 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.

Grids

Editable Grid - Displays a tabular layout of SAIL components to provide quick inline editing of fields. For an example of how to configure an editable grid, see the Add, Edit, and Remove Data in an Inline Editable Grid SAIL Recipe.

Read-Only Grid - Accepts a set of data and displays it as read-only text, links, images, or rich text 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 (a!gridLayout).

• Editable Grid Header - Defines a column header for use in an editable grid (a!gridLayout).

• Editable Grid Row - Displays a row of components within an editable grid (a!gridLayout).

Read-Only Grid Elements

• Read-Only Grid Column - Displays a column of data as read-only text, links, images, or rich text within the read-only grid.

Charts

Area Chart - Displays a series of numerical data as points connected by lines with the area between the line and axis shaded. Use an area chart to visualize trends over time and compare multiple values. If specific values are more important than the trend, consider using a column chart.

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 - Displays numerical data as slices of a single circle. Use a pie chart to graphically display parts of a whole.

Scatter Chart - Displays the relationship between two numerical data points. Use a scatter chart to compare multiple values, visualize trends over time, and spot outliers.

Chart Elements

• Area Chart Configuration - Contains configuration for how to display data in an area chart.

• Bar Chart Configuration - Contains configuration for how to display data in a bar chart.

• Chart Custom Color Scheme - A custom list of colors to apply to any chart.

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

• Chart Series - Defines a series of data for a bar, column, line, area, or pie chart. This component is always used within a chart component.

• Column Chart Configuration - Contains configuration for how to display data in a column chart.

• Grouping - Determines the fields to group by in a query or chart that uses a record type as the source. The grouping should incorporate a record field or a related record field, an alias, and an optional interval to group by a date.

• Line Chart Configuration - Contains configuration for how to display data in a line chart.

• Measure - Determines the numerical values to display on a query or chart. The measure should incorporate a record field or a related record field, the appropriate calculation to run on the field, and an alias. If your record type has data sync enabled, you can also apply filters to determine which values are included in the calculation.

• Pie Chart Configuration - Contains configuration for how to display data in a pie chart.

Pickers

Custom Picker - Displays an autocompleting input for the selection of one or more items from an arbitrary data set. For an example of how to configure the picker, see the Configure an Array Picker SAIL Recipe.

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 select a document.

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 group.

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 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