In the previous mission, we added some styling to the New Car screen. However, we can still do more to the screen to help with the user experience.
If you have noticed, every screen within Method has a “< Back” link. Our New Car screen should have one as well.
In this mission, we will build a nav section for the New Car screen and show you our design best practices along the way!
However, if you are no longer on this screen, you can navigate to it by clicking on the vertical ellipsis of the app, and selecting the Manage link, and then customizing the New Car screen.
Add a New Section
The Back link could be added to secMain section, but it is easier to group common elements within their own sections. Thus, we will make a new section dedicated to the navigation aspects of this screen.
1. First, we should add a new section. Click the + icon to bring up the Insert Control menu and drag a new Section onto the canvas below the secMain section.
2. Click the arrow ( ▼ ) beside the secMain caption to bring up a dropdown. Select "Section" and then select "Move Down" to move the section below the new Section.
Note: Method best practices suggest having your navigation section at the top of the screen to make it easy to access.
3. Select the new section and change the caption text to secNav (to identify it easily like you did with secMain).
4. Still editing secNav, under its Style, set the padding for left and right to 1x.
Add a New Text Object
Now it’s time to add a text object to be the "Back" link.
1. Click the + icon to return to Insert Control and drag a text object into the secNav.
2. Select the text object and in its Settings, change its text to “Back”. This is going to be your back button!
3. Check the Show Icon box and in the dropdown choose a left Chevron “<”.
4. Now let’s change the color scheme of your back link. Under Style, change the Text Color to “Primary”.
5. Click Save.
Coming up next...
Click over to Preview Mode to take a look at your screen. It should look something like this:
Wow! We have a navigation section. Of course, this link will not work yet, but we will tackle that in the third mission. For now, let’s get to designing the second screen we’ll be using in this app.