Introduction

How to Complete the Exercises in this Tutorial

This tutorial will teach you how to build a portal. To expedite portal development, the tutorial
comes with pre-built design objects in Appian Community Edition. Follow the steps in Exercise 1
to access Appian Community Edition, and then open the Wyndhamm Power Outage (WPO)
application.

What Will I Build?

In this tutorial, you’ll build a portal that allows customers of Wyndhamm Power to report power
outages. In its current build, the WPO app allows customer service representatives to record the
information about power outages using a form. After they submit the form, the outage data is
written to a database, and a technician is assigned a repairs task. Because representatives are
spending too much time on calls and entering data, you’ll build a portal for customers to
self-report outages using an online form. To configure the new portal and connect it to the WPO
app, you’ll complete the following high-level steps:

● Add yourself as a test user to the Technicians group (needed for testing).
● Add the a!startProcess function to the pre-built interface, so that it launches a repairs
process in Appian.
● Create and configure a portal.

How Can I Practice?

You should practice in Appian Community Edition. This free, community Appian resource
comes with the pre-built WPO application that contains objects that you’ll use to build the
portal for reporting power outages.

Appian Version
Appian Community Edition is on the latest Appian version. If you are following the exercises
from a previous Appian version, go to academy.appian.com to download the latest version.

Naming Conventions
When you register for Appian Community Edition, you gain access to a workspace, which is
your own personal area within the community environment. Pre-built apps have a workspace
identifier that appears in application prefixes. When creating new apps, be sure to include this
identifier in the app prefix. Otherwise, you could run into naming conflicts with objects created
by other users.

For example, the screenshot below shows apps that are preloaded into Appian Designer. The
application prefix for the Acme Automobile Reference app is W000AA, so the workspace
identifier is W000. W000 would be included at the beginning of any new app prefixes.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 1
App Catalog

The App Catalog contains the most recent versions of pre-built apps available in Appian
Community Edition. To go to the App Catalog, on Community Edition Home, click BROWSE
APP CATALOG.

To determine if you have the latest app version, select the app in the list and review the last
updated date. If this date is later than when you registered for Appian Community Edition, you
should deploy a new version. If you recently received your workspace, you likely have the
latest versions.

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

Additional Resources
Appian provides a number of training resources for 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 practice exercises. Explore these resources at your own pace. Survey
courses will help you develop a better grasp of the topics you need to learn. Video and
print tutorials will help you with getting hands-on experience with Appian.

● 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.

● 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.

Build a Portal Tutorial 24.2

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

Exercise 1: Access Your Appian Community Edition

Environment
The exercises are developed for Appian Community Edition. Once you register, you will have
access to your own Appian workspace. The workspace comes with preloaded objects that you
will need as you complete these steps.

Follow the steps below to register:

1. Go to Appian Community Edition.

2. Sign in with your Appian Community credentials.

3. Select a region, then complete the onboarding questions and acknowledgement. When
your workspace has been assigned, you’ll receive a confirmation email.

Keep in mind that this is a community environment not suitable for production workloads or
sensitive information.

For help accessing this environment, please email [email protected].

Exercise 2: Add Test User to Technicians Group

You’ll start by adding your own user account to the WPO Technicians group. Remember, an
Appian best practice is to secure objects and assign tasks using groups. After a customer uses
the portal to report an outage, a technician should be assigned a task to fix the outage. For
testing purposes, you’ll act as the technician in this tutorial.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 3
Add User to Technicians Group

1. After logging into your Appian Community Edition, click the Navigation menu , then
Appian Designer.

2. In the list of applications, find and open the Wyndhamm Power Outage app.

3. In the left pane, click the Build icon.

4. Open the W#WPO Technicians group.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 4
 5. Click ADD MEMBERS.

6. In the Users to Add field, search for and select yourself, then click ADD.

Exercise 3: Add a!startProcess to Interface

In this exercise, you’ll configure the primary interface to save user responses. Then, an internal
Appian process model is launched that will first record the outage data to the database, and
then assign a repairs task to the technicians group. Follow the steps below to incorporate an
a!startProcess function into the Submit button of a form.

Add Local Variables

1. Return to the WPO app’s Build view in Appian Designer, and open the
W#WPO_ReportOutage interface.

2. At the top of the interface object, click Expression Mode .

3. At the end of line 4, press Enter to add a line. Enter the expression below. Type this
expression yourself; do not copy and paste it.

This expression sets up the local variable to temporarily store the outage data, until it’s
saved into specific record fields. After you type in this expression, you’ll notice the

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 5
 lightbulb icon next to the local variable. It’s a design recommendation alerting you about
an unused local variable, and it will disappear after you use the variable later in this
exercise.

local!outage: a!refreshVariable(
value: recordType!W#WPO Power Outage (
recordType!W#WPO Power Outage.fields.street: null,
recordType!W#WPO Power Outage.fields.city: null,
recordType!W#WPO Power Outage.fields.state: null,
recordType!W#WPO Power Outage.fields.status: “Reported”
),
refreshOnVarChange: {local!result, local!errorMessage
}),

4. Switch to design mode by clicking Design Mode at the top of the

interface object.

5. In the interface, click the Street field.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 6
 6. In the Component Configuration pane, next to Display Value, click the Edit as
Expression icon.

7. Update the expression to:

local!outage[recordType!W#WPO Power Outage.fields.street]

8. Click OK.
9. Next to Save Input To, click the Edit as Expression icon.

10. Update the expression to:

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 7
 local!outage[recordType!W#WPO Power Outage.fields.street]

11. Click OK.

12. In the same manner, for the City field, update Display Value and Save Input To:

local!outage[recordType!W#WPO Power Outage.fields.city]

13. For the State field, update the Display Value and Save Input To:

local!outage[recordType!W#WPO Power Outage.fields.state]

14. Select the Service Address Card Choice Field.

15. In the Component Configuration pane, under Data Source, next to List of Any
Type, click the Edit as Expression icon.

● If you accidentally click the Data Source cards, you’ll clear the current
expression. To fix it, click the Expression card choice again, then click the Edit
as Expression icon. When you complete the next step, you’ll be back on track.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 8
 16. Update the a!map() expression with:

{
a!map(
id: 1,
icon: "home",
primaryText: local!outage[recordType!W#WPO Power
Outage.fields.street],
secondaryText: local!outage[recordType!W#WPO Power
Outage.fields.city]& " " & local!outage[recordType!W#WPO Power
Outage.fields.state]
)
}

17. Click OK.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 9
 18. Enter test data into the Street, City, and State fields. Make sure your test values save
into the local variable outage.

19. Click SAVE CHANGES.

Add a!startProcess to the Submit Button

1. In the same interface, scroll down and select the SUBMIT button.

2. In the Component Configuration pane, next to Save Value To, click the Edit as
Expression icon.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 10
 3. Remove the default expression and type the following into the Save Value To
expression editor:

a!startProcess(
processModel: cons!W#WPO_POWER_OUTAGE_PROCESS_MODEL,
processParameters: {
outage: local!outage
},
onSuccess: a!save(local!result, fv!processInfo.pv.outage)
)

Click OK to close the expression editor.

4. In the Component Configuration pane, scroll down and update the following fields:

● Confirmation Message: Enter Thank you for reporting your

outage.
● Confirmation Button Label: Enter OK.
● Cancel Button Label: Enter Cancel.

5. Then click Save Changes.

6. Click TEST at the top of the interface to reload the interface and clear any test data.

7. Add test data into the Street, City, and State fields, then click SUBMIT.

8. Confirm that the result local variable now contains your test data.

NOTE: The test data will clear from the form (clearing out the outage local variable)

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 11
 when you click OK in the confirmation. This setup allows the user to report an outage
for another address.

Test Process Model

1. Return to the WPO app’s Build view in Appian Designer, and open the W#WPO Power
Outage process model.

2. Click Process Instances.

3. Click the W#WPO Power Outage hyperlink in the first row. There should be 1 active
task.
○ If there is not an active task, return to the W#WPO_ReportOutage interface,
enter test data, and click SUBMIT again.

4. Close the Process Instances dialog.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 12
 5. Right-click the Technician Task node, then select View Form.

6. Click ACCEPT to begin working on the task.

7. Confirm the test data you submitted in the report outage interface displays to the
technician. Update the Status to Fixed, and click SUBMIT.

8. Click the Refresh button in the process model toolbar.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 13
 9. Click Process Details.

10. At the top of the Process Details dialog, select the Variables tab.

11. Confirm the values you typed into the W#WPO_ReportOutage interface were saved to
the outage process variable, and close the Process Details.

Exercise 4: Create a Portal

In this exercise, you’ll create and configure the new portal object. Publishing and service
account creation is disabled in Appian Community Edition environments by default, so you won’t
be able to publish your portal to be accessible from the web. Visit Appian Documentation for
details on publishing and testing a portal.

Create a Portal
1. Return to the WPO app’s Build view in Appian Designer, and click NEW > Portal.
Configure the portal as follows:

● Name: Enter W#WPO Report Outage. Only developers will see this name.
● Display Name: Enter W#WPO Report Outage. The display name will appear
in the browser tab.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 14
 ● Description: Enter Portal for customers to report outages to
Wyndhamm Power.

Click CREATE.

2. Review the default security settings, and click SAVE.

3. In the Pages section, click ADD PAGE to add the primary interface to your portal.

● Title: Enter Report Outage. This page title will only display in the header bar
if your portal has more than one page.
● Web Address Identifier: Populates automatically based on the title.
● Content: Select the W#WPO_ReportOutage interface.

4. Click ADD. You’ll see the page display in Branding Preview. You can add multiple
pages to a portal, and you can click Add Page Group to add a nested group of pages,
under a page group title.

5. Scroll to the Navigation Bar section. By default, Show navigation bar is selected,
but you won’t see the navigation bar unless your portal has more than one page. Keep
the default Header Bar layout.

6. Scroll down to Branding. Under Accent Color, select Hex code and update it to
#3c79d7.

7. Click SAVE CHANGES.

8. NOTE: Keep in mind that publishing and service account creation is disabled in the new
version of Appian Community Edition by default, so you won’t be able to publish your
portal to be accessible from the web.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 15
 Disabled Service Account Creation and Publishing
In the new Appian Community Edition, service account creation and publishing are
disabled. If you proceed with these steps, you’ll receive an alert.

● A service account provides a portal with permissions to connect to selected

information and workflows. You must have the system administrator
permissions to create a service account.
● Publishing requires a single click, and it will make your portal available to
business users at the URL specified in your portal design object.

Visit Appian Documentation to learn about publishing and service accounts for
portals.

Congratulations! You completed the Build a Portal Tutorial.

Build a Portal Tutorial 24.2

© Appian Corporation, 2024 16