Free cookie consent management tool by TermsFeed

Interface Components

On This Page

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.

Top-Level Layouts

Top-level layouts can only be used as the outermost component of an interface. They cannot be nested inside another component.

Form Layout - Displays any arrangement of layouts and components beneath a header 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.

Pane Layout - Displays two or three vertical panes, each with independent scrolling. Can be used as a top-level layout, or in the contents parameter of a form or header content layout.

Wizard Layout - Displays a multi-step form with a step indicator. Use this as the top-level layout for complex forms to organize inputs into steps. Reference information about wizard steps using fv!activeStepIndex, fv!isFirstStep, and fv!isLastStep.

Title Bar Templates

  • Full Header Template - A title bar template that displays a prominent header with a background color at the top of the form or wizard. The header spans the full width of the page and can include an optional decorative stamp.

  • Image Header Template - A title bar template that displays a prominent header with a background color at the top of the form or wizard. The header spans the full width of the page and can include a decorative image next to the title.

  • Sidebar Template - A title bar template that displays a sidebar in a form or wizard. On narrower screens, the sidebar automatically displays as a header. In wizard layouts with a vertical milestone, the sidebar displays the milestone.

  • Simple Header Template - A title bar template that displays a simple text header at the top of the form or wizard. The header aligns with the width of the contents and can include an optional decorative stamp.

Top-Level Subcomponents

Layouts

Layouts arrange and organize components within an interface. Use them to group related content, control spacing, and structure the visual hierarchy of a page.

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 Group Layout - Displays an arrangement of cards, with the same width and height.

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.

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.

Tab Layout - Displays content organized into a set of selectable tabs.

Billboard Overlays

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

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

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

Layout Subcomponents

Inputs

Input components let users enter and edit data in an interface. Each input type is designed for a specific kind of value, such as text, numbers, or dates.

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. To upload files outside of a start form or task, use a!submitUploadedFiles() in the saveInto parameter of a submit button or link.

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. To upload signatures outside of a start form or task, use a!submitUploadedFiles() in the saveInto parameter of a submit button or link.

Styled Text Editor - Allows users to enter and view styled text. Text is stored with HTML formatting.

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

Chat Inputs

  • Agent Chat - Displays a chat that lets users interact with an AI agent to pull information or complete tasks on their behalf.

  • Chat - Displays an interactive chat interface that lets users send and receive messages in real time.

  • Data Fabric Chatbot - Creates a chatbot for chatting with your data fabric.

  • Documents Chatbot - Creates a chatbot for users to ask questions about a curated set of documents.

  • Records Chatbot - Creates a chatbot for chatting about a record on a summary view.

Chat Subcomponent

Selection

Selection components let users choose one or more options from a predefined set of values, such as dropdowns, radio buttons, and checkboxes.

Boolean Checkbox - Displays a single checkbox that saves a true or false value. This works well for confirmations, such as agreeing to terms and conditions. To select multiple items from a list, use the checkbox component.

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.

Toggle - Displays a toggle that saves a true or false value. This works well for controls that take effect immediately, like showing or hiding content.

Card Choices Templates

Display

Display components present read-only information to users, such as text, images, links, and styled content.

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

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

Heading Component - Displays a heading with configurations for the color, size, and font weight. Also supports heading accessibility tags, which are used by screen readers and produce no visible change.

Horizontal Line - Displays a horizontal line

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

KPI - Displays a key performance indicator that can be configured using a record type as the source.

Message Banner - Displays a message banner that screen readers can announce whenever the component is evaluated. The banner can include primary text, secondary text, accessibility text, an icon, and custom colors.

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

Progress Bar - Displays a completion percentage in bar style.

Record Knowledge Graph - Displays a record and its related records as an interactive knowledge graph.

Rich Text Display - Displays text in variety of styles, including bold, italics, underline, links, and numbered and bulleted lists. To enable users to enter styled text, use the styled text editor component.

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.

Gauge Subcomponents

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

Rich Text Subcomponents

Video Subcomponent

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

Action

Action components let users trigger operations in an interface, such as submitting a form, navigating to another page, or starting a process.

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 Subcomponent

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

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

  • Page Link - Creates a link to a page in a site or portal. Use in any component with a link parameter or in the Send Push Notification smart service. To link from external systems or emails, use a!urlForSite() and a!urlForPortal() instead. See When to use the page link component to learn when to use each link type.

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

  • Record Link - Defines a link to a record view. Record links must be used in a link parameter of another component, such as the links parameter in the link component.

  • Report Link - Defines a link to a Tempo 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. User record links must be used in a link parameter of another component, such as the links parameter in the link component.

Grids and Lists

Grid and list components display collections of structured data in rows and columns or as scrollable lists.

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.

Event History List - Displays the event history for one or more record types.

Read-Only Grid - Accepts a set of data and displays it in a grid that supports searching, filtering, selecting, sorting, and paging. You can choose to display your data as text, links, images, rich text, buttons, tags, record actions, or progress bars.

Editable Grid Subcomponents

Event History List Subcomponent

Read-Only Grid Subcomponent

Charts

Chart components visualize data as bar charts, line charts, pie charts, and other graphical formats to help users identify trends and patterns.

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 Subcomponents

  • 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, chart, or KPI. The measure should incorporate a record field or a related record field, the appropriate calculation to run on the field, and an alias. 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

Picker components let users search for and select one or more items from a large data set, such as users, groups, or records.

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

Browser components display hierarchical or categorized content that users can navigate through, such as folder structures or document libraries.

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 Subcomponents

  • 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