Scribd
Upload
7 views

24.1 Exercise 2 - Store Your Data

Uploaded by

roma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

24.1 Exercise 2 - Store Your Data

Uploaded by

roma
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Exercise 2: Store Your Data

Exercise to Accompany
Use Local Variable to Store Data

The course Interfaces 102: Building Dynamic Interfaces contains 4 exercises.


These exercises build upon
each other. Complete exercises in order and keep the app and all
objects until you are done with the course.

1 Set up Your Environment

2 Store Your Data

3 Capture User Selections

4 Create an Editable Grid

5 Create a Wizard

© Appian Corporation, 2024


Exercise 2: Store Your Data 3
Create Card Template 3
Store Scheduled Maintenance Requests 5
Nest Card Template in a!forEach Loop 6

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 Corporation, 2024 Page 2


Exercise 2: Store Your Data
In this exercise, you will build an interface that displays a card for each of Acme Automobile’s
scheduled maintenance requests. Eventually, mechanics will be able to use this interface to
select a maintenance request and create an estimate for the cost of maintenance. Some steps
in this exercise can be completed in design mode, but you should try to complete as much as
possible from expression mode to gain practice.

Create Card Template


In this step you will create a template that will be used later to display the year, make, and
model of the vehicle in need of maintenance, a description of the issue, and an image of the
vehicle. At the end of this step, your interface should look something like this:

1. Create an interface object in the Interfaces 102 application named


W#INT_CreateMaintenanceEstimate.
2. Add a card layout to the interface.
3. Add a side by side layout to the card.
4. Add two side by side items:
a. On the left, a web image with width set to “MINIMIZE”. (In Design Mode, this
option is called “Use only as much space as necessary”.) You may also want to
hide the label for this field.
b. On the right, a rich text display field with two children:
i. A rich text header with placeholder text.
ii. A rich text item with placeholder text.

Note: You can add these items in design mode by configuring the Display Value
in the Configuration Pane. Select Configure Items.

© Appian Corporation, 2024 Page 3


Then, click Add Rich Text to select what type of rich text component to add.

5. Change the shape property of the card layout to “ROUNDED”.

Here is an example of what your expression should look like at this stage:

© Appian Corporation, 2024 Page 4


Store Scheduled Maintenance Requests
In this step, you will create a query to return the scheduled maintenance records, and call this
rule from within your interface to store the data in a local variable.
1. Wrap your entire existing interface expression in the a!localVariables() function.
2. Create the local variable local!scheduledMaintenanceRequests.
3. Create an expression rule design object called W#INT_getScheduledMaintenance to
return the scheduled maintenance records (feel free to use the query editor).
a. The expression rule should query the Maintenance record type and return the
following:
i. The entire Maintenance record
ii. The related Vehicle record
iii. The records Category and Condition related to the Vehicle record
b. The query should have a filter to only return requests with the maintenance
status “Requested”.
c. Limit your query to return only 10 records.
d. Remember to add “.data” to the end of your query function to return just the
data.
e. Your complete expression rule should look something like this:

4. Call the expression rule in your interface.

© Appian Corporation, 2024 Page 5


Here is an example of what your interface expression should look like at this stage:

Nest Card Template in a!forEach Loop


In this step, you will use the function a!forEach() to iterate across the items stored in the local
variable to generate a card for each. At the end of this step, your interface should look
something like this:

1. Add the a!forEach() function to the interface.


a. The items property should be set to local!scheduledMaintenanceRequests.
b. The expression property should be the a!cardLayout() from the first step.
2. Replace the placeholder text with data from the stored records.
a. Header text: [Vehicle Year] [Vehicle Make] [Vehicle Model]
b. Issue text: [Maintenance Issue]
3. Specify vehicle imageUrl as the source for the web image.

© Appian Corporation, 2024 Page 6


Here is an example of what your interface expression should look like at this stage:

© Appian Corporation, 2024 Page 7

You might also like