Skip to main content

SILK UI Framework

 

OutSystems

MasterDetail Pattern

The MasterDetail pattern is similar to the SplitScreen pattern, but it receives an item list for the left panel. You can use this pattern in tablet apps, to display the detail of a list of items.

Here's the preview in the Development Environment:

How to Use the MasterDetail Pattern

Start by binding a List to the ItemList parameter and leverage the Block events to change the content placeholder.

1. Create a local boolean variable and set it on OpenedOnPhone.

2. To open the detail of the clicked element, use a link for an action, set your local variable to True, and add logic to open the correct detail. 

3. To close the detail, create an action and set your local variable to False, and use this action in the DetailClose event. Add necessary logic.

Phone Landscape with the Same Behavior as Tablet

You can have your phone in landscape to work the same way as a tablet:

.phone.landscape .split-left {
    width: x; /* This is width value for the left side */
}

.phone.landscape .split-right {
    -webkit-transform: translateX(0) translateZ(0);
      transform: translateX(0) translateZ(0);
    width: x; /* This is the width value for the right side */
    left: auto;
    right: 0;
    border-left: 1px solid #d3d3d3;
}
.phone.landscape .detail-open .split-right-close {
    opacity: 0;
    pointer-events: none;
}
.phone.landscape .detail-open .app-menu-icon {
    opacity: 1;
    pointer-events: auto;
}

Input Parameters

Input Name Description Default Value
ItemList These are the items for the list on the left side of the MasterDetail. N/A

Events

Event Name Description  Mandatory
DetailClose Triggered when the detail (or right side of the MasterDetail) is closed. False
ItemSelected Triggered when an item of the list (or left side of the MasterDetail) is selected. False

Layout and Classes

 

CSS Selectors

Element CSS Class Description
MasterDetail Wrapper .split-screen-wrapper Container that wraps elements in the left and right containers.
Left  Content .split-left Add content to the left side.
Right Content .split-right Add content to the right side. In phone view, this Element is off-canvas.
Close Right Content .split-right-close  

Compatibility with Other Patterns

This pattern should be used alone inside the screen content because it will adapt to the height of the parent. Additionally, you should avoid using the MasterDetail pattern inside patterns with swipe events, like Tabs or Carousel.

Samples  

You can use the MasterDetail pattern as a sample:

  • Was this article helpful?