{"id":69586,"date":"2024-11-06T08:07:21","date_gmt":"2024-11-06T00:07:21","guid":{"rendered":"https:\/\/oihelp.corporate.ifs.com\/help\/?page_id=69586"},"modified":"2024-11-06T12:34:06","modified_gmt":"2024-11-06T04:34:06","slug":"combo-box-4-4","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/combo-box-4-4\/","title":{"rendered":"Combo Box (4.4)"},"content":{"rendered":"\n

This article applies to versions 4.4 of IFS OI Explorer. For the latest help, see Combo Box<\/a>.<\/p>\n

Overview<\/h2>\n

A combo box is used for selecting items from a drop-down list.<\/p>\n

The Combo Box component is similar to the Option Links<\/a>. Option Links displays options as a row of buttons, while Combo Box displays options as a list.<\/p>\n

The following diagram shows a preview of a Combo Box component displaying various currencies:<\/p>\n

\"\"<\/a><\/p>\n

\u00a0<\/div>\n\n\n\n
\n\n\n\n\n\n
Option Values<\/strong>:<\/td>\nThese are the options that set the variable<\/a> defined in Selected Option<\/strong>.<\/td>\n<\/tr>\n
Option Names<\/strong>:<\/td>\nIf specified, then this is the text displayed in the Combo Box list. Each value in Option Names<\/em> is linked to the corresponding (by list position) value in Option Values<\/em>. If Option Names<\/em> are unspecified, then Option Values<\/em> are displayed.<\/td>\n<\/tr>\n
Selected Option<\/strong>:<\/td>\nThe variable that uses the selected Option Value<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n\n\n
1: <\/strong>Here you can see Option Names<\/em> displayed in the Combo Box.<\/td>\n<\/tr>\n
2: <\/strong>Australian Dollars<\/em> is the selected item.<\/td>\n<\/tr>\n
3: <\/strong>AUD<\/em> corresponds to Australian Dollars<\/em>, each being in the first position on the Option Values<\/strong> and Option Names<\/strong> list, respectively. Thus the Option Value<\/strong> of AUD<\/em> is assigned to the Selected Option<\/strong>, selectedCurrency<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Related: Using a Combo Box<\/a> in display mode, Adding a new\u00a0Combo Box style<\/a><\/p>\n

 <\/p>\n

\n

Interaction with other Controls<\/h2>\n

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<\/strong> property's variable.<\/p>\n

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.<\/p>\n\r\n\t\r\n\t

This is done by using the Combo Box's Selected Option<\/strong> 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<\/a>.<\/p>\n

 <\/p>\n

\n

Tutorial:\u00a0Adding a Combo Box with Default Value<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we'll add a simple Combo Box component, and give it a default value of Q2<\/em>.<\/p>\n

\"\"<\/a><\/p>\n

Note: <\/strong>Before you start the tutorial, prepare a page in Studio.<\/a><\/p>\n

\"\"<\/a><\/p>\n

Step 1. Add a Combo Box to the Page.<\/strong><\/p>\n

Drag and drop a Combo Box component onto a grid cell.\u00a0The Combo Box is in the Control \"Controls\"<\/a>\u00a0group.<\/p>\n

\"\"<\/a><\/p>\n

Step 2. Configure the Combo Box<\/strong><\/p>\n

In this example we will use values for the Option Values<\/strong> and Option Names<\/strong>, by selecting the Values<\/em> \"\" data category.<\/p>\n

Click the Combo Box<\/strong> component to configure it:<\/p>\n\n\n\n
\n\n\n\n\n\n\n\n\n
\u00a0<\/td>\n1. Add Option Values<\/strong>:<\/td>\nFollow the instructions in Using Value Data<\/a> to add the following list of values: Q1, Q2, Q3<\/strong> and Q4<\/strong>.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n2. Add Option Names<\/strong>:<\/td>\nFollow the instructions in Using Value Data<\/a> to add the following list of values: Quarter 1, Quarter 2, Quarter 3<\/strong> and Quarter 4<\/strong>.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n
 <\/td>\n3. Add Selected Option<\/strong>:<\/td>\nIn the Selected Option<\/strong> drop-down list, type selectedQuarter<\/em>.<\/td>\n<\/tr>\n
 <\/td>\n <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
\u00a0<\/td>\n <\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Next, open the Default Values<\/strong> panel:<\/p>\n\n\n\n
\n\n\n\n
\u00a0<\/td>\n4. Add a Default Value<\/strong>:<\/td>\nIn Default Values<\/strong>, add a default pair: selectedQuarter<\/em> (Variable Name) of type Text<\/em>, and Q2<\/em> (Default Value). See how to add Default Values<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\n
\u00a0<\/td>\n <\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

In preview mode, the Combo Box shows the four Option Names<\/em>, with Quarter 2<\/strong> selected.<\/p>\n

\"\"<\/a><\/p>\n

See how to use Dataset Data<\/a> instead of Values, to populate Option Values<\/strong> and Option Names<\/strong>.<\/p>\n

\n

Release History<\/h2>\n