Appian Step-by-Step #4

Exercise to Accompany
Interfaces 101: Build Forms and Other Interfaces

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 the Add Vehicle Interface 4

Create the Interface 4

Edit the Interface 5

Add a Field Validation 6

Configure the Visibility of Fields 7

Make a Field Conditionally Required 9

Configure the Submit Button 9

Test Your Form 11

2 - Create the Supervisor Approval Interface 11

Create the Form and Add Rule Inputs 11

Configure the Visibility of the Submit Button 12

Configure the Approval Radio Buttons 13

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 1
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 [email protected].

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 2
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 3
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 4
 1 - Create the Add Vehicle Interface

In this exercise, we will create a form for adding new vehicles to the fleet. We will create the
form using the Create from Data Type template. This helpful template will allow us to quickly
create a form that can be used for 1) entering new vehicle information, and 2) displaying the
read-only vehicle information back to the business user. Follow the steps below to create and
configure this form.

Create the Interface

1. From within the VFM app, click New, and then select Interface from the dropdown
menu.

2. Retain the default Create from scratch option. Name the Interface
VFM_AddVehicleForm, and add a description: “An interface for adding vehicles to the
fleet.” Select the VFM Interfaces folder in the Save In field, and click Create.

3. When the Interface Designer opens, you will see a number of templates on the right.
Scroll down to the Builders group of templates, and select the Create from Data
Type option:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 5
 4. Type to select VFM_Vehicle in the Data Type field, and keep the default Both option
selected. Click Generate.

After you click Generate, the form will be launched.

Edit the Interface

1. First, let’s rename the rule input VFM_Vehicle to simply vehicle. To edit, click
VFM_Vehicle, delete, and type vehicle. Click OK.

2. Click the form title Vehicle, and rename the form to Add Vehicle to Fleet.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 6
 3. Select the Last Updated field. In the Component Configuration pane, click the Convert

icon , and select Convert to Date:

Add a Field Validation

Now let’s add a validation to the Last Updated field. Validations ensure that the data typed
into a field meets a specific requirement. We want the Last Updated field to accept only today
or previous dates. Follow the steps below to add this validation:

1. Select the Last Updated field.

2. In the Component Configuration, scroll down Validations, and click Edit as

Expression next to it.

3. Type the following expression into the Expression Editor:

if(

ri!vehicle.lastUpdated>=today() + 1,

"The date of the last update cannot be in the future.",

null

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 7
 This expression will check whether the date is in the future, and will provide an error
message if that is the case.

4. Test that the validation works correctly by entering future and past dates into the Last
Updated field.

Configure the Visibility of Fields

In this part, we will configure the visibility of the Category and Next Service Date fields. We
will make these fields visible in the display (or read-only) version of the form, and invisible in
the editable version of the form. Follow the steps below to learn how to make the fields
conditionally visible:

1. Let’s configure the visibility of the Category text field first. We want this field to display
as text when the form is read-only, and we want it to display as a dropdown field when
the form is editable.

● Select the Category text field. In the Component Configuration, scroll down to
Visibility, and select Only show when… Click Edit Condition.
● In the Visibility dialog box, type: ri!readOnly = true(). Note that the Category
field is then hidden from the live view. To see this field, you will need to update

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 8
 the value for the readOnly rule input to true. Change this variable to true or
false when testing the form for editing or for displaying information.
● Next, let’s drag and drop the Dropdown field from the Components palette
and into the interface.
● In the Component Configuration for this dropdown field, change the label to
Category. 
● Scroll down to Choice Labels, and click Edit as Expression. Delete the
existing options, and type cons!VFM_VEHICLE_CATEGORIES. Click OK.

● Scroll down to Choice Values, and click Edit as Expression. Delete the
existing options, and type cons!VFM_VEHICLE_CATEGORIES. Click OK.

● Scroll down to Selected Value. Use the dropdown menus to update the input to
ri!vehicle.category. Do the same for the Save Selection To field.

● Scroll down to Visibility options. Select Only show when…, and then click
Edit Condition to make this field visible only when or ri!readOnly=false or
ri!readOnly=null. Use this expression:

or(

isnull(ri!readOnly),

ri!readOnly=false()

Configure this field using either null or false() to ensure the field displays. If
you change the value to true() - meaning that the form is only displaying the
information - the Category dropdown field should disappear.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 9
 2. Next, we will hide the Next Service Date in the editable form. We will hide it because
this date will not be entered into the form by the Registrar. Instead, it will be calculated
based on the date in the Last Updated field. In the Component Configuration, scroll
down to Visibility, and select Only show when… Click Edit Condition, and type:
ri!readOnly = true().

Make a Field Conditionally Required

Let’s make the Vehicle Condition field required for our users if the vehicle has mileage above
500 miles. Follow the steps below to accomplish this:

1. Click to select the Vehicle Condition field, and convert it from a Text field to a
Paragraph field. To do so, click the Convert button in the Component Configuration
heading, and select Convert to Paragraph:

2. Make sure that the field Vehicle Condition is still selected, and in the Component
Configuration scroll to the Required setting. Make sure that Required is checked, and
then click Edit as Expression right next to it. We will require our business users
to provide an explanation if the vehicle mileage is higher than 500 miles. To do so, type
ri!vehicle.mileage > 500 into the Expression Editor.

3. Type 600 into the Mileage field to test our conditional requirement. You will notice the
asterisk appear right next to Vehicle Condition.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 10
Configure the Submit Button
If you recall, we configured the Next Service Date to only be visible when the form is set to
be read-only. While the Registrars won’t fill out the next service date using the Add Vehicle
form, this important date still needs to be calculated and recorded to the database table for
each vehicle in the fleet. To record this information, we will configure the Submit button using
the expression rule VFM_CalculateNextMaintenance:

1. Click to select the Submit button. In the Component Configuration, click the

Expression Editor icon located next to the Value property.

2. We will add an expression that will check that we have the Last Updated date, and then
will use the expression rule to calculate the date of the next maintenance. Type the
following expression into the Expression Editor:

if(

isnull(ri!vehicle.lastUpdated), "",

rule!VFM_CalculateNextServiceDate(

ri!vehicle.category,

ri!vehicle.lastUpdated

))

When working with expressions, make sure that you use the tips provided in the
Documentation Wizard and rely on the Autocomplete Feature for suggestions. For
example, after you type rule!, type the app prefix VFM next. You will see the list of
auto-suggested expressions. After typing ri!, notice that variables are also suggested to
you.

3. Next, using the dropdown selection update the Save Value To field to
ri!vehicle.nextServiceDate.

4. Similarly to how we configured the Submit button to auto-save the Next Service
Date, let’s do the same for the lastUpdated date value. To do so, click the
Expression Editor for Save Value To, and update the expression to the following:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 11
 ri!vehicle.nextServiceDate,

a!save(ri!vehicle.lastUpdated,now())

Please note that curly braces {} are used to save an array of values, this is why our
expression uses them. Also note the a!save function: we use it because we update the
variable with the value of now. As you type this expression, watch the Documentation
Wizard and Autocomplete Feature to understand how expressions work.

5. Click Save Changes.

Test Your Form

Test your form before closing. Ensure that the information that you enter into this form is
displayed correctly in the corresponding rule inputs. To test, fill out the form, and click the plus
sign next to the vehicle rule input. Your entries should be displayed as corresponding rule
inputs:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 12
 2 - Create the Supervisor Approval Interface

In this chapter, we will build the form for the supervisor to either approve or deny the addition
of a vehicle to the fleet. We will build this form by duplicating the Add Vehicle form, and then
adding the radio button field for the supervisor’s approval. At the end of this exercise, you will
have the form that will look as follows:

Create the Form and Add Rule Inputs

Follow the steps below to create the Supervisor Approval form:
1. From within the VFM app, click New, and then select Interface from the dropdown
menu.

2. Select the Duplicate existing interface radio button, and start typing and then select
VFM_AddVehicleForm in the Interface to Duplicate field. Update Name to
VFM_SupervisorApproval, and add a brief description: “An interface allowing
supervisors to review and approve new vehicles.”

3. Make sure that the VFM Interfaces folder is selected in the Save In field, and click
Create:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 13
 4. After your new form displays, click the form title, and rename it to Supervisor
Approval.

5. In the Rule Inputs pane, click the plus sign to add a new rule input. Name it
approvalDecision, and select Boolean in the Type field. Click Create.

Configure the Visibility of the Submit Button

Because we created this form by duplicating the Add Vehicle form, the Submit button will
disappear if we set the readOnly input to true. For the Supervisor Approval form, we want the
Submit button to always be visible. Follow the steps below to configure the visibility of the
Submit button:

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 14
 1. In the interface, select the Button Layout:

2. In the Component Configuration pane on the right, scroll down to Visibility, and
select the Always Show radio button.

3. To test the form, click the null value for the readOnly rule input. Select True under
Value, and click OK. Notice that the Submit button still displays.

Configure the Approval Radio Buttons

1. From the Components palette, drag the Box layout and drop it underneath existing
columns. In the Components Configuration, change the label to Approval. 

2. From the Components palette, drag the Radio Buttons component and drop it into
the Box layout.  

3. Remove the Radio Buttons label.

4. With the Radio Buttons component selected, scroll to the Choice Labels in the
Component Configuration pane. Click the Edit as Expression button, and replace
{"Option 1", "Option 2"} with {"Approve", "Deny"}.

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 15
 5. Click the Edit as Expression button for the Choice Values, and replace the values
with the following expression: {true(),false()}.

6. In the Selected Value and Save Selection To fields select ri!approvalDecision

using the dropdown menu. 

7. Check the Required box to make this field required.

8. Click Save Changes to save the interface.

Before you go …

Congratulations! You have completed the fourth Appian Step-by-Step exercise. Keep
in mind that you will need the objects created so far for your next set of exercises.

Up Next

5 Process Modeling: Automate Your Business Processes

Appian 21.3 Appian Step-By-Step

© Appian Corporation, 2021 Page 16