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.

Add Section

  1. 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.
  2. 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.
  3. Select the new section and change the caption text to secNav. Turn off Show Header/Title Bar.
  4. Set its padding for top, bottom, left and right to 1x.

Add Back Button

  1. Click the + icon drag a text object into this section.
  2. 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

  1. 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.
  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 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.
  6. Under Style, change the Text Color to Primary.
  7. 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.

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us