Web-Based Form Technology (DriveWorks Documentation)

Web-Based Form Technology

DriveWorks 21 introduces a unified web-based Form technology that ensures the behavior and appearance between desktop and web applications is consistent.

This also allows modern web styling to be directly applied to Form Controls using CSS (cascading style sheets).

Previous versions used separate technologies to design on desktop and then emulate for the internet. This led to slight discrepancies between the two formats.

This is completely eliminated with the new Web Form Technology.

Existing Projects, upgraded to DriveWorks 21, may see slight visual and style changes as well as enhancements inherited from adopting this technology.

What will happen to my existing forms?

In the majority of cases there will be little noticeable difference when upgrading your Projects to DriveWorks 21.

Realistically, you may need to do a little tweaking here and there to make things line up perfectly.

There should be no more difference than a pixel or two, so if you designed your forms with some buffer space they should be perfectly fine.

However the Date Picker control has been affected the most by this change. The calendar icon and pop-out are noticeably different. See Date Picker below for more detail.

The section below (Form Control Visual And Style Changes) details exactly what has changed for each control.

We do recommend taking a backup of the DriveWorks data before opening any Group in DriveWorks 21.

How will this affect how I work?

With regards to using the Form Design task, nothing has changed.

Moving to this technology has allowed some enhancements to be incorporated into the Form Design task.

If you are satisfied with the look and feel of your Forms, using the default appearance properties, then continue as before.

But if you want to adopt modern browser styling, or match formatting on an existing web site, this can now be done.

Just a few examples of what can be achieved with CSS:

Border Radius	Transforms (e.g. Rotation)	Animation

Form Design

The following lists the changes made to the Form Design task as part of the Web Form Technology implemented in DriveWorks 21.

Change	Reason
Control Grips When multiple overlapping controls are selected, the grips have the same Z order as the selected controls. The resize grips of the top most control will take precedence over any below (which may be inaccessible).	Easier and more logical Control selection.
Control Boundary The boundary of a control displays an outline on hover when unselected.	Allows instant identification of the control that will be selected before clicking. Assists with selecting stacked and overlapping controls.
Right Click (Context) Menu Renaming is disabled when multiple controls are selected.	Only one control can be renamed at a time. The previous behavior did not respect which control was selected first/last to rename, and renamed the first selected item in the control tree.

Change

Reason

Control Grips

When multiple overlapping controls are selected, the grips have the same Z order as the selected controls.

The resize grips of the top most control will take precedence over any below (which may be inaccessible).

Image showing the grips on the top most control taking precedent over any underneath.

Easier and more logical Control selection.

Control Boundary

The boundary of a control displays an outline on hover when unselected.

Image showing outline displayed when hovering over a control in the Form Designer.

Allows instant identification of the control that will be selected before clicking.

Assists with selecting stacked and overlapping controls.

Right Click (Context) Menu

Renaming is disabled when multiple controls are selected.

Only one control can be renamed at a time.

The previous behavior did not respect which control was selected first/last to rename, and renamed the first selected item in the control tree.

Form Control Visual And Style Changes

The following are visual and style changes to controls as part of the Web Form Technology implemented in DriveWorks 21.

All Color Properties (All Controls)

Colors selected from the System tab (see image below), of the color chooser, may not display exactly as shown in the Form Designer when a form is viewed in a browser.

This applies to any color property, on any control, that displays the color chooser when selected (see Color for a full list of all color properties).

Image highlighting the System tab of the color chooser.

System color mapping occurs server side which means if these colors are used, the server theme colors will be sent down to the client.

System colors defined in CSS2 are very unreliable, and indeed, deprecated in CSS 2.1.

We strongly recommend using hexadecimal values or colors selected from the Web tab of the color chooser for the Web.

To force a web system color on the browser, please see Web Browsers and System Colors.

3D Preview Box

Property or Element	Change
Enable Animations	Animation Menu displays at all sizes, no longer limited to Height values of 270px+ (see Enable Animations for more information). Up and down arrows now work within the menu. Note: This might mean that the menu may appear in cases where the menu was not previously visible.

Property or Element

Change

Enable Animations

Animation Menu displays at all sizes, no longer limited to Height values of 270px+ (see Enable Animations for more information).

Image showing the animations icon.

Up and down arrows now work within the menu.

Note: This might mean that the menu may appear in cases where the menu was not previously visible.

Check Box

Property or Element	Change
Check Cell	Size of check cell reduced from 16px x 14px to 14px x 14px by default. This adopts a standard with the input cells of other controls (for example the Option Button) and gives visual consistency. The cell is a true square for easier alignment.

Property or Element

Change

Check Cell

Size of check cell reduced from 16px x 14px to 14px x 14px by default.

This adopts a standard with the input cells of other controls (for example the Option Button) and gives visual consistency.

The cell is a true square for easier alignment.

Child Specification List

Property or Element	Change
Outer Padding	Removed outer padding on control (was 3px). Inner elements of the control are now aligned to the bounds of the control. Allows easier alignment with other controls.
Action buttons	Button width increased to 80px from 70px. The default action button text (Add, Move Up, etc.) now wraps onto multiple lines when actions are scrollable, either from a small overall height or many available actions. Align to top of List element. Visually consistent alignment, easier alignment with other controls. Left and right margin removed. Visually consistent alignment, easier alignment with other controls. Left padding replaced by gap in control structure to space from List element.
Caption	2px gap between the Caption and List added. Improved visual layout, less cramped elements. Consistent with gap between other elements inside control (for example the List and Action buttons).

Property or Element

Change

Outer Padding

Image showing Outer Padding removed on the Child Specification list control.

Removed outer padding on control (was 3px).

Inner elements of the control are now aligned to the bounds of the control.

Allows easier alignment with other controls.

Action buttons

Image showing Action Button differences on the Child Specification list control.

Button width increased to 80px from 70px.
The default action button text (Add, Move Up, etc.) now wraps onto multiple lines when actions are scrollable, either from a small overall height or many available actions.
Align to top of List element.
Visually consistent alignment, easier alignment with other controls.
Left and right margin removed.
Visually consistent alignment, easier alignment with other controls.
Left padding replaced by gap in control structure to space from List element.

Caption

Image showing gap between caption and list on the Child Specification list control.

2px gap between the Caption and List added.

Improved visual layout, less cramped elements.

Consistent with gap between other elements inside control (for example the List and Action buttons).

Combo Box

Property or Element	Change
Caption	Left padding (3px) removed. Aligns to the left edge of the control bounds. Consistent with other controls.
Input Height Input Value	Input Height decreased to 16px (from 19px). Consistent with other controls. Improved alignment vertically and horizontally. Input Value text wrapping is not supported. The browser native <select> element used does not support wrapping text. Browsers differ in how they display both the input and the items, either as a dropdown (desktop), or popout (mobile). The browser vendor controls how the items are displayed.

Property or Element

Change

Caption

Image showing left padding between caption and control bounds on the Combo Box control.

Left padding (3px) removed.

Aligns to the left edge of the control bounds.

Consistent with other controls.

Input Height

Input Value

Image showing the Input on the Combo Box control.

Input Height decreased to 16px (from 19px).
Consistent with other controls. Improved alignment vertically and horizontally.
Input Value text wrapping is not supported.
The browser native <select> element used does not support wrapping text.
Browsers differ in how they display both the input and the items, either as a dropdown (desktop), or popout (mobile). The browser vendor controls how the items are displayed.

Data Table

Property or Element	Change
Outer Padding	Removed outer padding (3px). Inner elements of the control are now aligned to the bounds of the control. Allows easier alignment with other controls.

Property or Element

Change

Outer Padding

Image showing the outer padding on the Data Table control.

Removed outer padding (3px).

Inner elements of the control are now aligned to the bounds of the control.

Allows easier alignment with other controls.

Date Picker

Property or Element	Change
Input Height	Decreased to 16px (from 30px). Visual consistency with other controls. Better alignment vertically and horizontally.
Caption	Removed left padding (3px). Inner elements of the control are now aligned to the bounds of the control. Easier alignment with other controls.
Calendar Icon	Switched to monotone SVG rather than a fixed size image. Scales with font-size. The previous icon could not be consistently styled
Enabled Property	The control now appears faded when set to FALSE (disabled). Visually consistent with other disabled input type controls.
Calendar Pop-out	The control now use's the browser’s native UI. This gives a better user experience across all devices (desktop, tablet and mobile). Creates a familiar experience for every browser and device.
Hide on Date Selection Property	Deprecated This property is no longer reliable to implement using the native popout, due to lack of developer control. Causes issues on certain browsers.

Dialog Button

Property or Element	Change
No intentional changes have been implemented for this control.

Frame Control

Property or Element	Change
No intentional changes have been implemented for this control.

Hyperlink

Property or Element	Change
Text	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.

Item List

Property or Element	Change
Outer Padding	Removed outer padding on control (was 3px). Inner elements of the control are now aligned to the bounds of the control. Allows easier alignment with other controls.
Action buttons	Button width increased to 80px from 70px. The default action button text (Add, Move Up, etc.) now wraps onto multiple lines when actions are scrollable, either from a small overall height or many available actions. Align to top of List element. Visually consistent alignment, easier alignment with other controls. Left and right margin removed. Visually consistent alignment, easier alignment with other controls. Left padding replaced by gap in control structure to space from List element.
Caption	2px gap between the Caption and List added. Improved visual layout, less cramped elements. Consistent with gap between other elements inside control (for example the List and Action buttons).

Property or Element

Change

Outer Padding

Image showing Outer Padding removed on the Item List control.

Removed outer padding on control (was 3px).

Inner elements of the control are now aligned to the bounds of the control.

Allows easier alignment with other controls.

Action buttons

Image showing Action Button differences on the Item List control.

Button width increased to 80px from 70px.
The default action button text (Add, Move Up, etc.) now wraps onto multiple lines when actions are scrollable, either from a small overall height or many available actions.
Align to top of List element.
Visually consistent alignment, easier alignment with other controls.
Left and right margin removed.
Visually consistent alignment, easier alignment with other controls.
Left padding replaced by gap in control structure to space from List element.

Caption

Image showing gap between caption and list on the Item List control.

2px gap between the Caption and List added.

Improved visual layout, less cramped elements.

Consistent with gap between other elements inside control (for example the List and Action buttons).

Label

Property or Element	Change
Text	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.

List Box

Property or Element	Change
Caption	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.

Property or Element

Change

Caption

Image showing padding removed on the List Box control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Macro Button

Property or Element	Change
No intentional changes have been implemented for this control.

Measurement Text Box

Property or Element	Change
Caption	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.
Input Height	Decreased to 16px (from 21px). Visual consistency with other controls. Better alignment vertically and horizontally.
Unit Font	Now supports text decoration (underline, strikethrough).

Property or Element

Change

Caption

Image showing padding removed on the Measurement Text Box control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Input Height

Image showing the Input Height on the Measurement Text Box control.

Decreased to 16px (from 21px).

Visual consistency with other controls.

Better alignment vertically and horizontally.

Unit Font

Image showing the Input Font on the Measurement Text Box control.

Now supports text decoration (underline, strikethrough).

Numeric Text Box

Property or Element	Change
Caption	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.
Input Height	Increased to 16px (from 15px). Visual consistency with other controls. Better alignment vertically and horizontally.

Property or Element

Change

Caption

Image showing padding removed on the Numeric Text Box control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Input Height

Image showing the Input Height on the Numeric Text Box control.

Increased to 16px (from 15px).

Visual consistency with other controls.

Better alignment vertically and horizontally.

Option Button

Property or Element	Change
Option Cell	Size of option cell increased from 14px x 13px to 14px x 14px by default. This adopts a standard with the input cells of other controls (for example the Check Box) and gives visual consistency. The cell boundary a true square for easier alignment. Removed left padding (3px). Hover/Selected Pictures Shows the selected state immediately when selected, without the need to move the mouse to trigger a visual change.

Property or Element

Change

Option Cell

Image showing the Option Cell on the Option Button control.

Size of option cell increased from 14px x 13px to 14px x 14px by default.
This adopts a standard with the input cells of other controls (for example the Check Box) and gives visual consistency.
The cell boundary a true square for easier alignment.
Removed left padding (3px).
Hover/Selected Pictures
Shows the selected state immediately when selected, without the need to move the mouse to trigger a visual change.

Option Group

Property or Element	Change
Fieldset Border	Now uses a simpler 1px grey border around the fieldset, previously 3px (white\|grey\|white). Positions border at control bounds. Easier alignment with other controls.
Show Border Property	When false, all inner padding is removed from the Caption (legend) and fieldset. Aligns Options to edge of control. Easier alignment with other controls.
Hover/Selected Pictures	Now shows selected state immediately when selected without moving the mouse.
Caption	When long Captions are used, the overflowed text is aligned to the top, always showing the start of the Caption. Consistent with the Option Button.
Override Rule	If there is a Override Rule applied, when another Option is clicked, there will be a visual flicker as the server corrects the visual state of the Options. The Option Group’s UI is not blocked for responsiveness. The change is made client-side immediately, and then corrected by the server if necessary.

Picture Box

Property or Element	Change
File Name Picture (Hover)	SVG images render in an <img> tag, not <iframe>. Supports Size Mode values. Enables transparency (previously fixed to a white background). HTML documents render with a transparent background. Does not force a white background, allows transparency if desired. To re-implement the old behavior: Use the control Background Color property.

Slider

Property or Element	Change
Caption	Correctly horizontally centered. Left and right padding on text (3px) removed. Aligns to control bounds. Easier alignment with other controls. Aligns with min and max labels.
Track	Outer padding calculated to half Thumb width/height, depending on orientation. No longer fixed 5px from control bounds. Logically sized to the draggable area, aligned over center point of the Thumb.
Thumb	Now shows drag and dragging cursors on interaction. The previous pointer cursor implied incorrect interaction.

Property or Element

Change

Caption

Image showing the caption on the Slider control.

Correctly horizontally centered.
Left and right padding on text (3px) removed.
Aligns to control bounds.
Easier alignment with other controls.
Aligns with min and max labels.

Track

Image showing the track padding on the Slider control.

Outer padding calculated to half Thumb width/height, depending on orientation. No longer fixed 5px from control bounds.

Logically sized to the draggable area, aligned over center point of the Thumb.

Thumb

Now shows drag and dragging cursors on interaction.

The previous pointer cursor implied incorrect interaction.

Specification Host

Property or Element	Change
No intentional changes have been implemented for this control.

Spin Button

Property or Element	Change
Caption	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.
Input Height	Reduced to 16px (from 20px). Visual consistency with other controls. Better alignment vertically and horizontally.

Property or Element

Change

Caption

Image showing padding removed on the Spin Button control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Input Height

Image showing the Input Height on the Spin Button control.

Reduced to 16px (from 20px).

Visual consistency with other controls.

Better alignment vertically and horizontally.

Text Box

Property or Element	Change
Caption	Removed left padding (3px). Aligned to control bounds. Easier alignment with other controls.
Input Height	Increased to 16px (from 15px). Visual consistency with other controls. Better alignment vertically and horizontally.

Property or Element

Change

Caption

Image showing padding removed on the Text Box control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Input Height

Image showing the Input Height on the Text Box control.

Increased to 16px (from 15px).

Visual consistency with other controls.

Better alignment vertically and horizontally.

Upload Control

Property or Element	Change
Hover State	Now shows hover state on button (border and background color) in all instances (previously blocked in DriveWorks Live). Consistent with other button type controls.

Property or Element

Change

Hover State

Now shows hover state on button (border and background color) in all instances (previously blocked in DriveWorks Live).

Consistent with other button type controls.

Web Frame

Property or Element	Change
General Behavior	No longer loads sites with X-Frame-Options set to SAMEORIGIN. This provides the correct browser security behavior.
Background Color	Content now supports transparent background colors. To re-implement the old behavior, either: Set background-color: white on the <body> tag in the HTML content. Or Use the controls Background Color property - which sets the color shown behind the iframe.
URL	Linking to a .csv file type will load correctly.

Property or Element

Change

General Behavior

No longer loads sites with X-Frame-Options set to SAMEORIGIN.

This provides the correct browser security behavior.

Background Color

Content now supports transparent background colors.

To re-implement the old behavior, either:

Set background-color: white on the <body> tag in the HTML content.
Or
Use the controls Background Color property - which sets the color shown behind the iframe.

URL

Linking to a .csv file type will load correctly.

How To Apply CSS Styling To A Project:

Each Project requires a file named ProjectStyles.css located in the same folder as each Project.

Image showing the ProjectStyles.css file located alongside the Project file.

Obtain an example CSS File

DriveWorks provides an example CSS file that can be modified to suit your requirements.

The ProjectStyles.css file is obtained by:

Create a New Project.
We recommend creating a New Individual Group to store this Project, away from any Production or Development environment.
In the New Project wizard, select Responsive Form Project Template from the Templates section.
Click Next.
Select a Location and Name for the new Project.
Click Next.
Click Finish.
Browse to the location the new Project was created and copy the ProjectStyles.css file to the same location as the Project(s) it is to be applied.
We recommend experimenting on a single Project and then copying the ProjectStyles.css to all other required Projects when satisfied with the results.

Modifying The ProjectStyles.css File

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.

GroupStyles.css

DriveWorks 22 introduced the ability to style the Forms of all Projects within a Group with a single GroupStyles.css file.

This file is exactly the same as the ProjectStyles.css, but named GroupStyles and located in the Group Content Folder.

Please see Group Level Styling for more information.

Target An Individual Control

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.

Resources

Useful CSS Tutorials

Helpful References

Mozilla Developer's Network
CanIUse - See which browsers support the CSS properties that you want to use
Using Shadow DOM

DriveWorks Pro 22 Web-Based Form Technology