In the previous mission, we created a new screen with a grid to show our potential new cars.
In this mission, we will add a nav section, just like we did with the New Car screen. Not only will we set up a Back link to go back a screen, we will add another link to go to take the user to the New Car screen.
1. First, we’ll create a new section to house the navigation objects. Click the + icon to bring up the Insert Control menu and drag a new Section onto the canvas below the secList section.
2. Click the arrow beside the new section's caption to bring up a dropdown. Select Section > Move Up to move the section above secList.
3. Select the new section and change the caption text to "secNav".
4. Set its padding for top and bottom to 1x.
Add Back Button
1. Click the + icon drag a text object into this section.
2. Select the new textbox and change its Text to “Back".
3. Check the Show Icon box and then choose a left chevron “<”.
4. Under Style, change the Text Color to Primary.
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.
1. Click the ⊕ beside Cols in the secNav section to add another column.
2. Click this new cell and change the cell alignment to “upper right”.
3. Drag a text object into the right cell and select it.
4. Change the text to “New Car”.
5. Check Show icon and choose the circle plus ( ⊕ ) icon from the list. This link will take us to the New Car screen in the future.
6. Under Style, change the Text Color to Primary.
7. Save your work.
Coming up next...
Preview 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.
In the last mission for Mission Pack 2, we will make this list the default screen, and provide a way to get to the New Car screen.