1. NetSuite CPQ
  2. NetSuite CPQ Configurator
  3. NetSuite CPQ Configurator Products
  4. Working with the Product User Interface
  5. Changing the Product Interface Look and Feel

Changing the Product Interface Look and Feel

Depending on your business needs, you can change the following aspects of the product interface with NetSuite CPQ Configurator:

To change the product interface look and feel, go to CPQ > Configurator > Product Maintenance. Edit a product and set your preferences on the Appearance subtab. When you're finished, save the product record.

Changing the Information Bar Width and Position

You can think of the product interface as a 12-column grid. The following image shows how this grid is arranged on the product interface.

                                                                                                                                                                                                                                                                                                                                                 

The information bar is placed to the right of the question space and occupies one-third of the product interface—4 out of the 12 columns.

To change the width and the position of the information bar, go to the Appearance subtab on the product record. In the Information Bar Width field, select a number between 1 and 11 to define the columns the information bar should occupy. You should set the width to a maximum of 5 or 6 columns 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 full width of the product interface.

Organizing the Question Space

You can change the way questions are displayed on the product interface. Questions can be arranged in a single column (vertically) or multiple columns (horizontally). To define the question orientation, select your preferred option in the Question Layout field on the product record. If you choose a horizontal layout, the number of questions that can fit in a row is automatically determined based on their width.

You can set the width of each question in the UI Columns field on the question record. This option determines how many columns the question can occupy on the product interface. You can think of the question space as a 12-column grid. The following image shows how the grid is arranged on the question space.

                                                                                                                                                                                                                                                                                                                                                                         

When using the horizontal layout, you can add line breaks (formerly called breaks) and horizontal lines (formerly called separators) to the question space. Line breaks and horizontal lines help organize the question space and make questions and answers easier to read. Line breaks force the next question to start on a new line. You can use horizontal lines to separate groups of questions on the product interface.

To create a line break or a horizontal line:

  1. In NetSuite, go to CPQ > Configurator > Product Maintenance.

  2. Click Edit next to the product you want to modify.

  3. On the Questions subtab, click New CPQC Question.

  4. Provide a descriptive name for the line break or the horizontal line.

  5. In the Code field, enter a unique identifier to use in rules and actions.

    The code can contain only uppercase letters, numbers, and underscores. You can use a shortened version of the name as the code.

  6. Provide a sequence number to determine the order in which the line break or the horizontal line is displayed on the product interface. Line breaks or horizontal lines with a lower sequence number are displayed higher on the product interface.

  7. In the Type field, select Line Break or Horizontal Line.

  8. (Optional) Select a tab or a tab and group combination where you want to display the line break or the horizontal line.

  9. Click Save.

Changing the Appearance of Tabs, Groups, and the Image Container

You can change the position and the appearance of tabs, groups, and the image container. To do this open the product record and go to the Appearance subtab.

You can display the tab line at the top or on the left side of the question space. In the Tab Line Position field, select your preferred option. To remove the space between the tab line and the product name bar, check the Remove space around the tab line box. You also can define the space between tabs in pixels. Enter a number between 0 and 5 in the Tab Spacing (px) field.

The height and shape of the image container are determined by the active image with the greatest height before any resizing or positioning. The width of the image container matches the width of the information bar. To remove the borders around the image container, check the Remove image 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

You can change the label and label background colors for questions, tabs, and groups to match color scheme of your business. The colors you choose apply to all questions, tabs, and groups in the product interface.

You can select a color from the palette or enter the hexadecimal value—for example, #FFFFFF for white. To change colors, use the following fields:

  • Question Label Color – Sets the color for question labels.

  • Question Header Color – Sets the color of the background behind question labels.

  • Tab Label Color – Sets the color for tab labels.

  • Tab Color –Sets the color of the background behind tab labels.

  • Active Tab Color – Sets the color for the selected tab header.

  • Group Label Color – Sets the color for group labels.

  • Group Header Color – Sets the color of the background behind group labels.

Related Topics

General Notices