Dynamic Modifications at Runtime

Contents:
 Introduction
 Modifying the context structure at runtime
 Modifying the UI Element hierarchy at runtime
 The use of dynamic actions

 SAP AG 2005, Title of Presentation / Speaker Name / 1

Dynamic Modifications at Runtime: Unit Objectives

After completing this unit, you will be able to:

 Understand what is dynamic programming
 Dynamically modify and create UI elements
 Dynamically create context elements
 Dynamically bind UI element values to context
elements
 Dynamically create actions

 SAP AG 2005, Title of Presentation / Speaker Name / 2

 Dynamic Runtime Modifications

What is type of dynamic modifications can be made at

runtime?
 Dynamic Context Manipulation
The creation, modification and deletion of context nodes and
attributes
 Dynamic UI Manipulation
The creation, modification and deletion of UI elements
 Dynamic Assignment of Actions to UI Elements

 SAP AG 2005, Title of Presentation / Speaker Name / 3

 Dynamic Runtime Modifications

Under what circumstances should I write coding that

performs dynamic modifications?
There are several situations in which type of coding could be
required:
 When the structure of your data is not known until runtime
 When you want the behaviour of a screen to be generic – and
therefore dynamic
 When you are writing utility components that must function in
a generic manner
 Etc…

 SAP AG 2005, Title of Presentation / Speaker Name / 4

Dynamic Context Data Creation

Context Metadata to be Example of context

created at runtime
metadata to be created
Context Root (c=1..1, s=true) dynamically?
FLIGHTS (c=0..n, s=true)
BOOKINGS (c=0..n,
s=false)
BOOKID

CUSTOMID

CLASS

PASSNAME

CARRID

CONNID

FLDATE
PRICE

 SAP AG 2005, Title of Presentation / Speaker Name / 5

Dynamic Node Creation (1)

Context Metadata to be Coding steps:

created at runtime
Obtain a reference to the metadata of
Context Root (c=1..1, s=true) the context node that will act as the new
FLIGHTS (c=0..n, s=true) node’s parent. In this case, we are
BOOKINGS (c=0..n, s=false) creating an independent node, therefore
BOOKID we get a reference to the metadata of
CUSTOMID the root node.
CLASS
Call static method
PASSNAME create_nodeinfo_from_struct( ) from
CARRID helper class cl_wd_dynamic_tool
CONNID
A DDIC Structure can be used for the
FLDATE
attribute creation.
PRICE

DDIC Structure SFLIGHT

 SAP AG 2005, Title of Presentation / Speaker Name / 6
 Dynamic Node Creation related to a structure

Coding steps:
 Obtain a reference to the metadata of the context node that will act as the new node’s parent.

 Call static method create_nodeinfo_from_struct( ) from helper class cl_wd_dynamic_tool to create from a DDIC structure a node.

DATA: rootnode_info TYPE REF TO if_wd_context_node_info,

table_name type string value 'SFLIGHT',
node_name type string value 'CONNECTIONS'.

* get root node info of context

rootnode_info = wd_context->get_node_info( ).

* create node named CONNECTIONS of sflight

cl_wd_dynamic_tool=>create_nodeinfo_from_struct(
parent_info = rootnode_info
node_name = node_name
structure_name = table_name
is_multiple = abap_false Cardinality 1…1
is_mandatory = abap_true ).

 SAP AG 2005, Title of Presentation / Speaker Name / 7

 Dynamic Sub Node Creation related to a structure

Coding steps: Context Root (c=1..1, s=true)

 Obtain a reference to node and reference to the metadata of the context node that will act as the new node’s parent
FLIGHTS (c=0..n, s=true)
 Call static method create_nodeinfo_from_struct( ) to create from a DDIC structure a node
BOOKINGS (c=0..n,s=false)

BOOKID

CUSTOMID

CLASS

PASSNAME

CARRID

CONNID
DATA: dyn_node type ref to if_wd_context_node, Structure SBOOK
FLDATE
dyn_node_info TYPE REF TO if_wd_context_node_info, PRICE
node_name TYPE string value 'FLIGHTS',
. . .
* navigate from <CONTEXT> to <FLIGHTS> via lead selection
dyn_node = wd_Context->get_Child_Node( Name = node_name ).
dyn_node_info = dyn_node->get_node_info( ).

* create sub node named BOOKINGS of sbook

cl_wd_dynamic_tool=>create_nodeinfo_from_struct(
parent_info = dyn_node_info
node_name = 'BOOKINGS'
structure_name = 'SBOOK'
is_multiple = abap_true
is_mandatory = abap_false ).

 SAP AG 2005, Title of Presentation / Speaker Name / 8

 Add a Dynamic Attribute to a Node

Context Root (c=1..1, s=true)

Coding steps: UI_ATTRIBUTES

BUTTON_VISIBILITY
 Obtain a reference to the metadata of the parent node
TEXT_VISIBILITY
that will contain the attribute

 Fill structure ( WDR_CONTEXT_ATTRIBUTE_INFO )

with attribute properties

 Add attribute to parent node

* add context attribute to node

data: Ui_Attributes_info type ref to If_Wd_Context_Node_info.
data: ls_att type WDR_CONTEXT_ATTRIBUTE_INFO.

* get node info of context

Ui_Attributes_info = Node_Ui_Attributes->get_node_info( ).

ls_att-name = `TEXT_VISIBILITY`.
ls_att-TYPE_NAME = 'WDUI_VISIBILITY'.

Ui_Attributes_info->add_attribute( ATTRIBUTE_INFO = ls_att ).

 SAP AG 2005, Title of Presentation / Speaker Name / 9

 Standard Hook Method – View controller

Only a view controller has these hook methods.

The method WDDOMODIFYVIEW will only be called if:

 The view is part of the current view assembly and this is the
first time the view is required, or

 The view is part of the current view assembly and an action

belonging to the same view controller has been processed.

 SAP AG 2005, Title of Presentation / Speaker Name / 10

 Principles of UI element manipulation

The following coding principles must be adhered to during UI element

manipulation:
1. Only perform direct manipulation of UI element objects when it is not
possible to control their behaviour through context binding.
2. UI manipulation is only permitted within the wdDoModifyView() method
of a view controller.
3. wdDoModifyView() has a boolean parameter called firstTime.
Typically, you will only build a dynamic UI element hierarchy when
firstTime == true. This avoids rebuilding the UI element hierarchy
unnecessarily.
4. Do NOT implement any coding in wdDoModifyView() that modifies the
context! The context should be considered “read-only” during the
execution of this method.

 SAP AG 2005, Title of Presentation / Speaker Name / 11

 Dynamic UI manipulation (1)

Context Metadata UI Element Hierarchy to

be created at runtime

Context Root RootUIElementContainer

Connections
CARRIDLabel
CARRID
CARRIDInput
CONNID

FLDATE CONNIDLabel

PRICE CONNIDInput

FLDATELabel

FLDATEInput

PRICELabel

PRICEInput

 SAP AG 2005, Title of Presentation / Speaker Name / 12

 Dynamic UI manipulation (2)

Context Metadata
Context Root
UI Element Hierarchy to Coding steps:
be created at runtime
Connections  Check that this is the
CARRID RootUIElementContainer first time the view has
CONNID been rendered
FLDATE  Obtain a reference to
PRICE the root UI element
container

method WDDOMODIFYVIEW .

data: wd_container type ref to cl_wd_uielement_container,

. . .

* Check if first time

check first_time = abap_true.

wd_container ?= view->get_element( 'ROOTUIELEMENTCONTAINER' ).

 SAP AG 2005, Title of Presentation / Speaker Name / 13

 Dynamic UI manipulation (3)

Context Metadata UI Element Hierarchy to Coding steps:

be created at runtime
 Create a new InputField UI
element object (bind to context
Context Root RootUIElementContainer
attribute
Connections
Label  Create a new Label UI element
CARRID
object
InputField
CONNID
 Set the Label’s properties as
FLDATE required
PRICE  Add the Label object to the UI
element container

InputField Label  Set the InputField’s properties

as required

 Add the InputField to the UI

element container
bind

add

 SAP AG 2005, Title of Presentation / Speaker Name / 14

 Dynamic UI manipulation (4)

* Create label and input field

** create a input field
wd_input_field = cl_wd_input_field=>new_input_field( view = view
bind_value = 'CONNECTIONS.CARRID').
** create a label for the input field
wd_label = cl_wd_label=>new_label( label_for = wd_input_field->id ).

** set matrix_head_data for the label

cl_wd_matrix_head_data=>new_matrix_head_data( element = wd_label ).

** add label to container

wd_container->add_child( wd_label ).

** set matrix_data for the input_field

cl_wd_matrix_data=>new_matrix_data( element = wd_input_field ).

** add input field to container

wd_container->add_child( wd_input_field ).

 SAP AG 2005, Title of Presentation / Speaker Name / 15

 Dynamic Actions

 Certain UI elements can trigger client-side events (e.g. pressing enter

in an InputField, toggling a CheckBox or selecting the row of a
table).

 In order for the client-side event to trigger the execution of a server-

side method, Web Dynpro uses the concept of Actions.

 Actions can either be assigned declaratively to UI element events at

design time, or dynamically at runtime.

 Actions assigned dynamically can only refer to existing server-side

action handler methods. It is not possible to define the coding of an
action event handler dynamically; only to define which existing action
handler will be called when a client-side event is trapped.

 SAP AG 2005, Title of Presentation / Speaker Name / 16

Action Declaration

Declared action

Coding required
for dynamic
assigned action

 SAP AG 2005, Title of Presentation / Speaker Name / 17

 Create a Dynamic Button

Context Metadata UI Element Hierarchy to Coding steps:

Context Root be created at runtime
 Create a new Button UI
Connections element object (assign an
RootUIElementContainer
CARRID predefined action)
Label
CONNID
 Set the Button properties
FLDATE InputField as required
PRICE Button
 Add the Button to the UI
element container
Button

* Create button
** create button UI element
wd_button = cl_wd_button=>new_button( text = 'Show Flights'
on_action = 'SELECT_FLIGHTS' ).
** set matrix_head_data for the label
cl_wd_matrix_head_data=>new_matrix_head_data( element = wd_button ).
** add button to container
wd_container->add_child( wd_button ).

 SAP AG 2005, Title of Presentation / Speaker Name / 18

Was this a good approach?

Development Principle
Only if the required functionality of your application does not
permit design time declarations, then use a dynamic
modification approach.

All context node/attribute and UI elements which can be

created during design time should be created during design
time.

 SAP AG 2005, Title of Presentation / Speaker Name / 19

Example for Dynamic Programming

Display the content of

ANY table
 Dynamic Context

 Dynamic table UI element

 Dynamic data retrieval

 SAP AG 2005, Title of Presentation / Speaker Name / 20

 Example for Dynamic Programming I

DATA:
group_1 TYPE REF TO cl_wd_uielement_container,
new_tab TYPE REF TO cl_wd_table,
dyn_node TYPE REF TO if_wd_context_node,
tabname_node TYPE REF TO if_wd_context_node,
rootnode_info TYPE REF TO if_wd_context_node_info,
stru_tab TYPE REF TO data,
tablename TYPE string.

FIELD-SYMBOLS <tab> TYPE table.

* get node info of context root node

rootnode_info = wd_context->get_node_info( ).

* Get the name of the table to be created

tabname_node = wd_context->get_child_node( name = 'TABLE_DATA' ).
tabname_node->get_attribute( EXPORTING name = 'NAME' IMPORTING value =
tablename ).
translate tablename to upper case.

* create sub node of structure (tablename)

cl_wd_dynamic_tool=>create_nodeinfo_from_struct(
parent_info = rootnode_info
node_name = tablename
structure_name = tablename
is_multiple = abap_true ).

 SAP AG 2005, Title of Presentation / Speaker Name / 21

 Example for Dynamic Programming II

* remove "old" table UI element from view , if necessary

group_1 ?= view->get_element( 'GROUP_1' ).
group_1->remove_child( id = 'TESTTAB' ).

* * get instance of new node

dyn_node = wd_context->get_child_node( name = tablename ).

DATA new_tab TYPE REF TO cl_wd_table.

* create new UI element table

new_tab = cl_wd_dynamic_tool=>create_table_from_node(
ui_parent = group_1
table_id = 'TESTTAB'
node = dyn_node ).

** fill context node with data

* create internal table of (tabletype)
CREATE DATA stru_tab TYPE TABLE OF (tablename).
ASSIGN stru_tab->* TO <tab>.

* Get table content

SELECT * FROM (tablename) INTO CORRESPONDING FIELDS OF TABLE <tab>.

* Bind internal table to context node

dyn_node->bind_table( <tab> ).
 SAP AG 2005, Title of Presentation / Speaker Name / 22
Web Dynpro Dynamic Programming: Unit Summary

You should now be able to:

 Understand what is dynamic programming
 Dynamically modify and create UI elements
 Dynamically create context elements
 Dynamically bind UI element values to context
elements
 Dynamically create actions

 SAP AG 2005, Title of Presentation / Speaker Name / 23