{"id":14828,"date":"2016-05-09T12:09:32","date_gmt":"2016-05-09T04:09:32","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=14828"},"modified":"2017-12-14T14:30:03","modified_gmt":"2017-12-14T06:30:03","slug":"breadcrumb-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/breadcrumb\/breadcrumb-4-3-2\/","title":{"rendered":"Breadcrumb (4.3.2)"},"content":{"rendered":"

<\/p>\n

This article applies to versions 4.3.2 and earlier of P2 Explorer.\u00a0For help on the latest version of the Breadcrumb component, see Breadcrumb<\/a>.<\/p>\n

Overview<\/h3>\n

Breadcrumbs are a useful navigation tool for pages that allow users to drill down into a hierarchy to discover further information about a selected entity.<\/p>\n

The following diagram shows a breadcrumb configured to display the entities in a hierarchy:<\/p>\n

\"\"<\/a><\/p>\n

\u00a0<\/div>\n\n\n\n\n
Entity Name<\/strong>:<\/td>\nThe name of the entity to display \u00a0in the breadcrumb. It\u00a0is always an event that can both publish and subscribe. The entered value is\u00a0the name of the event that is published when an entity is selected from the breadcrumb. It is also the name of the event that the Breadcrumb listens to in order to determine the entity names to display.<\/td>\n<\/tr>\n
Hierarchy Name<\/strong>:<\/td>\nThe name of the hierarchy that the breadcrumb uses to get the entities from. This setting can either be a text value or an event. When set to an event, it is the name of the event that the Breadcrumb listens to in order to determine the hierarchy to display.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial<\/h3>\n

In this tutorial, we'll look at adding a Breadcrumb to a page. This Breadcrumb will display the hierarchy path of the entity chosen in an Entity Selector. We'll also add a Target Bar to show how clicking within the breadcrumb can affect another component on the page.<\/p>\n

\"breadcrumbexample1\"<\/a><\/p>\n

Let's go through this process, step-by-step.<\/p>\n

\n

Step by Step: Creating a Breadcrumb That Shows the Hierarchy of a Selected Entity<\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout - you can adjust the rows and columns if you like but it's not important for this exercise.<\/p>\n

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

Step 1. Add the Breadcrumb\u00a0to the page<\/strong><\/p>\n

\"breadcrumbdrag1\"<\/a><\/p>\n

Drag and drop the\u00a0Breadcrumb component\u00a0onto a grid cell.<\/p>\n

\u00a0<\/p>\n

Step 2.\u00a0\u00a0Configure the\u00a0Breadcrumb<\/strong><\/p>\n

\"breadcrumbconfig\"<\/a><\/p>\n

In this step, we want to populate the hierarchy name\u00a0from an event that the breadcrumb is listening to. \u00a0You'll notice that the\u00a0events are already filled in with default event names. You can choose to change this name if you want, but often there's no real need to. Specify the following events:<\/p>\n