Arranging UI Elements in a View 

When the view content itself has been clarified and in which manner you would like to provide it to the end user you can start with the layout tasks. Requirement for designing the view layout is of course that you have finalized the navigation design for the whole Web Dynpro application. Whether you plan to display multiple Web Dynpro views within the Portal, or if embedding views to provide rich business applications using several encapsulated view units are a central need for your application – these are details of the application design but of course the requirements need to be considered also when designing the layout since for example the complexity of the layout of a single view is influenced by those decisions.

You are supported by the following features and functions when designing the layout. They allow you to simply and quickly develop high-quality user interfaces.

●      Graphical tool support with the View Designer tool

●      Large set of predefined user interface elements

○       When designing and implementing the user interface you can use container user interface elements, which have an own set of properties, for example for designing the view in a grid or column layout.

○       Within the next design step, you will integrate the user interface elements, which shall be finally displayed on the screen. In this design layer you decide about the length of an input field, for example, or the dimension of a business graphic.

Layouts

The layout can be defined for the entire view by defining the RootElement’s layout and for each single container inside a view.

More information: Choosing the Layout

Tables, Pies, Calendars – More than 80 elements for UI design available

Provided via categories to simplify the access, you can use a large set of user interface elements. There are complex rich ones such as tables as well as smaller ones like a simple input field, or a button.

More information: Adding UI Elements

Reusing graphical data such as MIMEs

Mimes, Icons and other graphical application elements can be easily integrated. The only thing you need to know is the path to the path to the image file.

More information: Specifying the Image Source

User interface data in the data flow

Since the user interface elements have two functions - providing a nice layout for the end user as well as processing the outgoing and incoming data - there is a need of course to influence the data flow between the logical applications view and controller. This process is called data binding and can easily be done with graphical support in the Controller Editor.

More information: Binding Data