DriveWorks Pro 24

User interface style 3

User interface style 3

This template creates a new project with responsive form layouts. The template styling matches the styling of the DriveWorks CPQ Sales Portal module but it can be used to create any DriveWorks project.

Template Settings

This template has been designed to specifically match the styling of the CPQ Sales Portal to allow users to seamlessly integrate their configurator projects as custom products in the CPQ Sales Portal.

The template provides an initial layout and style that can be customized. To customize the styling settings, edit the variables in the following category:

UI > Layout

The template also provides all required values for integrating the dark/light mode capabilities of the CPQ Sales Portal into your project. These are controlled using a series of Lambda functions:

• LambdaToGetPrimaryIconPath
• LambdaToGetSecondaryIconPath
• LambdaToGetColor

These functions are used in a set of variables within the variable category - UI.

To aid with setup - it is advised that you copy Form Controls from the Form Control Examples Form rather than creating them from scratch. These controls use the lambda function variables, as well as the ProjectStyles.css to ensure control match the styling of the CPQ Sales Portal module.

Template Contents

The template has a left-hand panel layout. The left-hand panel provides controls for moving between different forms. The right-hand pane has space for a 3D Preview of the model that is being configured.

To add additional forms to the navigation, create the new forms and can add rows in the correct order to the SectionList simple table.

Up to seven forms can be create and shown using this method before further modifications are required on the SectionBanner form.

The template contains a 3D placeholder model that is shown in a 3D Document called 3DPlaceholder. It is recommended that you create your own 3DDocument and update the value for the Preview Document Name property of the Preview 3D Preview Box control.

This template also contains a SubmitModal Form which is shown at the end of configuration. This modal allows the user to input details about the customer. If this is not required (for example, if you are running your configurator inside the CPQ Sales Portal catalog) you can prevent this model from being shown by editing the Macro Name property of the MacroButtonNext control to be the following:

ProjectStyles.css

This template uses a ProjectStyles.css to further customize controls on the form. This CSS file has been specifically designed to match the styling of the DriveWorks CPQ Sales Portal. It is therefore not recommended that you edit this file, unless you are not intending for your configurator to match the CPQ Sales Portal interface.

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.