We will add another layout grid here and we can now start defining the attributes to show for each list item (above right image). You can add text to create a label in your list or add a parameter which will link to the record being displayed in the list (more details of adding parameters can be found in the YouTube tutorial). Text styles can be quickly chosen by selecting a render mode option from the drop-down. This helps with the UI and differentiates what text is the most important by drawing the user’s attention through Heading styles. You can also customise the appearance, for example change the colour or alignment.
Adding buttons and basic styling to our page
Our list view is now set up to show all records for the Route entity. Buttons are now needed; one too create a new Route and a separate button that allows users to edit a Route. Buttons are selected from the toolbox, where you choose one of the ready to use options or also select a blank Button. For our first button, drag and drop a Create button into the page above the list view, this will create a new Route record for you. Select ‘Route’ as the Entity, select the Route ‘NewEdit’ page and rename your button to ‘New Route’. Button styling is done using the Mendix default classes: Default, Inverse, Primary, Info, Success, Warning, Danger. They are based on the branding colours set in the SCSS style sheet custom-variables.scss. The colours can be changed to brand your app appropriately and additional classes can be created to improve UI features. (UI will be covered in much more depth in a later series).
For our ‘Edit’ button, add another column to the right of our layout grid and add an ‘open page button’ widget and also link to the ‘Route NewEdit’ page. Change the name of the button to ‘Edit Route’. (This needs to be within list view, so that the Edit button will appear on each route).
We now have a page to view Routes, add new routes or make changes. To access the page, we can add this page to the navigation menu for easier access. Select ‘Navigation’ and ‘New item’ and add the name, map icon, and for the ‘on-click’ box, select show the page and link this to ‘Route overview’. You can save and run locally to run the application on the local drive, giving you a preview of the app. At this point, you could select the Routes page and try adding and editing some Routes.
Using the gallery widget
With our basic page structure set up, we need to now add the features that will allow users to create, edit and view ‘Events’ related to the Route. When we created our domain model in episode 1, we implemented a many to one association between the ‘Event’ and ‘Route’ entities (image below left), this means each ‘Event’ will be linked to one ‘Route’. One way to view these would be to add a ‘Gallery’ within the Routes list. That way all events shown will be grouped with the Route.