DriveWorks Pro 22

White-Label Project Template

White-Label Project Template

This template creates a new Project that is responsive and can be easily modified to match your organization's branding and configurator requirements.

Template Settings

This Project Template is responsive and can be controlled by updating a set of Settings Variables.

These settings can be modified to update the size and position of the Frame Controls that control the overall Form layout.

A set of styled example Form Controls can be copied from the Form Control Examples Form and pasted onto your own input Forms to create your own user inputs.

To make the Forms responsive to the device being used, a width breakpoint has been set in a Variable that can be modified. The layout of the Frame Controls will change when this breakpoint is met.

Template Contents

The template has been set up to give you five tabbed sections with a static left-hand panel. Each section will display a different possible input Form style. The template also offers a collapsible Specification Summary positioned on the right of the main Form.

The template will create five initial input forms but more can be added by modifying the SectionList Simple Table, adding a Form and duplicating an existing Navigation Button.

Each Input Form has a different selection of Form Controls and input styles. Including model dialogs for additional inputs, Data Tables to present Specification data and Option buttons with associated Picture Boxes to display possible options to your users.

Section four includes options to display Modal Frame Controls.

A Modal is another name for a dialog or pop-up. Additional Modals can be added by duplicating the Modal Form in Section 4. The template also includes a Confirmation Modal that will appear after pressing the Submit button.

The template includes a Preview Form so that you can show a preview of the product being configured.

ProjectStyles.css

A ProjectStyles.css file is used to style some of the Form Controls using CSS.

The template applies this by copying a pre-created ProjectStyles.css to the Project file's location.

To make modifying the CSS to match your organization's branding simple, the CSS file uses Custom Properties or CSS variables to control values that are reused.

The ProjectStyles.css file is only used to style Form Control elements that can't be styled using Form Control properties.

The ProjectStyles.css file includes examples of how to apply custom CSS to your DriveWorks Forms and can be used as a starting point when creating your own ProjectStyles.css file.

There is a simple Specification Flow that can be modified to setup your own custom workflow.

Copying an Example Form Control

1. Go to the Form Control Examples Form and select the Form Control you want to copy.

   Some of the Form Control Examples use a label alongside the Form Control to offer more control over the Form Control Caption. If this is the case, you will need to multi-select the label and Form Control you want to copy.

2. Go to the Form you want to use the Form Control on and paste the Form Control(s).

   Any styling applied using ProjectStyles.css will still be applied as the styling is applied to the entire Project.

   All Form Control examples have styled applied to their metadata property which means you can still add non-styled Form Controls by either clearing the metadata property from a copied Form Control or adding a new Form Control from the Command Bar.

3. Rename the Form Control to something meaningful.
4. Test the new Form Control.