Using the Button Choice UI Element in Web Dynpro ABAP

Create a Web Dynpro Component ‘ZDEMO_BTN_CHOICE’ in SE80.
Screen1:

On the View Context Tab create two attributes String1 and Result  of Type CHAR30.
Screen2: 

 
In your View on the Layout tab create an Input Field with Label
Screen3:

Bind the attribute String1 to the Input Box
Screen4:

Enter the Text to the Label element
Screen5:

Enter second input box with label element. Bind the Result attribute to the ‘INP_RESULT’ Input box. and enter the text for the label element.
Screen6:

Insert the element Button Choice
Screen7:

After inserting Button Choice element include the Insert Option by Right clicking on the element Button Choice
Screen8:

Create an OnAction Event ‘Up_to_Low’ for the option to convert the Upper Case String to the LowerCase.
Screen9:

After double clicking on the event read the input attribute String1 by using the code wizard (Ctrl+F7). Call the Function Module ‘STRING_UPPER_LOWER_CASE’ by using the pattern Button. And pass the output to the ‘Result’ attribute.  
Screen10:

By following the below step set the value to the result attribute
Screen11:

*** Generated code by Code Wizard and Patten buttons ***
method ONACTIONUP_TO_LOW .
** Declarations **
  DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
  DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
  DATA LV_STRING1 TYPE WD_THIS->ELEMENT_CONTEXT-STRING1.
  DATA LV_STRING TYPE STRING.
  DATA LV_RESULT TYPE WD_THIS->ELEMENT_CONTEXT-RESULT.
* get element via lead selection
  LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
* get element via lead selection
  LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
** To get the Input String **
  LO_EL_CONTEXT->GET_ATTRIBUTE(
    EXPORTING
      NAME =  `STRING1`
    IMPORTING
      VALUE = LV_STRING1 ).
** To Convert the string from UpperCase to Lowercase **
CALL FUNCTION 'STRING_UPPER_LOWER_CASE'
  EXPORTING
    DELIMITER       = '1'
    STRING1         = LV_STRING1
  IMPORTING
    STRING          = LV_RESULT.
** To Set the Value to the Result Input Box **
  LO_EL_CONTEXT->SET_ATTRIBUTE(
    NAME =  `RESULT`
    VALUE = LV_RESULT ).
endmethod.
By right clicking on the Button Choice UI Element include another Insert Option for reverse the string.
Screen12: 

Create an action method ‘Reverse’ for the Insert Option to reverse the string.
Screen13:

Insert the below code to Reverse the Input String
method ONACTIONREVERSE .
** Declarations **
  DATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
  DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
  DATA LV_STRING1 TYPE WD_THIS->ELEMENT_CONTEXT-STRING1.
  DATA LV_STRING TYPE STRING.
  DATA LV_RESULT TYPE WD_THIS->ELEMENT_CONTEXT-RESULT.
* get element via lead selection
  LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
* get element via lead selection
  LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).
** To get the Input String **
  LO_EL_CONTEXT->GET_ATTRIBUTE(
    EXPORTING
      NAME =  `STRING1`
    IMPORTING
      VALUE = LV_STRING1 ).
** To Reverse the input string **
CALL FUNCTION 'STRING_REVERSE'
  EXPORTING
    STRING          = LV_STRING1
    LANG            = 'E'
 IMPORTING
   RSTRING         = LV_RESULT.
** To Set the Value to the Result Input Box **
  LO_EL_CONTEXT->SET_ATTRIBUTE(
    NAME =  `RESULT`
    VALUE = LV_RESULT ).
endmethod.
Create an application to test the WD Component by right clicking on the component ‘ZDEMO_BTN_CHOICE’Web Dynpro Application. After creating an application our Component is ready for testing. Right Click on the application and select ‘Test’.
Screen14: 

 Enter the Input String and click on the Button Choice element and select the option ‘UpperCase to Lower Case’ for the execution.
Screen15:

Output after converting the string from Uppercase to Lower Case  
Screen16: 

After entering the Input string select the option ‘Reverse the String’.
Screen17:

Output of the Reversed String
Screen18: