WebDynpro ALV: Editable ALV using Property Binding

1) Prerequisite

  • Basic knowledge of WebDynpro ABAP
  • ALV component reuse.

2) Objective of this content:

ALV UI elements are extensively used in WebDynpro
applications and a typical requirement would be to make certain cells in ALV
editable depending on a business condition.

Old Solution:

We use to create a dedicated wdy_boolean attribute which
will be mapped to the actual field. So depending on our business condition we
enable(‘X’) or disable the Boolean attribute and it will effectively open or
close our mapped alv cell.

Problem with the old solution:

In a scenario where we have huge number of alv cells(column
perspective) which needs to be open or close depending on different business
conditions, we will have to create that many number of wdy_boolean attributes.
This consequently results in a humungous context node which is mapped to the
alv (DATA) node. for eg: if we have 50 alv fields which opens or close
depending on respective fields condition, we would need to create 50
wdy_boolean attributes in addition to the actual alv fields.

Proposed Solution:

SAP has understood this problem and has introduced the
concept of context property binding for ALV. So in this solution, Instead of
creating an additional attribute to determine whether the field is close or
open, We use the property of the fields attribute itself to determine whether
the cell is open of close.

  sap explaination.jpg

Property Binding concept explained
by SAP:

https://help.sap.com/saphelp_nw04s/helpdata/en/31/3bc041a1236724e10000000a1550b0/frameset.htm

3) Assumed Business Scenario: Requirement for our Demo Applicaiton

We need to create a WebDynpro ALV application which is used
to display SFLIGHT table.

/wp-content/uploads/2014/06/sflight_478322.jpg

Since our intention is to explain the concept of property
binding, we will use a simple scenario to open or close the PRICE cell in our
ALV depending on field SEATSMAX value.

Condition: If SEATSMAX > 300, then

Open the Price Cell

              Else

                              Close the Price Cell

              endif

Steps to create a simple ALV application implementing property bindi

1) Execute tcode>SE80 to open ABAP Development Workbench

2) Create a new webdynpro component (zwd_sflight_prop_binding)

/wp-content/uploads/2014/06/one_478323.jpg

3) click Yes ,Enter the description and execute

/wp-content/uploads/2014/06/2_478324.jpg

save it as a local object or package depending on your
requirement.

4) Now the component should be created as below.

/wp-content/uploads/2014/06/3_478325.jpg

5) Double click on the component and declare the usage of
alv component .

/wp-content/uploads/2014/06/4_478326.jpg

6) Now create the node which will be the structure for our
ALV (SFLIGHT in our example)

Create it in component controller context as below

/wp-content/uploads/2014/06/5_478327.jpg

Click on “Add Attributes from Structure”(this will
create the context node of same structure as SFLIGHT table.

/wp-content/uploads/2014/06/6_478328.jpg

Select All the fields and execute(Fields are selected on the
basis of your alv structure requirement).

Your context node “FLIGHT_NODE” should look as
below.

/wp-content/uploads/2014/06/7_478329.jpg

We will not be creating any wdy_boolean attribute to open or
close alv cells.

7) In the View Controller, Declare the usage of ALV
component and select the alv interface controller as below.

/wp-content/uploads/2014/06/8_478330.jpg

/wp-content/uploads/2014/06/9_495900.jpg

8) go to the view context and copy the component controller
node “FLIGHT_NODE” by drag and drop.

/wp-content/uploads/2014/06/10_478332.jpg

The context node “FLIGHT_NODE” will be now
available in the view controller’s context.

9) Now create the view layout.

Since our demo application has only an
alv(sufficient for the scenario), we need to just declare a view container
which will accommodate the alv view from alv component.

/wp-content/uploads/2014/06/11_478333.jpg

/wp-content/uploads/2014/06/12_478334.jpg

10) Attach ALV component interface view TABLE into our
component.

Click on the window which contains our view, drill down till
the view container and embed view TABLE from
ALV component as below.

/wp-content/uploads/2014/06/13_478335.jpg

11) Map our component node “FLIGHT_NODE” with the
DATA node of alv interface controller context.

Click on the component usage in the object hierarchy and
drill down till the interface controller, Double click on the interface
controller , Declare the usage of our component inside the interface controller
and map our node with the DATA node of ALV.

/wp-content/uploads/2014/06/14_495899.jpg

Map the nodes.

/wp-content/uploads/2014/06/15_478340.jpg

12) Now get the data from SFLIGHT table and populate the
data into the ALV on launch of the application.

/wp-content/uploads/2014/06/16_478342.jpg

the method create inputfld contains the code to create the
input field for field PRICE inside ALV.

/wp-content/uploads/2014/06/17_478343.jpg

The commented code lr_input_field->SET_READ_ONLY_FIELDNAME(
|{ ‘PRICE’ }:{ ‘READ_ONLY’ }| )
decides which field will determine
whether the cell is open or close. So in our case we have declared the
READ_ONLY property of the context attribute PRICE as the one which decides
whether the price cell is open or close.

13) Create the WebDynpro application(this completes how ALVs
are implemented)

Right Click on the component> Create Application

/wp-content/uploads/2014/06/18_478344.jpg

Our ALV output:

/wp-content/uploads/2014/06/19_478345.jpg

The column PRICE(Airfare) is open for all the records as of
now.

14) Now i am going to create a button and onaction event
handler method which will hold the code required for property binding(My
intention is to simplify the concept by modularization).

              If SEATSMAX > 300, then

Open the PRICE Cell

              Else

                              Close the PRICE Cell

                endif.

/wp-content/uploads/2014/06/20_478349.jpg

15) So now in event handler method ONACTIONBINDING ,
write the logic to set the context property of PRICE attribute depending on the
SEATSMAX condition.

/wp-content/uploads/2014/06/21_478350.jpg

Now uncomment the code lr_input_field->SET_READ_ONLY_FIELDNAME(
|{ ‘PRICE’ }:{ ‘READ_ONLY’ }| )
in method CREATE_INPUTFLD.

16) Activate and Launch the application.

Before Binding:

/wp-content/uploads/2014/06/22_478351.jpg

The PRICE(airfare) field is currently open for all the rows.
Now click on button “Apply Property Binding” to apply the business
condition .

After Binding:

/wp-content/uploads/2014/06/23_478355.jpg

The Cells which has SEATSMAX field value greater than 300,
those are the only ones open for editing.

Source code for method CREATE_INPUTFLD

method
CREATE_INPUTFLD .

  DATA: lo_INTERFACECONTROLLER    TYPE REF TO IWCI_SALV_WD_TABLE,

        lr_column                TYPE REF TO cl_salv_wd_column,

        lr_input_field            TYPE REF TO cl_salv_wd_uie_input_field.

  DATA lo_value TYPE ref to
cl_salv_wd_config_table.

  data lo_cmp_usage type ref to
if_wd_component_usage.

  lo_cmp_usage =  wd_this->wd_cpuse_alv( ).

  if lo_cmp_usage->has_active_component( )
is initial.

    lo_cmp_usage->create_component( ).

  endif.

  lo_INTERFACECONTROLLER =  wd_this->wd_cpifc_alv( ).

  lo_value =
lo_interfacecontroller->get_model( ).

  lr_column =
lo_value->if_salv_wd_column_settings~get_column(‘PRICE’).

  CREATE OBJECT lr_input_field

    EXPORTING

      value_fieldname = ‘PRICE’.

  lr_input_field->SET_READ_ONLY_FIELDNAME(
|{ ‘PRICE’ }:{ ‘READ_ONLY’ }| ).

  lr_column->set_cell_editor( lr_input_field
).


lo_value->if_salv_wd_table_settings~set_read_only( value = abap_false
).

endmethod.

Source code for method ONACTIONBINDING

method
ONACTIONBINDING .

  DATA lo_nd_flight_node TYPE REF TO
if_wd_context_node.

  DATA lt_flight_node TYPE
wd_this->Elements_flight_node.

  DATA lo_el_flight_node TYPE REF TO
if_wd_context_element.

  DATA ls_flight_node TYPE
wd_this->Element_flight_node.

  DATA lv_price TYPE
wd_this->Element_flight_node-price.

  DATA lv_flight  TYPE sflight.

  DATA: lo_property      type
if_wd_context_element=>t_property.

* navigate from
<CONTEXT> to <FLIGHT_NODE> via lead selection

  lo_nd_flight_node =
wd_context->get_child_node( name = wd_this->wdctx_flight_node ).

*Get all the
records in the context node

lo_nd_flight_node->get_static_attributes_table(
importing table = lt_flight_node ).

lo_property =
if_wd_context_element=>e_property-read_only.

LOOP AT lt_flight_node

  INTO lv_flight.

* alternative
access  via index

lo_el_flight_node =
lo_nd_flight_node->get_element( sy-tabix ).

IF
lv_flight-seatsmax GT 300.

* set single
attribute property

  lo_el_flight_node->set_attribute_property(

    attribute_name =  `PRICE`

    property = lo_property

    value = abap_false ).

ELSE.

* set single
attribute property

  lo_el_flight_node->set_attribute_property(

    attribute_name =  `PRICE`

    property = lo_property

    value = abap_true ).

ENDIF.

ENDLOOP.

endmethod.

Bottom Line: You can use this property binding concept for variable of business scenario and avoid the creation of dedicated context attribute which can have serious implications on the performance of the application.

This approach will help a developer to keep the context nodesize to minimum and thus a better performing application.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

    1. Tashi Norbu Post author

      Hi Katrice,

           Thanks for your feedback, Felt its important to share what i have learned to learn more 🙂

      Thanks

      Tashi

      (0) 

Leave a Reply