= Design an application page
:description: So far, with a process, data, forms, and connectors, we've built a fully functional software solution to manage claims. But what if you need to have a dashboard showing all ongoing claims? Such a dashboard is not a process. You should not have to "start" it in order to view it.

So far, with a process, data, forms, and connectors, we've built a fully functional software solution to manage claims. But what if you need to have a dashboard showing all ongoing claims? Such a dashboard is not a process. You should not have to "start" it in order to view it.

A Bonita application is the answer. The first step to build such an application is to create pages.

[NOTE]
====

xref:ui-designer-overview.adoc[Pages] in Bonita are a lot like forms. They are created with the UI Designer with the same sets of widgets. The main difference is that they are not bound to a process definition (like instantiation forms and user tasks forms). An application page can display business data values, charts and even let the user start a process or execute a task by displaying the appropriate form.
====

For this example, we will build a basic page that displays, in a table, all the claims that have been submitted. To create a new page:

. Click on the *UI Designer* icon image:images/getting-started-tutorial/design-application-page/ui-designer.png[UI Designer icon] in the Bonita Studio tool bar
. Ignore the information message pop up window
. Click on  *Create*
. Make sure that *Application page* is selected
. Type the name: _claimsList_
. Click on *Create*
+
image:images/getting-started-tutorial/design-application-page/creation-of-an-application-page.gif[Creation of an application page]

On the new page, using the xref:data-management.adoc[data management] capabilities, the UI Designer can automatically create xref:variables.adoc[variables] to retrieve business data and generate the user interface:

. In the top left corner of the UI Designer, click on  *Data model* image:images/getting-started-tutorial/design-application-page/data-model.png[Data model button]
. In the list of business objects, select the _Claim_ object and drag and drop it into the empty space of the page
. In the popup window, change *Variable name* from _claim_ to _claims_
. In *Additional queries*, select _find_
. Click on *Save*
+
image:images/getting-started-tutorial/design-application-page/declare-claims-page-variable.gif[Declare claims page variable]

The UI Designer automatically created 2 variables which will be used to retrieve and display business data in the application page:

* `claim` of type *Business data*
* `claim_selected`` of type *String* which returns the list of claims
+
image:images/getting-started-tutorial/design-application-page/variables.png[variables]

A dashboard page is also automatically generated in the whiteboard. It follows the master/details pattern using xref:widgets.adoc[containers]:

* A xref:widgets.adoc[Table widget] is displayed with all the instance objects, and the details are shown when a line is selected.
* The details section maps each Business Object attribute to a corresponding widget (for instance, an Input widget for an attribute of type String)
+
image:images/getting-started-tutorial/design-application-page/dashboard-page.png[dashboard page]

. Click on *Save* in the UI Designer
. Click on *Preview* to get a preview of your page

[WARNING]
====
In order for preview to access the data, a user needs to be logged in to the Bonita Portal. You can click on *Portal* in the Bonita Studio tool bar to make sure a user is logged in.
====

The preview should look like this:

image:images/getting-started-tutorial/design-application-page/dashboard-page-preview.png[dashboard page preview]

Now you have your first application page. It's time to move to the xref:create-application.adoc[next chapter] and create the xref:create-application.adoc[application] that will include the page.
