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
- Create a new Dashboard with the Name
StandardActionDashboard
- Create a new Form with the following settings:
- Name:
StandardActionForm
- Show Vertical Scrollbar: tick
- This allows content to expand without compromising visibility .by using a scroll bar to view content
- Auto Size: tick
- This will resize the area to automatically use up all available space.
- Direction: Column
- This forces the layout into a single column.
- Justify: Flex Start
- Justifies the content to the left.
- Align: Stretch
- Vertically spaces the content out evenly using the available space.
- Clear all Position Settings except Order and Tab Index
- Prevent Dragging: tick
- Name:
Create a Standard Layout
- Holding the Shift key add a new Area to the form with the following settings:
- Name: AreaHeader
- Direction: Row
- This forces the layout into a single row.
- Justify: Flex Start
- Justifies the content to the left.
- Align: Center
- Centers the content vertically.
- Position Settings:
- Order:
1
- Tab Index:
1
- Height:
60px
- Prevent Dragging: tick
- All other Position Settings should be blank.
- Order:
- Add a new Shared Style called
Title
- Font Size:
24
- CSS properties:
- CSS Tag:
padding-left
- Value:
10px
- CSS Tag:
- Font Size:
- Add a Static Text box to the
AreaHeader
and apply the Shared StyleTitle
- In the configuration of the form for
Title
, remove the Width and Height
- Holding the Shift key add a new Area to the form with the following settings:
- Name:
AreaBody
- Show Vertical Scrollbar: tick
- Auto Size: tick
- Direction: Column Wrap
- Places the content into columns according to size and order
- Justify: Flex Start
- Aligns the content to the start of the column i.e. the left.
- Align: Stretch
- Stretches the content to fit the column.
- 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.
- Order:
- Name:
Create a Footer Template
- Find the
SimpleButtonArea
in the repository created in the first video.- Remember it is possible to find
...
- any component using the right click option Find in Explorer
...
- Use Copy as a template to create a Template from the button configuration that can be used again.reused
- Drag this SimpleButtonArea Template onto the dashboard. This will be the footer.
Update the Standard Layout
- Add the new
SimpleButtonArea
template toStandardActionForm
- Update the Position Settings:
- Order:
3
- Tab Index:
1
- Width:
100%
- Height:
45px
- Prevent Dragging: tick
- All other Position Settings should be blank.
- Order:
Save your changes, close the dashboard and reopen it to review the result.
Create a Form Template
- Select the
StandardActionForm
in the repository - Use Copy as a template to create a Template version of the Template form configuration that can be used again.
...