GET STARTED
DOCUMENTS
APPS
API
INTEGRATION
GALLERY
core-master-detail
Version 0.9.9 of FEF is DEPRECATED. It is strongly encouraged that all developers upgrade to version 0.9.11

A core-master-detail component simplifies that master-detail pattern. A master-detail pattern uses a master list and the details for the currently selected list item.

Component Definition / Attributes

A core-master-detail component requires two sub-components; a master list and a component to display a selected item. It is important to note that a core-master-detail cannot have more than 2 children elements.

The most common use of a master-detail is one using a core-table to display a master list and a core-form to display a specific line of said table.

<core-section>
	<core-master-detail data="...">
		<core-table fields="name,startDate,targetEndDate,actualEndDate"/>
		<core-form fields="name,startDate,targetEndDate,actualEndDate"/>
	</core-master-detail>
</core-section>
Common Property Usage
data/field Set the data that is the pathData of your core-master-detail. Either use the data attribute to initialize the pathData of the masterdetail pattern to data in your DataRegistry or set the data of your masterdetail pattern to a field in your primaryData
layout-mode There a couple variations of how a masterdetail pattern can be displayed. The following different layout modes are available to you : LEFT_RIGHT , TABLE_INSET, and TOP_BOTTOM. TOP_BOTTOM is the default layout if none is specified. Examples of the different layouts are below
focus-multiple Set to true or false. False is the default. Allows multiple lines of the master list to be displayed in the detailed section of the master-detail
Types of MasterDetails

Left_Right MasterDetail

<core-master-detail data="ProjectList" layout-mode="LEFT_RIGHT">
	<core-table fields="name,startDate,targetEndDate,actualEndDate" kind="propertiesTable leftRightTable"/>
	<core-form fields="name,startDate,targetEndDate,actualEndDate"/>
</core-master-detail>
Left_Right MasterDetail
Left_Right MasterDetail

Table_Inset Masterdetail

<core-master-detail data="ProjectList" layout-mode="TABLE_INSET">
	<core-table fields="name,startDate,targetEndDate,actualEndDate"/>
	<core-form fields="owner,department,cost,teamCount,startDate" cols="5"/>
</core-master-detail>
Table Inset MasterDetail
Table Inset MasterDetail

Top_Bottom Masterdetail

<core-master-detail data="ProjectList">
	<core-table fields="name,startDate,targetEndDate,actualEndDate"/>
	<core-form fields="name,startDate,targetEndDate,actualEndDate"/>
</core-master-detail>
Top_Bottom MasterDetail
Top_Bottom MasterDetail
Sample Usage

Example #1 : Show Set of Buttons depending on MasterDetail Selection

There might be a scenario in which you want to display a set of buttons in your detail portion of the masterdetail depending on the row that is selected from the master portion. To do this, add all of the buttons you want to your masterdetail's core-form element's buttonbar and then show/hide these buttons depending on the selection from the table.

We will demonstrate this by adding three buttons to the form's buttonbar and then adding a setMask function to each button that will depend on the selected item of the table.

var form = Facade.Components.Form.forName('masterDetailForm');
form.field('city').setLabel('City');
form.field('state').setLabel('State');
form.field('pop').setLabel('Population Density');
form.field('location').setLabel('US Location');

//Get topButtonbar of your form
var formBtnBar = Facade.Components.Form.forName('masterDetailForm').topButtonbar();
//Set its buttons
formBtnBar.setButtons(['button1', 'button2', 'button3']);
//Add a label for each button
formBtnBar.button('button1').setLabel('Action 1');
formBtnBar.button('button2').setLabel('Action 2');
formBtnBar.button('button3').setLabel('Action 3');

//Show/hide button depending on value of your pathData, which
//is your selected item from the table
formBtnBar.button('button1').setMask(function(behaviorFn,args){
    var selection = this.getPathData();
    return selection.get('pop') == 'high' ? Facade.Constants.Mask.NORMAL
                                          : Facade.Constants.Mask.HIDDEN;
});

formBtnBar.button('button2').setMask(function(behaviorFn,args){
    var selection = this.getPathData();
    return selection.get('location') != 'west' ? Facade.Constants.Mask.NORMAL
                                               : Facade.Constants.Mask.HIDDEN;
});

In html template

<core-section>
    <core-master-detail data="myDataList">
        <core-table fields="city,state"></core-table>
        <core-form name="masterDetailForm" fields="city,state,pop,location"></core-form>
    </core-master-detail>
</core-section>
Notice buttonbar when Miami row selected
Notice buttonbar when Miami row selected
Notice buttonbar when San Diego row Selected
Notice buttonbar when San Diego row Selected