{"id":8243,"date":"2018-10-04T10:00:48","date_gmt":"2018-10-04T02:00:48","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=8243"},"modified":"2024-05-30T15:20:24","modified_gmt":"2024-05-30T07:20:24","slug":"navigation-hierarchies-entities","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/navigation-hierarchies-entities\/","title":{"rendered":"Navigation, Hierarchies &#038; Entities"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6.2 and later of IFS OI Explorer.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"intro-text\">IFS OI Explorer provides several mechanisms by which you can navigate within a page:<\/p>\n<ul class=\"intro-text\">\n<li>Breadcrumbs allow you to navigate within a site's hierarchy.<\/li>\n<li>Hyperlinks and Hotspots allow you to navigate to other pages, trends or external URLs. <br \/>\n(Note that in <em>versions 4.6.2 and later<\/em> these components are sometimes just used to set page variables.)<\/li>\n<li>The Hierarchy, Hierarchy Picker, and Entity Selector allows you to select an entity from a hierarchy.<\/li>\n<\/ul>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Breadcrumb<\/h2>\n<p class=\"intro-text\">The <em>breadcrumb<\/em> displays levels in a hierarchy, and is a useful navigation tool for pages that allows you to drill down into a hierarchy to discover further information about a selected entity. It displays the hierarchy path of the entity chosen on the page, such as one chosen from an entity selector. It also <span style=\"color: #000000;\">shows you<b> <\/b><\/span>where the selected entity sits within a hierarchy and provides another useful way to navigate around the site.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/breadcrumbdetail.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8289\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/breadcrumbdetail-800x206.png\" alt=\"breadcrumbdetail\" width=\"800\" height=\"206\" \/><\/a><\/p>\n<p class=\"intro-text\">You can click on any level in the main breadcrumb trail to open a page that shows data relevant to that hierarchy level.<\/p>\n<p class=\"left-bar-blue\"><strong>SEE IT IN ACTION<\/strong>! Watch this video to see how to the breadcrumb works.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_844482379\" class=\"video-js vjs-default-skin\" width=\"800\" height=\"550\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/Breadcrumb.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<hr \/>\n<h2 class=\"page-subheading\">Hyperlinks<\/h2>\n<p class=\"intro-text\">A hyperlink is a piece of text on an Explorer page, that can be clicked. When clicked, it either opens another page, trend, or URL, or it updates page variables.<\/p>\n<p class=\"intro-text\">Hyperlinks provides a useful way to direct the navigational flow between various pages in IFS OI Explorer, and are also used for opening trends and external websites.<\/p>\n<p class=\"left-bar-blue\"><strong>SEE IT IN ACTION<\/strong>! Watch this video to see what sort of things can be opened with a hyperlink.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1183384533\" class=\"video-js vjs-default-skin\" width=\"800\" height=\"500\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/Hyperlinks.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<hr \/>\n<h2 class=\"page-subheading\">Hotspot<\/h2>\n<p class=\"intro-text\">The hotspot component is similar to the hyperlink. Unlike the hyperlink with its visible content, the hotspot is transparent and is used for overlaying images, text labels, and other components.<\/p>\n<p class=\"left-bar-blue\"><strong>What does it look like?<\/strong> Because it is invisible, you will just see what is underneath, such as an image, or text. Usually this will give you a clue. When you hover over a hotspot, you will see a mouse cursor, as in this screenshot:<\/p>\n<div id=\"attachment_14360\" style=\"width: 258px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-14360\" class=\"wp-image-14360 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image.png\" alt=\"\" width=\"248\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image.png 248w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image-150x99.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Hotspot-image-48x32.png 48w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><\/a><p id=\"caption-attachment-14360\" class=\"wp-caption-text\">The area marked by the dashed green line marks the invisible borders of the hotspot.<\/p><\/div>\n<p class=\"intro-text\">Depending on how it is configured, a hotspot will open a page or a trend in an Explorer tab (either a new tab or the current one) or another site - either in an Explorer tab or in a new browser tab.<\/p>\n<p class=\"intro-text\">The hotspot can also be configured to map variables to the page or trend it is opening; often these are selections that you have made before clicking the hotspot.<\/p>\n<p class=\"left-bar-blue\"><strong>SEE IT IN ACTION<\/strong>! Watch this video to see what happens when you click a hotspot that opens a new trend. This hotspot passes the selected <em>Sample Method<\/em> to the new trend.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1587872904\" class=\"video-js vjs-default-skin\" width=\"992\" height=\"632\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/HotspotDemo.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<hr \/>\n<h2 class=\"page-subheading\">Hierarchy Picker<\/h2>\n<p class=\"intro-text\">The hierarchy picker is a simple drop-down list that displays all the available <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-server\/primers\/hierarchies\/\">hierarchies<\/a>, and lets you choose one.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8346\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker.png\" alt=\"hierarchypicker\" width=\"219\" height=\"179\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker.png 219w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker-150x123.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchypicker-48x39.png 48w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/><\/a><\/p>\n<p class=\"intro-text\">When you select a hierarchy, the Explorer page refreshes to display only the elements from the chosen hierarchy.<\/p>\n<p class=\"intro-text\">For example, a Hierarchy Picker is often used in conjunction with a Hierarchy control (see next section).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy.png\" alt=\"hierarchy\" width=\"462\" height=\"267\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy.png 462w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchy-48x28.png 48w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Hierarchy<\/h2>\n<p class=\"intro-text\">The Hierarchy is a tree-style representation of an entity hierarchy that allows Explorer users to browse and select one or more entities. If you've already read the article on <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/tag-search-and-hierarchy-navigation\/\">Tag Search and Hierarchy Navigation<\/a> provided on the ribbon, you may experience a sense of d\u00e9j\u00e0 vu. The Hierarchy is very similar to the Hierarchy Navigator available on the ribbon, except that in the Hierarchy Navigator, the Hierarchy is combined with the Hierarchy Picker.<\/p>\n<div id=\"attachment_8349\" style=\"width: 810px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchydifferences.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-8349\" class=\"wp-image-8349 size-large\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/hierarchydifferences-800x456.png\" alt=\"hierarchydifferences\" width=\"800\" height=\"456\" \/><\/a><p id=\"caption-attachment-8349\" class=\"wp-caption-text\">Differences between a Hierarchy, Hierarchy Picker, and Hierarchy Navigator<\/p><\/div>\n<p class=\"intro-text\">The Hierarchy is normally used by itself on a page if the page is only relevant to a specific hierarchy, and you only need to choose entities that are in that hierarchy.<\/p>\n<p class=\"left-bar-blue\"><strong>SEE IT IN ACTION<\/strong>! Watch this video to see how choosing entities from the Hierarchy can change what is displayed on a page.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_491952646\" class=\"video-js vjs-default-skin\" width=\"800\" height=\"400\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/Hierarchy.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<hr \/>\n<h2 class=\"page-subheading\">Entity Selector<\/h2>\n<p class=\"intro-text\">The Entity Selector allows Explorer users to select one or more entities by searching for them by name, and optionally filtering them by a node in a hierarchy.<\/p>\n<p class=\"intro-text\">The page designer may decide to restrict entity selection from only one hierarchy, or may decide to only allow a specific number of entities to be selected.<\/p>\n<p class=\"intro-text\">You can use the entity selector in a variety of ways:<\/p>\n<ul class=\"intro-text\">\n<li>Start typing the name of an entity into the text box at the top. The list of entities will refresh as you type. When you find the entity you are looking for, click the check box in the list to select it.<\/li>\n<li>Filter the list of entities by selecting a hierarchy from the drop-down list. The entities in that hierarchy will be displayed in the list. You can click the arrow to scroll through the list until you find the entity you are looking for.<\/li>\n<li>Once you have selected a hierarchy, you can further filter by a node in the hierarchy. Start typing the name of the node in the text box next to the drop-down list. As you type, you will be presented with a list of matching nodes - select one of these to display the available entities.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34509\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using.png\" alt=\"\" width=\"1160\" height=\"349\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using.png 1160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using-768x231.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using-150x45.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/12\/entity-selector-454-using-48x14.png 48w\" sizes=\"auto, (max-width: 1160px) 100vw, 1160px\" \/><\/a><\/p>\n<p class=\"intro-text\"><em>Note: Prior to version 4.4.4, the Entity Selector had an arrow, instead of a scrollbar, that allowed you to page through the entities. The Clear Selection button was introduced in version 4.5.4.<\/em><\/p>\n<p class=\"left-bar-blue\"><strong>SEE IT IN ACTION<\/strong>! Watch this video to see how to use the entity selector to change what is displayed on a chart. In this instance, the user is only allowed to select a maximum of 3 entities.<\/p>\n\r\n\t<!-- Begin Video.js -->\r\n\t<video id=\"example_video_id_1496028909\" class=\"video-js vjs-default-skin\" width=\"800\" height=\"600\" controls preload=\"auto\" data-setup='[]'>\r\n\t\t<source src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/videos\/EntitySelector.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","protected":false},"excerpt":{"rendered":"<p>IFS OI Explorer provides several mechanisms by which you can navigate within a page. This article describes how to use the Breadcrumb, Entity Selector, Hierarchy, Hierarchy Picker, and Hyperlink controls that you may find on a page.<\/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\/navigation-hierarchies-entities\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4628,"parent":4254,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[14,25,86,36],"class_list":["post-8243","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-breadcrumb","tag-entity-selector","tag-hierarchy","tag-navigation","Version-4-5-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8243","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=8243"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8243\/revisions"}],"predecessor-version":[{"id":66959,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/8243\/revisions\/66959"}],"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\/4628"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=8243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=8243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=8243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}