8: Grid list Nav Section
Just like the New Car screen, you will need a nav section. Not only will we set up a Back button to go back a screen, we will add another link to go to the New Car screen.
- First, you’ll need a new section to house your navigation objects. Click the + icon to bring up the Insert Control menu and drag a new Section onto the canvas below the secList section.
- Click the arrow beside the new section's caption to bring up a dropdown. Select "Section" and then "Move Up" to move the section above secList.
- Select the new section and change the caption text to secNav. Turn off Show Header/Title Bar.
- Set its padding for top, bottom, left and right to 1x.
Add Back Button
- Click the + icon drag a text object into this section.
- Select the new textbox and:
- it and change its text to “Back.
- Check the Show Icon box and then choose a left chevron “<”.
- Under Style, change the Text Color to “Navigation
Add New Car Button
- Next we will add another text object to this section, but in order to keep things nice and tidy, let’s add a second column to secNav. Click the + beside "Cols" in the SecionNav bar to add another column.
- Click this new cell and change the cell alignment to “upper right”.
- Drag a text object into the right cell and select it.
- Change the text to “New Car”.
- Check Show icon and choose the circular plus icon from the list. This will be our “Go to New Car Screen”, which we’ll be adding functionality to in a future mission.
- Under Style, change the Text Color to Primary.
- Click over to Preview Mode to take a look at your screen. It should look something like this:
We finished our navigation section! Again, you will see similar designs for nav sections in other Method-designed apps.