Goal: Create a view that lists data using a DataGrid widget

Create a list view

  1. Under User Interface on the left, select the web interface that you created.
  2. Add a new view using a Blank template and Left menu template. Name it ListIssue.
  1. From the Widget library, drag over a DataGrid widget to the right/main frame.
  2. Since issue is our only data model, it’s already been selected for us. We can also select Enable Sorting.
  1. Now select the Columns tab. You can drag the rows to rearrange the columns, select default system columns to display, and change the display names.
  1. Play around with the column settings like making status editable. It will look like this if you’ve done it correctly.
  2. Click OK when you’re done.
  1. The default sizing might look squished, but you can resize the DataGrid by dragging the bottom right corner. You can also hide the right-hand menu.
  1. Go back to the UI home and click the Gear icon.
  1. From here you can select the ListIssue view to be the initial/default view for the app.
  2. Save your app.

Test Drive

Click the Play arrow on the bottom left to run your app and try it out. If you made the columns sortable, try clicking on the headers.

Set up navigation

  1. Edit the DataGrid widget again (by double-clicking it), and select the Events tab.
  1. Add an action to a row double-click event by clicking Add on  RowDblClick.
  1. Configure the action as shown, to cause a double-click to open that record in the  EditIssue  view. OK out of these screens.
  1. Add a New Issue button to the  ListIssue view and configure it to open the EditIssue view.
  1. Save your app.

Test Drive

Click the Play arrow on the bottom left to run your app and try it out. Notice that the Back button on the Edit Issue view now works because there’s something to go back to!

Go Further

Add another navigation button to the Edit Issue view to get back to the List Issue view.

Note: In the future if you know what your app navigation will look like, you can create a view with navigation buttons to use as a template, and duplicate it to start each additional app view.