{"id":1431,"date":"2017-12-20T11:37:15","date_gmt":"2017-12-20T03:37:15","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1431"},"modified":"2024-10-09T12:54:33","modified_gmt":"2024-10-09T04:54:33","slug":"breadcrumb","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/breadcrumb\/","title":{"rendered":"Breadcrumb"},"content":{"rendered":"

<\/p>\n

This article applies to versions 4.4 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

Overview<\/h2>\n

In IFS OI Explorer, breadcrumbs allow users to easily traverse a hierarchy to find an entity, and also helps users to visualise where an entity is in the hierarchy.<\/p>\n

You should use this navigation tool when you want to provide a way for users to drill down into a hierarchy, or find their way back up the hierarchy. When users click an entity in the hierarchy, other components on the page can be updated to display data for the selected entity. The following image shows a typical breadcrumb:<\/p>\n

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

Related: Using a Breadcrumb<\/a> in display mode, Adding a Breadcrumb style<\/a><\/p>\n

\n

Configuring Breadcrumbs<\/h2>\n

There are 2 configuration modes. Basic mode shows the options most commonly used. Advanced mode allows you to change the type of properties used.<\/p>\n

Basic Mode<\/h3>\n

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

Advanced Mode<\/h3>\n

In Advanced mode, you have the option of choosing a variable to drive the Hierarchy Name. To do this, you first need to add the variable to the default values<\/a>, then you will be able to select it from the drop-down list.<\/p>\n

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

\u00a0<\/div>\n\n\n\n\n\n
Entity Name<\/strong>:<\/td>\nThe name of the entity to display \u00a0in the Breadcrumb. This\u00a0is always a variable so that it can interact with other components on the page.<\/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 a\u00a0variable. When set to a variable, it is the name of the variable\u00a0that the Breadcrumb listens to in order to determine the hierarchy to display.<\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nThe style you want to apply to the Breadcrumb\u00a0component. If you are a Style Administrator,\u00a0you can\u00a0add a new Breadcrumb style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial:\u00a0Creating a Breadcrumb That Shows the Hierarchy of a Selected Entity<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we'll look at adding a Breadcrumb to a page. This Breadcrumb will display the path of an\u00a0entity chosen in a Hierarchy.\u00a0<\/p>\n

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

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

Note<\/strong>: This configuration uses the Sample Data <\/em>table that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n

Step 1. Prepare a Studio Page<\/strong><\/p>\n

\"New<\/p>\n

Before you start, click the New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Grid layout.<\/p>\n

\"Grid<\/p>\n