This documentation is for a version that is out of support.

You may want to view the same page for the latest version, or for any of the versions available in the drop-down menu in the top-right corner.

Design an application page

So far, with a process, data, forms, and connectors, we’ve built a fully functional software solution to manage claims. But what if we want 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. And the first step to build an application is to create pages.

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 with 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 all the claims submitted in a table. To create a new page:

  1. Click on the UI Designer icon UI Designer icon in the Studio tool bar

  2. Ignore the information message pop up window

  3. Click on the create button

  4. Make sure that Application page is selected

  5. Type the name: claimsList

  6. Click on the Create button

    Creation of an application page

On the new page, you can let the UI Designer automatically create variables to retrieve business data:

  1. At the top left corner of the UI Designer, click on the data model button Data model button

  2. In the list of business objects, select the Claim object and drag and drop it in the empty space of the page

  3. In the pop up window, change Variable name from claim to claims

  4. In Additionnal queries section, select find

  5. Click on the Save button

    Declare claims page variable

Add and configure the table widget:

  1. From the widget palette on the left, drag and drop a Table widget to the whiteboard

  2. In the widget property on the right:

    • Set the headers name: Description, Answer, Satisfaction level

    • For content, click on the fx button

    • Enter claims for the value

    • Set Column keys to: description, answer, satisfactionLevel

  3. Click on the UI Designer Save button

  4. Click on the Preview button to get a preview of your page

    Add and configure table widget

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

Now you have your first application page. It’s time to move to the next chapter and create the application that will include the page.