The interface we're creating in this tutorial will be a form that lets users add new employee information to the system. We'll create this form in the Appian Tutorial application and use the Employee record type from the Records Tutorial to build out the form.
The Appian Tutorial application is used throughout Appian tutorials. Skip the steps in this section if you've already created this application in another tutorial.
To begin with, we need to create an application to contain our design objects.
We will be creating the Appian Tutorial application for this tutorial. All of Appian's tutorials use the Appian Tutorial application as the reference application. After completing this tutorial, you can reuse this application as you work through other Appian tutorials.
To create the Appian Tutorial application:
In the Create New Application dialog, configure the following properties:
|Prefix||Keep the default prefix,
|Description||Leave blank. It's normally a best practice to add descriptions to all design objects. However, to save a little time during this tutorial, we'll skip adding descriptions unless the description displays to the end user.|
|Generate groups and folders to secure and organize objects||Keep this checkbox selected, so that Appian will automatically generate standard groups and folders and assign default security groups for this application.|
In the Review Application Security dialog, keep the default security settings. Because we selected the Generate groups and folders option in the previous step, Appian automatically uses the AT Users and AT Administrator groups it generated to set our application security appropriately.
The security of the application object is unrelated to the security of each of the objects contained within the application. This means that you will need to set security permissions for every object in an application in addition to the application object itself. For more information about security permissions for the application object, see Application Security.
Right now, the application contains the folders and groups Appian generated automatically. To see these, click Build in the navigation pane. Each design object that you create during the course of this tutorial will appear in this list in the Build view and be associated with the tutorial application.
To build the interface, you need to create an Employee record type as described in the Records Tutorial.
Complete the following sections of that tutorial before continuing:
Now that we've created your application and record type, let's get started on the interface.
We're going to create an interface named AT_employeeForm. This interface will show a form for users to input values about new employees.
To create an interface object:
The newly created interface will open in a new tab by default. If you don't see a new tab, make sure you have pop-ups enabled for your browser.
By default, the new interface is in DESIGN MODE. That's where we want to be for now.
Next, let's select an interface template, so we can take advantage of functionality already configured in the template.
In the Select a Template panel, under FORMS, click Two Column Form.
The template you selected opens in the EDIT view.
Now, let's change the form title, so that users viewing the published interface know they're in the right place to create new employees in the system.
To change the form title:
In the COMPONENT CONFIGURATION pane, replace the default Label value with
Create New Employee.
The template we selected contains two sections, but we only need the section with two columns. We'll also add some more columns to lay out the other components of the form.
To reorder the section components:
From the context menu next to Section Layout, click Delete.
You should be left with nothing but the form layout and the cancel and submit buttons.
Before we add new interface components, let's add the rule input needed to store user-entered data for those components. A rule input is a variable that stores inputs from the interface, so those inputs can be successfully passed to a process model.
Adding supplemental information in this field can be useful to guide future development, but for the purposes of this tutorial, we'll keep it blank.
Your finished rule inputs should look like this:
Now, we'll add components to the interface that let users add employee data. These components are available in the PALETTE panel.
To add components to the interface:
Your interface should look like this:
Next, we'll configure the components so that the form inputs connect to the rule input. We'll also specify whether a specific form input is required to submit the form.
For each of the components, perform the following steps:
For the components in the left column, configure the following properties in the COMPONENT CONFIGURATION pane:
|Component||Label||Display Value / Selected Value||Save Input To / Save Selection To||Required|
For the components in the right column, configure the following properties in the COMPONENT CONFIGURATION pane:
|Component||Label||Display Value||Save Input To||Required|
For example, the first field should have the following properties configured:
Your interface should now look like this:
To ensure users only select an existing department from the dropdown list, we'll create a constant to define the field's options.
To set up the Department field's choices:
For Value, enter the department options. Separate each department by a line break, but do not include spaces, commas, or quotations:
1 2 3 4 5 Engineering Finance Sales Human Resources Professional Services
The dropdown now shows the five departments employees can be assigned to:
You can configure validations on the form's components to ensure the data users enter doesn't contain preventable mistakes. For example, let's add a custom validation to our form so users are limited to a maximum of 15 characters in the Phone Number field.
To add a custom validation:
Enter the following expression in the Validations (List of Text String) expression box:
1 2 3 4 5 if( len(tostring(ri!record[recordType!AT Employee.phoneNumber]))<=15, null, "The phone number cannot exceed 15 digits" )
6at the end of the string. The validation message should no longer appear.
You did it! You created a records-powered interface to meet a business use case. You're ready to move on to other tutorials.
See Also: Interface Recipes to create different interfaces with specific layouts and dynamic behavior.