DriveWorks Pro 22

Responsive Form Project Template

Responsive Form 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 the ability to have a collapsible navigation menu positioned on the left of the main Form and a collapsible Summary on the right of the Form.

The navigation menu gives users the ability to select an input Form to interact with.

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

Each Input Form has an icon that can be controlled by updating the Input Forms Simple Table data.

A Modal Frame Control can be launched by duplicating the ViewModal Macro Button and updating its Macro Argument property to determine which Modal Form to show.

A Modal is another name for a dialog or pop-up. This is linked to the Modal Forms Simple Table.

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.

Adding an Input Form and Navigation Button

1. Add a new Form
2. Add a new row to the Input Forms Simple Table
   • Add a suitable Id
   • Add a Form Name, this must match the name of the DriveWorks Form added in step 1
   • Add Navigation Icon and Navigation Icon Selected values. These allow you to control the icon displayed on the corresponding Macro Button and are relative to the Content folder defined by the Variable ContentDirectory
   • Add a Navigation Title. This will be displayed when the Navigation menu is expanded and doesn’t need to match the Form Name
3. On the Navigation Form, copy and paste an existing Navigation Button and update its Top property so it is positioned below the previous navigation button using hierarchical control properties
4. Test the new Navigation Button and Input Form

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.

Adding a Modal Button

1. Add a new Form.
   • From an existing Modal Form, copy and paste a ModalClose Macro Button onto your new Form. This will ensure users can close a modal once it is open.
2. Add a new row to the Modal Forms Simple Table.
   • Add a suitable Id.
   • Add a Form Name, this must match the name of the DriveWorks Form added in step 1.
3. Go to the Form Control Examples Form and copy the ViewModal Form Control.
4. Go to the Form you want to add the ViewModal button and paste the Form Control.
5. Rename the Form Control to something meaningful.
6. Update the Form Control’s Text properties to something meaningful.
7. Update the Form Control’s Macro Argument with the Id that matches the one added in step 2.
   • This will be used to determine which Form to show inside the Modal.
8. Test the new Modal Button.