Widening Dropdowns and Free Input boxes

Use Case

Sometimes additional information needs to be displayed on screen and the width of the standard drop down attribute is not sufficient to display all data. In this situation it may be necessary to increase the width that a drop down menu displays on screen.

Problem

The width of dropdown attributes is fixed based on what is displayed on screen. In many situations the display values of attributes extend beyond this width making the entire value unreadable.

Figure 2.1 - Dropdown while selecting a value


Figure 2.2 - Dropdown after selecting a value


Figure 2.1 shows the dropdown while selecting a value, all of the information is visible. However, Figure 2.2 shows that upon selecting a value, a portion of the information is cut off making it difficult to quickly read what was selected.

Solution

To resolve this problem, the width of the dropdown attributes can be increased. This allows for a customized look between products or even within tabs of the same product.


Figure 3.1 - Product Configuration Template location in CPQ Setup


The xsl file you want to download is located in CPQ Setup ⇒ UI Design ⇒ Product Configuration Templates as shown in figure 3.1. Under “Add New”, you can then download the xsl file to be edited under “Configurator XSLT”


Figure 3.2 - Configurator XSLT dropdown


To change the width of dropdowns,

  • Search for <xsl:template name=“ShowDropDown”>
  • A few lines down, you will see a line <select size=“1” style=“width: 195px;”> if you change the size under width, it will display wider on the screen.

To change the width of a free input boxes,

  • Search for <xsl:template name=“ShowFreeForm”>,
  • A fair way down, there will be a line <input type=“text”>,
  • Change that line to <input type=“text” style=“width: 300px”> or whatever width you desire.

After making these changes save the file as something different such as WiderDropDowns300px.xsl.
Be sure to save it with an .xsl extension.
Upload this file in the same area as downloaded except click the up arrow as in figure 3.3. Select the file you have created.


Figure 3.3 - Product Configuration Template page showing “Upload” arrow


Pick a name for the template and Save it Then in the Product Editor for your product, you can pick the new template for that tab.


Figure 3.4 - Configuration Layout tab in Product Editor showing how to assign a configuration template to a tab in a product



Figure 3.5 - Wider dropdown after changes have been made


You are here: CallidusCloud CPQ Online HelpBest PracticesProduct AdministrationWidening Dropdowns and Free Input boxes