{"id":14627,"date":"2016-05-02T14:25:15","date_gmt":"2016-05-02T06:25:15","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14627"},"modified":"2017-12-14T14:34:29","modified_gmt":"2017-12-14T06:34:29","slug":"hierarchy-picker-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy-picker\/hierarchy-picker-4-3-2\/","title":{"rendered":"Hierarchy Picker (4.3.2)"},"content":{"rendered":"<p class=\"page-subheading\"><\/p>\n<p class=\"left-bar\">This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Hierarchy Picker, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy-picker\/\">Hierarchy Picker<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">The Hierarchy Picker displays all the available hierarchies in a drop-down list, and allows the user to choose one of these hierarchies. The name of the selected hierarchy is displayed next to the drop-down list.<\/p>\n<p class=\"intro-text\">The following diagram shows a hierarchy picker:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2711\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig.png\" alt=\"hierarchypickerconfig\" width=\"713\" height=\"247\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig.png 713w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig-48x17.png 48w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Selected Hierarchy<\/strong>:<\/td>\n<td>\n<p>The hierarchy that has been selected from the Hierarchy Picker. This is always an <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event<\/a>\u00a0that can both publish and subscribe. The entered value is\u00a0the name of the event that is published when an entity is selected from the drop-down list. It is also the name of the event that the Hierarchy Picker\u00a0listens to in order to determine the hierarchy\u00a0to display.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 class=\"page-subheading\"><span id=\"Tutorial\">Tutorial<\/span><\/h3>\n<p class=\"intro-text\">In this tutorial, we\u2019ll look at adding a Hierarchy Picker\u00a0to a page, as well as a Hierarchy component . When the user selects a hierarchy from the drop-down list in the Hierarchy Picker, the entities displayed in the Hierarchy component change depending on what is selected.\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png\" alt=\"hierarchypickerexample\" width=\"229\" height=\"448\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png 229w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-77x150.png 77w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-25x48.png 25w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/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_a_Breadcrumb_That_Shows_the_Hierarchy_of_a_Selected_Entity\">Step by Step: Creating a Hierarchy Picker\u00a0That Shows the Entities in the Selected Hierarchy<\/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\">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<p class=\"intro-text\"><strong>Step 1. Add the Hierarchy Picker\u00a0to the page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerdrag.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2713 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerdrag-800x466.png\" alt=\"hierarchypickerdrag\" width=\"800\" height=\"466\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Hierarchy Picker\u00a0component\u00a0onto a grid cell.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\">\u00a0<strong>Step 2.\u00a0\u00a0Configure the\u00a0Hierarchy Picker<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2719 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2.png\" alt=\"hierarchypickerconfig2\" width=\"713\" height=\"229\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2.png 713w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerconfig2-48x15.png 48w\" sizes=\"auto, (max-width: 713px) 100vw, 713px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, you\u2019ll notice that the Selected Hierarchy 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. Specify the following events:<\/p>\n<ul class=\"intro-text\">\n<li>Selected Hierarchy: selectedHierarchy<\/li>\n<\/ul>\n<p class=\"intro-text\"><em>Selected Hierarchy<\/em>\u00a0is always an event, so that other components on the page will dynamically update when the Hierarchy Picker\u00a0publishes the hierarchy\u00a0that the user has selected.<\/p>\n<ul class=\"intro-text\">\n<li>This is often used to link components such as charts and tables.<\/li>\n<li>It\u00a0also means that other components on the page can listen to the event that is published when a user clicks on an item in the breadcrumb, which in turn will dynamically update the components on the page.\u00a0\u00a0<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<strong>Step 3. \u00a0Add and configure a Hierarchy component<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchydrag.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2721 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchydrag-800x467.png\" alt=\"hierarchydrag\" width=\"800\" height=\"467\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the <a title=\"Hierarchy\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/hierarchy\/\">Hierarchy<\/a> component\u00a0onto a grid cell, and configure it as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Page Size: (Number) 10<\/li>\n<li>Single Selection Mode: (unselected)<\/li>\n<li>Selected Entities:\u00a0selectedEntities<\/li>\n<li>Hierarchy Name: (Event)\u00a0selectedHierarchy<\/li>\n<\/ul>\n<p class=\"intro-text\">You will notice that <em>Selected Entities<\/em> and <em>Hierarchy Name<\/em> already have some defaults configured. You can change this if you like, but you will need to remember your changes and substitute appropriately for the next step.<\/p>\n<p class=\"intro-text\"><strong>\u00a0<\/strong><strong>Step 4. \u00a0Set the event defaults<\/strong>\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerevents.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2722 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerevents-800x323.png\" alt=\"hierarchypickerevents\" width=\"800\" height=\"323\" \/><\/a><\/p>\n<p class=\"intro-text\">At the moment, the page shows nothing because the user hasn\u2019t selected anything. Let\u2019s change that and get some default data to display. We do this by creating defaults for the <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">events<\/a> specified in the components in the previous steps.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click the <em><strong>Event\u00a0Defaults<\/strong><\/em> button on the Studio toolbar.<\/li>\n<li>Add\u00a0an event called <em>\u201cselectedHierarchy\u201d<\/em> with the text <strong>P2 Energy Solutions<\/strong>.<\/li>\n<li>Add an event called <em>\u201cselectedEntities\u201d<\/em>\u00a0with the following list items:\u00a0<strong>BOSSIER 1, BOSSIER 2<\/strong>.<\/li>\n<\/ul>\n<p class=\"intro-text\">You should now see the Hierarchy Picker and Hierarchy\u00a0populated with the defaults. Note that you can set the\u00a0event\u00a0defaults at any time.\u00a0<\/p>\n<p class=\"intro-text\">Step 5. All done!<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2724 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png\" alt=\"hierarchypickerexample\" width=\"229\" height=\"448\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample.png 229w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-77x150.png 77w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-18x36.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/hierarchypickerexample-25x48.png 25w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a fully functioning Hierarchy Picker\u00a0that allows the user to change hierarchies.<\/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-7\"><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>When you select a hierarchy from the Hierarchy Picker, the entities in that hierarchy are displayed in a Hierarchy component where you can select specific entities.<\/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","protected":false},"excerpt":{"rendered":"<p>The Hierarchy Picker displays all the available hierarchies in a drop-down list, and allows the user to choose one of these hierarchies. The name of the selected hierarchy is displayed next to the drop-down list. This article describes how to configure the hierarchy picker, 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\/hierarchy-picker\/hierarchy-picker-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4632,"parent":1419,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[86],"class_list":["post-14627","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-hierarchy","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14627","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=14627"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14627\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4632"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=14627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=14627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=14627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}