Responsive DriveWorks Projects
In DriveWorks Live it is possible to make your DriveWorks forms responsive and reactive to the size of the browser it is being viewed in. Responsive Forms allow you to drive the width value of the browser into a DriveWorks project and use the value within your project rules. This makes DriveWorks forms dynamic and ever changing depending on the size of the browser or mobile device you are working on.
The value sent from the browser can be used to control the width of form controls or position them based on the width of the browser. More and more tablets and mobile devices are being used within the work place. It is important that your DriveWorks projects are professional and react to all of these devices. Responsive Forms lets your DriveWorks forms fit every browser just like a responsive website.
Enabling responsive forms
Responsive Forms are ideal for the Tiled Fluid skin. Tiled Fluid has been designed to be responsive to all browsers. Together they give a true responsive DriveWorks project suitable for any device.
Please apply the Tiled Fluid skin before setting up your responsive forms.
To enable Enable Responsive Forms follow the steps outlined under the Editing the Specification Form Module sub heading below.
Specification Form Module
Editing the Specification Form Module
To access settings for the Specification Form Module:
- Start Personal Web Edition or DriveWorks Live and Login when the Login page appears in your browser (make sure you login as an Administrator).
- Open the project you wish to edit.
- Switch to Editing Mode, either by clicking Switch or by clicking the Gear in the top right of the browser.
- Locate the Specification Form module on the web page and click the Edit link in the top right hand corner of the module.
- Once the Edit link has been clicked the Edit Module dialog will display, where the available settings can be applied:
The module can have the following settings applied:
- Next Page after Cancel - Default value is blank this will navigate to the Home page when Cancel is selected from the Specification Form Module.
- Next Page after Complete - Default value is blank, this will navigate to the Release Page when any link that transitions the specification to a completed state is selected from the Specification Form Module.
- Next Page Settings are Resolved to Constants – Default value is unchecked. When checked, the Next Page values for After Cancel and After Complete will be resolved to constants.
- Enable Responsive Forms - Default value is unchecked. When checked, the browser width will be driven into a constant within the DriveWorks project. This value can be used within the project to drive control positions.
- Responsive Constant Name - Default value is blank. Enter the name of a constant within your project. This constant will be driven with a numeric value which will be the width of the browser in pixels.
The Next Page values can reference any valid URL or constant name (with or without the DWConstant prefix).
Enabling Responsive Forms
- Check the “Enable Responsive Forms” check box.
- Enter the name of a Constant you have within your DriveWorks project.
If responsive forms are to work with multiple projects the same Constant should be applied to all projects.
Driving Data into a Specification
When driving information into Constants or Controls the following behavior will be applied:
- If the constant name is found with the same name as the name of the value being applied, then the constant will be driven.
- If there is a control with the same name as the constant, the control will NOT have its value set.
- If however there is no constant with that name, but there is a control with that name, the controls value will be set.
- This Constant can now be linked to Form Controls and rules to drive the width and positions of controls on your form.
Create a Constant within your DriveWorks Project called BrowserWidth.
Enter BrowserWidth into the Responsive Constant Name setting.
Now the users current browser width will be driven into the constant.
If the browser is 1920 pixels wide, the constant will be driven with the value of 1920.
A Form Controls Width property can then be set to use the Constant value, which would result in the Form Control always being as wide as the browser.
Responsive Constant Name
has been superseded by the Form Container Width and Form Container Height Special Variables.
DriveWorks Tech Tips Portal
When used online, DriveWorks can detect the width of the browser and drive this value into a constant. Form controls can then have their positions and size change dynamically based on the browser width, so forms can be optimized for a variety of devices.
View all Tech Tips
DriveWorks Tech Tips Portal is available to DriveWorks Pro customers with an active subscription and support contract.
Tech Tips provide cut down projects that highlight specific functionality for faster and more effective learning.
To access the portal:
- Go to https://hub.driveworks.co.uk/tech-tips/
- Login with your DriveWorks Pro account credentials, if asked
- Click the Visit Tech Tips Portal button for access
The portal provides a search facility, start typing the name of the Tech Tip (as indicated above) to display the Tip you require.