{"id":5801,"date":"2016-07-26T15:13:39","date_gmt":"2016-07-26T07:13:39","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=5801"},"modified":"2024-05-30T15:23:29","modified_gmt":"2024-05-30T07:23:29","slug":"selecting-items","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/selecting-items\/","title":{"rendered":"Selecting Items"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<h2 class=\"page-subheading\"><span id=\"Overview\">Overview<\/span><\/h2>\n<p class=\"intro-text\">IFS OI Explorer pages are interactive, allowing you to select dates or periods, multiple locations, different product types, and so on - so that you can choose and analyse various data groupings, all on a single Explorer page.<\/p>\n<p class=\"intro-text\">This article describes how you can make some of these selections on an Explorer page.<\/p>\n<p class=\"intro-text\">Depending on the page design, you could have any of the following available:<\/p>\n<ul class=\"intro-text\">\n<li>Selection List<\/li>\n<li>Combo Box<\/li>\n<li>Option Links<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/\">Date and Time Pickers - covered in a separate topic<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Selection List<\/h2>\n<p class=\"intro-text\">The Selection List is used for selecting one or more values, for example several areas within a region.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"250\"><strong>Selection List<\/strong><\/td>\n<td>&nbsp;<\/td>\n<\/tr>\n<tr>\n<td>Selecting <em>Derby<\/em> and <em>Earl<\/em> from a Selection List.<\/td>\n<\/tr>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5905 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list.png\" alt=\"\" width=\"310\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list.png 310w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/multi-select-list-48x46.png 48w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>How to use a Selection List<\/strong><\/p>\n<p class=\"intro-text\">1. Type key letters into the Search box, to filter the list.<\/p>\n<p class=\"intro-text\">2. Click the check box for each item you want to select from the filtered list.<\/p>\n<p class=\"intro-text\">3. Click <strong>x<\/strong> to clear the search box.<\/p>\n<p class=\"intro-text\">4. Repeat steps 1 to 3 (filtering, then selecting items) until you have completed your selection.<\/p>\n<div id=\"attachment_6142\" style=\"width: 985px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-6142\" class=\"wp-image-6142 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1.png\" alt=\"\" width=\"975\" height=\"229\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1.png 975w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1-768x180.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingMultiSelect1-48x11.png 48w\" sizes=\"auto, (max-width: 975px) 100vw, 975px\" \/><\/a><p id=\"caption-attachment-6142\" class=\"wp-caption-text\">Selecting Values from a Selection List<\/p><\/div>\n<p class=\"note\">Notice how changing selections can update various parts of your page.<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Combo Box<\/h2>\n<p class=\"intro-text\">The Combo Box is used for selecting a single value, such as a product type.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"400\">Example: Selecting <em>WATER<\/em> from the Combo Box.<\/td>\n<\/tr>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5892 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox.png\" alt=\"\" width=\"187\" height=\"126\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox.png 187w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox-150x101.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/ComboBox-48x32.png 48w\" sizes=\"auto, (max-width: 187px) 100vw, 187px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>How to use a Combo Box<\/strong><\/p>\n<p class=\"intro-text\">Click the Combo Box, then click to select a value from the drop-down list that appears.<\/p>\n<div id=\"attachment_5922\" style=\"width: 428px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5922\" class=\"wp-image-5922 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox.png\" alt=\"\" width=\"418\" height=\"161\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox.png 418w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingComboBox-48x18.png 48w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><\/a><p id=\"caption-attachment-5922\" class=\"wp-caption-text\">Selecting a Value from the Combo Box<\/p><\/div>\n<p class=\"page-subheading\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Option Links<\/h2>\n<p class=\"intro-text\">The Option Links are used for selecting a single value, such as a product type.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"400\">Example: Selecting <em>GAS<\/em> from the different options in the Option Links.<\/td>\n<\/tr>\n<tr>\n<td>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6137 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1.png\" alt=\"\" width=\"149\" height=\"55\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1.png 149w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/OptionLinks1-48x18.png 48w\" sizes=\"auto, (max-width: 149px) 100vw, 149px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\"><strong>How to use Option Links<\/strong><\/p>\n<p class=\"intro-text\">Click any single option to make a selection.<\/p>\n<div id=\"attachment_5931\" style=\"width: 395px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5931\" class=\"wp-image-5931 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks.png\" alt=\"\" width=\"385\" height=\"71\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks.png 385w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/10\/UsingoptionLinks-48x9.png 48w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><\/a><p id=\"caption-attachment-5931\" class=\"wp-caption-text\">Selecting a Value from the Option Links<\/p><\/div>\n<p class=\"page-subheading\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Example of the Different Selectors<\/h2>\n<p class=\"intro-text\">Watch the video below to see how the Explorer page changes with different selections.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_953745074\" class=\"video-js vjs-default-skin\" width=\"932\" height=\"400\" controls preload=\"none\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/UsingSelections.mp4\" type='video\/mp4' \/>\r\n\t\t\r\n\t\t\r\n\t<\/video>\r\n\t<!-- End Video.js -->\r\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>IFS OI Explorer pages are interactive, allowing you to select date ranges, multiple locations, different product types, and so on - so that you can choose what data to focus on. This page describes the different selectors available and how to use them.<\/p>\n<p>This article describes how to use Combo Boxes, Multi Select Lists and Option Links, and also how to use the Selections List component to manage some of your selections.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/selecting-items\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":5802,"parent":4254,"menu_order":26,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[16,348,136,444],"class_list":["post-5801","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-combo-box","tag-date-and-time-pickers","tag-option-links","tag-selection-lists","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/5801","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=5801"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/5801\/revisions"}],"predecessor-version":[{"id":66961,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/5801\/revisions\/66961"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/4254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/5802"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=5801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=5801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=5801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}