Home Explorer Studio Components Combo Box

Combo Box

This article applies to versions 4.4 and later of P2 Explorer. For more, see Release History.

Overview

A combo box is used for selecting items from a drop-down list.

The Combo Box component is similar to the Option Links. Option Links displays options as a row of buttons, while Combo Box displays options as a list.

The following diagram shows a preview of a Combo Box component displaying various currencies:

 
Option Values: These are the options that set the variable defined in Selected Option.
Option Names: If specified, then this is the text displayed in the Combo Box list. Each value in Option Names is linked to the corresponding (by list position) value in Option Values. If Option Names are unspecified, then Option Values are displayed.
Selected Option: The variable that uses the selected Option Value.
1: Here you can see Option Names displayed in the Combo Box.
2: Australian Dollars is the selected item.
3: AUD corresponds to Australian Dollars, each being in the first position on the Option Values and Option Names list, respectively. Thus the Option Value of AUD is assigned to the Selected Option, selectedCurrency.

Related: Using a Combo Box in display mode, Adding a new Combo Box style

 

Interaction with other Controls

The Combo Box provides interactivity on your pages. You can pass the selected value to other components on the page, using a variable set in the Combo Box's Selected Option property's variable.

Watch the video below to how the Combo Box selections change a Chart's data, in preview mode. Note how the chart colour and values, as well as the legend, change as different options (products) are selected from the combo box.

This is done by using the Combo Box's Selected Option variable as configured options in some of the Chart's bar series properties. To For more detail, follow one of the Chart tutorials: Tutorial 3: Series Configuration using Variables.

 

Tutorial: Adding a Combo Box with Default Value

If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.

In this tutorial, we'll add a simple Combo Box component, and give it a default value of Q2.

Note: Before you start the tutorial, prepare a page in Studio.

Step 1. Add a Combo Box to the Page.

Drag and drop a Combo Box component onto a grid cell. The Combo Box is in the Control Controls group.

Step 2. Configure the Combo Box

In this example we will use values for the Option Values and Option Names, by selecting the Values data category.

Click the Combo Box component to configure it:

  1. Add Option Values: Follow the instructions in Using Value Data to add the following list of values: Q1, Q2, Q3 and Q4.
   
  2. Add Option Names: Follow the instructions in Using Value Data to add the following list of values: Quarter 1, Quarter 2, Quarter 3 and Quarter 4.
   
  3. Add Selected Option: In the Selected Option drop-down list, type selectedQuarter.
   
   

Next, open the Default Values panel:

  4. Add a Default Value: In Default Values, add a default pair: selectedQuarter (Variable Name) of type Text, and Q2 (Default Value). See how to add Default Values.
   

In preview mode, the Combo Box shows the four Option Names, with Quarter 2 selected.

See how to use Dataset Data instead of Values, to populate Option Values and Option Names.

Release History

Comments are closed