{"id":1676,"date":"2015-02-19T00:17:10","date_gmt":"2015-02-18T16:17:10","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1676"},"modified":"2024-06-11T11:05:43","modified_gmt":"2024-06-11T03:05:43","slug":"selection-list-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/selection-list\/selection-list-4-3-2\/","title":{"rendered":"Selection List (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 selection list, see Selection List<\/a>.<\/p>\n

Overview<\/h3>\n

The Selection List\u00a0shows a list of values where the selection is made by another component. The Selection List must be used in conjunction with another component\u00a0that publishes a list as an event.<\/p>\n

The following diagram shows a Selection List\u00a0being configured alongside an Entity Selector:<\/p>\n

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

\u00a0<\/div>\n\n\n\n
List Items<\/strong>:<\/td>\nThe name of the event from which the list items are obtained.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/h3>\n

A Selection List is used when you want to view the items that have been selected from a list. The component\u00a0listens to an event generated by another component, and uses this to retrieve the list of values that it displays.<\/p>\n

For example, you could have an Entity Selector component\u00a0that offers a number of wells for selection. Perhaps you want the users to choose a maximum of 10 wells, and have the names of those wells displayed by the Selection List.<\/p>\n

In this tutorial, we'll look at doing just that. We'll create an Entity Selector that allows users to choose a maximum of 10 wells from a long list, and the chosen wells will be displayed by the Selection List.<\/p>\n

\"selectionlistlive\"<\/p>\n

Let's go through this process, step-by-step.<\/p>\n

\n

Step by Step: Creating a Selection List Driven by an Entity Selector<\/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

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n

Step 1. Add the Selection List to the page<\/strong><\/p>\n

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

Drag and drop the Selection List\u00a0component\u00a0onto a grid cell.<\/p>\n

\u00a0<\/p>\n

Step 2.\u00a0\u00a0Configure the\u00a0Selection List<\/strong><\/p>\n

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

In this tutorial, we want to populate the Selection List from an event that is generated by an Entity Selector. \u00a0Let's call this \"selectedEntities\".<\/em><\/p>\n

\u00a0<\/p>\n

\u00a0Step 3.\u00a0\u00a0Add and Configure an Entity Selector<\/strong><\/p>\n

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

Drag and drop the Entity Selector<\/a>\u00a0component\u00a0from the list on the left onto an empty cell. You will notice that several of the configuration values are prepopulated. In fact, the Selected Entities value is already prepopulated with the event name that we used in the previous step. This is the event that will provide the list of values to the Selection List. We still need to make some tweaks though, so let's change the following:<\/p>\n