Dynamic Layout Manipulation 

Under certain conditions, it may be useful to change the layout of a view at runtime. In this context, you can add as well as remove UI elements. You can also change the properties of a UI element dynamically, bind an event to an action, or manipulate the Parameter Mapping of Event Parameters.

Basically, you should use the dynamic manipulation of the layout – just like the dynamic manipulation of the context – only if it is not possible to construct a component by declarative means. This may be the case if parts of the component are not yet knows at design time.

 To make changes to the structure of a view layout, you must use the method WDDOMODIFYVIEW (or a method called within it).

 For a complete list of all UI element classes and their methods, refer to the reference part of this documentation.

 

Containers and UI Elements

You have to understand the structure of views in order to work with dynamic layout manipulation: In a view, a number of UI elements is laid out in relation to one another. This is done in so-called containers. To describe it, a layout is selected for every container: FlowLayout, MatrixLayout, or RowLayout exist (see reference documentation, chapter Layout). Every UI element has layout data, in accordance with the embedding container. This layout data contains the description, at which position in the layout of the container an embedded UI element has its place.

 The layout of the container and the layout data of the embedded UI element must always match. Example: If the container is of type FlowLayout, then the layout data of the embedded UI elements must be of type FlowData.

 

When a view is created, it already contains an empty container, the ROOTUIELEMENTCONTAINER. Within this container, the entire view layout is structured.

Adding a UI Element to a Container

To add a new UI element to a UI element container, proceed as follows:

●      You must determine what kind of a UI element it is.

●      For the container element to which to add the new UI element you must create a reference (method view->GET_ELEMENT).

●      You must determine the position in the container layout, where to fit in the new element. For this purpose, you must create the layout data for the newly created UI element.

●      To enable personalization and use in eCATTs and unit tests, you must enter an ID for the new UI element in method NEW_<xxx>.

The code fragment below shows the steps required to add a UI element of type Button:

 

method WDDOMODIFYVIEW .   data: LR_CONTAINER         type ref to CL_WD_UIELEMENT_CONTAINER,       LR_BUTTON            type ref to CL_WD_BUTTON,       LR_FLOW_DATA         type ref to CL_WD_FLOW_DATA.      LR_BUTTON           =  CL_WD_BUTTON=>NEW_BUTTON( ID = ‘MY_BUTTON’ ).  LR_FLOW_DATA        =  CL_WD_FLOW_DATA=>NEW_FLOW_DATA( element = LR_BUTTON ).    LR_CONTAINER ?= view->GET_ELEMENT( 'ROOTUIELEMENTCONTAINER' ).    LR_CONTAINER->ADD_CHILD( LR_BUTTON ). . . endmethod.

Properties of the Newly Added UI Element

If you want to set a property of the UI element during the dynamic creation, pass the values when you create the element. To enhance the above example with a text on the button to be created (the text has been created before in the Online Text Repository):

data:    MY_TEXT       type string.          MY_TEXT      =  CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( 'MY_TEXT_ALIAS' ).    LR_BUTTON    =  CL_WD_BUTTON=>NEW_BUTTON( ID = ‘MY_BUTTON’ text = MY_TEXT ).

A property like the text of the button can also be used later. For this purpose, the class CL_WD_BUTTON, and all other basis classes of UI elements, contains the appropriate method – for the example above, this is the method SET_TEXT. In the same manner, you can set or change all other properties of a UI element. For example, you can assign an action (which you created independently) to the button or change the assignment dynamically.

LR_BUTTON    =  CL_WD_BUTTON=>NEW_BUTTON(       ID = ‘MY_BUTTON’ text = MY_TEXT                                              On_action = MY_ACTION ).

Besides, you can bind properties of UI elements to context nodes. To do this, the class CL_WD_[UI element type] contains a set of methods BIND_[property type]:

LR_BUTTON->BIND_TEXT( 'NODE_NAME.ATTRIBUT_NAME' ).

 

Removing a UI Element from a Container

To remove a UI element from a container, the class CL_WD_UIELEMENT_CONTAINER contains the method REMOVE_CHILD.