Form Designer
Designing your lookup and data entry forms.
The Forms designer is available when editing a form.
When this button is clicked, the form properties modal popup is closed before the form designer loads. This is to allow the forms designer to utilise the maximum amount of screen space available.
This is an example of how the forms designer looks when opened.
There are two main panels, the Tools panel and the Form Designer panel.
Tools
The tools panel contains four sub-panels, Form Properties, Tabs, Components and Fields.
Form Properties
This panel shows the details of the form previously specified.
Clicking the Edit button will close the forms designer and re-open the form properties dialogue if you choose Yes or No to this prompt:
Tabs
The tabs panel is for designing form tabs. Each data entry form is designed as a master/detail form where the master record details are shown at the top, and other tabs below group data, including related data grids.
The top region is know as the "Main Top Region" and is the first tab shown. All other tabs appear beneath. The Tabs toolbar has the following functions:
Add
Add a tab below that currently selected by opening up this modal popup.
ID
The read-only unique identifier of this form tab. This is generated for each new tab and is only of importance to developers wishing to re-use this in their own applications.
Caption
What text will be displayed in the form tab.
Icon
The icon which will be displayed to the left of the form tab.
Selected
If this form tab is selected on open.
Visible
If this form tab is visible i.e. can be seen.
Enabled
If this form tab is enabled i.e. can be clicked.
Update
Update the selected tab details by showing this same popup.
Move Up
Move the selected tab up the display order.
Move Down
Move the selected tab down the display order.
Delete
Select the selected tab, including all panels, fields and components that exist on its design surface.
Components
The components panel shows a list of all available components which can be dragged onto the form. A filter text box allows matching components to be displayed.
Fields
The fields panel shows a list of all available ReST API data source request fields which can be dragged onto the form. A filter text box allows matching fields to be displayed.
Form Designer
The form designer panel is to the right of the tools panel.
The panel shows the name of the form with a number if toolbar buttons:
Preview
Drop down menu to preview the form as it will look to the end-user.
Configure Layout
Specify the layout of the rows and columns of the form.
Undo
Undo the last form design change.
Redo
Redo the last form design change.
Minimize/Maximize
Hide the tools panel to see more of the form design surface.
Open Tools
Show the tools panel.
Save
Save the design of this form.
Preview
This is a drop down menu:
Selected Form Tab Only
This shows only the currently selected tab in preview mode. This is useful when focusing on specific detail only.
Entire Form / All Tabs
This shows all tabs in preview mode. This is useful when focusing on how the full form looks.
Device Type
Desktop
This previews the largest resolution to fit that of a desktop computer which has plenty of height and width.
Laptop
This previews a smaller resolution to fit that of a laptop computer which has less height and width than a desktop.
Tablet
This previews the resolution to fit that of a tablet device which is narrower than the laptop.
Phone
This previews the smallest resolution to fit that of a mobile phone which is very narrow.
Example Previews
These are the respective previews of desktop, laptop, tablet and phone:
Rotate Preview
When in preview mode, the option to rotate the device appears:
Edit Mode
When in preview mode, the Preview button is replaced with the Edit Mode button to revert back into form design mode.
Configure Layout
This opens a modal popup to configure the column and row layout of the form design surface:
Rows
Incrementing the Rows number increases the number of rows on the form. Decrementing the Rows number decreases the number of rows on the form.
Row Menu
This drop down menu is available for each row.
The selected row can be moved up or down or deleted.
Columns
Incrementing the column counter adds an additional column to the row. Decrementing the column counter removed the right-most column from the row.
Each column that is displayed obeys the 'bootstrap' 12 columns per row model. Each column in this designer is a drop down combo containing the numbers 1 to 12. You can therefore set the width of every column for the exact layout you require.
Validation licks in to warn you if your column widths do not total 12.
Apply
This button saves the row/column layout to the underlying form design which reflects these changes. Note that you will need to save the form design to persist these changes.
Cancel
This button cancels all form layout changes.
Undo
This button maintains a list of changes which can be use to undo the previous change, then the one before that etc.. This is useful if you make a mistake during the design process.
Redo
This button maintains a list of changes which can be use to redo the previous change, then the one after that etc.. This is useful if you make a mistake during the design process.
Maximize
Use this button to maximise the form design surface by hiding the tools panel.
Save
Save the design of the form to persist it. All changes overwrite the previous.
Row/Column Panels
Having defined your row and column layout using the configure layout popup, you can now design each panel which lives inside each column.
Panel Control Menu
This drop down menu is positioned top right of each column:
Edit Panel
This option opens up the panel properties modal popup to set the following properties of the panel:
Last updated