Create interactive and responsive UI to capture customer requirements.
With the DriveWorks Form Designer, you can:
The Form Design Area displays the main Form View and Property Panel.
To add a new Form Control to the form displayed in the Form View:
Caption
Most controls (but not all) will display a caption when added.
This can be modified from the Control Properties by setting the Caption or Text property.
By default the caption takes the name given to the control when the control is created (not on renaming the control).
As control names cannot include spaces, capitalized words are automatically separated with a space for the Caption.
For example:
When the name shown in the image below is given to a control.
The Caption displayed will be:
Please Enter The Length
Control Guides allow quick and accurate alignment of controls when designing User Forms.
Control Guides appear when controls are moved on the User Form.
Control Guides align to other controls in two ways:
Control Guides can also snap to any Resolution Guide in use on the User Form.
Control Guides settings allow the following properties to be changed to suit your preferences.
See Settings to access the Settings dialog and Form Designer Settings for more information on Control Guide Settings.
Form Controls can be grouped so they move as one when repositioning is required.
Controls can be grouped by:
Controls can be ungrouped by:
Accurate Positioning of Form Controls Using Keyboard Arrows.
To fine-tune a controls position, use the keyboard arrow keys to move the selected control one pixel at a time.
Multiple form controls can be selected by the following methods:
When multiple form controls are selected from the form designer all properties that are shared between the controls will be displayed in the property list.
Also if any properties have the same value or rule, this will be displayed in the property list.
Each Project requires a file named ProjectStyles.css located in the same folder as each Project.
DriveWorks provides an example CSS file that can be modified to suit your requirements.
The ProjectStyles.css file is obtained by:
We recommend creating a New Individual Group to store this Project, away from any Production or Development environment.
Click Next.
Click Next.
Click Finish.
We recommend experimenting on a single Project and then copying the ProjectStyles.css to all other required Projects when satisfied with the results.
The ProjectStyles.css file can be modified 'live', using any text editor (Visual Studio Code, Notepad++, etc.), while in the Form Design task.
Saving the modifications in the text editor will instantly update the Form Designer with the changes.
An individual control can be targeted to specific code in the CSS file by applying a value to the data-metadata tag (in the CSS) and using that value in the (Metadata) property of the control.
For example the CSS file contains the following:
[data-metadata*="animate"] { transition: all var(--animation-speed) var(--animation-curve); }
Where the Control's (Metadata) property contains the value animate - by partial matching.
For more information on CSS selectors, see: Mozilla - Attribute selectors.
Useful CSS Tutorials
Helpful References
The Property Panel is displayed on the right of the Form View.
It consists of two sections that interact with each other and the Form View:
Displayed above the Property Grid, this lists all Forms and Controls in the Project.
Displayed below the Control Tree, this lists all Properties for the selected Form or Control.
All controls that exist on each Form are listed in the Control Tree.
The Control Tree provides a single place for finding form controls and easily navigating to the form the control exists on.
Selecting a Control from the list will:
The Form View will switch to the form the selected control exists on.
Each control is listed under the form on which they appear, the list can be ordered by:
The Z-Index specifies the stack order of a control on a user form.
Controls that appear higher in the list appear further back (behind) on the user form.
The Z-Index order allows easier organization of controls that overlap or that are placed over each other.
Click the Order by Z-Index button to order the controls by the Z-Index.
Changing the Z-Index of a control
There are two methods by which the Z-Index of a control can be modified:
Each control can be ordered by the Name given to the control.
Click the Order By Name button to order the controls in each form by the Name given to them.
Each control can be ordered by the type of control (Text Box, Combo Box, Label etc.)
Click the Order By Type button to order the controls by their type.
Design Mode Visibility allows a control to be hidden during design mode only. This is useful when controls are positioned on top of others and require to be turned off to allow easier selection of the controls behind.
Once the position of a control is determined its position can be locked to prevent accidental moving during Form Design.
Select the control to be locked and click the Toggle Locking Control Position button .
All forms that exist in the project can be quickly brought back into view by clicking the Collapse All button to collapse the controls in view on each form.
Controls can be quickly found by using the filter box above the control tree.
Clearing the Filter
Once a filter has been applied it can be cleared by:
Or
If a control has been placed onto a form and now requires to be on another form it can be dragged from its existing form onto the new form all from within the Control Tree.
Controls can also be moved by using Cut and Paste commands.
When a control is selected the property grid changes to show all of the properties of that control and their current values.
The property grid is made up of the following areas:
Properties for each User Form can be set by clicking on the form in the Form View.
The Form Properties that can be set are:
User Form properties must be set for each User Form in the project.
Each control has various properties that can be set or have rules applied to them that will dynamically change the behavior of each property during specification.
When a control is added to the User Form and selected various properties become available in the property grid.
All control properties have the following possible states:
Fixed properties set certain behavioral properties or define the actual name of the control. These properties can only be changed in the form design stage.
Active properties can be set to be one of the following states:
A property set to be dynamic gives the option to apply a Rule to the property that will be evaluated during the running of a specification.
This allows the property to change during specification.
For example this could be a change to data in a list type control, the position of the control on the user form or if the control is visible or not. Dynamic properties applied by DriveWorks cannot be made static, but they do not necessarily require a Rule.
A static property, like a fixed property, is set during Form Design.
Unlike fixed properties there is the option to make this dynamic. Static properties can be made dynamic.
All control properties can be used in Rules. See How To: Reference Control Properties for more information.
For information on changing a static property to a dynamic property please see How To: Change A Static Property To A Dynamic Property.
This group of commands provide common Windows functionality for:
Cut, Copy and Paste controls from one form to another.
Can also be used to copy controls across different Projects.
The pasted control name will be incremented if the original name already exists in the Project.
Will undo or redo the previous actions.
Provides the ability to search and edit all Rules within the Project, see Search Rules for more information.
These commands are also available through Keyboard Shortcuts.
The Form in view can have the zoom level set by selecting the required buttons from the command bar.
Increases the zoom level, in 10% increments, to maximum 500%
Decreases the zoom level, in 10% increments, to a maximum of 20%
Resets the zoom scale to 100%.
This option is only available when the Form in view is not at 100%.
The above options are also available by right clicking on the User Form.
These commands are also available through Keyboard Shortcuts.
When the zoom level is not 100% the current zoom level is indicated at the top right of the Form Designer.
The zoom level is hidden when the current view is at 100%.
You can use the Test button on the Command Bar to try out your form, and to set default values for controls.
This command is also available through Keyboard Shortcuts.
To align two or more Form Controls, either box select (by click-dragging over the controls you want to align), or ctrl-select them individually, and then select the relevant alignment button.
The following alignment tools are available:
Resolution Guides help you to design User Forms within a specified boundary.
These are particularly useful when designing your User Forms for use on a common device.
There are a number of preset resolution guides available, these are:
The width and height of the presets match the screen resolution of the products they are named after, these can be adjusted on creation.
To add a Resolution Guide:
To edit a Resolution Guide:
To delete a Resolution Guide:
Resolution Guides can have further settings applied.
See Settings to access the Settings dialog and Form Designer Settings for more information on Resolution Guide Settings.
The Form Controls available are:
Type | Icon | Description |
---|---|---|
3D Preview Box | A control that displays an interactive 3D Model during specification. | |
Check Box | A control which allows a user to toggle between TRUE/FALSE. | |
Child Specification List | A list used to support nesting of specifications inside other specifications. | |
Combo Box | A list of data presented as a drop-down menu. | |
Data Table | A table of selectable data retrieved from a data source. | |
Date Picker | A control that allows a date to be selected from an interactive calendar. | |
Dialog Button | Provides support for launching a dialog to show information to the user, and ask for input. | |
Frame Control | A control in which any User Form, within the project can be displayed. | |
Hyperlink | Provides a clickable link to a URL. | |
Item List | A list of data created or edited using dialogs. | |
Label | Provides a way of displaying fixed or dynamic text on a form. | |
List Box | A list of options from which the user can select a single item. | |
Macro Button | Provides support for running a Macro in the design master when clicked. | |
Measurement Text Box | Provides support for entering linear dimensions in a variety of units. | |
Numeric Text Box | A text box which only supports numeric input within a fixed or dynamic range of values. | |
Option Button | A single option, in the form of radio buttons, from which the user can select a single item. Option Buttons can be grouped outside a frame and across different forms. | |
Option Group | A list of options grouped within a single frame, in the form of radio buttons, from which the user can select a single item. | |
Picture Box | A control which can display a picture whose path can either be a fixed value, or the result of a Rule. | |
Slider | A horizontal or vertical bar with an indicator that can be dragged to represent a numeric unit. | |
Specification Host | A control that allows you to host a Specification or a Child Specification. | |
Spin Button | A control which supports numeric input within a fixed or dynamic range of values, and with buttons that increment or decrement the value of the control by a certain amount. | |
Text Box | A control which supports textual input. | |
Upload Control | A control that allows a client side file to be uploaded. | |
Web Frame | A control that allows external web content to be rendered onto a User Form. |
See Add a Form Control to a User Form to add a control to the form displayed in the Form View.
User Forms can be exported as a template, for re-using in other Projects.
User Form template creation allows data within a Project to be included in the template.
Multiple User Forms can be included in the template. Use Ctrl + select to choose the required User Forms from the Forms List.
The file extension (.drivefort) is not required to be given in the Template Name field.
This lists all Constants in the Project. Constants can be selected individually or all at once (right click, Select All).
This lists all Variables in the Project. Variables can be selected individually or all at once (right click, Select All).
This lists all Calculation Tables in the Project. Calculation Tables can be selected individually or all at once (right click, Select All).
This lists all Specification Macros in the Project. Specification Macros can be selected individually or all at once (right click, Select All).
This allows any other file to be selected for inclusion in the template.
Its primary purpose is to allow the inclusion of images, DriveWorks 3D files.
Once the template has been created, it must be installed on each DriveWorks Administrator machine it is required to be added from.
DriveWorks templates can only be installed on machines that have DriveWorks Administrator installed.
<SaveLocation><TemplateName>.drivefort
To add the template to a Project, see Creating a Form from a Template.