Create New Userview
In the Manage Application Page, click on the Userview tab to Create New Userview.
Fill in the fields as follows:
ID: leavePortal
Name: Leave Portal
Figure 1: Creating a New Userview
Upon saving, the browser will be redirected to Userview Builder. Userview Builder maintains the same layout as Form Builder and Datalist Builder, with the element palette on the left and designer pane on the right.
Add New Category
Categories are used in Userview to group similar elements together. Begin by adding a new category first.
Figure 2: Userview Builder
Create a new Category by hovering over the Menu. Name the new category "Main".
Figure 3: Creating a New Category in Userview Builder
Adding HTML Page element
Under the new Category, add an HTML Page element by dragging it from the element palette into the category.
The HTML Page element serves as the landing page in this case, as the Userview will always load the first item in the menu first.
Figure 4: Adding HTML Page Element into Userview Builder
Hover over the newly added HTML Page to customize it.
Figure 5: Configuring HTML Page Element
Adding Inbox Element
The Inbox element behaves like the one found in the Management Console's Task Inbox but with the scope limited only to the application. One may also choose to show assignments for a specific process in an application.
Create a new Category called "Leave Applications". Add a new Inbox element to the newly created category.
Set Inbox properties as follows:
Custom ID: inbox
Label: Inbox
Assignments to Display: All Assignments
Process: Leave Application Process
Figure 6: Configuring Inbox Element
Adding Run Process Element
A Run Process element is used as a means to start a new process instance. It's equivalent to starting a new process in Management Console's Published Processes.
Add a new Run Process element to the "Leave Applications" category and set the properties as follows:
Custom ID: leaveProcess
Label: Apply Leave
Process: Leave Application Process
Figure 7: Configuring Run Process Element
Adding List Element
Add a new List element and set the properties as follows:
Custom ID: listLeaveApplications
Label: List Applications
List ID: Leave Submission List
Figure 8: Configuring List Element
Customize Theme and Preview
Go to the Settings tab to apply a theme.
Figure 9: Configuring the Userview Theme
Click on OK when you have selected a theme. Click on Preview to see your work, then click on Save.
Figure 10: Preview Userview