Appian Step-by-Step #8

Exercise to Accompany
Interfaces 101

The Appian Step-by-Step series consists of 12 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 Welcome to the Appian Developer Learning Path

2 Create an Application

3 Manage Users and Groups

4 Expressions

5 Design Record Types

6 Sites

7 Query Your Data

8 Interfaces 101

9 Process Modeling 101: Part 1

10 Process Modeling 101: Part 2

11 Reports

12 Task Report

© Appian Corporation, 2024

Exercise 8: Interfaces 3
Update the Summary View Interface 3
Add a Vehicle Image 7
Add a Read-Only Grid 8
Edit the Add Vehicle Form 9
Update Fields and Labels 9
Add a File Upload Component 10
Add Dropdown Components 11
TIP: Use the Visibility Setting to Conditionally Show Interface Components 11
Configure the Submit Button 12
Create the Supervisor Approval Form 13
Create a Reusable Interface 16
TIP: Build Reusable Interfaces for Reporting 17
Troubleshooting Resources 17

Notice of Rights

This document was created by Appian Corporation, 7950 Jones Branch Dr, Tysons, Virginia 22102.
Copyright 2024 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 Step-by-Step 24.2

© Appian Corporation, 2024 2
 This exercise was developed for Appian 24.2. If Appian Community
Edition is on a later Appian version, functionality might be different.
Go to academy.appian.com to download the latest exercise.

Exercise 8: Interfaces
In this exercise, you will modify or create the following interfaces:

1. W#SA_VehicleSummary
2. W#SA_AddVehicle
3. W#SA_SupervisorForm

W#SA_VehicleSummary is used in the Summary view to display read-only vehicle

information.

W#SA_AddVehicle is used to start the W#SA Add Vehicle process model to add a new
vehicle to the fleet.

W#SA_SupervisorForm is used by supervisors in the W#SA Add Vehicle process model to

review a new vehicle.

To create efficient, intuitive, and attractive interfaces, it is important to follow UX design best
practices and recommendations. Visit the SAIL Design System in Appian Documentation to learn
more.

Update the Summary View Interface

When you generated the vehicle summary view in an earlier exercise, the
W#SA_VehicleSummary interface was created for you. In this section, you will update this
interface to better display the vehicle information. Your interface will look like the image below.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 3
Follow the steps below to update this interface.

1. In your application, open W#SA_VehicleSummary.

2. In the Rule Inputs pane, click record.

3. In the Edit Rule Inputs dialog, configure the following properties:

● Name: Change the name to vehicle.

● Description: Enter Accepts a single vehicle of the W#SA Vehicle
record data type.
● Click OK.

4. Click SAVE CHANGES to check for dependencies. One object requires a manual update.

● In a new tab, open the W#SA Vehicle record type.

● Go to Views.
● Next to the Summary view name, click Edit.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 4
 ● Update the underlined record to vehicle.

● Click OK, then SAVE CHANGES.

Next, you will edit the interface components.

1. Return to W#SA_VehicleSummary.

2. Double-click the Section Layout title, and delete the Vehicle text.

3. In the Component Configuration pane, under Divider Line, select None.

4. In the Components tab of the Palette, find the CARD layout. Drag and drop it above
vehicle details, outside of the section layout. It should span the full width of the
interface.

5. Drag and drop the Section Layout with the vehicle details into the Card Layout.

6. Delete the empty Column Layout below and the Column Layout for Event History. To
delete a component or field, click the component or field, and select Delete from the
dropdown menu.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 5
 7. Within the Card Layout, configure the following:

● Delete the following fields: Last Maintenance Date, Modified On, Added By,
Image, and Modified By.

● Practice rearranging components by dragging and dropping the text boxes.

Rearrange the fields to match the following layout:

● On the canvas, delete Id from the Category Id, Condition Id, and Status Id
labels. Alternatively, you can remove the label in the Component
Configuration pane by deleting the text in Label.
● Click SAVE CHANGES.

8. Update the Category field. Currently, this field displays a numeric ID. You will use the
record type relationship to replace it with the user-friendly value in the associated lookup
table.

● Click Category.
● Under Display Value, click the expression.
● In the bracket, replace the record field with:

[recordType!W#SA
Vehicle.relationships.toCategoryRecord.fields.value]

Appian Step-by-Step 24.2

© Appian Corporation, 2024 6
 ● Click OK.

9. Repeat this step with the Condition and Status fields. When selecting the relationship,
for Status, select toStatusRecord. For Condition, select toConditionRecord.

NOTE: You will see dashes as the values for these fields until you update test data in a
later step.

Add a Vehicle Image

1. Next to the second column, click + to add a third column.

2. Drag and drop an IMAGE component into the new column.

3. Click + in the Image component, and select DOCUMENT IMAGE.

4. In the Component Configuration pane, under Document, click

a!EXAMPLE_DOCUMENT_IMAGE(). Delete the expression, and enter:

if(
a!isNullOrEmpty(
ri!vehicle[recordType!W#SA Vehicle.fields.image]
),
a!EXAMPLE_DOCUMENT_IMAGE(),
ri!vehicle[recordType!W#SA Vehicle.fields.image]
)

Like you configured the record list, this expression displays an example document image
if a vehicle has no image.

5. Click OK.

6. Delete the Image label.

7. Click TEST to review the test data used to populate the interface.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 7
 8. The expression in the Expression Editor uses a!queryRecordType to query the vehicle
record type and return a row of vehicle data. Update the expression to use the query
rule you created in a previous exercise. Delete the expression, and enter:

rule!W#SA_QR_GetVehicleById(vehicleId: 1)

9. Click SET AS DEFAULTS AND TEST, then SAVE CHANGES.

Add a Read-Only Grid

In this section, you will add a read-only grid with the vehicle’s maintenance data to the
W#SA_VehicleSummary interface.

1. In W#SA_VehicleSummary, drag and drop a READ-ONLY GRID component under

the Card Layout with the vehicle details.

2. Click the Read-only Grid, and make the following changes in the Component
Configuration pane:

● For Data Source, select Record Type, and search for the W#SA
Maintenance record type.
● Click FILTER RECORDS. To display the maintenance requests for the selected
vehicle, filter the record based on vehicleId.
● In the Filter Records dialog, click Add Filter. For Field, select vehicleId. For
Condition, select =.
● For Value, change 123 to Expression.
● Click the null link. In the Expression Editor, enter:

ri!vehicle[recordType!W#SA Vehicle.fields.id]

● Click OK, then OK. You will see that the read-only grid now only displays the
maintenance requests that are associated with the vehicle record’s vehicle ID.
● At the bottom of the Component Configuration pane, click LAYOUT. Change
Label to Maintenance Requests.

3. Click SAVE CHANGES.

NOTE: The Maintenance Requests grid is based on the current configuration of the
W#SA Maintenance record list. If you want, you can update the grid directly in this
interface. Updates to the grid in this interface will only be applied here.

4. In the Build view of your application, click the W#SA Vehicle record type. Next to the
record type name, click View Record List. Click on a VIN to view the updated
summary view interface.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 8
Edit the Add Vehicle Form
In this section, you will edit the generated W#SA_AddVehicleForm interface that starts the
W#SA Add Vehicle process. Your goal is to improve the overall UX design of this form and to
update a few fields so that they display the information correctly. When you are done, the
interface will look like the image below.

Follow the steps below to update the Add Vehicle form.

Update Fields and Labels

1. Open W#SA_AddVehicleForm.

2. In the Rule Inputs pane, click the record rule input. Configure the following
properties:

● Name: Change the name to vehicle.

● Description: Enter a simple description.

3. Click SAVE CHANGES to check for dependencies after changing the rule input name. A
manual change is required in the W#SA Add Vehicle process model. You will make this
change in the next exercise.

4. Change the form title to Add Vehicle.

5. Delete the following text components: Status Id, Added By, Modified By, Condition Id,
Category Id, Image, and Modified On.

6. Remove the word date from the Last Maintenance and Next Maintenance field labels.

7. Drag and drop a SIDE BY SIDE layout inside of and at the top of the first column.
Move the Year, Make, and Model fields inside of the Side By Side layout. The Side By

Appian Step-by-Step 24.2

© Appian Corporation, 2024 9
 Side layout will keep these fields next to each other on a narrower screen. For reference,
use the image at the beginning of this section.

NOTE: On mobile devices, columns layouts are flattened into a single column. If you
need certain fields to stay together, use side by side layouts.

8. Drag and drop a SIDE BY SIDE layout into the second column. Move the Added On,
Last Maintenance, and Next Maintenance fields inside of it.

9. Next, add a validation to the Next Maintenance field so that the next maintenance date
entered must be after the last maintenance date.

● Click Next Maintenance.

● In the Component Configuration pane, find Validations. Next to
Validations, click the Edit as Expression icon.
● In the Expression Editor, enter the following expression:

if(
todate(
ri!vehicle[recordType!W#SA
Vehicle.fields.nextMaintenanceDate]
) < todate(
ri!vehicle[recordType!W#SA
Vehicle.fields.lastMaintenanceDate]
),
“The next maintenance date must be after the last
maintenance date.”,
null()
)

This expression checks whether the next maintenance date is before the last
maintenance date. If it is, the field is invalid and displays an error message.

10. Click OK, then SAVE CHANGES.

Add a File Upload Component

Next, add the Image field as a File Upload component.

1. Drag and drop a FILE UPLOAD component into the second column. Change the Label
to Image.

2. In the Component Configuration pane, configure the following:

● Target Folder: Enter and select the constant

W#SA_DOCUMENTS_FOLDER_POINTER.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 10
 ● Maximum Selections: Enter 1.
● Selected Files and Save Files To: Select ri!vehicle.image.
● Select the Required checkbox.

Add Dropdown Components

In this section, you will add the Category and Condition fields as Dropdown components. You
will populate these dropdowns using data stored in the lookup database tables from the Acme
Automobile Reference Application.

Follow the steps below to add dropdown components.

1. Drag and drop two DROPDOWN components into the second column. Change the
Labels to Category and Condition.

2. For the Category dropdown, in the Component Configuration pane, select Record
Type for your Data Source.

● Use W#AA Vehicle Category as the record type.

● Selected Value and Save Selection To: Select ri!vehicle.categoryId.

● Select the Required checkbox.

3. Repeat step 2 for the Condition dropdown, using W#AA Vehicle Condition as the
record type.

4. Check that the dropdown selections display the correct choices. Click SAVE CHANGES.

TIP: Use the Visibility Setting to Conditionally Show Interface Components

● In some cases, you might want to display a component based on a condition.
● To do this, use the Visibility setting in the Component Configuration pane. Select
Only Show When and enter an expression in the Expression Editor.
● For example, imagine that you want to display a Comments field if a vehicle’s mileage
is above 150,000 miles. You can enter the expression

Appian Step-by-Step 24.2

© Appian Corporation, 2024 11
 tointeger(ri!vehicle[recordType!W#SA Vehicle.fields.mileage]) >
150000
● This expression determines whether the Comments component is displayed on the
interface. When set to false, the component is hidden and not evaluated. The default
is set to true.

Configure the Submit Button

Next, you will update the Date Added field to display the current date. Although the registrars
will not manually fill out the vehicle added date, this date still needs to be recorded and saved
to the database table. Because it will be a read-only field and not a user input field, you will
configure the Submit button to save a vehicle’s Added On value, rather than using the Save
Input To configuration. You will also configure the Submit button to save a vehicle’s Added By
value.

1. Click the Added On field. In the Component Configuration pane, configure the
following properties:

● Display Value: Delete the text, and click the Edit as Expression icon. Enter
today() to return the current date.
● Select the Read-only checkbox.

2. Click the CREATE button. In the Component Configuration pane, configure the
following properties:

● Label: Change the label to Add Vehicle.

● Save Value To: Click the Edit as Expression icon, and enter the expression
below. As you are typing, use the suggested fields to ensure proper formatting.

{
a!save(ri!vehicle[recordType!W#SA Vehicle.fields.addedOn],
today()), a!save(ri!vehicle[recordType!W#SA
Vehicle.fields.addedBy],loggedInUser())
}

Appian Step-by-Step 24.2

© Appian Corporation, 2024 12
 In this expression, ri!vehicle[W#SA Vehicle.addedOn] is the target and
today() is the value being saved into the target. Similarly, ri!vehicle[W#SA
Vehicle.addedBy] is the target and loggedInUser() is the value being saved into
the target.

3. Click OK, then SAVE CHANGES.

Create the Supervisor Approval Form

In this section, you will create an interface for the supervisor to review the new vehicles. After
the registrar submits a new vehicle, the supervisor will receive a task to approve or reject it.
Your interface will look like the image below:

Follow the steps below to create the supervisor approval form and configure the ˜rule inputs.

1. In the Build view of your application, click New > Interface.

2. In the Create Interface dialog, configure the following properties:

● Name: Enter W#SA_SupervisorForm.

● Description: Enter Displays read-only details about a selected
vehicle for Supervisor approval.
● Save In: Select W#SA Interfaces.

3. Click CREATE.

4. Choose the Two Column Form template:

Appian Step-by-Step 24.2

© Appian Corporation, 2024 13
 5. In the Rule Inputs pane, click the New Rule Input icon. Configure the following
properties for the new rule input:

● Name: Enter vehicle.

● Description: Enter a simple description.
● Type: Select the W#SA Vehicle record type.

6. Click the cancel rule input, and configure the following properties:

● Name: Change the name to approvalDecision.

● Description: Enter a simple description.
● Type: Keep Boolean as the type.

7. Click SAVE CHANGES.

Next, update the layout and configure the components.

1. Rename the form Review Vehicle.

2. Delete the top Section Layout. To delete it, click this section, then click the dropdown
arrow > Delete.

3. For the bottom section layout, delete the blue Section label.

4. Drag and drop three TEXT and two INTEGER input components into the first
column.

5. For the text fields, change the labels to Make, Model, VIN. For the integer fields,
change the labels to Year and Mileage. For each of these fields, make the following
changes in the Components Configuration pane:

● Label Position: Select Adjacent.

● Display Value: Select the correct values. For example, for Make, select
ri!vehicle.make.
● Select the Read-only checkbox.

6. Drag and drop an IMAGE component into the second column. Delete the label Image,
and click + in the Image field. Select DOCUMENT IMAGE.

7. In the Component Configuration pane, under Document, click

a!EXAMPLE_DOCUMENT_IMAGE(). In the Expression Editor, delete all text, and
enter the same expression you used in the summary interface to conditionally display a
vehicle image:

Appian Step-by-Step 24.2

© Appian Corporation, 2024 14
 if(
a!isNullOrEmpty(
ri!vehicle[recordType!W#SA Vehicle.fields.image]
),
a!EXAMPLE_DOCUMENT_IMAGE(),
ri!vehicle[recordType!W#SA Vehicle.fields.image]
)

8. Add test values to the interface.

● Click TEST, and enter the following expression into the vehicle row:

rule!W#SA_QR_GetVehicleByID(vehicleId: 1)

● Click SET AS DEFAULTS AND TEST. The interface will display the sample data.

9. Click the CANCEL button, and rename it Reject.

10. In the Component Configuration pane, under Value, click false, and change it to
false. Under Save Value To, keep ri!approvalDecision.

11. Click the SUBMIT button, and rename it Approve.

12. Configure the Approve button to save values for the following fields: Modified By,
Modified On, and Status.

● In the Component Configuration pane, for Save Value To, click the Edit as
Expression icon.
● Enter the following expression:

{
a!save(ri!vehicle[recordType!W#SA
Vehicle.fields.modifiedBy], loggedInUser()),
a!save(ri!vehicle[recordType!W#SA
Vehicle.fields.modifiedOn], today()),
a!save(ri!vehicle[recordType!W#SA
Vehicle.fields.statusId], 1),
a!save(ri!approvalDecision, true())
}

● This expression saves:

○ The logged in user as the value for the Modified By field,

○ The current date as the value for the Modified On field,

Appian Step-by-Step 24.2

© Appian Corporation, 2024 15
 ○ The active vehicle status (which has a value of 1 in the
W#AA_VEHICLE_STATUS lookup table) as the value for the Status Id
field, and true() as the value for the Approval Decision rule input.

13. Click SAVE CHANGES.

Create a Reusable Interface

Keep in mind that interfaces can be built as reusable blocks. You can create an interface and
then call it from other interfaces in your application. Try it out by creating a reusable interface
from the Supervisor Review form.

1. Click EXPRESSION to switch to Expression Mode.

2. In line 4, use the arrow to collapse the section layout:

3. Highlight the section layout:

4. Click Save Selected Expression As in the toolbar:

Appian Step-by-Step 24.2

© Appian Corporation, 2024 16
 5. In the Save Expression As dialog, configure the following properties:

● Save As: Select Interface.

● Name: Enter W#SA_VehicleDetailsView.
● Description: Enter Read only interface to display vehicle
details.
● Click SAVE. The new interface will open.

6. In W#SA_VehicleDetailsView, in the top right corner, click the Gear icon > Properties.

7. Select the Include in the design library checkbox. Name the interface
W#SA_VehicleDetailsView.

8. Click OK, then SAVE CHANGES. Close the W#SA_VehiclesDetailsView tab.

9. Go to the W#SA_SupervisorForm. You will notice the reusable interface has been added
in place of the section layout and mapped to the appropriate rule input. Later, you will
be able to reference this reusable interface anytime you want to display read-only
vehicle details.

10. Click SAVE CHANGES.

TIP: Build Reusable Interfaces for Reporting

Creating reusable interfaces is useful for reporting interfaces. You can create each chart or
grid as its own interface, and then combine them into different larger reporting interfaces for
your business users.

Troubleshooting Resources
Stuck on a step, or need help troubleshooting? Appian provides several support resources that
you can use as you build:

1. Acme Auto Solution Application - The Acme Auto Solution Application (AS) is the
solution you are working to build in the Step-by-Steps, so you can use it as a reference
tool. Review this application to see how specific objects are configured, or test the app
to see how the features work from a business user’s perspective. You can find this app
in your Appian Community Edition workspace.

2. Community Discussions for New Users - Check out the New to Appian thread in
Community. Join our community of experts to ask questions and find answers from past
discussions.

3. Appian Documentation - Appian’s product documentation will provide you with an

overview of key Appian features, newest release information, additional tutorials, and
helpful patterns and recipes to implement in your app.

Appian Step-by-Step 24.2

© Appian Corporation, 2024 17