1. In the App design page, click on the the Create New Datalist button  button along the top.
   Image RemovedImage Added
   
   
2. Key in the details of the new list.
   ID: A short and unique ID for each list (no spaces) e.g. travelRequestList 
   Name: A descriptive name e.g. Travel Request List
   Description: Optional description.
   
   
3. Click on on Save to  to save the list and launch the the List Builder in a  in a new window. If your browser blocks the popup, click on the list name to launch it.
   
   
4. The first step in the List Builder is the the Source page page. Here, you can select the source of the data, called called Binders.
   Image RemovedImage Added
   
   
5. Select Select Form Data Binder. This binder populates a list based on data captured from Joget forms. Once you select the binder, choose a form then click click OK at  at the bottom.
   Image RemovedImage Added
   
   
6. This brings you to the the Design page page. Here, all available columns provided by the binder are listed in the the palette on the  on the left. Drag the desired columns into the the canvas in the  in the middle.
   Image RemovedImage Added
   
   
7. When you hover over a column, buttons appear giving you options to edit or delete the column. Clicking on on Properties opens  opens a Property Editor showing properties that you can modify.
   
   
8. At any time, you may preview the list by clicking on the large large Preview button  button at the top.
   
   
9. Once you have finished designing the list, click on the large large Save button  button at the top and you will receive confirmation that the list is saved. You may then continue to design the list, or close the List Builder window.

...

Designing a Userview

1. In the App design page, click on the Create New Userview button along the top.
   Image Added
   
   
2. Key in the details of the new userview and click on the Save button.
   ID: A short and unique ID for each userview (no spaces) e.g. travelPortal
   Name: A descriptive name e.g. Travel Portal
   Description: Optional description.
   Image Added
   
   
3. Click on Save to save the userview and launch the Userview Builder in a new window. If your browser blocks the popup, click on the form name to launch it.
   
   
4. The first step in the Userview Builder is the Design Userview page. On the left is the palette containing available menu elements. In the middle is the canvas containing the userview header, footer and one or more menu categories.
   Image Added
   
   
5. When you hover over the canvas Menu, a button will appear giving you the option to Add Category.
   
   
6. You can click any category name to edit it, and drag categories up and down.
   
   
7. Drag menu elements from the palette into any category.
   
   
8. Hover over any category or menu element to see the available options.
   Image Added
   
   
9. Click on Properties button to modify each menu element's properties.
   Image Added
   
   
10. At any time, you may preview the userview by clicking on the large Preview button at the top.
    
    
11. Once you have finished designing the userview, click on the large Save button at the top and you will receive confirmation that the userview is saved. You may then continue to design the userview, or close the Userview Builder window.
    
    
12. Before a userview can be accessed by a normal user, the app needs to be published. To do that, click on the Not Published or Versions link on the left in the App design page.
    Image Added
    
    
13. A popup displays all versions of the app. Select the radio button next to the latest version and click on the Publish button. Once an app is published, its userviews will be available in the App Center.
    Image Added