Master/Detail component

The master/detail component consists of Actions and structural elements Master, Detail and Overlay.

The structure elements Master, Detail and Overlay can contain a reference to a Detail or a List components, see Referencing Components in the Web App definition. In the Detail and Overlay element, the Master/Detail component can contain multiple referenced Components. This possibility can be used by using actions with defined componentName attribute and declared components with defined name attribute. 

For more information on Components, Actions, properties and Data Binding, see the corresponding sections.

Properties in Master/Detail

For each component, a Technical Process for loading the data can be defined. The data model can be reused.

The properties of the Master/Detail component can be defined both in the Master/Detail component itself and in the subordinate components within the structure elements. A common data model for the entire Master/Detail component is created from these property definitions. This also means that conflicts between Properties within a Master/Detail component (e.g. same name but different data type) are not permitted and lead to a validation error.

All components within a Master/Detail component therefore work with the same data (for List components related to the selected entry). For overlays, a temporary copy of the data is created, which is synchronized back after successful processing.

Components included via ComponentReference can only access Properties that are also defined within this component. The components work nevertheless on the same data object, have however a limited view of the Properties, which they actually need. Especially when calling processes, this avoids unnecessary data transfer.

Defining Master/Detail component

A Master/Detail component is declared within its own definition file <MasterDetailComponentName>.masterdetail. This is created in the Components project folder.

How to create a new definition file

1. Click the menu New > Add <corresponding component>.
   Alternatively, the file can also be created via the context menu New > Add
   <corresponding component>.

2. Select the desired definition file.

   

3. Enter a name for the definition file in File name.

4. Click Finish.
   A new definition file with a predefined structure is created.

The Master/Detail component is created via <MasterDetailComponent> and can have the standard attributes for Components.

The following example shows the basic structure of a Master/Detail component.

<MasterDetailComponent xmlns="http://softproject.de/webapp/1.0">
	<Actions>
		<NewAction componentName="CustomerDetail" />
	</Actions>
	<Master>
		<ComponentReference source="Customer/Customer.list" name="AllCustomers" />
	</Master>
	<Detail>
		<TabGroup>
			<ComponentReference source="Customer/Tabs/Company.detail" displayName="$Company" name="CustomerDetail" />
			<ComponentReference source="Customer/Tabs/ContactPerson.detail" displayName="$ContactPerson" />
			<ComponentReference source="Customer/Tabs/Event.list" displayName="Events" name="CustomerEvents" />
		</TabGroup>	
	</Detail>
	<Overlay>
		<ComponentReference source="Customer/Overlay/AddEvent.list" name="AddToEvent" />
	</Overlay>
</MasterDetailComponent>

Explanation:

• Within Actions the available actions are defined.
• The Master element contains a reference to a List component. Depending on the selected list entry, further information is displayed in the detail view.
• The Detail element defines which information is displayed for a list item. In the above example, the detail information is displayed in a Tab Group.

Hide and display components

Areas of a Master/Detail component (Master structure element, Detail structure element and Overlay) can be hidden and displayed dynamically via data binding. This can be controlled via the visible attribute:

<CalendarComponent displayName="CalendarComp with visible attribute" visible="#visibility">

<ComponentReference source="detail_1.detail" displayName="CompRef with visible attribute" visible="#visibility"/>

For more information, see the section Navigation within a Web Application.