Note:Looking for patterns and examples? Check out the SAIL Design System.
Overview
Interface recipes provide you with a combination of components and dynamic expressions to achieve common, user-interface designs. This page contains a searchable list of all interface recipes.
Adapting recipes
Be sure to check out How to Adapt a Recipe for Your Application if you're new to working with interfaces.
Example data
Many of these recipes rely on sample Employee data or sample data from the Appian Retail application.
- To follow along with recipes that use sample Employee data, complete the Use the Write to Data Store Entity Smart Service Function on an Interface recipe to create the sample Employee data. If a recipe uses the Employee record type, complete the Database-Backed Record Type Tutorial to create the record type and additional objects.
- To follow along with recipes that use data from the Appian Retail application, log in to Appian Community and register for Appian Community Edition. The Appian Retail application is available for free and contains sample retail data, fully configured record types, and example reports.
In Appian Community Edition, create a test application to follow along with patterns and examples using data from the Appian Retail application.
Search recipes
| Validation Add Multiple Validation Rules to One Component |
| Validation, Grids, Looping Add Validations to an Inline Editable Grid |
| Looping Add and Populate Sections Dynamically |
| Grids, Looping Add, Edit, and Remove Data in an Inline Editable Grid |
| Hierarchical Data, Group Management Add, Remove, and Move Group Members Browser |
| Reports, Charts, Query Data, Grids, Records Aggregate Data and Conditionally Display in a Chart or Grid |
| Reports, Charts, Query Data, Records Aggregate Data and Display in a Chart |
| Reports, Charts, Query Data, Records Aggregate Data by Multiple Fields and Display in a Chart |
| Reports, Query Data, Grids, Records Aggregate Data on a Date or Date and Time Field |
| Reports, Charts, Query Data, Filtering, Records Aggregate Data using a Filter and Display in a Chart |
| Hierarchical Data Browse Hierarchical Data |
| Wizards Build a Wizard with Milestone Navigation |
| Wizards Build an Interface Wizard |
| Grids, Conditional Display Conditionally Hide a Column in a Grid |
| Validation Configure Buttons with Conditional Requiredness |
| Conditional Display, Choice Components Configure Cascading Dropdowns |
| Choice Components Configure a Boolean Checkbox |
| Charts, Grids, Query Data, Records Configure a Chart Drilldown to a Grid |
| Charts, Grids Configure a Chart to Grid Toggle |
| Choice Components Configure a Dropdown Field to Save a CDT |
| Choice Components Configure a Dropdown with an Extra Option for Other |
| Pickers Configure an Array Picker |
| Pickers Configure an Array Picker that Ignores Duplicates |
| Pickers Configure an Array Picker with a Show All Option |
| Formatting Define a Simple Currency Component |
| Grids Delete Rows in a Grid |
| Auto-Refresh Disable Automatic Refresh After User Saves Into a Variable |
| Auto-Refresh, Grids, Records Display Last Refresh Time |
| Document Management, Grids Display Multiple Files in a Grid |
| Grids, Images, Reports Display Processes by Process Model with Status Icons |
| Grids, Reports, Looping Display a User's Tasks in a Grid With Task Links |
| Records, Reports, Charts, Filtering Dynamically Show Sales by Product Category Compared to Total Sales |
| Hierarchical Data, Grids Expand/Collapse Rows in a Tree Grid |
| Grids, Filtering, Records Filter the Data in a Grid |
| Charts, Grids, Filtering, Records Filter the Data in a Grid Using a Chart |
| Formatting Format the User's Input |
| Validation, Grids, Records Limit the Number of Rows in a Grid That Can Be Selected |
| Validation Make a Component Required Based on a User Selection |
| Grids, Filters, Process Task Links, Task Reports, Looping Offline Mobile Task Report |
| Records, Reports, Formatting Percentage of Online Sales |
| Auto-Refresh, Smart Services Refresh Data After Executing a Smart Service |
| Auto-Refresh Refresh Data Using a Refresh Button |
| Auto-Refresh Refresh Until Asynchronous Action Completes |
| Records, Reports, Charts Sales by Region |
| Grids, Smart Services, Filtering, Reports Save a User's Report Filters to a Data Store Entity |
| Grids, Filtering, Reports Searching on Multiple Columns |
| Conditional Display Set a Numeric Rating Using Rich Text Icons |
| Default Value Set the Default Value Based on a User Input |
| Default Value Set the Default Value of CDT Fields Based on a User Input |
| Default Value Set the Default Value of an Input on a Start Form |
| Default Value Set the Default Value of an Input on a Task Form |
| Formatting, Grids, Records Show Calculated Columns in a Grid |
| Conditional Display Show a Numeric Rating as Rich Text Icons |
| Validation Showing Validation Errors that Aren't Specific to One Component |
| Records, Reports, Charts Total Orders Compared to Orders Purchased with Promo Codes |
| Grids Track Adds and Deletes in Inline Editable Grid |
| Records, Smart Services Update an Entity-Backed Record from its Summary View |
| Grids Use Links in a Grid to Show More Details and Edit Data |
| Grids, Web Services Use Links in a Grid to Show More Details and Edit Data in External System |
| Grids Use Selection For Bulk Actions in an Inline Editable Grid |
| Validation Use Validation Groups for Buttons with Multiple Validation Rules |
| Filtering, Charts Use a Filter to Adjust Chart Reference Lines |
| Formatting, Reports Use the Gauge Fraction and Gauge Percentage Configurations |
| Smart Services, Looping Use the Write Records Smart Service Function on an Interface |
| Smart Services, Grids, Looping Use the Write to Data Store Entity Smart Service Function on an Interface |
| Records, Reports, Formatting Year-Over-Year Sales Growth |
![Interface Recipes [Interfaces] (2024)](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/h8AAvMB+NzmkbcAAAAASUVORK5CYII=)