This page contains a searchable list of all Interface recipes. Interface recipes provide Designers with a combination of components and dynamic expressions to achieve common user-interface design patterns.
While recipes are reusable in nature, some recipes will be more relevant to records and reports, while other will be relevant to forms. Additional instructions are provided in the Adapt an Interface Recipe to Work with My Applications article that shows you how to get a Interface recipe to work as either a form, record view, or report in your application.
These recipes are designed, where possible, to be copy/paste/use expressions. Designers can copy the recipe expression, paste it into the INTERFACE DEFINITION in EXPRESSION MODE, and get instant feedback from the live view. In some cases, a recipe will include pre-requisite steps that need to be performed before the interface expression will work. From here, Designers can modify any part of the recipe knowing that they have an safe expression to revert back to.
Most of the recipes use a single employee data structure. This allows Designers to combine multiple recipes more easily. Additionally, it reduces the number of object dependencies need for these recipes.
The Use the Write to Data Store Entity Smart Service Function on an Interface contains all of the employee data and objects necessary for other recipes to display property. If you have not already done so, and need employee data to see how other recipe's charts and grids work, use this recipe first.
Alternatively, the Entity-Backed Record Tutorial can be used to create the necessary objects. However, using the Entity-Backed Record Tutorial, the designer will still be responsible for populating the employee database table with data.
Recipes typically set and define data through local variables using the load() and with() functions. This means that you can interact with your dynamic form as soon as you paste the expression into the INTERFACE DEFINITION in EXPRESSION MODE. If you are not familiar with local variables yet, it's a good idea to check out the Enabling User Interaction page.
Some recipes have an additional offline version with a modified expression for designing an interface for offline use on mobile devices. Offline functionality is only available for actions. See Designing for Offline Mobile for more details on this topic.
|
Add and Populate Sections Dynamically
Add and populate a dynamic number of sections, one for each item in a CDT array. |
|
Add, Edit, and Remove Data in an Inline Editable Grid
Allow the user to change data directly in an inline editable grid. |
|
Add Multiple File Upload Components Dynamically
Show a dynamic number of file upload components. |
|
Add Multiple Text Components Dynamically
Show a dynamic number of text components to simulate a multi-text input box. A new text box is shown as soon as the user starts typing into the last input box. |
|
Add Multiple Validation Rules to One Component
Enforce that the user enters at least a certain number of characters in their text field, and also enforce that it contains the "@" character. |
|
Add, Remove, and Move Group Members Browser
Display the membership tree for a given group and provide users with the ability to add, remove, and move user members from a single interface. |
|
Add Validations to an Inline Editable Grid
Allows the user to change data directly in a grid, and validate a various entries. |
|
Aggregate Data from a Data Store Entity and Conditionally Display in a Chart or Grid
Aggregate data from a data store entity, specifically the total number of employees in each department, to display in a pie chart. |
|
Aggregate Data from a Data Store Entity and Display in a Chart
Aggregate data from a data store entity, specifically the total number of employees in a given department, to display in a pie chart. |
|
Aggregate Data from a Data Store Entity by Multiple Fields and Display in a Chart
Aggregate data from a data store entity by multiple fields, specifically the total number of employees for each title in each department, to display in a stacked column chart. |
|
Aggregate Data from a Data Store Entity using a Filter and Display in a Chart
Aggregate data from a data store entity, specifically the total number of employees for each title in the Engineering department, to display in a bar chart. |
|
Build an Interface Wizard
Divide a big form into sections presented one step at a time with validation. |
|
Build a Wizard with Milestone Navigation
Use the milestone component to show steps in a wizard. |
|
Conditionally Hide a Column in a Grid
Conditionally hide a column in a read-only paging grid when all data for that column is a specific value. |
|
Configure a Boolean Checkbox
Configure a checkbox that saves a boolean (true/false) value, and validate that the user selects the checkbox before submitting a form. |
|
Configure a Chart Drilldown to a Grid
Display a pie chart with aggregate data from a data store entity that the user can interact with to display related chart data. |
|
Configure a Chart to Grid Toggle
Display a column chart with a toggle to display an alternate grid view of the data. |
|
Browse Hierarchical Data
Display a hierarchical data browser. |
|
Configure a Dropdown Field to Save a CDT
When using a dropdown to select values from the database, or generally from an array of CDT values, configure it to save the entire CDT value rather than just a single field. |
|
Configure a Dropdown with an Extra Option for Other
Show a dropdown that has an "Other" option at the end of the list of choices. If the user selects "Other", show a required text field. |
|
Configure an Array Picker
Allow users to choose from a long text array using an auto-completing picker. |
|
Configure an Array Picker that Ignores Duplicates
Allow users to choose from a long text array using an autocompleting picker and prevent any choice from being picked multiple times. |
|
Configure an Array Picker with a Show All Option
Allow users to choose from a long text array using an autocompleting picker, but also allow them to see the entire choice set using a dropdown. |
|
Configure Buttons with Conditional Requiredness
Present two buttons to the end user and only make certain fields required if the user clicks a particular button |
|
Configure Cascading Dropdowns
Show different dropdown options depending on the user selection. |
|
Define a Simple Currency Component
Show a text field that allows the user to enter dollar amounts including the dollar symbol and thousand separators, but save the value as a decimal rather than text. Additionally, always show the dollar amount with the dollar symbol. |
|
Delete Rows in a Grid
Delete one or more rows of data in a read-only paging grid. |
|
Display a User's Tasks in a Grid With Task Links
Display the tasks for a user in a paging grid and allow them to click on a task to navigate to the task itself. |
|
Display Array of Data in a Grid
Display an array of CDT data in a read-only paging grid. |
|
Display Data with CDT Fields from in a Grid
Display data that contains CDT fields from in a read-only paging grid. |
|
Display Images in a Grid
Display a set of images in a read-only paging grid. The images are stored in Appian's document management system. |
|
Display Multiple Files in a Grid
Show a dynamic number of files in a grid and edit certain file attributes. |
|
Display Processes by Process Model with Status Icons
Use an interface to display information about instances of a specific process model. |
|
Expand/Collapse Rows in a Tree Grid
Create a grid that shows hierarchical data and allows users to dynamically expand and collapse rows within the grid. |
|
Filter the Data in a Grid
Filter the data in a read-only paging grid using a dropdown. When the user selects a value to filter by, update the grid to show the result. |
|
Filter the Data in a Grid Using a Chart
Display an interactive chart with aggregate data from a data store entity that allows the user to filter results in a grid. |
|
Format Data in a Grid
Format the data from a data store entity to display in a read-only paging grid, specifically a first and last name column as a user's display name and a date to a more readable format. |
|
Format the User's Input
Format the user's input as a telephone number in the US and save the formatted value, not the user's input. |
|
Limit the Number of Rows in a Grid That Can Be Selected
If you want to limit how many rows users can select in a read-only paging grid, you can constrain the number of selections by using validation. |
|
Make a Component Required Based on a User Selection
Make a paragraph component conditionally required based on the user selection. |
|
Save a User's Report Filters to a Data Store Entity
Allow a user to save their preferred filter on a report and automatically load it when they revisit the report later. |
|
Searching on Multiple Fields
Display a grid populated based on search criteria specified by end users. |
|
Select Rows in a Grid
Display checkboxes on a read-only paging grid to allow users to select multiple rows of data. |
|
Set a Numeric Rating Using Rich Text Icons
Save a numeric score using a set of clickable rich text icons. |
|
Set the Default Value Based on a User Input
Set the default value of a variable based on what the user enters in another component. |
|
Set the Default Value of an Input on a Start Form
Display a default value in some form inputs on a start form, and save the value into the process when submitting. |
|
Set the Default Value of an Input on a Task Form
Display a default value in some form inputs on a task form, and save the value to process when submitting. |
|
Set the Default Value of CDT Fields Based on a User Input
Set the value of a CDT field based on a user input. |
|
Show a Numeric Rating as Rich Text Icons
Dynamically show a star rating based on a numeric score. |
|
Show Calculated Columns in a Grid
Display and sort on column whose data is not a field in the CDT but a calculated form of the data in the CDT. |
|
Showing Validation Errors that Aren't Specific to One Component
Alert the user about form problems that aren't specific to one component, showing the message only when the user clicks "Submit". |
|
Track Adds and Deletes in Inline Editable Grid
In an inline editable grid, track the employees that are added for further processing in the next process steps. |
|
Update an Entity-Backed Record from its Summary View
Enable users to make quick changes to a record by updating it right from a record view. |
|
Use a Filter to Adjust Chart Reference Lines
Using a dropdown, filter the results of a data set while also adjusting a chart reference line. |
|
Use Links in a Grid to Show More Details About an Object
Display more of an object's data than can fit in a single row in a read-only paging grid. |
|
Use Links in a Grid to Show More Details and Edit Data
Allow end users to click a link in a read-only paging grid to view the details for the row, and make changes to the data. |
|
Use Links in a Grid to Show More Details and Edit Data in External System
Allow end users to click a link in a read-only paging grid to view the details for the row, and make changes to the data. |
|
Use Selection For Bulk Actions in an Inline Editable Grid
Allow the user to edit data inline in a grid one field at a time, or in bulk using selection. |
|
Use the Write to Data Store Entity Smart Service Function on an Interface
Allow the user to publish several rows of data to a table through the a!writeToDataStoreEntity() smart service function. |
|
Use Validation Groups for Buttons with Multiple Validation Rules
Present two buttons to the end user that, based on the selection, will validate only after a particular button is clicked. |
