Mission 2 - 3: Styling new car screen
Updated over a week ago

In the previous mission, we created the New Car screen, but it needs to have some styling.

Remember, 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.

Styling the Section

1. The only thing we will change in the section will be the spacing. The top field is really close to the top so we will add a bit of spacing. Select the grey header area of Section1 (not the individual rows) to edit the properties of the section. 

2. The properties of Section1 will show up on the right. Since we're here, let's change the Caption to "secMain". 

Note: Why change the Caption if we are hiding it? It is good practice to name your sections to identify them for when you have multiple sections on the screen.

3. Now let’s set our padding. Padding adds space between the borders of the section, and the controls within. Method best practice says a 1x padding is sufficient for this section. In the properties of secMain, scroll down until you find the Padding for the section. Change the top and bottom padding to 1x.

Styling the fields

Now that the section's styling is complete, we will style each of the fields. For the most part, we will fix the wording on the captions, and add in placeholder text.

1. Select the Contacts field. It's properties appears on the right. Change the caption to "Contact" (without the 's'). While there, also change the Placeholder text to "Select a driver...".

2. Scroll down to the field's Styling, and set its Caption Font Weight to bold

3. Fix the rest of the fields. Select each one and change the Caption and the Placeholder as indicated below, and also make sure to bold the caption.
     - "Car Name": "Enter car name..."
     - "Make of Car": "Select make..."
     - "
License Plate": "Enter license plate..."
     - "Active?"

4. We will also assume all new cars will be defaulted to active, so with the IsActive field still selected, check Initially Set to Checked.

5. Click Save to save your work.

6. Toggle the Preview button and it should look like this: 

7. The fields are a bit wide. Let's make them smaller. Click the Cols ⊕ to add three more columns to secMain.

As you can see, sections can not only have rows, but columns too! They divide the section into “cells”, which can be individually styled in a lot of the same ways sections can.

9. Select the left cell of the first row. Make sure you actually select the cell, and not the field inside of the cell! Change its Column Width to 33 and select the percent sign %.

10. Save again.

Coming up next...

Toggle the Preview, and you’ll see something that looks like this:

Great! The screen looks good, but where are the buttons to navigate and save? We will add that in the next mission!

Previous Mission                         Next Mission

Did this answer your question?