Platform | Infor Nexus Developer Network

core-drilldown-layout

FEF offers the drilldown-layout component to facilitate the act of replacing a target element, like a table, with a customizable content template with easy navigation between the target element and the drilled down layout. Drilldown's can occur at the page layout; i.e. the drilled down layout will take up the whole page - or, alternatively, at the component level where the drilled down layout will replace the target element but other parts of the page will still be rendered.

Component Definition / Attributes

A sub-component drilldown pattern can be established by adding a core-drilldown-layout component to your template while a full-page drilldown pattern can be established programmatically by defining a drilldown template for it's target element.

Add sub-component drilldown - this will render over the target element but will not render as it's own page. The target element in the following example would be the table; a table-row click would drill into the table and display the drilldown template

<core-drilldown-layout>
    <core-table kind="drilldownTable" ... ></core-table>
</core-drilldown-layout>

To display the drill down template as the whole page, render the target element without the core-drilldown-layout wrapper

Now, define your drilldown template

var drilldownTable = Facade.Components.Table.forKind("drilldownTable");
//drilldown-form would be a template html file in this case
drilldownTable.setDrilldownTemplate('drilldown-form');

Alternatively, a master-detail component can display as a drilldown if layout-mode is set to drilldown

<core-master-detail data="ProjectList" layout-mode="DRILLDOWN">
    <core-table fields="name,startDate,targetEndDate,actualEndDate"/>
    <div>
        <!-- Content here will be the drilled down layout -->
    </div>
</core-master-detail>

Drilled Down Layout

A subcomponent of the drilldown layout - this is what rendered once you drill into a target(via a click)

//If the core-drilldown-layout is not in the template, follow pattern
var drilledownLayout = drilldownTable.$drilldownLayout().drilledDownLayout();
//If it is in on the template
Facade.Components.DrilldownLayout.forKind("...").drilledDownLayout();

From a drilled down component, you can access it's header or just set the label to be rendered in the header

drilledownLayout.setDrilledDownLabel(...);
//drilled down layout header component
var drilledDownHeader = drilledownLayout.$drilldownHeader();

Screenshots

We want to illustrate the two types of drilldown - full page and component level. Let's say we have a table with a drilldown template, which would look like the following:

A full page drilldown would show the following view on a table row click

A component level drilldown would show the following view on a table row click