3. Designing Forms and Templates

Designing forms and creating templates before you start development leads to efficient application building and reduced development time.

Changes since the video was taken: You can now create and name an area without having to rename it in the repository. 

To recap the steps in the video:

Create a Designed Dashboard

1. Create a new Dashboard with the Name StandardActionDashboard.
2. Create a new Form and set:
   1. Name: StandardActionForm
   2. Show Vertical Scrollbar: tick
      This allows content to expand without compromising visibility by using a scroll bar to view content.
   3. Auto Size: tick
      This will resize the area to automatically use all the available space.
   4. Direction: Column
      This forces the layout into a single column.
   5. Justify: Flex Start
      Aligns the content to the left.
   6. Align: Stretch
      Vertically spaces the content evenly using all the available space.
   7. Clear all Position Settings except Order and Tab Index.
   8. Prevent Dragging: tick

Create a Standard Layout

1. Holding the Shift key, add a new Area to the form and set:
   1. Name: AreaHeader
   2. Direction: Row
      This forces the layout into a single row.
   3. Justify: Flex Start
      Aligns the content to the left.
   4. Align: Center
      Centers the content vertically.
   5. Position Settings
      • Order: 1
      • Tab Index: 1
      • Height: 60px
      • Prevent Dragging: tick
      • All other Position Settings should be blank.
   6. Add a new Shared Style called Title to the Contact Manager application.
      • Font Size: 24
      • CSS properties:
        • CSS Tag: padding-left
        • Value: 10px
   7. Add a Static Text box to the AreaHeader and apply the Shared Style Title.
   8. In the configuration form for Title, remove the Width and Height.
2. Holding the Shift key, add a new Area to the form and set:
   1. Name: AreaBody
   2. Show Vertical Scrollbar: tick
   3. Auto Size: tick
   4. Direction: Column Wrap
      Places the content into columns.
   5. Justify: Flex Start
      Aligns the content to the left.
   6. Align: Stretch
      Stretches the content to fit the column.
   7. Position Settings:
      • Order: 2
      • Tab Index: 2
      • Prevent Dragging: tick
      • All other Position Settings should be blank. Auto Size will automatically resize this element to use all the space available.

Create a Footer Template

1. Find the SimpleButtonArea in the repository.You created this in the first video. Remember, you can find components using the right-click option Find in Explorer.
2. Use Copy as a template to create a reusable Template from the button configuration.
3. Drag this SimpleButtonArea Template onto the dashboard. This will be the footer.

Update the Standard Layout

1. Add the new SimpleButtonArea template to StandardActionForm.
2. Update the Position Settings.
   1. Order: 3
   2. Tab Index: 1
   3. Width: 100%
   4. Height: 45px
   5. Prevent Dragging: tick
   6. All other Position Settings should be blank.

Save your changes, close the dashboard and reopen it to review the result.

Create a Form Template

1. Select the StandardActionForm in the repository.
2. Use Copy as a template to create a Template form that can be used again.