{"id":937,"date":"2015-02-03T10:58:13","date_gmt":"2015-02-03T02:58:13","guid":{"rendered":"http:\/\/cadrondemo01\/help\/?page_id=937"},"modified":"2024-11-06T12:34:06","modified_gmt":"2024-11-06T04:34:06","slug":"combo-box-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/combo-box\/combo-box-4-3-2\/","title":{"rendered":"Combo Box (4.3.2)"},"content":{"rendered":"\n

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the Combo Box, see Combo Box<\/a>.<\/p>\n

Overview<\/h3>\n

A Combo Box displays values in a drop-down list. It is often used to enable the user to select a value to pass to other components\u00a0on the page.<\/p>\n

The following diagram shows a simple combo box added to a grid layout<\/a>, which takes values directly entered into the configuration options:<\/p>\n

\"combobox\"<\/a> <\/i><\/div>\n\n\n\n\n\n
Option Values<\/strong>:<\/td>\nThe text that you want the combo box to pass to the event it publishes. This can either be a set of values in text format, or you can populate the values from an event.<\/td>\n<\/tr>\n
Option Names<\/strong>:<\/td>\nThe text that you want the combo box to display in the drop-down. This can either be a set of values in text format, or you can populate the values from an event.<\/td>\n<\/tr>\n
Selected Option<\/strong>:<\/td>\nThe name of the event that is published\u00a0when the user selects a value from this combo box.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/h3>\n

Combo boxes are a simple yet powerful way of providing interactivity on your dashboards. You can pass the selected value to other controls on the dashboard by publishing an event through the Selected Option field.<\/p>\n

An event is something that causes a change on the page. For example, you could have a combo box that has several different options. Perhaps you want to have a chart that updates when a different selection is made from the combo box.<\/p>\n

In this tutorial, we'll look at adding a slightly more advanced combo box than that shown above. This combo box will get a list of currency values from an event, and will display friendly names in the drop-down list. By default, the combo box\u00a0will display Australian Dollars. To top it off, we'll show another control consuming the published event when a user selects something from the combo box.<\/p>\n

\"comboboxexpanded\"<\/p>\n

Creating a combo box is simple, but requires a little preparation. Let's go through this process, step-by-step.<\/p>\n

\n

Step by Step: Creating an Event Controlled\u00a0Combo Box<\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout - you can adjust the rows and columns if you like but it's not important for this exercise.<\/p>\n

Step 1. Add the combo box to the page<\/strong><\/p>\n

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

Drag and drop the Combo Box component\u00a0onto a grid cell.<\/p>\n


\n \u00a0Step 2.\u00a0\u00a0Configure the control<\/strong><\/p>\n

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

In this tutorial, we want to populate the combo box from events. The advantage in doing this is that other controls on the page can also subscribe to the same events, thus your charts and tables (for example)\u00a0can also be linked. Specify the following events:<\/p>\n