Appian Step-by-Step #10

Exercise to Accompany
Interfaces 102: Build Interfaces Using an Expression

The Appian Step-by-Step series consists of 10 exercises that accompany

the courses in the Appian Developer learning path. Exercises build upon
each other. Complete exercises in order and keep the app and all
objects until you are done with the project.

1 Manage Users and Groups

2 Manage Data Easily with Custom Data Types

3 Expressions: Transform Your Data

4 Interfaces 101: Build Forms and Other Interfaces

5 Process Modeling: Automate Your Business Processes

6 Query Data from RDBMS

7 Design Appian Records

8 Reports: Build Basic Charts and Grids

9 Sites: Create a Custom and Focused User Experience

10 Interfaces 102: Build Interfaces Using an Expression

© Appian Corporation, 2021

Introduction 2
How to Complete the Exercises in this Guide? 2
What Will I Build? 2
How Can I Get a Practice Environment? 2
Use Initials in a Shared Environment 2
Save Often 2
Additional Resources 3

1 - Create a Supervisor Task Report 4

Create a Process Report 4
Modify the Process Report 5
Create a Constant for the Process Report 6
Create an Interface for the Task Report 7
Create Links to Process Tasks 9
Create the Status Filter 10
Create the Task Report 13
Add the Task Report Page to the VFM Site 13

2 - Export an Application 14
Review Security Summary 14
Check for Missing Precedents 15
Export the Application 16

Notice of Rights

This document was created by Appian Corporation, 7950 Jones Branch Dr, Tysons, Virginia 22102.
Copyright 2021 by Appian Corporation. All rights reserved. Information in this document is subject
to change. No part of this document may be reproduced or transmitted in any form by any means,
without prior written permission of Appian Corporation. For more information on obtaining
permission for reprints or excerpts, contact Appian Training at academyonline@appian.com.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 1
How to Complete the Exercises in this Guide
This guide offers a series of exercises that will teach you how to build a functional Appian
application, step-by-step. Please use this guide to support your learning throughout the
Appian Developer online curriculum.

To understand specific Appian concepts and features, we recommend that you first view our
online courses (access our curriculum at academy.appian.com), and then complete the
associated exercises before moving to the next course in the path.

What Will I Build?

You will build the Vehicle Fleet Management (VFM) application that will automate the process
of registering a new vehicle in the fleet. This app will be designed for two personas: Registrars
and Supervisors. Registrars will use the VFM application for entering the new vehicle
information into an online form, which will be then sent to Supervisors for approval. After
approval, the new vehicle will be written to the database. After you build all key design
objects, you will assemble them into a user-friendly Site that Registrars and Supervisors will
use for adding and approving vehicles and for accessing all fleet-related reports.

How Can I Practice?

Sign up for Appian Community Edition here:
https://community.appian.com/p/my-learning-journey/. This free, unlimited-time Appian
instance comes with the pre-built VFM application that you can use to reference while building
your own version.

If you already have access to a practice environment, you will need a user account with either
System Administrator access, or an account for a Basic User who is a member of the
Designers and Process Model Creator groups. Request access from your site’s System
Administrator.

Use Initials in a Shared Environment

If you work in a shared environment, prefix all application objects with your initials to avoid
naming conflicts. For example, if your initials are JJ, name your group JJ VFM All Users.

Save Often
Appian does not automatically save updates, so save your objects frequently.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 2
Additional Resources

Appian provides a plethora of training resources for novice Appian developers. The following
resources are particularly popular with our learners:

Academy Online - Appian’s online courses provide useful survey courses, step-by-step
tutorials, and some additional practice exercises. Explore these resources at your own pace.
Survey courses will help you with developing a better grasp of the range of topics you need to
learn about. Video and print tutorials will help you with getting the hands-on experience with
Appian.
Appian Documentation - Appian’s product documentation will provide you with the overview of
key Appian features, newest release information, additional tutorials, and helpful patterns and
recipes to implement in your app.
Community Discussions for New Users - Join our community of experts to ask questions and
find answers from past discussions.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 3
 1 - Create a Supervisor Task Report
In this exercise, you’ll learn how to create a Supervisor Task Report that will allow VFM
Supervisors to view and perform their vehicle approval tasks. Once your task report is
assembled, you’ll add it as a page to the VFM site. Supervisors will use this page to view
tasks, filter them by status, and navigate to the UIs holding specific tasks by clicking the
hyperlinked task name. Your final site page will look as follows:

To build a task report, you’ll start by building a process report that will help you to pull data
from the VFM Add Vehicle process model. At a high-level, you’ll complete these steps to
create the task report for VFM Supervisors:

● Create a process report

● Create a constant to point the process report
● Build an interface to display tasks, link tasks to the individual approval forms, and add a
Status filter to this interface
● Create a task report
● Add the task process report as a page to the VFM site

Create a Process Report

Let’s create the task process report to show the tasks that are assigned to the Supervisor
group:

1. First, let’s create folders that you’ll need to store the task process report: the parent
VFM Knowledge Center folder, and the child VFM Documents folder:

● Click New, and then select Folder from the dropdown menu. In the dialog box,
select the Knowledge Center option, and name it VFM Knowledge Center.
Add a description: “VFM Knowledge Center Folder.” Click Create. In the Security
dialog box, add VFM Admins group with the Administrator permission level.
Click Save.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 4
 ● From within the VFM Knowledge Center folder, create a new Document folder.
Name it VFM Documents, and add a brief description (“Folder to store VFM
application documents”)

2. From within the VFM Document folder, click New, and select Process Report:

● Retain the Duplicate existing process report selection, and search and select
My Tasks in the Process Report to Duplicate box. If no suggestions appear
for My Tasks, use active_tasks instead.
● Name it VFM Supervisor Process Report, and then change the description to
“A list of tasks for the VFM Supervisor group.”
● Make sure the Save In folder is set to VFM Documents, and click Create.

Modify the Process Report

We created the VFM Supervisor Process Report by duplicating the out-of-the-box My Task
report, which by default displays all tasks for the logged in user. In this section, you’ll
modify this process report to display tasks assigned to the VFM Supervisor group:

1. Locate and open VFM Supervisor Process Report.

2. On the top menu bar, select All next to Status, and then click Edit.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 5
 3. Navigate to the Filters tab, and click New Rule. Select Assigned To in the first
dropdown menu, and then select VFM Supervisors in the third dropdown menu.

4. Click Save to to close the dialog box, and then click the save icon on the report
menu bar to save the process report.

Create a Constant for the Process Report

Before we create the task report interface, we need to create a constant for the VFM Tasks
Process Report. This constant will be used in the interface that we will create in the next
step.

1. From within the VFM Constants folder, click New, and select Constant from the
dropdown menu.
2. Type VFM_SUPERVISOR_TASK_PROCESS_REPORT_POINTER for the Name, and
add a description: “Points to VFM Supervisor Process Report object.”
3. In the Type field, select Document.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 6
 4. In the Value field, type VFM then select VFM Supervisor Process Report, and click
Save.

Create an Interface for the Task Report

In this section, you’ll create an interface to display all tasks in a grid. Later, you’ll use this
interface to create a task report.

1. From within the VFM Interfaces folder, click New, and select Interface from the
dropdown menu. Name it VFM_Supervisor_Task_Report_Interface, and add a
brief description “Interface to display tasks to supervisors.”

2. First, we will use the a!queryProcessAnalytics() function to populate our empty interface
with data from the active tasks process report. We will do this in order to figure out
what columns we want to display to supervisors. In the interface, click Expression
Mode, and paste the following expression into the Interface Definition:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 7
 a!textField(readOnly: true, value: a!queryProcessAnalytics(

report: cons!VFM_SUPERVISOR_TASK_PROCESS_REPORT_POINTER
)

3. Scan the data in the Preview tab. You’ll notice that it is the text representation of the
process report data.

The columns we want to display in the grid are:

● C0 - Task name
● C2 - Date Time
● C5 - Task Status

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 8
 4. Now that we know which columns we want to display, we are ready to set up our
read-only grid. Delete the code in the Interface Definition, and then and replace it with
the following expression:
a!sectionLayout(
contents: { a!gridField(
label: "Supervisor Tasks",
instructions: "A list of all tasks for the Supervisor group",
labelPosition: "ABOVE",
data: a!queryProcessAnalytics(
report: cons!VFM_SUPERVISOR_TASK_PROCESS_REPORT_POINTER,
query: a!query(pagingInfo: fv!pagingInfo)),
columns: {
a!gridColumn(
label: "Name",
sortField: "c0",
value: fv!row.c0 ),
a!gridColumn(
label: "Status",
sortField: "c5",
value: fv!row.c5),
a!gridColumn(
label: "Date",
sortField: "c2",
value: fv!row.c2 ),},
rowHeader: 1)})
5. Switch back to Design Mode and click Save Changes.

Create Links to Process Tasks

The grid you just created displays the task name but users do not have a way to open the
task. In this section, you’ll link the Name column to the actual task.

1. Select the Read-only Grid component, then under Columns in the Component
Configuration panel, click Name (Grid Column).

2. Click Display Options, then select Process Task Link.

3. In the Component Configuration, click Edit as Expression next to Display Value, and
paste the following expression:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 9
 a!linkField(
links: {
a!processTaskLink(
label: fv!row.c0,
task: fv!identifier
)
}
)

Create the Status Filter

In this exercise, you’ll format the status column to show meaningful values instead of
numbers, and you’ll add a filter to the interface to allow supervisors to filter tasks by the
most common statuses.

1. From the Components palette, grab a Columns layout, and drop it above the
Read-only grid.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 10
 2. Next, let’s add a local variable to this interface to hold the task status values that we will
use in the dropdown component. This component will allow supervisors to filter tasks by
status. Click to access the Expression Mode.

3. Click before the curly bracket for the expression, and press Enter. In line 1, type the
following expression:
a!localVariables(
local!statusFilter: null,
local!taskStatuses: {
"Assigned",
"Accepted",
"Completed"
},
4. Scroll to the last line of code in the interface definition pane and add a right parenthesis
“)”. Now, our entire expression is encapsulated within the a!localVariables function:

5. Return to the Design Mode, and click Save Changes.

6. Next, let’s drag and drop a Dropdown field from the Components palette into the first
column layout on the left.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 11
 7. In the Component Configuration pane, configure the dropdown field as follows:
● Type Status in the Label field.
● Click Edit as Expression next to Choice Labels, and type the following
expression into the Expression Editor: { "Assigned", "Accepted",
"Completed"}
● Click Edit as Expression next to Choice Values, and type the following
expression into the Expression Editor:
● In the Item 1 dialog box, delete the code and replace it with the following
expression: enumerate(3)
● In Selected Value and Save Selection To, use the dropdown menu to select
local!statusFilter.

8. Next, let’s add a filter to the read-only grid, so that once the supervisor selects a value
in the Status dropdown, the grid refreshes to display only the selected statuses. Select
the Read-only Grid component, and in the Component Configuration pane click the
queryProcessAnalytics link (located in the Data Source section).

9. Click the query link in ContextGroups, and then click Edit next to filter. Paste the
following expression into the filter (QueryFilter) dialog box:

a!queryFilter(

field: "c5",

operator: "=",

value: local!statusFilter,

applyWhen: not(isnull(local!statusFilter))

Click OK. Your filter should now work. Test the filter by selecting different values in the
dropdown status menu.

10. To replace the numbers in the status columns with words like Assigned and Completed,
select the Read-only Grid component. In the Component Configuration pane, click
Status (Grid Column) under Columns.

11. Click Edit as Expression next to Display Value, and type the following expression:

a!forEach(

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 12
 items: fv!row.c5,
expression: if(
not(isnull(fv!row.c5)),
fn!index(
local!taskStatuses,tointeger(fv!item)+1,"Other"),
tostring(fv!item)))
12. Click OK, and then click Save Changes to save the interface.

Create the Task Report

Now that you have the VFM_Supervisor_Task_Report_Interface, let’s create a task report
object. Once you have a task report, you’ll be able to add it as a page to the VFM site.

1. Click New, and select Report. Name this report VFM Supervisor Task Report, and
add a description: “Task report object to show supervisor tasks in Tempo and Sites.”
2. Select VFM_Supervisor_Task_Report_Interface in the Interface field, and select
the Save as Task Report checkbox. Click Create.

3. To set security for this report, click Add Users and Groups, and add VFM All Users as
Viewers, and VFM Admin as Admins.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 13
 Add the Task Report Page to the VFM Site
Next, add the VFM Supervisor Task Report to the VFM Site.

1. Open the Vehicle Fleet Management Site, and click the Add Page button. Configure
this page as follows:
● Title the page Supervisor Tasks.
● Click the dropdown menu for the icons, and then browse or search for an
appropriate icon.
● Select Report in the Type field. 
● Select VFM Supervisor Task Report in the Content field, and then click OK.

2. Click Save Changes. To preview the new Supervisor Tasks page, click the URL for the
site, and select the new Supervisors Tasks tab. Now, the supervisors are able to see
their tasks in a single place, filter them by status, and they can also approve or deny the
addition of vehicles to the fleet.

2 - Export an Application

In this exercise, you will export your VFM app as a zip file. Once you export the app, you
can store the file, or import it into a different environment. In order to export the app, we
will prepare for the export by:

● Reviewing your app’s security settings

● Checking for missing precedents, or objects

These two quick checks will ensure that your app is export-ready, and will work as expected
in its new environment. Follow the steps below to prepare your app for the export:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 14
 Review Security Summary
1. Check the security summary of the app to ensure that every object has been secured

correctly. Click the Settings menu at the top right of the VFM app, and select
Security Summary from the dropdown menu.

All objects should have a security setting, and only groups and not individual users
should be used for security. Review your Security Summary, making sure that there
are no unsecured objects, and all objects are secured at least through the VFM Admins
group. Review that the VFM All Users group is assigned the Viewer rights, and that
VFM Registrars and VFM Supervisors are assigned Viewer rights where needed.

Check for Missing Precedents

A missing precedent refers to an object in your application that belongs to a different app.
Usually, this happens when you reuse a shared object. To prevent problems, always check
for missing precedents, and add the shared objects to your app before exporting it. Follow
the steps below to complete this important check:

1. Click the Settings menu at the top right of the VFM app, and select Missing
Precedents from the dropdown menu.

2. If there are any missing precedents in your app, review them to verify whether you
need to add the objects to your app, or the dependency should be removed. For
example, sometimes developers may include an erroneous object into their app by

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 15
 clicking the incorrect auto-suggestion. There are other reasons why you may get a
missing precedent message:

● Many teams create a dedicated application for deploying shared components.

This is done to avoid clutter. If it is your scenario, you may need to ignore the
missing precedent message. The app with shared components is usually
deployed separately, or it might be already present in your target environment.

● Missing precedents can also occur if you erroneously create an object from within
a different app. In this instance, add the object to your app.

3. If you find a precedent that should be added to your app, click Add all to application.
Click Check Again to run another missing precedents check that no further
dependencies were discovered:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 16
 Export the Application
Once you complete the above checks, export your VFM app:

1. Click the Settings menu at the top right of the VFM app, and select Export
Application from the dropdown menu. Verify the name of your app, and update it to
include the date of the export:

2. Click Export, and then click Download Package.

3. If you receive an error message, open the export log and correct any problems.
Download the newly created zip file, so you can take your work with you to a different
environment.

Before you go …

Congratulations! You have completed the last exercise in the Appian Step-by-Step
series.

10 Interfaces 102: Build Interfaces Using an Expression

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 17
Appian 21.3 Appian Step-By-Step
© Appian Corporation, 2021 Page 18