{"id":15351,"date":"2016-05-30T13:01:57","date_gmt":"2016-05-30T05:01:57","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=15351"},"modified":"2024-06-11T11:05:43","modified_gmt":"2024-06-11T03:05:43","slug":"multi-select-list-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/selection-list\/multi-select-list-4-3-2\/","title":{"rendered":"Multi Select List (4.3.2)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to the Multi Select List in versions 4.3.2 and earlier of P2 Explorer. For help on the latest version, see <span class=\"removed_link\" title=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/multi-select-list\/\">Multi Select List<\/span>.<\/p>\n<h2 class=\"page-subheading\"><span id=\"Overview\">Overview<\/span><\/h2>\n<p class=\"intro-text\">The Multi Select List allows a user to select multiple items from a defined list. If there are more list items than will fit on the page, the Multi Select List displays a scrollbar that provides\u00a0\"infinite scrolling\" , and also allows users to filter the list options.<\/p>\n<p class=\"intro-text\">The Multi Select List publishes an event that is a list of items. This event is typically used as an input to a dataset to filter its data. For example, you may want to obtain a subset of entities from a dataset.<\/p>\n<p class=\"intro-text\">The following diagram shows a Multi Select List component being configured:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselectlist.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3408\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselectlist-800x266.png\" alt=\"multiselectlist\" width=\"800\" height=\"266\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Option Values<\/strong>:<\/td>\n<td>The text that you want the control\u00a0to pass to the event it publishes.\u00a0This can either be a set of values in text format, or you can populate the values from an <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event<\/a>. This value is required.<\/td>\n<\/tr>\n<tr>\n<td width=\"130\"><strong>Option Names<\/strong>:<\/td>\n<td>The text that you want the control to display in the list. This can either be a set of values in text format, or you can populate the values from an event. The names must be listed in the same order as the values.<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected Option<\/strong>:<\/td>\n<td>The name of the event that is published\u00a0when the user selects a value from this control. This value is required.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<blockquote>\n<p class=\"intro-text\">While this component could be used on a page to select Entities returned from a query, it is important to note that functionality from P2 Server, such as Template Filtering and Data Source Name Replacement, will not be available from this component. Essentially, Explorer will treat these items as text, and not apply any special functionality which could possibly be associated with Entities.<\/p>\n<\/blockquote>\n<hr \/>\n<h2 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial<\/span><\/h2>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at populating the Multi Select List with entities from a dataset. We'll then use this list to drive a chart that shows the\u00a0downtime hours for the entities selected from the Multi Select List.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/downtimeanalysis.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3436\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/downtimeanalysis-800x472.png\" alt=\"downtimeanalysis\" width=\"800\" height=\"472\" \/><\/a><\/p>\n<p class=\"intro-text\">Let\u2019s go through this process, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Step_by_Step_Creating_an_Event_Controlled_Label\">Step by Step: Populating a Multi Select List From a Dataset<\/span><\/h3>\n<p class=\"intro-text\">Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid<\/a>\u00a0layout \u2013 you can adjust the rows and columns if you like but it\u2019s not important for this exercise.<\/p>\n<p class=\"intro-text\">You may need to adjust the configuration to suit the available\u00a0data at your site.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Add and Configure a Text Label<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselecttext.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3428\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselecttext-800x416.png\" alt=\"multiselecttext\" width=\"800\" height=\"416\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop\u00a0the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/text-label\/\">Text Label<\/a>\u00a0component\u00a0onto a grid cell, and configure it as follows:<\/p>\n<ul class=\"intro-text\">\n<li><strong>Title<\/strong>: (selected)<\/li>\n<li><strong>Underline<\/strong>: (selected)<\/li>\n<li><strong>Content<\/strong>: DOWNTIME ANALYSIS<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add the Multi Select List\u00a0to the page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselectdrag.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3429 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multiselectdrag-800x415.png\" alt=\"\" width=\"800\" height=\"415\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">Drag and drop\u00a0the Multi Select List\u00a0component\u00a0onto a grid cell.<\/p>\n<p class=\"intro-text\">\u00a0<strong>Step 3.\u00a0\u00a0Configure the\u00a0Multi Select List<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multiselectdrag2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3438 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multiselectdrag2-800x342.png\" alt=\"\" width=\"800\" height=\"342\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">In this tutorial, we want to populate the Multi Select List from an event that publishes a list of entities. We will create this event in the following steps. For now, configure the Multi Select List as follows:\u00a0<\/p>\n<ul class=\"intro-text\">\n<li><strong>Option Values<\/strong>: \u00a0(Event) Entities<\/li>\n<li><strong>Option Names<\/strong>:\u00a0(leave this blank)<\/li>\n<li><strong>Selected Option<\/strong>: selectedOptions<\/li>\n<\/ul>\n<p class=\"intro-text\">You\u2019ll notice that the Selected Option event is already filled in with a default event name. You can choose to change this name if you want, but often there\u2019s no real need to.<\/p>\n<p class=\"intro-text\">\u00a0<strong>Step 4. \u00a0Add Data<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multilistdata2.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3434\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multilistdata2-800x544.png\" alt=\"multilistdata2\" width=\"800\" height=\"544\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">So your Multi Select List is now configured, but you need to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">add some data<\/a> in order for it to do anything. In this example, we're going to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\">add 2 datasets<\/a>. The first one we will use to obtain a list of entities to populate the Multi Select List.\u00a0Let's do this now.<\/p>\n<ul class=\"intro-text\">\n<li>Add the MiningDowntimePivot<em>\u00a0<\/em>dataset, and configure it as follows:\n<ul class=\"intro-text\">\n<li>StartDate: (DateTime)\u00a001\/04\/2015 12:00:00 AM<\/li>\n<li>EndDate:\u00a0(DateTime) 30\/04\/2015 12:00:00 AM<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">Let's also add an event for this dataset. This is how the Multi Select List will get populated:<\/p>\n<ul class=\"intro-text\">\n<li>Click the \u201cAdd\u201d button to add the event.<\/li>\n<li>Configure the event as follows:\n<ul class=\"intro-text\">\n<li>Click \u201cList\u201d<\/li>\n<li>Event:\u00a0Entities<\/li>\n<li>Field:\u00a0Entity<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You'll see the Multi Select List now gets populated with a list of entities. Now we need to add a second dataset\u00a0that shows us downtime data for oil wells.\u00a0This dataset accepts the event published from the Multi Select List (selectedOptions) as an input.\u00a0<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3432\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/04\/multilistdata-800x493.png\" alt=\"multilistdata\" width=\"800\" height=\"493\" \/><\/p>\n<ul class=\"intro-text\">\n<li>Add the OilDowntimePivot<em>\u00a0<\/em>dataset, and configure it as follows:\n<ul class=\"intro-text\">\n<li>StartDate: (DateTime)\u00a001\/04\/2015 12:00:00 AM<\/li>\n<li>EndDate:\u00a0(DateTime) 30\/04\/2015 12:00:00 AM<\/li>\n<li>EntitiesList: (Event)\u00a0selectedOptions<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">Right now, if you preview your dataset, you will not see any data in the table. This is because no entities have been selected.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1585] lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Keeping the Preview window open, select some entities from the Multi Select List. You should see the Preview window being populated with data.<\/li>\n<li>Toggle the preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1585] lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a>\u00a0button off to proceed with the next step.<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 5. Add a Chart<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multilistchart.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3435\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/multilistchart-800x457.png\" alt=\"multilistchart\" width=\"800\" height=\"457\" \/><\/a>\u00a0<\/p>\n<p class=\"intro-text\">This is the last piece of the puzzle that will show how you can use the Multi Select List. Let\u2019s add a <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">chart<\/a> and observe it being driven by the Multi Select List.<\/p>\n<p class=\"intro-text\">Drag and drop a Chart\u00a0onto another cell on the page, and configure it as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data: OilDowntimePivot1<\/li>\n<li>Series:\n<ul class=\"intro-text\">\n<li>Type: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\">Bar series<\/a><\/li>\n<li>Y Column: (Text) Downtime Hours<\/li>\n<li>Name: (Text)\u00a0Hours<\/li>\n<\/ul>\n<\/li>\n<li>X Axis:\n<ul class=\"intro-text\">\n<li>Column: (Text)\u00a0Entity<\/li>\n<li>Date Type: String<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">You can configure more chart options if you want, but it\u2019s not necessary for this tutorial.<\/p>\n<p class=\"intro-text\">This chart refers directly to the OilDowntimePivot dataset, and gets the downtime hours for each entity. The only entities available in this dataset are the ones that have been selected from the Multi Select List. The output of the list has been used as an input to restrict the data to only those selected entities.<\/p>\n<p class=\"intro-text\"><strong>Step 6. All done!\u00a0<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/downtimeanalysis.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-3436\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/05\/downtimeanalysis-800x472.png\" alt=\"downtimeanalysis\" width=\"800\" height=\"472\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a fully functioning Multi Select List that displays a list of entities. When you select entities, their downtime hours are displayed in the chart.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1410] lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a>\u00a0button on the Studio toolbar to see what your page will look like in run-time.<\/li>\n<li>Watch the chart\u00a0change as you select\u00a0different entities\u00a0in\u00a0the Multi Select List.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" alt=\"save\" width=\"48\" height=\"53\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" \/>\u00a0Don\u2019t forget to <a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Multi Select List allows a user to select multiple items from a defined list. If there are more list items than will fit on the page, the Multi Select List displays a scrollbar that provides\u00a0\"infinite scrolling\" , and also allows users to filter the list options. This article describes how to configure a multi select list, and applies to versions 4.3.2 and earlier of P2 Explorer.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/selection-list\/multi-select-list-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4509,"parent":17357,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[444],"class_list":["post-15351","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-selection-lists","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=15351"}],"version-history":[{"count":1,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15351\/revisions"}],"predecessor-version":[{"id":67144,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15351\/revisions\/67144"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4509"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=15351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=15351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=15351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}