3. Designing Forms and Templates

Designing forms before starting development and creating templates leads to efficient app building and reduced development time. 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 with the following settings:
   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 up all available space
   4. Direction: Column
      • This forces the layout into a single column
   5. Justify: Flex Start
      • Justifies the content to the left
   6. Align: Stretch
      • Vertically spaces the content out evenly using 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 with the following settings:
   1. Name: AreaHeader
   2. Direction: Row
      • This forces the layout into a single row.
   3. Justify: Flex Start
      • Justifies 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
      • 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 with the following settings:
   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
      1. Aligns the content to the start of the column i.e. the left.
   6. Align: Stretch
      1. 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. The Auto Size will automatically resize this element to use all the space available.

Create a Footer Template

1. Find the SimpleButtonArea in the repository created in the first video
   1. Remember it is possible to find any component using the right click option Find in Explorer
2. Use Copy as a template to create a Template from the button configuration that can be reused
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.