Skip to main content

 

Design UI

 

Applies only to Mobile Apps and Reactive Web Apps

 

OutSystems

MasterDetail Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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 Service Studio:

    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.

    Samples

    You can use the MasterDetail pattern as a sample:

    • Was this article helpful?