Interface Recipes

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.

How to Work Through the Recipes

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.

Recipes

Looping Add and Populate Sections Dynamically

Add and populate a dynamic number of sections, one for each item in a CDT array.

Grids,Looping Add, Edit, and Remove Data in an Inline Editable Grid

Allow the user to change data directly in an inline editable grid.

Document Management Add Multiple File Upload Components Dynamically

Show a dynamic number of file upload components.

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

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

Hierarchical Data, Group Management 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.

Validation,Grids,Looping Add Validations to an Inline Editable Grid

Allows the user to change data directly in a grid, and validate a various entries.

Reports,Charts,Query Data,Grids 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.

Reports, Charts, Query Data 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.

Reports, Charts, Query Data 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.

Reports, Charts, Query Data, Grids Aggregate Data from a Data Store Entity on a Date or Date and Time Field

Aggregate data from a data store entity, specifically the total number of employees by date, to display in a grid and chart.

Reports, Charts, Query Data, Filtering 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.

Wizards Build an Interface Wizard

Divide a big form into sections presented one step at a time with validation.

Wizards Build a Wizard with Milestone Navigation

Use the milestone component to show steps in a wizard.

Grids,Conditional Display 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.

Choice Components 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.

Charts,Grids,Query Data 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.

Charts,Grids Configure a Chart to Grid Toggle

Display a column chart with a toggle to display an alternate grid view of the data.

Hierarchical Data Browse Hierarchical Data

Display a hierarchical data browser.

Choice Components 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.

Choice Components 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.

Pickers Configure an Array Picker

Allow users to choose from a long text array using an auto-completing picker.

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

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

Validation 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

Conditional Display, Choice Components Configure Cascading Dropdowns

Show different dropdown options depending on the user selection.

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

Grids Delete Rows in a Grid

Delete one or more rows of data in a read-only paging grid.

Grids,Reports,Looping 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.

Grids,Formatting Display Array of Data in a Grid

Display an array of CDT data in a read-only paging grid.

Grids,Records Display Data with CDT Fields from in a Grid

Display data that contains CDT fields from in a read-only paging grid.

Images, Grids 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.

Document Management,Grids Display Multiple Files in a Grid

Show a dynamic number of files in a grid and edit certain file attributes.

Grids,Images,Reports Display Processes by Process Model with Status Icons

Use an interface to display information about instances of a specific process model.

Hierarchical Data,Grids 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.

Grids,Filtering 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.

Charts,Grids,Filtering 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.

Formatting,Data,Grids 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.

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

Validation,Grids 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.

Validation Make a Component Required Based on a User Selection

Make a paragraph component conditionally required based on the user selection.

Grids,Smart Services,Filtering,Reports 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.

Grids,Filtering,Reports Searching on Multiple Fields

Display a grid populated based on search criteria specified by end users.

Grids Select Rows in a Grid

Display checkboxes on a read-only paging grid to allow users to select multiple rows of data.

Conditional Display Set a Numeric Rating Using Rich Text Icons

Save a numeric score using a set of clickable rich text icons.

Default Value 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.

Default Value 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.

Default Value 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.

Default Value Set the Default Value of CDT Fields Based on a User Input

Set the value of a CDT field based on a user input.

Conditional Display Show a Numeric Rating as Rich Text Icons

Dynamically show a star rating based on a numeric score.

Formatting, Grids 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.

Validation 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".

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

Records, Smart Services 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.

Filtering, Charts 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.

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

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

Grids,Web Services 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.

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

Smart Services,Grids,Looping 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.

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

FEEDBACK