In this part of the Appian Guide Series, we will show you how to create dynamic interfaces and how to connect them with data. This process will guide you through making your first site, forms, data lists and site access and authorization.
To be able to access our application, we need to create a new interface. We can do that by navigating to the toolbar and selecting „Interface” from the „New” dropdown. Name your interface with the application initials as a prefix, give it a short description and select interfaces folder for saving. Click „Create”, and you will be presented with Appian interface designer. The interface designer is an interactive tool that lets designers create, display, and immediately test interfaces as if they were live in Tempo, while detecting errors as they appear. You can read more about the designer in the official Appian documentation.
In the interface designer, we are presented with an option to create an interface from scratch with components on the left side, or to create an interface from one of the listed templates on the right. To speed up the development process, we will select „Billboard Header & Cards” template. We will need only two cards for now, so we can delete other cards.
For our design, we will create greetings text in the header and a placeholder for our first action: „Vacation Request”. Elements can be added by simply dragging them from the list and dropping into the right container. For our header greetings, we will user a rich text component. After dropping the component into the container, component properties will appear on the right side. To display a value, enter text in the „Display Value” section. When hovering over the „Display Value” property, a small edit icon will appear. When clicked, we will be prompted with the expression editor where we can edit the displayed value with custom data. We want to add user's name to the greeting message by using the concat function. All component properties can also be edited from the expression mode.
For the „Vacation Request” action placeholder, we will use rich text with rich icon. As previously described, drop the component in the right container and insert the wanted value in „Display Value” property. To insert icon, select icon on the text editor end select the wanted icon. We can center the display with „Alignment” property. When done editing, we need to save our changes. We will come back to this interface when we will be speaking about processes.
Now that we have a working homepage, we can create a site for our application. To create a new Site object, first we need to create a new report. Navigate to the toolbar and select „Report” from „New” dropdown. Populate name, description and select homepage interface. Click „Create” and set the correct authorization and save configuration.
Our homepage report is created, now we can create an application site. Select „Site” from the „New” dropdown. Select site name, description, URL identifier and click „Next”. Define authorization and click “Save”. After saving, a new tab will pen where we can define our site page. Let us call our page „Home” and choose the „Home” icon. Select „Report” as the type and search for the previously created report. Click „Ok” and our site is ready.
To access our site, navigate to the designer menu and open application site. We will be redirected to our homepage.
In this part of the guide, we have shown you how to create your first interface and application Access point. Join us in the next guide where we will be creating a submission form and list interface which we will be using for business processes.
