Home Search

DriveWorks Solo 22
Web-Based Form Technology

Send Feedback

Web-Based Form Technology

DriveWorks 21 introduces a unified web-based Form technology which provides a much more consistent and usable experience in the Form Designer of DriveWorks Solo.

While this use of web technology behind the new Forms Designer will ease the transition to DriveWorks Pro and browser-based DriveWorks projects, it also provides a host of benefits to native DriveWorks Solo forms.

The Web Form Technology controls have an added consistency in look, behavior, and sizing that makes it faster and easier to create great, professional quality forms in DriveWorks Solo.

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.

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.

Form Design

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

ChangeReason
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.

Check Box

Property or ElementChange
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.

Combo Box

Property or ElementChange
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.

Property or ElementChange
Text

Image showing padding removed on the Hyperlink control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Label

Property or ElementChange
Text

Image showing padding removed on the Label control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

List Box

Property or ElementChange
Caption

Image showing padding removed on the List Box control.

Removed left padding (3px).

Aligned to control bounds.

Easier alignment with other controls.

Numeric Text Box

Property or ElementChange
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 Group

Property or ElementChange
Fieldset Border

Image showing the border on the Option Group control.

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

Image showing no inner padding when Show Border property is false on the Option Group control.

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 PicturesNow shows selected state immediately when selected without moving the mouse.
CaptionWhen 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 RuleIf 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 ElementChange
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 ElementChange
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.

Spin Button

Property or ElementChange
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 ElementChange
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.

© DriveWorks Ltd 2024 - All rights reserved.
Privacy Policy | Terms & Conditions