Working with Popup Table and Popup List Answers
Popup tables and popup lists (formerly called picklists and picklist dropboxes) are answer types that display filtered content from product tables as options. For more information about the basic steps to create answers, see Working with Answers.
You can create popup tables for input box questions, and popup lists for both input box and qTable questions. For more information, see Storing Answer Options in Tables, Input Box Questions, and QTable Questions.
When creating a popup table or list, you must specify the product table that stores the options and the column that provides the values for the input box field. When users make a selection in a popup table or list, they select an entire row of the product table. However, the input box displays only the value of the column you chose during the setup. You can map the rest of the values to other fields. For more information, see Completing Questions or Answers Dynamically from Popup Tables or Lists Selections.
Users open the popup table or list by clicking the input box or the double arrow button on the product interface. You can let users select multiple options, and the values will appear separated by commas in the input box. To select multiple options on the product interface, users must hold down the Ctrl key. You can add a tooltip to let them know that they can perform this action and how to do it. Search boxes are available to help users find specific values in the popup tables or lists.
If you make a popup table, a popup list, or the associated input box question read-only, the popup table or list won't show up for users. You can still let them view the popup table or list when they click the input box button. This option is useful to show features and options that may be available if users make a different selection.
For more information about popup tables and lists see, Working with Popup Table and List Answers for Input Box Questions and Working with Popup List Answers for QTable Questions.
Working with Popup Table and List Answers for Input Box Questions
When creating popup tables or lists as answers for input box questions, follow the basic steps mentioned in this help topic.
To work with a popup table or list:
-
On the Answers subtab of an input box question, click New CPQC Answer.
-
In the Input Box Answer Type field, select one of the following options:
-
Popup Table – Creates a popup table (formerly called a picklist).
-
Popup List – Creates a popup list (formerly called a picklist dropbox).
-
-
Click the Popup Tables & Lists subtab.
-
Go to the General Information section.
-
In the Reference Table field, select the product table you want to associate with the popup table or list.
-
In the Reference Column field, select the column that provides the value to display in the input box.
-
To let users select multiple options in a popup table or list, check the Allow multiple selections box.
Note:This option isn't available for qTable popup lists.
-
To let users view popup tables or lists by clicking the button or the double arrow when the field is read-only, check the View when read-only box. Users still won't be able to enter data in the field.
Note:This option isn't available for qTable popup lists.
-
Click Save.
After finishing these steps shared by popup tables and popup lists, also complete additional steps specific to each answer type. For more information, see the following help topics:
Defining the Popup Table Content
When creating a popup table as an answer to an input box question, you must specify the product table columns you want to display to users. You can also add labels to the columns.
To define the product table columns to display in the popup table:
-
Edit the popup table answer.
-
Click the Popup Tables & Lists subtab.
-
Click the open icon next to the Select Product Table Columns field.
-
In the popup window, select the column from the product table that you want to display in the popup table.
-
Provide a label for the column. This label is displayed to users.
-
To display the column in the popup table, check the Visible box next to the product table column selected.
If you want to map the column but not display it, leave the box unchecked.
-
To add more product table columns in the popup table, click the Add Column button. Repeat steps 4 – 6.
-
After adding all the required columns, click Done to add the information to the Select Product Table Columns field.
Your preferences are saved to this field in JSON format. This is the syntax:
[{"data":"column1","title":"label1","visible":true},{"data":"column2","title":"label2","visible":true}]
-
Click Save.
Filtering the Popup Table Content
After choosing the product table and the columns to display in the popup table, you can filter the product table by specific values. The popup table will display the matching results.
Two options are available to provide the values for filtering:
-
Manually entering the value.
-
Taking the value from a question or an answer.
This option dynamically adapts the content of the popup table depending on specific user inputs.
You can create multiple filters with a variety of conditions, such as containing or being equal to the value for filtering. To associate the filter with checkboxes or radio buttons, one of the product table columns must contain true and false as values.
To filter popup tables by value:
-
Edit the popup table answer.
-
Click the Popup Tables & Lists subtab.
-
Click the open icon next to the Product Table Filter field.
-
In the popup window, select the product table column you want to filter.
-
Select a condition, such as contains or equals to.
-
To select the value to filter the column, two options are available:
-
In the Custom Value field, enter a value.
-
Select a question or an answer that contains text.
-
-
To add another filter:
-
Click the Add Filter button.
-
Select a logical operator, such as AND or OR.
-
Repeat steps 4 – 6.
-
-
To save your filtering preferences, click Done.
-
Click Save.
Creating a Popup Table Filter for Users
You can create a filter to let users narrow down the popup table content. The filter will list the product table columns you included in the popup table, and the column names will match the labels you assigned to them.
The filter is displayed above the popup table on the product interface. Users can filter the popup table by checking the boxes next to the available options for each column.
To create a popup table filter for users:
-
Edit the popup table answer.
-
Click the Popup Tables & Lists subtab.
-
To define the columns that users can select for filtering, click the open icon next to the UI Popup Table Filter field.
-
In the popup window, select the column you want to include in the product interface filter.
In this field, you can view the column names from the product table. However, the filter will display the labels you assigned to columns when creating the popup table.
-
In the Filter Type column, select the Multiple Choice option.
Users will always be able to select multiple options from the filter.
-
To add other columns to the user interface filter, click Add Column and repeat steps 4 – 5.
-
To save your filtering preferences, click Done.
-
Click Save.
Defining the Popup List Content
When creating a popup list (formerly called a picklist dropbox), you must specify the product table columns that provide the options for the popup list. The popup list displays the values of the selected columns in a dropdown list on the product interface.
To ensure that column values are properly displayed:
-
Enclose the column names between curly braces, for example
{Column Name}
. -
Enter the column names exactly as they appear in the product table.
For example, you have the following product table:
Color Name |
Color Code |
Navy Blue |
NVY |
Gray |
GRY |
Gold |
GLD |
Suppose you want to display the color name and the color code in a popup list. You also want the color code in parentheses. To achieve this result, use the following syntax:
{Color Name} ({Color Code})
The options displayed in the list would be:
-
Navy Blue (NVY)
-
Gray (GRY)
-
Gold (GLD)
You can also define the look and feel of the options by applying formatting to the column names. You can change the font and size or make the text bold, italic, or underlined. To check the formatting and view the HTML code, click the Source button. When adding formatting, place the tags outside the curly braces. See the following example:
<b>{Column Name}</b>
After the popup list loads on the product interface, users can filter it using the search box. If the popup list is associated with a dynamic table with a search filter, you can let users search it before it loads. The popup list will only return the options matching the value entered in the search box. This option saves users time when working with large lists that may take a while to load. For more information about dynamic tables, see Storing Answer Options in Tables.
To define the popup list information:
-
Edit the popup list answer.
-
Click the Popup Tables & Lists subtab.
-
In the Popup List Options field, enter the column names between curly braces.
-
To let users search a popup list before it loads, check the Allow search before loading box.
Note:You can only use this option if the popup lists is linked to a dynamic table with a search filter.
-
Click Save.
Working with Popup List Answers for QTable Questions
You can create popup lists (formerly called picklist dropboxes) as answers for qTable questions. QTable popup lists work the same way as popup lists for input boxes. For more information, see Defining the Popup List Content.
To create a popup list answer for a qTable question:
-
On the Answers subtab, click New CPQC Answer.
-
In the QTable Column Type dropdown list, select Popup List.
-
Click the Popup Tables & Lists subtab.
-
Go to the General Information section.
-
In the Reference Table field, select the product table associated with the qTable popup list.
-
In the Reference Column field, select the column that provides the value displayed in the qTable cell.
-
In the Popup List Options field, define the product table columns you want to display in the popup list.
To enter the column names, use the following syntax:
{Column Name}
Note:When adding formatting, place tags outside the curly braces. See the following example:
<b>{Column Name}</b>
You can check the formatting by clicking the Source button.
-
Click Save.