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.
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 |
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>

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>

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>

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>

