master-detail-pages

Master-Detail Pages

Overview

Master-Detail is a common UI pattern showing:

• Master list (left): Selectable list of items (Gallery widget)
• Detail form (right): Form showing selected item details (DataView with SELECTION source)

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)