Designing a View Layout (SAP Library

Designing a View Layout

The view layout consists of a header, a Master table for Customer information, and a Detail table for the corresponding Order data.

In the View Designer of the Web Dynpro tools, the view layout looks like this:

This graphic is explained in the accompanying text

Implement the following UI element structure in the Work view:

UI Element Type	UI Element Name	Embedded in ... (Container Name)	UI Element Property	Value
Transparent Container	RootUIElement-Container		Properties of Transparent Container - layout	GridLayout
Transparent Container	RootUIElement-Container		Layout - colCount	1
TextView	HeaderText	RootUIElementContainer	Properties of TextView – design	header1
			Properties of TextView – text	Master/Detail Viewer
			LayoutData – hAlign	center
			LayoutData – paddingBottom	large
			LayoutData – paddingTop	large
Group	MasterGroup	RootUIElementContainer	Properties of Group – width	75%
Group	MasterGroup	RootUIElementContainer	LayoutData – hAlign	center
Caption	MasterGroup_ Header	MasterGroup	Properties of Caption - text	Master
Table	CustomerTable	MasterGroup	The table is separately filled with columns using data binding
Table	CustomerTable	MasterGroup	Properties of Table – width	100%
Caption	Header_1	CustomerTable	Properties of Caption - text	Customers
	To add the table header for the CustomerTable table to the node CustomerTable[Table], choose Insert Header in the context menu.
Group	DetailGroup	RootUIElementContainer	Properties of Group – width	75%
			LayoutData – hAlign	center
			LayoutData – paddingTop	large
Caption	DetailGroup_ Header	DetailGroup	Properties of Caption - text	Detail
Table	OrderTable	DetailGroup	The table is separately filled with columns using data binding
Table	OrderTable	DetailGroup	Properties of Table - width	100%
Caption	Header_2	OrderTable	Properties of Caption - text	Orders for Customer

As you can see, neither table has columns yet. You can easily add table columns using data binding. SAP NetWeaver Developer Studio provides the appropriate tools.

This graphic is explained in the accompanying text The following step describes how to add new table columns to the controller context of a view using data binding .