Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

Master Detail

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Master Detail Pattern to display a master list of items and their related details, for example, a list of employees and their corresponding details.

    How to use the Master Detail UI Pattern

    1. In Service Studio, in the Toolbox, search for Master Detail.

      The Master Detail widget is displayed.

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Master Detail widget into the Main Content area of your application's screen.

      By default, the Master Detail widget contains a right placeholder and left placeholder which expects a list.

    3. To populate the list, create an aggregate, by right-clicking your screen name, and selecting Fetch Data from Database.

    4. To add a database entity, click on the screen, select the relevant entity, and click OK. In this example, we use the User entity.

      A name for the aggregate is added automatically. In this example the aggregate name is GetUsers.

    5. On the Interface tab, double-click your screen name, and in the LeftContent placeholder, select the List widget. On the Properties tab, from the Source drop-down, select the aggregate you just created. In this example, GetUsers.List.

    6. On the Interface tab, navigate to the attribute you want to display on the left side of the screen, and drag it into the List. In this example, we use the Name attribute.

      This displays all of the users names on the left side of the screen.

    7. So that each of the items in the list can be selected by the user, create a user action by selecting and right-clicking the expression in the List, and selecting Link to -> New Client Action.

    8. Double-click the new client action and enter a name. In this example, we call it ClickSelectedUser.

    9. From the Toolbox, add the Assign logic to the client action, and from the Value drop-down, select the Expression Editor. Navigate to and double-click the current user Id and click Done.

    10. To store this user Id, create a local variable by right-clicking on your screen name and selecting Add Local Variable. Enter a name for the variable. In this example, we call it SelectedUserId.

    11. Select the Assign logic, and from the Variable drop-down, select the local variable you created (in this example, SelectedUserId).

      Note: You have now created all of the information that displays on the left side of the Master Detail widget. In the following steps, we will create the information to display on the right side of the Master Detail widget.

    12. To display the selected user's details on the right side of the screen, create a new aggregate by right-clicking on your screen name and selecting Fetch Data from Database.

    13. Enter a name for the aggregate. In this example, we call it GetUserDetails.

    14. To add a database entity, click on the screen, select the relevant entity, and click OK. In this example, we use the User entity.

    15. On the GetUserDetails screen, click Filters, then click Add Filter.

    16. From the Filter Condition editor, enter the following condition and click Done.

      User.Id = SelectedUserId

      This filters all the results in the User entity to the currently selected user.

    17. Double-click your client action name (in this example, ClickSelectedUser), and drag the GetUserDetails aggregate onto the client action. This executes the aggregate using the currently selected user.

    18. Double-click your screen name, and from the GetUserDetails aggregate, drag the attributes you want to display into the RightContent placeholder. In this example, we use the Username and Email attributes.

    After following these steps and publishing the module, you can test the pattern in your app.

    Properties

    Property Description
    LeftPercentage (Decimal): Optional Set the LeftContent width using a percentage. Default value is 50%.
    OpenedOnPhone (Boolean): Optional Variable to hold if the detail is opened on a phone. Default value is False.
    Height (Text): Optional Set the height of the widget (in pixels or %). By default, it is the height of the window, minus the title and header.

    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 Master Detail pattern inside patterns with swipe events, such as Tabs.

    • Was this article helpful?