Page Comparison

Designing forms and creating templates before starting you start development and creating templates leads to efficient app building and reduced development time. 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 with the following settings 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 up all the available space.
   4. Direction: Column
      This forces the layout into a single column.
   5. Justify: Flex Start
      Justifies Aligns the content to the left.
   6. Align: Stretch
      Vertically spaces the content out 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 with the following settingsand set:
   1. Name: AreaHeader
   2. Direction: Row
      This forces the layout into a single row.
   3. Justify: Flex Start
      Justifies 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 other Position Settings should be blank.
   6. Add a new Shared Style called TitleStyle 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 with the following settingsand 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 start of the column i.e. 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. 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.You created this in the first videoRemember it is possible to find any component . 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 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.