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 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
- 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 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 form that can be used again.