Exercise 02: Build a Dynamic Link 

In order to complete the tutorial, you will need an Appian 19.3 (or
later) practice environment.

If you don't have a practice environment, you can request an

Appian trial site by going to ​https://appian.com/platform/free-trial/​.
Trial environments are available for 14 days.
Table of Contents 

What You Will Learn 3

Part 1 – Add Local Variables to the Starter Form 4

TIP: What Does the Type! Constructor Do? 5

Part 2 – Build the New Address Entry Form 6

TIP: When to Use the Side-by-Side vs. Column Layout? 7

Part 3 – Build the Add Button 9

Part 4 – Configure the Addition and Selection of the New Address 11

Part 5 – Set the addingAddress Flag to False 13

Part 6 – Hide the Add New Address Form 14

Part 7 – Show the Add New Address Form 15

Review New Concepts 17

This exercise is the third exercise in the ​Advanced Interfaces Exercise Series​. The
four exercises accompany our courses Interfaces 102 & Interfaces 103:

Interfaces 102: Build Interfaces Using Expressions

● Exercise: Build a Form Using Expressions

Interfaces 103: Build Dynamic Interfaces

● Exercise 01: Build a Dynamic List
● Exercise 02: Build a Dynamic Link
● Exercise 03: Build an Editable Grid

Exercises build upon each other, so please keep the app and objects created in each
exercise. If you are using the trial version of Appian and plan to continue with
exercises in a different environment, remember to export the ADV Interfaces Practice
app before the expiration of your trial site.

Build a Dynamic Link Component Page 2

What You Will Learn 

In the previous exercise, we built an interface with the list of radio buttons that we populated
with the values from the database table. In this exercise, we will add the dynamic link ​Add New
Address​ right below the radio buttons. The users will click the link to launch the ​Add New
Address​ form. After filling out the address and clicking ​Add​, they will see their address added
to the list as a selected radio button. Examine the image below to understand what your
interface will look like:

Because of the complex dynamic interaction built into this form, we will build it in seven
distinctive steps:

PART 1.​ In this part, we will add two local variables to our existing interface. The ​newAddress
variable will allow us to collect the address data entered by the user. The ​addingAddress
Boolean variable will allow us to adjust the visibility of the new ​Add New Address​ form.

PART 2.​ In this part, we will build the fields for entering the new address.

PART 3. ​In this part, ​we will build and configure the ​Add​ button from scratch.

PART 4.​ In this part, we will teach the form to add the new address to the list of radio buttons.

PART 5. ​In this part, ​we will configure the ​local!addingAddress​ variable to be used for
adjusting the visibility of the ​Add New Address​ form.

PART 6. ​In this part, we will adjust the settings to hide the form.

PART 7.​ In this part, we will create the dynamic link that will launch the address form.

Now that you understand the general logic of this exercise, let’s get started!

Build a Dynamic Link Component Page 3

Part 1 – Add Local Variables to the Starter Form 

Follow the steps below to create the new local variables:

1. Open the ​ADV_DynamicAddressList ​interface, and click the ​Expression Mode​ button
on the toolbar to access the expression for the interface.

2. Review the opening lines of our expression. You will notice that the section layout is
already enclosed within the ​a!localVariables​ function, and contains one local variable
local!locationsList​. This is great because we will be able to reuse the ​a!localVariables
function by adding the new variables on the new lines.

Please note that we use Camel Casing for the names of variables in Appian. Camel
casing refers to the practice of writing phrases – in our case, the names of Appian
objects – such that each word in the middle of the phrase and all subsequent words
begin with a capital letter and no spaces or additional punctuation (for example, iPhone
or eBay use camel casing).

3. Place the cursor at the end of line 2, and press ​Enter​. Type ​local!addingAddress​. We
will set up this local variable as a Boolean value that will help us with showing or hiding
the ​Add New Address​ form. Type the colon after the variable, then type ​false()​, and
add a comma at the end of the line. Your expression will look like this:

local!addingAddress: false(), 

The default value for this local variable will be set to false, and it will remain hidden
unless the user clicks ​Add New Address​. Later, we will configure the rest of visibility for
the ​Add New Address​ form.

4. Press ​Enter​, and type ​local!newAddress​ on line 4, followed by a colon. The colon
means that now we will define the value of the variable.

Build a Dynamic Link Component Page 4

 To set up an association between the ​newAddress​ local variable and the
ADV_Address​ data type, enter​ type!​ and start typing ​ADV​ for the Autocomplete Feature
to show the ​ADV_Address​ data type. When the ​ADV_Adress​ data type is shown,
select it from the list, and press ​Enter​. Your expression will look as follows:
 

Note that the ​ADV_Address​ data type has been added along with the namespace
urn:com:appian:types​. The namespace information is important because it provides a
unique identifier for a CDT. While several CDTs might have the same name, the
combination of the name with the namespace ensures that we refer to the correct data
type.

5. Add a comma at the end of line 4 to separate the ​newAddress​ variable from the next
line. Click ​SAVE CHANGES​.

TIP: What Does the Type! Constructor Do?

In Appian, the domain ​type!​ (also called the “type constructor”) is used to reference the
data structure inside an expression. In this case, we use ​type!​ to map the information
entered by users to the elements of our ​ADV_Address​ CDT.

Build a Dynamic Link Component Page 5

Part 2 – Build the New Address Entry Form 

1. Click ​Design Mode​, and examine our Dynamic Address List. Currently, we have a list of
Radio Buttons inside a Section layout:

We will add another layout that will display when the user clicks the ​Add New Address
dynamic link. Let’s select the ​Box​ layout. This layout will help to visually distinguish the
new ​Add Address​ section from the rest of the form.

2. In the ​Design Mode​, drag the ​Box​ layout to the interface, and drop it right underneath
the ​Radio Buttons​.

As you drag the box to the desired location in the interface, notice the magenta bar that
appears as a placement marker. Make sure that the placement marker is in the desired
position before you drop the layout.

3. Let’s configure the appearance of our box layout. The layout configuration options are
listed in the ​Component Configuration​ pane, located on the right side of your screen.
Configure the box as follows:

a. Type ​Add New Address​ in the ​Label​ field.

b. In the ​Style ​section, select ​Accent​ from the dropdown menu. This will create a
nice blue header for our box.

Build a Dynamic Link Component Page 6

 4. Drag the ​Side-by-Side ​layout from the ​Layouts​ Group in the Component Palette, and
drop it into the ​Add New Address​ box.

TIP: When to Use the Side-by-Side vs. Column Layout?

Appian offers two similar layouts: the Side-by-Side and Column layout. Both layouts
allow you to place multiple fields within the same row.

The column layout is preferable in most cases. When is the Side-by-Side layout used
then? The Side-by-Side layout is used when we deal with clusters of related information,
and breaking up the fields is not desirable. With the Side-by-Side layout, the fields will
always display next to each other if they are positioned within a Side-by-Side layout. The
column layout may break up the layout if the content is displayed on a mobile device.

5. For the ​Shipping Address​ field, drag a ​Text​ component from the Palette, and drop it
into the Side-by-Side layout. In the ​Component Configuration​ pane, configure this field
as follows:

● For ​Width​, select the ​Set relative width​ radio button. From the dropdown list,
select the ​3X​ option. This will assign three times the width to this field as
compared to the other fields in the same row.

● Type ​Shipping Address​ in the ​Label​ field.

● For ​Display Value,​ click the ​Expression​ button. In the Editor, enter
local!newAddress.shippingAddress​.

● For ​Save Input To​, click the Expression button. Type

local!newAddress.shippingAddress​.

● Select the ​Required​ checkbox to make this field required. A required asterisk will
appear next to the field’s label.

● Test the new field by entering an address into the field. The address you enter
should be retained when you click outside the field.

6. For the ​Unit ​field, drag another Text component, and drop it into the Side-by-Side layout
(to the right from the ​Shipping Address​ field). Its component configuration is displayed.
In the ​Component Configuration​ pane, configure this field as follows:

● In the Label field, type ​Unit Number​.

Build a Dynamic Link Component Page 7

 ● For ​Display Value​, click the ​Edit-as-Expression​ button and type
local!newAddress.unitNumber​. Then select all and press ​CTRL+C​ to copy that
configuration to the clipboard.

● For ​Save Input To​, click the ​Edit-as-Expression​ button. Delete the existing
curly braces, and press ​CTRL+V​ to paste our local variable.

7. For the ​City ​field, drag and drop a new ​Side-by-Side​ layout to create a second row of
fields in the ​New Address Box​ layout. Then drag and drop another ​Text​ field into the
new ​Side-by-Side​. Configure this field as follows:

● Set the relative width for the ​City​ field at ​2x​.

● Change the label to ​City​.

● In ​Display Value​, click the ​Edit-as-Expression​ button, and enter

local!newAddress.city​.

● In ​Save Input To​, click the ​Edit-as-Expression​ button, and enter

local!newAddress.city​.

● Select the ​Required​ checkbox.

8. For the ​State/Province​ field, drag and drop a new ​Text​ field to the right of theCity field.
Configure this field as follows:

● Set the relative width for the State field at 1x.

● Change the label to ​State/Province​.

● In ​Display Value​, click the ​Edit-as-Expression​ button, and enter

local!newAddress.stateOrProvince​.

● In ​Save Input To​, click the ​Edit-as-Expression​ button, and enter

local!newAddress.stateOrProvince​.

● Select the ​Required​ checkbox.

9. For the ​Postal Code​ field, drag and drop a new ​Text​ field after the ​State/Province​ field.
Configure this field as follows:

● Set the relative width for the Post Code field at ​1x​.

● Change the label to ​Post Code​.

Build a Dynamic Link Component Page 8

 ● In ​Display Value​, click the ​Edit-as-Expression​ button, and type
local!newAddress.postalCode​.

● In Save Input To, click the ​Edit-as-Expression​ button, and type

local!newAddress.postalCode​.

● Select the ​Required​ checkbox.

Your form now should look like this:

Part 3 – Build the Add Button 

Now that we have created all of the fields, let’s add a​ ​button to the box layout to allow the
submission of a new address. Follow the steps below to create and configure this button:

1. Drag the ​Submit​ button from the ​Action​ group in the ​Component ​Palette, and drop it
into a third row in the box layout. Notice that the button defaulted to the left side, or start
alignment. We will move the button to the right by configuring its alignment.

2. To align the button to the right, we will need to configure the button layout (not the button
itself, but its parent component). To get to the correct configuration screen, either click
the ​navigation arrow​ next to B​ uttons​, and​ ​then click ​ ​the​ Button Array Layout ​link
(Fig. 1), or open up the​ Interface Hierarchy ​and click ​Button Array Layout​ (Fig 2):

Build a Dynamic Link Component Page 9

 TIP: Where Is the Interface Hierarchy Screen?

Rest the pointer on the left border of the ​Component Configuration​ pane, and notice
that your pointer will turn into a slider. Now you can pull the full ​Component
Configuration​ drawer to show the ​Interface Hierarchy​. This Appian element is great
because it shows you the whole hierarchy of elements that you created in your
interface. Notice that each component listed on the live view is highlighted with a
magenta border when you rest your pointer on the corresponding items in the ​Interface
Hierarchy​.

3. Once the Button Array Layout is displayed in the configuration pane, change the
alignment of the button to ​End​.

4. Select ​Button​ in the ​Interface Hierarchy​. Change the label to ​ADD​, and change the
Style to ​Primary ​(this style is recommended for buttons used to submit a form). Select
the ​Validate​ checkbox. We will leave the ​Submit​ checkbox unchecked because we
won’t be clearing the entire form after the user clicks ​Add​, just the address fields in the
box layout.

Build a Dynamic Link Component Page 10

Part 4 – Configure the Addition and Selection of the New Address 
After the user completes all required address fields and clicks ​ADD​, Appian will need to know
how to add the new address to the radio button list. To achieve this, we will use the ​a!save
function inside the ​Save Value ​configuration. The a​ !save ​function will allow us to assemble the
new list of addresses and store it in the target variable. We will use the ​append ​function to
insert the latest value into our array of values.

1. Click the ​Edit-As-Expression​ button next to the ​Save Value​ ​To​ field. In the ​Expression
Canvas​, add an open curly brace to designate a list of items you want to configure. The
closing curly brace autocompletes.

2. Press ​Enter​ to add a new line inside the curly braces, and type ​a!save​. To configure the
a!save​ expression, we will need to provide the target (where we want our new address
saved) and the value. Our target is ​local!locationsList​. The value will be defined
through the ​append​ function as ​append (local!locationsList, local!newAddress)​.
Your expression will look as follows:

3. Test your form by clicking the ​Add​ button. Notice that the new address is now appended
to the list of radio buttons:

Build a Dynamic Link Component Page 11

 4. Notice that although the new address is added to the list of radio buttons, it is not
selected. Now we will configure our ​Save Value To​ to also select the new address.
Click the ​Edit as Expression​ button next to the​ List of Save​ heading for the ​Add
button:

5. At the end of line 2 add a comma, and press​ Enter​ to add a new line. In order for the
form to select the new address instead of a different selection, we will use the ​a!save
function. However, for the target value we will supply the rule input value ​ri!address​,
and for value - the new address value ​local!newAddress​. Your expression will look as
follows:

As you type your expression, use the autocomplete suggestions to avoid unnecessary
errors. After you are done, test out your form by entering the address and clicking ​Add​.
You will notice that now your new address is added to the radio buttons list, and is
selected.

6. Finally, let’s configure our form to clear after the user clicks ​Add​. Click
Edit-as-Expression​ to return to your list of save options. Add a comma at the end of line
3, and press ​Enter​ to add a new line.

To make the form clear, we will need to update the ​local!newAddress​ variable (our
target) with blank values for each individual element. To do so, type the name of each
element, followed by a colon as your delimiter. Then supply a list of blank values in the
correct format, so that we can clear out the entries and reset the form for the next user.
Your expression will look as follows:

Build a Dynamic Link Component Page 12

 Note that open and close quotation marks (“”) are the placeholders for blank text values,
and ​null​ provides blank values for numeric values. Test your form. Now when you enter
an address, the form automatically cleans up any prior entries.

Part 5 – Set the addingAddress Flag to False 

We want the​ Add New Address​ box to be responsive: visible when the user clicks the ​Add
New Address ​link, and invisible after the user fills out the form, and clicks the ​Add​ button. To
achieve this responsiveness, we will need to set the ​local!addingAddress​ variable to false
once the user clicks the ​Add ​button. This flag will be later used to configure the visibility of our
Add New Address​ box. Follow the steps below to set the ​addingAddress​ flag to false:

1. Once again, go into the ​Add​ Button Component Configuration. Click the
Edit-as-Expression​ button for the S​ ave Value To​ field.

Build a Dynamic Link Component Page 13

 2. Add a comma after the last ​a!save f​ unction, and type ​a!save​ on the new line. Type
local!addingAddress​ as the target, and ​false​ as the value. Your expression will look as
follows:

Part 6 – Hide the Add New Address Form 

We have configured our ​Add New Address​ form to allow the user to update the dynamic list of
addresses with the new selected address. Now, we will configure the visibility of the ​Add New
Address​ box for the box to disappear once the address is filled in. Follow the steps below to
complete this configuration:

1. In the ​Live View​, click the ​Add New Address​ heading to select the box layout. In the
Component Configuration, select the ​Only show when​ radio button for visibility.

2. Click ​Edit Condition​. In the ​Visibility ​canvas, enter a variable that will supply the
Boolean true or false value to determine whether the layout should be displayed or
hidden. If you remember, we just configured the​ local!addingAddress​ variable to be set
to ​false​ when the form gets completed. Type ​local!addingAddress​ into the ​Visibility
canvas, and click ​OK​.

Now, test out your form! Notice that, after you click ​Add​, the form hides itself. Also,
review the ​Add New Address​ (Box Layout) in the Interface Hierarchy. You will notice
that the hidden layout now has an ​eye​ icon next to it:

Build a Dynamic Link Component Page 14

Part 7 – Show the Add New Address Form 

Now that we’ve hidden the new address form, let’s configure the ​Dynamic Link​ to allow the
user to bring the form back when they need it. Follow the steps below to build the Dynamic Link
component:

1. Drag the ​Rich Text​ component from the ​Display​ Group in the ​Component ​Palette, and
drop it inside the ​Address Section​, right below the list of radio buttons. The Rich Text
component is a great option for the Dynamic Link because it allows you to work
simultaneously with the text and icons.

2. In the ​Component Configuration​ pane, make sure that ​Hidden​ is selected in the ​Label
Position ​field.

3. In the​ Display Value​ editor, click the ​Star​ button on the toolbar to bring up the list of
available icons. Type ​Plus​ into the ​Search​, and select the​ ​+​ Icon. Click ​Insert​.
4. After the icon, enter a space, and then type ​Add New Address​. If you wish, apply the
bold font to your text.

5. Next, select the ​Configure items​ radio button in the ​Display Value​ field. The editor will
change to a list of components. Click ​Styled Text​. You will see a list of configuration
options.

6. Click ​Select Link​. In the Select Link screen, select D

​ ynamic Link​. You will see it added
to your list of configurations:

Build a Dynamic Link Component Page 15

 7. Click ​Dynamic Link​ to drill into this component’s configurations. You will notice that,
similarly to buttons, the Dynamic Link contains the ​Value​ and ​Save Value To​ fields. This
is not accidental since the ​Dynamic Link​ is similar to a button.

8. Let’s configure the ​Value ​and ​Save Value To ​fields. Click the ​Edit as Expression
button next to the ​Value​ field. In the canvas, type ​true​, and click ​OK​. In the ​Save Value
To​ field, use the dropdown menu to select the ​local!addingAddress​ variable.

9. Test your ​Dynamic Link​ to see that it brings up the ​Add New Address​ form.
Congratulations! You have just configured your fully dynamic address form.

Bite-Sized Dynamic Element Challenge

Now that you’ve learned how to show and hide the ​Add New Address​ form using a
local variable ​local!addingAddress​, how would you hide the ​+Add New Address
dynamic link?

Hint:​ The link will be hidden while you fill out the form, so its visibility should be set to
the opposite of that for the ​Add New Address​ form. You will need to use the ​not()
function. Try to hide it now!

Build a Dynamic Link Component Page 16

Review New Concepts 

At this point, you should have a better understanding of the steps required to build a form that
responds dynamically to an input by the user. Before you view the remaining videos in this
course and advance to the next exercise in our series, skim through the topics below. If any of
these topics still seem fuzzy, review the steps in the exercise, and build the interface once
again, paying attention specifically to the versatility of local variables for dynamic interfaces.

In this exercise, we learned how to:

● Use local variables to accept new temporary values from the user
● Use a local variable to set the flag for a component's visibility
● Use the ​a!save​ function to configure a button to accept a complex list of saves
● Use the ​a!save​ function to clear out the form for the next user
● Configure a ​Dynamic Link​ that can work as a button to save a value into one or more
variables
● Access the ​Interface Hierarchy​ pane for the panoramic view and quicker selection of
the interface components

Before you go …

This is the third exercise in our ​Advanced Interfaces Exercise Series (​and the
second exercise to accompany the ​Interfaces 103​ course). If you plan to continue
with the remaining exercises that accompany the course “Interfaces 103: Build
Dynamic Interfaces,” make sure to keep the objects that you’ve created for the ADV
application thus far. We will reuse some objects in subsequent tutorials. If you are
using the trial version of Appian and plan to continue with exercises in a different
environment, remember to export the ADV app before the expiration of your trial site.

Build a Dynamic Link Component Page 17