5: New car header

If you have been following along, you should have created the New Car  screen. 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.

In this article, we will add a header to our New Car screen to help separate the space between the navigation and the main sections. It will display an icon, and the title "New Car". It will also have a line that separates it from the section below it.

Add a Section

  1. Drag in a section object and changing the Caption to "secHeader".  Remember to uncheck the Show Header/Title bar checkbox.
  2. Click the arrow beside the title of secHeader and then click Section. Select Move Up to move this section between SectionNav and SectionMain.
  3. Under Style, find Header Bottom Border to make a line that separates the header from the main section:
    • Bottom Border Size: 1px
    • Bottom Border Color: Silver
    • Bottom Border Style: Solid
  4. Change the padding of the secHeader to 1x for top, bottom, left and right.

Add an Icon to the header

  1. How about we add an icon to our header? Drag in an Icon object and select it.
  2. Change its caption to IconCab and then check Hide Caption.
  3. For the actual icon, select the cab from the menu.
  4. Let’s make it nice and prominent. Under Style, change Icon Color to Primary.
  5. Change the Size to 4X-Large.
  6. Click Save to save your work.
  7. Hit Preview to enter the Preview mode. It should look something like this:

Add Text to the header

  1. Click + icon next to Cols to add another column to the section header.
  2. Remember, we can use these cells to control the negative space in our sections. Select the left cell, set alignment to Center Left.
  3. For this cell, check “Collapse as small as possible”. See? Nice tiny space!
  4. Still in this cell, scroll down and change the right padding to 1x.
  5. Now let’s select the right cell, change the alignment to Center Left. Note you are changing the padding of an individual cell, not a section!
  6. Drag a Text object into the right cell and change its text to "New Car".
  7. To make this object look like a Title, change its Text Size to XX-Large
  8. Click Save to save your work.
  9. Preview that will and you will get:
    Looks great so far!  Now let’s move on to our next section: adding buttons!

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us