{"id":12030,"date":"2017-12-20T11:01:35","date_gmt":"2017-12-20T03:01:35","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=12030"},"modified":"2024-11-12T15:24:05","modified_gmt":"2024-11-12T07:24:05","slug":"combo-box","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/","title":{"rendered":"Combo Box"},"content":{"rendered":"\n

This article applies to versions 4.17 and later of IFS OI Explorer. Note, some screenshots on this page may be of earlier versions. For more, see Release History<\/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 equipment operational states:<\/p>\n

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

\u00a0<\/div>\n\n\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
Select First Item<\/strong><\/td>\nWhen checked the first item in the list is selected by default.<\/td>\n<\/tr>\n
Allow Searching<\/strong><\/td>\nWhen checked a filter bar is added to the Combo Box. This allows a phrase to be entered to filter the list of items.<\/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>Operating<\/em>\u00a0is the selected item.<\/td>\n<\/tr>\n
3: <\/strong>OPR<\/em> corresponds to Operating<\/em>, each being in the first position on the Option Values<\/strong> and Option Names<\/strong> list, respectively. Thus the Option Value<\/strong> of OPR<\/em>\u00a0is assigned to the Selected Option<\/strong>, selectedState<\/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: Part 3: Bar Chart Driven by Combo Box.<\/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
1. 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
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
2. 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
\u00a0<\/td>\n\u00a0<\/td>\n<\/tr>\n
3. Add Selected Option<\/strong>:<\/td>\nIn the Selected Option<\/strong> drop-down list, type selectedQuarter<\/em>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n\n\n\n\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
4. 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
\"\"<\/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