6: Save button

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 Save button to our New Car screen. The button will not be functional, but we are setting up the screen for future missions.

Add Section

  1. Drag in a new section below secMain, rename it secButtons, uncheck Show Header/Title Bar.
  2. Under Style, find Header Top Border to make a line that separates the header from the main section:
    • Top Border Size: 1px
    • Top Border Color: Silver
    • Top Border Style: Solid
  3. Change the section's padding to 1x all the way around.
  4. Click in the center of the section to select the cell (yes, the section body is just one big cell) and change its alignment to Right Middle.

Add Button

  1. We’re going to add another new object in this step that we haven’t used before - a button! Drag a button into the section and change the caption to Save.
  2. Click Show Icon and choose the Save icon.
  3. Change the button's Background Color to Primary.
    Buttons, like other objects on your screen, won’t actually do anything until we assign events and actions to them, which we’ll be doing in the next mission pack. But they look great!
  4. Save your work and then pop into Preview mode to take a look. This is what it will look like:

Looks great everyone!  We’ve successfully designed our New Car screen!

Coming up next...

We have set the app up to add a new car. Before we make this screen functional, let's create screens to display the cars in the database!

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us