3: Styling new car screen

If you have been following along, you should have created the New Car  screen and it needs some styling.

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.

Styling the Section

  1. The first thing we will do is remove the large Section1 header at the top of the screen. Select the grey 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. Change the Caption to "secMain" and uncheck Show Header/Title bar to turn off the caption. 
    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. Still in the properties of secMain, scroll down until you find the Padding for the section. Change the left, right, top and bottom padding to 1x.

Styling the fields

Now that the section's styling is complete, we will style each of the fields.

  1. Select the ContactsRecordID field. It's properties appears on the right. Check Hide Caption.
  2. Hide the captions for the three other text fields: CarName, CarMake, and LicensePlate.
  3. Since the captions have been turned off, we will need to identify the fields via its Placeholder text. Select each field and change its placeholder text to:
    • ContactsRecordID: Select a driver...
    • CarName: Car name
    • Make: Select make...
    • LicensePlate: License plate
  4. The IsActive field will be treated differently. Select the IsActive field and change its caption to "Active?".
  5. We will also assume all new cars will be defaulted to Active, so check Initially Set to Checked.
  6. Click Save to save your work.
  7. Toggle the Preview button and it should look like this: 
  8. 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, and change Column Width to 25 and select the percent sign %.
  10. Save again.

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

[top]

Was this article helpful?

Can’t find what you’re looking for?

Contact Us