{"id":14756,"date":"2016-05-05T14:24:57","date_gmt":"2016-05-05T06:24:57","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14756"},"modified":"2017-12-20T07:29:02","modified_gmt":"2017-12-19T23:29:02","slug":"entity-selector-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/entity-selector-4-3-2\/","title":{"rendered":"Entity Selector (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 Entity Selector, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/entity-selector\/\">Entity Selector<\/a>.<\/p>\n<h3 class=\"page-subheading\">Overview<\/h3>\n<p class=\"intro-text\">The Entity Selector allows the user to select one or more entities from a list. The user can either use a search bar to search for entities by name, or use a filter to find the entities in a hierarchy.<\/p>\n<p class=\"intro-text\">The following diagram shows an Entity Selector that starts at a specific point in the hierarchy:<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselector.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-1532\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselector-800x306.png\" alt=\"entityselector\" width=\"800\" height=\"306\" \/><\/a><\/p>\n<div style=\"position: relative;\">\u00a0<\/div>\n<table>\n<tbody>\n<tr>\n<td width=\"130\"><strong>Selected Entity<\/strong>:<\/td>\n<td>The event that is generated when a user selects a single entity from the list. You should not use this if you want the user to select multiple entities.<\/td>\n<\/tr>\n<tr>\n<td><strong>Selected Entities<\/strong>:<\/td>\n<td>The event that is generated when a user selects multiple entities from the list.\u00a0You should not use this if you want the user to select a single\u00a0entity.<\/td>\n<\/tr>\n<tr>\n<td><strong>Hierarchy Name<\/strong>:<\/td>\n<td>The name of the hierarchy that is the starting point for the list of entities that is initially displayed in the control. The entities are displayed in a flat list.<\/td>\n<\/tr>\n<tr>\n<td><span style=\"color: #000000;\"><b>Template Filter<\/b><\/span>:<\/td>\n<td>The name of the primary template\u00a0that is the starting point for the list of entities that is initially displayed in the control. This requires some knowledge of how the hierarchy is constructed in P2 Server. Only entities that have this template will be displayed.<\/td>\n<\/tr>\n<tr>\n<td><span style=\"color: #000000;\"><b>Start Node<\/b><\/span>:<\/td>\n<td>The name of the node in the hierarchy\u00a0that is the starting point for the list of entities that is initially displayed in the control. Only the children of this node will be displayed.<\/td>\n<\/tr>\n<tr>\n<td><span style=\"color: #000000;\"><b>Number of Selections<\/b><\/span>:<\/td>\n<td>The maximum number of\u00a0entities that a user is able to select from the available list of entities. If you want the user to only select a single entity, you should not specify more than 1, otherwise you may get unexpected behaviours.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 class=\"page-subheading\">Tutorial<\/h3>\n<p class=\"intro-text\">The Entity Selector can be used as an alternative to the Hierarchy control when:<\/p>\n<ul class=\"intro-text\">\n<li>You want to limit the number of selections a user can make. For example, you may want the user to only be able to select a single entity. \u00a0<\/li>\n<li>You want the user to be able to search the hierarchy to find entities they are interested in.<\/li>\n<li>You want to filter\u00a0the hierarchy\u00a0to only show certain entities.<\/li>\n<\/ul>\n<blockquote>\n<p>You should not use the Hierarchy control and Entity Selector on the same page. Doing so may result in unexpected behaviours.<\/p>\n<\/blockquote>\n<p class=\"intro-text\">In this tutorial, we'll look at adding an Entity Selector to a page, which will allow the user to select\u00a0up to 3\u00a0entities. We'll also add a Bar Chart to show how using the Entity Selector can affect another component on the page.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2671 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png\" alt=\"entityselectorchart\" width=\"766\" height=\"420\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png 766w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-48x26.png 48w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now, let's look at how we're actually going to do this, step-by-step.<\/p>\n<hr \/>\n<h3 class=\"page-subheading\">Step by Step: Adding an Entity Selector that Controls a Bar Chart<\/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 - you can adjust the rows and columns if you like but it's 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 Entity Selector to the page<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselector1.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2662 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselector1-740x600.png\" alt=\"entityselector\" width=\"740\" height=\"600\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag and drop the Entity Selector\u00a0component\u00a0onto a grid cell.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 2. Configure the Entity Selector<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorconfig.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2664 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorconfig-800x337.png\" alt=\"entityselectorconfig\" width=\"800\" height=\"337\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we want to create an Entity Selector that will allow the user to select up to 3 wells. As we are concerned with multiple entity selections, we can ignore the Selected Entity setting. Configure the fields as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Selected Entity: (leave this blank)<\/li>\n<li>Selected Entities: selectedEntities<\/li>\n<li>Hierarchy Name: (Event) selected Hierarchy<\/li>\n<li>Template Filter: (Text) Well<\/li>\n<li>Start Node: (leave this blank)<\/li>\n<li>Number of Selections: (Number) 3<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Note:<\/strong> If you specify an event for both Selected Entity and Selected Entities, the Entity Selector may behave strangely.<\/p>\n<p class=\"intro-text\"><strong>Step 3. Set the\u00a0event defaults<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorevents.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2665 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorevents-800x351.png\" alt=\"entityselectorevents\" width=\"800\" height=\"351\" \/><\/a><\/p>\n<p class=\"intro-text\">If you don't set any <a title=\"Events\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/events\/\">event defaults<\/a>, the Entity Selector will allow the user to select entities from any hierarchy. But let's say we want to present a particular hierarchy when the page is first loaded. We can do this here. We can also specify the 3 entities that will always be selected by default when the page is loaded.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click the <em><strong>Event\u00a0<\/strong><strong>Defaults<\/strong><\/em> button on the Studio toolbar.<\/li>\n<li>Add\u00a0an event called <em>\"selectedHierarchy\"<\/em> with the text <strong>P2 Energy Solutions<\/strong>.<\/li>\n<li>Add an event called <em>\"selectedEntities\"<\/em>\u00a0with a list containing\u00a0<strong>BOSSIER 1, BOSSIER 2, BOSSIER 3.<\/strong><\/li>\n<\/ul>\n<p class=\"intro-text\">You should now see the Entity Selector filter change to the default hierarchy, and the check boxes selected for the default entities. Note that you can set the\u00a0event\u00a0defaults at any time.<\/p>\n<p class=\"intro-text\">Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1419] lightbox-5\"><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. \u00a0You should see that you will be able to select other entities from the Entity Selector, but you will never be able to select more than 3.<\/p>\n<p class=\"intro-text\"><strong>Step 4. Add some data<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectordata1.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3179 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectordata1-777x600.png\" alt=\"\" width=\"777\" height=\"600\" \/><\/a><\/p>\n<p class=\"intro-text\">Click the preview\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox[1419] lightbox-5\"><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 again to switch back to edit mode. Let's do a couple more things. We're going to add some data and another component to demonstrate further interaction with the Entity Selector.<\/p>\n<ul class=\"intro-text\">\n<li>Below the canvas, click the button labelled \u201c<a title=\"Add Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/\">Add Data<\/a>\u201d.<\/li>\n<li>Choose the source data you are going to use. For this tutorial, we are using a <a title=\"Add a Relational Dataset\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/add-data\/add-a-dataset\/\">dataset<\/a> called \u201cProductionSumWithTargets_Perth.\u201d<\/li>\n<li>In the configuration options, specify the following:\n<ul class=\"intro-text\">\n<li>Name: ProductionSumWithTargets_Perth1 (this is automatically added)<\/li>\n<li>Query: ProductionSumWithTargets_Perth\u00a0(this is the query in P2 Server that is being used to return the data)<\/li>\n<li>Parameters \u2013 names:\u00a0(Event) selectedEntities<\/li>\n<li>Parameters \u2013 prodEndTime: (Datetime)\u00a018\/03\/2015 12:00:00 AM<\/li>\n<li>Parameters \u2013 prodStartTime: (Datetime)\u00a001\/02\/2012 12:00:00 AM<\/li>\n<li>Parameters \u2013 readingType: (Text) Monthly<\/li>\n<li>Parameters \u2013 typeTemplate: (Text) Well<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>Step 5. Add and configure a chart<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchartconfig1.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3180 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchartconfig1-800x525.png\" alt=\"\" width=\"800\" height=\"525\" \/><\/a><\/p>\n<p class=\"intro-text\">Let's add a chart\u00a0that will make use of the data. Drag and drop a <a title=\"Charts\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Chart<\/a> component onto another cell on the page. Configure a <a title=\"Bar Chart\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\">bar\u00a0chart<\/a> as follows:<\/p>\n<ul class=\"intro-text\">\n<li>Source Data:\u00a0ProductionSumWithTargets_Perth1<\/li>\n<li>For the chart series:\n<ul class=\"intro-text\">\n<li>Type: Bar Series<\/li>\n<li>Y Column: (Text)\u00a0OIL<\/li>\n<\/ul>\n<\/li>\n<li>For the X Axis:\n<ul class=\"intro-text\">\n<li>Column: (Text) Entity<\/li>\n<li>Data Type: String<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 6.\u00a0All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2671 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png\" alt=\"entityselectorchart\" width=\"766\" height=\"420\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart.png 766w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-150x82.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/entityselectorchart-48x26.png 48w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/a><\/p>\n<p class=\"intro-text\">Congratulations! You now have a fully functioning Entity Selector\u00a0that updates a bar chart when you select different entities.<\/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[1419] lightbox-5\"><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>Choose different entities and see the bar chart change.<\/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't 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 Entity Selector allows a user to select one or more entities from a list. The user can either use a search bar to search for entities by name, or use a filter to find the entities in a hierarchy. This article describes how to configure an Entity Selector, 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\/entity-selector\/entity-selector-4-3-2\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4628,"parent":1415,"menu_order":3,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[108,25,86],"class_list":["post-14756","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-entities","tag-entity-selector","tag-hierarchy","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14756","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=14756"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/14756\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4628"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=14756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=14756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=14756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}