Widget Connector width 900 url https://www.youtube.com/watch?v=KhHU9W6jbPI&list=PLbPt6SI1Zhb8CnWh7Gvopto7D6LEwcB9A&index=4 height 500
Designing forms and creating templates before you start development leads to efficient application 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 and set:
- 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 all the available space. - Direction: Column
This forces the layout into a single column. - Justify: Flex Start
Aligns the content to the left. - Align: Stretch
Vertically spaces the content evenly using all 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 settingsand set:
- Name: AreaHeader
- Direction: Row
This forces the layout into a single row. - Justify: Flex Start
Aligns 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 settingsand set:
- 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 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. 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.You created this in the first video. Remember, you can find components using the right-click option Find in Explorer. - Use Copy as a template to create a reusable Template from the button configuration.
- 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.
Panel |
---|
Next video: 4. Creating an Advanced Maintenance AppApplication |