Appian Guide Series: Interfaces - Forms

In the last part, we have demonstrated how to create a simple interface. In this part, we will build up upon it and use that knowledge to create forms for user interaction. Our goal is to create one form for submitting a vacation request and one form for request approval.

Constants and lists

Since we can have multiple reasons to be absent, we need a way to let the user choose between those. We can represent a list of constant values through Appian constant object. To create a new constant, we need to navigate to the „New” dropdown and select „Constant”. There, we need to name our constant and give it a description. For a constant to represent a text value, we need to select “Text” from the “Type“ dropdown. To make it a list, select the “Array (multiple values)” option and put each value in a separate row. In the end, we need to select a folder where we will save the constant and click “Create”.

New form interface

To create a form, we need to create a new interface object which is described in the previous part. Once the object is created, the Appian interface designer opens where we are presented with multiple design templates. For our purposes, we need a form template with two columns. By clicking on the wanted template, the designer will generate the form.

For our vacation request, we need to enter dates from and to, vacation type and optional note. We can start by removing all unnecessary form elements and by adding the date field from the component menu (left side of the designer). After adding the component, we can edit it in the component configuration editor (right side of the designer). We need the date components to be mandatory, so we are selecting the “Required” option in the configuration. After the date components, we need to add a dropdown menu for our vacation types. Start by searching the component menu and dragging and dropping it in the wanted form column. Vacation type dropdown should also be mandatory. In the end, we are adding a paragraph component for optional notes. Do not forget to save changes.

Form configuration and data

To be able to save entered data, we need to create a new rule input that will initialize our Vacation Approval object. We can do that by clicking the plus icon in the top right corner of the designer. We need to give it a name and select the correct data type. After creating the rule input, we can configure the form field. For dates from and to, we need to save them in the corresponding rule input fields. We can do that by navigating to the “Save Input To” dropdown in the component configuration tab where we can select in which field to save the data. Also, to be able to display selected value, the same field should be referenced in the “Display Value” section of the component configuration.

To be able to choose vacation type, we need to reference our constant list of vacation types. In the component configuration for the dropdown, click the edit icon for “Choice Labels” and “Choice Values”. Rule editor will open in which we need to reference out previously created constant:

cons!VAD_VACATION_TYPES

To be able to save and display selected value, we need to reference the rule input field in “Selected Value” and “Save selection to”. It is a similar process for saving paragraph data also.

When it comes to the submit button, when clicked on, we want to save information about the user who created the request and the correct time. To be able to do that, we need to create a list of saved objects. We can do that by clicking the edit icon on the “Save Value To” section and the rule editor will open. To create a list, first, create brackets ( { } ) inside which we will create three a!save objects for username, created on and created by. The correct syntax looks like this:

a!save(ri!vacationRequest.username, loggedInUser()),
a!save(ri!vacationRequest.createdOn, now()),
a!save(ri!vacationRequest.createdBy, loggedInUser())

Approval form

When reviewing a vacation request, we need to display all collected data and maybe more. For this interface, we will create a read-only form with all collected data and additional supervisor data.

The first step is to create a new interface following previously stated instructions. Once the interface is created, we can start designing the form.

After the design is complete, we need to repeat the process of creating the rule input and referencing the data. On this interface, we will focus on creating test rule inputs and user methods. Once the fields are mapped (user fields and duration field are purposely ignored for now), we can click on the “TEST” button which will open the form for entering rule inputs. To simulate vacation request data, we can type it by hand by using type! function. The function name is followed by a relevant object reference which is then populated like a constructor where each object field can get a value. Data construction details can be found in the official Appian documentation.

User function and duration calculation

In order to display the first and last name of the request owner, we need to call the user function with username from our rule input. Also, the user function can return the user’s supervisor username which we will be using for our supervisor field. To make it easier to reference our superior, we can create a local variable. We can do that by opening expression mode in the header navigation which will open the expression editor. There, we can create a new variable with the prefix local! followed by a variable name and a colon. After the colon comes the function call. Documentation for local variables can be found here.

Now we can display our user information by opening the expression editor for each field and calling the user function.

To calculate vacation duration, we can call calworkdays function which takes the date from and date to and returns the number of working days between those two dates.

Only buttons are left to complete the interface. From the component list, we need to add another secondary button that will reject the request. The primary button will be used to approve the request. Both buttons need to save the review date, the person who reviewed the request and the decision.

In this a bit longer Appian guide, we have covered form design and how to connect it to objects. Next time we will cover process models and interfaces.