Changing the User Interface Look and Feel
Depending on your business needs, you can change the following aspects of the product user interface with NetSuite CPQ Configurator:
-
Information bar width and position – You can define how much space the column dedicated to the image, the validation messages, and the summary can occupy. For more information, see Changing the Information Bar Width and Position.
-
Question organization – Questions can be displayed horizontally or vertically. You can organize the question space by using horizontal lines or line breaks. For more information, see Organizing the Question Space.
-
Tab line, image container, and group appearance – Tabs can be displayed at the top of the question space or on its left. You can define the space between tabs in pixels and remove the space between the product name bar and the tab line. You can also remove borders for the image container and groups. For more information, see Changing the Appearance of Tabs, Groups, and the Image Container.
-
Label and header colors – You can define the color of the label and the label background for questions, tabs, and groups. For more information, see Changing Label and Header Colors for Questions, Tabs, and Groups.
To change the product user interface look and feel, go to CPQ > Configurator > Product Maintenance. Open a product for editing and set your preferences on the Appearance subtab. When you are finished, save the product record.
Changing the Information Bar Width and Position
NetSuite CPQ Configurator divides the product user interface space into 12 columns. The information bar occupies four columns out of those 12 and is located on the right of the question space. Four columns correspond to 1/3 of the user interface. The following image shows the product user interface with its 12-column grid:
You can change the width and the position of the information bar. In the Information Bar Width field, select a number between 1 and 11 to define how much space the information bar can occupy on the user interface. You should set the width to 5 or 6 columns maximum to leave enough space for questions.
To hide the information bar, select 0. To display the information bar below the question space, select 12. The information bar will occupy the entire user interface width.
Organizing the Question Space
With NetSuite CPQ Configurator, you can change the way questions are displayed on the product user interface. You can arrange questions in a single column (vertically) or multiple columns (horizontally). To define the question orientation, select your preferred option in the Layout Style field. If you arrange the questions horizontally, NetSuite CPQ Configurator automatically determines how many questions can fit in a row depending on their width.
You can define the question width in the Question Spans field of the question record. The question width depends on how many columns the question can occupy. The question space is divided into 12 columns. The following image shows the question space with its 12-column grid:
Using the horizontal layout, you can create line breaks and horizontal lines (called separators) in the question space. Line breaks and horizontal lines help organize the question space and make reading questions and answers easier. Line breaks make the questions appear on a new line on the user interface. You can use horizontal lines to separate groups of questions on the user interface.
To create a line break or a horizontal line:
-
In NetSuite, go to CPQ > Configurator > Product Maintenance.
-
Click Edit next to the product you want to modify.
-
On the Questions subtab, click New CPQC Question.
-
Provide a descriptive name for the line break or the horizontal line.
-
In the Code field, enter a unique identifier for rules and actions.
The code can contain only uppercase letters, numbers, and underscore characters. You can use a shortened version of the name as a code.
-
Provide a sequence number to determine the order in which the line break or the horizontal line is displayed on the user interface. Line breaks or horizontal lines with a lower sequence number are displayed higher on the user interface.
-
In the Answer Type field, select Break or Separator (for the horizontal line).
-
(Optional) Select a tab or a tab and group combination where you want to display the line break or the horizontal line.
-
Click Save.
Changing the Appearance of Tabs, Groups, and the Image Container
With NetSuite CPQ Configurator, you can change the position and the appearance of tabs, groups, and the image container.
You can display the tab line at the top or on the left of the question space. In the Tabs Line Position field, select your preferred option. To remove the space between the tab line and the product name bar, check the Remove tabs line padding box. You also can define the space between tabs in pixels. Enter a number between 0 and 5 in the Tab Border Width (PX) field.
The image container height and shape is defined by the highest non-resized and non-positioned image displayed in the container. The image container width is the same as the information bar width. To remove the borders around the image container, check the Remove CPI borders box.
To remove the borders around the groups, check the Remove group borders box.
Changing Label and Header Colors for Questions, Tabs, and Groups
With NetSuite CPQ Configurator, you can change the label and label background colors for questions, tabs, and groups. These options help you select colors that fit the color scheme of your business. NetSuite CPQ Configurator applies the selected colors to all questions, tabs, and groups belonging to the product.
You can select a color from the palette or enter the corresponding hexadecimal color value, such as #FFFFFF for white, in the following fields:
-
Question Header Font Color – The color of the question labels.
-
Question Header Background Color – The color behind question labels.
-
Tab Font Color – The color of the tab labels.
-
Tab Background Color – The color behind tab labels.
-
Tab Active Background Color – The color of the selected tab.
-
Group Header Font Color – The color of the group labels.
-
Group Header Background Color – The color behind group labels.