Mission 2 - 6: Save Button
Updated over a week ago

In the previous mission, we added a header to 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.

Remember, if you are no longer on New Car screen, you can navigate to it by clicking on the vertical ellipsis ( ) of the Cars app, and selecting the Manage link, and then customizing the New Car  screen.

Add a New Section

1. Drag in a new section below secMain, rename it secButtons

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 a 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 secButtons section. 

2. Change the new button's caption to Save. Click Show Icon and choose the Save icon.

3. Change the button's Background Color to Primary.

Note: 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.

4. Save your work!

Coming up next...

Preview your screen. It should look something like this:

We've finished with this screen! The app has a screen to add a new car (albeit not one that currently works). Before we make this screen functional, let's create screens to display the cars in the database.

Previous Mission                         Next Mission

Did this answer your question?