0% found this document useful (0 votes)
7 views19 pages

24.3 Build A No-Code App Tutorial

Build a No-Code App Tutorial

Uploaded by

Xemox Xenimax
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
0% found this document useful (0 votes)
7 views19 pages

24.3 Build A No-Code App Tutorial

Build a No-Code App Tutorial

Uploaded by

Xemox Xenimax
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/ 19

Introduction

How to Complete this Tutorial


In this tutorial, you will build an IT request application without using any code. With the
application, you will be able to create, update, and delete requests. After you’re done with the
step-by-step tutorial, you can complete an optional exercise to get more practice by expanding
the application you just built.

If you do not already have an Appian environment to practice in, you can register for Appian
Community Edition. This is a free, community Appian resource.

Naming Conventions

When you register for Appian Community Edition, you gain access to a workspace, which is your
personal area within the community environment. When your workspace has been assigned,
you will receive a confirmation email with a workspace ID.

Use this workspace ID when creating new applications and objects. Otherwise, you could run
into naming conflicts with objects created by other users. Pre-loaded apps in your workspace
also include the workspace ID. In the example below, the application prefix for the Acme Auto
Automobile app is W0000AA. So, the workspace identifier is W0000, which would be included in
any new app’s prefix.

The Scenario
A company’s IT department needs an application to manage IT requests from employees. Any
employee will be able to submit a request, and members of the IT department will be able to
see a list of these requests, view details about each, and take action to update or delete
requests.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 1


What to Build
To create the new application, you’ll complete the following steps:

1. Create a new application


2. Create a record type
● Create your data model
● Generate a summary view
● Generate record actions
● Edit the record list
3. Customize the generated interfaces
● Update the create/update form
● Update the summary view
4. Create a site
● Add pages
● Update header and branding
5. Test the application

When you’re ready to build your own application, use these high-level steps to guide you.

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.

Appian Documentation - Appian’s product documentation will provide an overview of key Appian
features, newest release information, additional tutorials, and helpful patterns and recipes to
implement in your application.

Community Discussions for New Users - Join our community of experts to ask questions and
find answers from past discussions.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 2


Follow the steps-by-step instructions in this tutorial to build the application. Remember, you can
follow along with the video walkthrough as you build.

Step 1: Create an Application


You will start by creating the application, which is a container for the design objects that make
up a business solution.

Go to Appian Designer
1. If you’re using Appian Community Edition, sign in with your Appian Community
credentials.

2. Click the Navigation menu , then Appian Designer.

Create a New Application


1. In the Applications view, click +New Application.

2. In the Create New Application dialog, configure the following properties:

● Name: Enter Technology Management.


● Description: Enter Application to manage IT department
requests.
● Prefix: Keep the prefix as TM.
● Generate groups and folders to secure and organize objects: Keep this
checkbox selected to generate the application’s groups and folders.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 3


3. Click CREATE.

4. In the Review Application Security dialog, click SAVE.

Your new application will open automatically. Do not close the What do you want to build
first? dialog.

Step 2: Create a Record Type


In this exercise, you’ll create the IT Requests record type. You’ll start by creating the data
model to identify what information you will capture about IT requests. Then you’ll generate a
summary view (so users can view details about an IT request) and actions (so users can create,
update, and delete requests). Finally, you’ll update the record list, which is a list of all requests.

Create Your Data Model


First, create the record type.

1. In the What do you want to build first? dialog, select New Record Type.

2. In the Create Record Type dialog, configure the following properties:

● Name: Enter TM IT Request.


● Plural Name: Keep IT Requests. The plural name is what business users see
on their sites, so the name should make sense to them.
● Description: Enter IT requests submitted by employees.

3. Click CREATE.

4. In the Review Record Type Security dialog, click SAVE.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 4


Second, create the data model. It will look like the image below.

1. In the record type, click TELL US ABOUT YOUR DATA.

2. In the Configure Data Source dialog, click New Data Model. Click NEXT.

3. In the Where should we create the data? dialog, use the dropdown and select your
W# Data Source, and click NEXT.

4. Click the Remove Field icon to delete the following fields: createdBy, createdOn,
modifiedBy, and modifiedOn.

5. Under Commonly Used Fields, select name. Under Fields, change the Field Name
to issueName.

6. Under Commonly Used Fields, select description.

7. Click NEW FIELD, then:

● For the name, enter caseContact.


● For the data type, select User.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 5


8. Click NEW FIELD, then:

● For the name, enter requestedOn.


● For the data type, select Date.

9. Click NEW FIELD, then:

● For the name, enter requestedCompletionDate.


● For the data type, select Date.

10. Under Choice List Fields, select status. In the Add Choice List Field dialog:

● Under List Items, change Not Started to Submitted.


● Click CREATE CHOICE LIST.

11. Click NEW CHOICE LIST. In the Add Choice List Field dialog:

● For Record Type Name, enter TM IT Request Category.


● Under List Items, enter Hardware and Software on different lines.
● Click CREATE CHOICE LIST.

12. Click NEXT.

13. In the Relationships dialog, review the relationships that will be created for you. These
relationships relate the IT request data with the statuses and categories. Click NEXT.

14. Review the fields and relationships that you’ve added. Click SAVE CHANGES to create
your record type and generate the database table (the Create Table checkbox is
selected by default).

15. Click FINISH.

Generate the Summary View Interface


Third, you will generate a summary view that users will view to see all information about an IT
request.

1. In the left menu, go to the Views page.

2. Click GENERATE RECORD VIEW.

3. Keep the IT Request record type selected. Click NEXT.

4. Keep the View Name as Summary. Click NEXT.

5. Keep the default generated objects. Click GENERATE VIEW, then click CLOSE.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 6


Generate Record Actions
Fourth, you will generate actions so users can create IT requests and update and delete them.

1. In the left menu, go to the Actions page.

2. Click GENERATE RECORD ACTIONS.

3. In the Generate Record Actions dialog, keep Create, Update, and Delete selected.
Click GENERATE.

Edit the Record List


Finally, you will edit the record list to change how the columns display. The record list is a grid
view of all IT requests.

1. In the left menu, go to the List page.

2. Click EDIT LIST.

3. In the Edit Record List dialog, review the list of fields.

4. Remove the Description field by clicking the inline X.

5. Reorder the columns so they appear in the following order: Id, Issue Name, Case
Contact User, Status, Category, Requested On, Requested Completion Date. Click the
inline arrows to move them.

6. Click Id (Grid Column).

● Change the Label to ID.

7. In the left pane, click Case Contact User.

● Change the Label to Case Contact.

8. Click OK.

9. Click SAVE CHANGES.


Build an Appian App Without Code 24.2

© Appian Corporation, 2024 7


10. Next to the record type name, click the View Record List icon to preview it.

Step 3: Customize the Generated Interfaces


When you generated the summary view and the record actions, a few interfaces were created
for you. In this exercise, you will customize the generated interfaces for the create/update form
and the summary.

Although you can create a functional application without customizing the interfaces, doing so
will improve the experience users have when working in the application.

Update the Create/Update Form


The final create/update form will look like the image below.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 8


Change the Layout

You’ll start by reorganizing the layout. When you’re done with the layout design, the interface
will look like the image below. Remember that you can follow along with the video walkthrough.

1. Return to Appian Designer; you should see the Explore view. In the left pane, go to the
Build view.

2. Select the TM_CreateOrUpdateITRequest interface design object to open it in a new


tab.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 9


3. From the PALETTE, under LAYOUTS, drag and drop a CARD layout below the title.
The pink, bolded line should span the full width of the form (see the image below).

4. Select the Columns Layout that contains all of the fields and drag and drop it inside of
the Card Layout. To select the Columns Layout, you can click the Text box above
Issue Name and select Columns Layout in the menu that appears.

5. Drag and drop the Requested Completion Date and Description fields below the
Card Layout.

6. Drag and drop the fields within the Card Layout so:

● Issue Name, Category, and Status are in the left column, and
● Case Contact and Requested On are in the right column.

7. From the PALETTE, under LAYOUTS, drag and drop a SIDE BY SIDE layout inside
the Card layout. Be sure the pink, bolded line is within the card layout and spans its full
width.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 10


8. From the PALETTE, under DISPLAY, drag and drop a STAMP component inside of the
Side by Side layout.

9. From the PALETTE, under DISPLAY, drag and drop a RICH TEXT component to the
right of the Stamp component, inside of the Side by Side layout.

10. Drag and drop a RICH TEXT component above the Requested Completion Date and
Description fields. It should be outside of the card layout.

Configure the Components

Next, you’ll use the COMPONENT CONFIGURATION pane to configure the components in
the interface.

1. Select the Card layout. In the COMPONENT CONFIGURATION pane:

● Style: Select Standard.


● Shape: Select Rounded.

2. Select the Stamp. In the COMPONENT CONFIGURATION pane:

● Width: Select Use only as much space as necessary.


● Icon: From the icon picker, select the laptop icon.
● Size: Select Tiny.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 11


3. In the Rich Text field next to the Stamp, click the plus icon. Select Header. In the
COMPONENT CONFIGURATION pane:

● Display Value: Enter What is the Problem?.

4. In the Rich Text field in the lower section, click the plus icon. Select Header. In the
COMPONENT CONFIGURATION pane:

● Display Value: Enter Tell Us More.

5. Make the following fields required: Issue Name, Category, Status, Case Contact,
Requested On. Select each component, and in the COMPONENT CONFIGURATION
pane:

● Required: Select the checkbox.

6. Select the Category record picker. In the COMPONENT CONFIGURATION pane:

● Placeholder: Enter Select a Category (Hardware or Software).

7. Select the Status record picker. In the COMPONENT CONFIGURATION pane:

● Placeholder: Enter Select a Status (Submitted, In Progress,


Done).

8. Select the Description field. In the COMPONENT CONFIGURATION pane:

● Click the Convert icon, then Convert to Paragraph.

● Instructions: Enter Include more details about the problem, such


as when it started and its impact on your work.

9. Select the CREATE button. In the COMPONENT CONFIGURATION pane:

● Icon: From the icon picker, select the plus icon.

10. Click SAVE CHANGES.

Your interface for creating and updating IT requests is now complete.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 12


Update the Summary View
Next, you’ll customize the summary view interface, which will look like the image below.

1. Return to Appian Designer. From the Build view, select the TM_ITRequestSummary
interface design object.

2. From the PALLETTE, under LAYOUTS, drag and drop a CARD layout below the title.
The pink, bolded line should span across the width of the form. In the COMPONENT
CONFIGURATION pane:

● Style: Select Standard.


● Shape: Select Rounded.

3. Select the Description field. In the COMPONENT CONFIGURATION pane:

● Click the Convert icon, then Convert to Paragraph.

4. Drag and drop the fields so:

● Description, Category, and Status are in the left column;


● Case Contact, Requested Completion Date, and Requested On are in the
right column; and
● Issue Name is in the Card layout.

5. Click SAVE CHANGES.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 13


Step 4: Create a Site
Your final step to build your application is to create a site so employees can complete their
work. They’ll be able to create new IT requests, view existing ones, and take action. Your site
will look like the image below.

Add a Page
First, you’ll create the site object and add a page for the record list.

1. Return to Appian Designer. From the Build view, select New > Site.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 14


2. In the Create Site dialog, configure the following:

● Name: Enter TM Technology Management.


● Display Name: Enter Technology Management.
● Web Address Identifier: Keep technology-management.
● Description: Enter Site used by employees for IT department
requests.

3. Click CREATE. In the Review Site Security dialog, click SAVE.

4. Under Pages, click ADD PAGE.

5. In the Add Page dialog, configure the following:

● Title: Enter IT Requests.


● Web Address Identifier: Enter it-requests.
● Type: Select Record List.
● Content: Select TM IT Request.

6. Click ADD.

Update Header and Branding


Next, you’ll change the site header and branding options to align with the company’s branding
style.

1. Make changes under Header:

● Under Color, select Hex Code. Click the color selector and choose a dark blue
(such as #073763).
● Under Selected Page Highlight Color, select Hex Code. Click the color
selector and choose a light blue (such as #3d85c6).

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 15


2. Make changes under Branding:

● Under Button Shape, select Rounded.


● Under Accent Color, select Hex Code. Click the color selector and choose a
light blue (such as #3d85c6).

3. Click SAVE CHANGES.

Step 5: Test the Application


Before you finish, test your application by accessing the site you just created and completing
the actions employees at the company can take. You’ll create a new IT request, view the list of
requests, update a request, and delete a request.

1. Click the Navigation menu > Technology Management.

2. Create a new IT request:

● Click NEW IT REQUEST.


● Fill out the form.
● Click CREATE.

3. View your record list. Notice that you can search, filter, and sort the requests; you can
create a few more IT requests to try it.

4. Click the issue name of an IT request to go to the summary view. Here, view all the
details about a request.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 16


5. Update the IT request:

● Click Related Actions > Update IT Request.

● Change a value in the form (or a few!). Click SAVE.


● View the updated summary with the new information you just entered.

6. Delete the IT request.

● Click Related Actions > Delete IT Request.


● Click DELETE.

NOTE: After you delete the request, you’ll see an error message on the page.
This appears because the IT request does not exist anymore.

● Click the IT Requests page to go back to the record list. The IT request you
just deleted will no longer be there.

Congratulations! You finished building an IT request application!

More Practice: Manage Equipment Requests


You can complete this exercise to get more practice building in Appian. You’ll expand on the
Technology Management application you just created to allow employees to manage equipment
requests.

In this exercise, you’ll only be given the high-level steps. You’ll follow a similar
workflow as you did before, so if you get stuck, refer to the steps you followed
above.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 17


The Scenario
The company also wants to use the Technology Management application to handle equipment
requests, such as those for monitors and keyboards. All employees need to be able to submit
new requests, and members of the IT department need to view a list of all requests, view
details about each, and take action to update or delete requests.

How to Build It
You’ll follow the general steps below to expand the Technology Management application.

1. Create a new record type for equipment requests.

● Create your data model. Include fields for:

○ The case ID, the request name, a description, the user who is the case
contact, the date of the request, and the status of the request (which can
be submitted, in progress, or done).

● Generate the summary view.


● Generate record actions for creating, updating, and deleting requests.
● Edit the record list so the columns are in a logical order and the column names
make sense.

2. Customize the generated interfaces using the drag-and-drop components and


configurations you used for the IT request interfaces.

● Update the create/update form.


● Update the summary view.

3. Add a new page to the Technology Management site for the equipment request record
list.

4. Test the new workflow.

Remember, if you get stuck on a step, you can refer back to the step-by-step
instructions for the IT request process.

When you’re done, the Technology Management site should look similar to the image on the
next page.

Build an Appian App Without Code 24.2

© Appian Corporation, 2024 18


Build an Appian App Without Code 24.2

© Appian Corporation, 2024 19

You might also like