master-detail-pages

name	master-detail-pages
description	Build master-detail UI pages in Mendix MDL using Gallery selection binding and DataView with SELECTION source
compatibility	opencode

UI pattern expert for Mendix master-detail pages. Covers Gallery widget, selection binding, DataView with SELECTION source, and related patterns.

Master-Detail is a common UI pattern showing a selectable master list (Gallery widget) on the left and a detail form (DataView with SELECTION source) on the right.

- Create a master-detail page layout - Use Gallery widget with selection binding - Show a DataView that responds to list selection - Build side-by-side list and detail panels

<mdl_syntax>

Basic Structure

create page Module.Entity_MasterDetail
(
  title: 'Entity Master-Detail',
  layout: Atlas_Core.Atlas_Default
)
{
  layoutgrid mainGrid {
    row row1 {
      -- Master list (4 columns)
      column colMaster (desktopwidth: 4) {
        gallery entityList (datasource: database Module.Entity, selection: single) {
          template template1 {
            dynamictext name (content: '{1}', contentparams: [{1} = Name], rendermode: H4)
          }
        }
      }

      -- Detail form (8 columns)
      column colDetail (desktopwidth: 8) {
        dataview entityDetail (datasource: selection entityList) {
          textbox txtName (label: 'Name', attribute: Name)

          footer footer1 {
            actionbutton btnSave (caption: 'Save', action: save_changes, buttonstyle: success)
          }
        }
      }
    }
  }
}

Key Components

1. GALLERY Widget (Master List)

gallery widgetName (
  datasource: database from Module.Entity sort by Name asc,
  selection: single|multiple|none
) {
  template template1 {
    -- Widgets for each item
    dynamictext name (content: '{1}', contentparams: [{1} = AttrName], rendermode: H4)
  }
}

Properties:

• datasource: database from entity sort by attr asc|desc - Entity data source with optional sorting
• selection: single - Selection mode (Single for master-detail)
• Template content inside TEMPLATE widget (requires name)

2. DataView with SELECTION Source

dataview widgetName (datasource: selection sourceWidgetName) {
  -- Form widgets
}

The selection source creates a binding to another widget's selection. When the user selects an item in the Gallery, the DataView displays that item.

3. LISTVIEW Widget (Nested Data)

listview widgetName (datasource: database Module.Entity, PageSize: 10) {
  template template1 {
    -- Widgets for each associated item
  }
}

Used inside the detail form to show related/associated data.

Nested list by association: Use datasource: $currentObject/Module.Assoc (or the explicit datasource: association path form) inside a parent DATAVIEW. Both forms produce the same BSON (ByAssociation data source). Example: datagrid lines (datasource: $currentObject/Order_OrderLine) inside a dataview dv (datasource: database Order). </mdl_syntax>

<complete_example>

create page CRM.Customer_MasterDetail
(
  title: 'Customer Management',
  layout: Atlas_Core.Atlas_Default
)
{
  layoutgrid mainGrid {
    row row1 {
      column colMaster (desktopwidth: 4) {
        dynamictext heading (content: 'Customers', rendermode: H3)
        gallery customerList (datasource: database from CRM.Customer sort by Name asc, selection: single) {
          template template1 {
            dynamictext name (content: '{1}', contentparams: [{1} = Name], rendermode: H4)
            dynamictext email (content: '{1}', contentparams: [{1} = Email])
          }
        }
      }

      column colDetail (desktopwidth: 8) {
        dataview customerDetail (datasource: selection customerList) {
          dynamictext detailHeading (content: 'Customer Details', rendermode: H3)
          textbox txtName (label: 'Name', attribute: Name)
          textbox txtEmail (label: 'Email', attribute: Email)
          textbox txtPhone (label: 'Phone', attribute: Phone)

          footer footer1 {
            actionbutton btnSave (caption: 'Save', action: save_changes, buttonstyle: success)
            actionbutton btnCancel (caption: 'Cancel', action: cancel_changes)
          }
        }
      }
    }
  }
}

</complete_example>

<key_patterns>

Selection Binding

The core of master-detail is the selection binding:

1. Gallery has selection: single - enables single item selection
2. DataView uses datasource: selection galleryName - listens to Gallery selection
3. When user clicks an item in Gallery, DataView automatically updates

Widget Names

The selection binding uses widget names to connect:

• Gallery widget name: customerList
• DataView references: datasource: selection customerList

Template Content with ContentParams

Inside Gallery templates, use contentparams to reference current item attributes:

template template1 {
  dynamictext name (content: '{1}', contentparams: [{1} = Name], rendermode: H4)
  dynamictext email (content: '{1}', contentparams: [{1} = Email])
}

</key_patterns>

<syntax_summary>

Element	Syntax
Page properties	(title: 'title', layout: Module.Layout)
Widget name	Required after type: gallery myGallery (...)
Database source	datasource: database from Module.Entity
Selection binding	datasource: selection widgetName
Sort by	datasource: database from entity sort by Name asc
Where filter	datasource: database from entity where [IsActive = true]
Selection mode	selection: single
Attribute binding	attribute: attributename
Action binding	action: save_changes
Button style	buttonstyle: success
Text content	content: 'text' with contentparams: [{1} = attr]
Render mode	rendermode: H4
Template content	template template1 { ... }
</syntax_summary>

<implementation_notes>

• Gallery is a pluggable widget (similar to DataGrid2)
• Selection binding uses ListenTargetSource in the Model SDK
• ListView is a built-in Mendix widget
• All widget properties use explicit (key: value) syntax </implementation_notes>

<output_rules>Output MDL code only in code blocks. Keep explanations concise.</output_rules>