Radio Button

12

Click here to load reader

Transcript of Radio Button

Page 1: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Applies to: Web Dynpro for ABAP. ECC 6.0 onwards. For more information, visit the Web Dynpro ABAP homepage.

Summary This article shows a step by step procedure for creating and working with radio buttons in a table row. This can help new Web Dynpro ABAP developers in building complex applications.

Author : Sreekanth Gollamudi

Company : IBM

Created on : 11 July 2009

Author Bio Sreekanth Gollamudi has around five years of experience which includes in Analysis, Design and Development of complex software applications relating to SAP. He has very good experience in design and development of FRICE objects and strong background in OOABAP, BSP and WebDynpro for ABAP.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 1

Page 2: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Table of Contents Introduction ........................................................................................................................................................ 3 

Creating a component ..................................................................................................................................... 3 Context creation ........................................................................................................................................................... 3 Context population ....................................................................................................................................................... 4 View ............................................................................................................................................................................. 5 Code ............................................................................................................................................................................. 8 New table ..................................................................................................................................................................... 9 

WebDynpro Application ................................................................................................................................. 10 Create a WebDynpro application ................................................................................................................................ 10 Execute ...................................................................................................................................................................... 10 

Related Content ................................................................................................................................................ 11 

Disclaimer and Liability Notice .......................................................................................................................... 12 

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 2

Page 3: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Introduction We will see how to build an application with radio buttons in a table row and how to get the changed radio button values when an action triggered.

Creating a component

Create a WebDynpro component with name ZWD_RADIO

Context creation

Go to ComponentController’s context, create a node

Under context node create four attributes…Name, SelectedKey, Accept and Deny with type as STRING.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 3

Page 4: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Context population

Write the below code in WDDOINIT of component controller. Here selectedkey valus is important when we bing the data to a table.

METHOD WDDOINIT . DATA: NODE TYPE REF TO IF_WD_CONTEXT_NODE, IT_DATA TYPE IF_COMPONENTCONTROLLER=>ELEMENTS_RADIO, WA_DATA LIKE LINE OF IT_DATA. WA_DATA-NAME = 'Sachin'. WA_DATA-SELECTEDKEY = 'a'. WA_DATA-ACCEPT = 'X'. WA_DATA-DENY = ' '. APPEND WA_DATA TO IT_DATA. WA_DATA-NAME = 'Dravid'. WA_DATA-SELECTEDKEY = 'a'. WA_DATA-ACCEPT = 'X'. WA_DATA-DENY = ' '. APPEND WA_DATA TO IT_DATA.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 4

Page 5: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

WA_DATA-NAME = 'Saurav'. WA_DATA-SELECTEDKEY = 'b'. WA_DATA-ACCEPT = ' '. WA_DATA-DENY = 'X'. APPEND WA_DATA TO IT_DATA. NODE = WD_CONTEXT->GET_CHILD_NODE( NAME = 'RADIO' ). NODE->BIND_TABLE( IT_DATA ). ENDMETHOD.

View

Now map the component controller context to view context

Insert a table UI element on the view

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 5

Page 6: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Create 3 columns in a table, and first column as textview, second and thrird columns as radio buttons.

-> Bind the table columns with view context.

Bind the first column with the name of the view context

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 6

Page 7: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Bind the Second and Third column’s selectedKey property with the view context’s SELECTEDKEY.

Note: KeyToSelect should be different in each column and selectedKey should be same and should be binded with same context node. For example, for the first radio button, I am passing keyToSelect as ‘a’ and next one as ‘b’ and both are binded to same context node SELECTEDKEY. Depending on the value keyToSelect, we can write the code on some action.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 7

Page 8: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Put a button on the view and create action with name as ‘UPDATE’.

Code

Write the below code in the update action method.

METHOD ONACTIONUPDATE . DATA : ITEMS_NODE TYPE REF TO IF_WD_CONTEXT_NODE, IT_RADIO TYPE IF_MAIN=>ELEMENTS_RADIO, WA_RADIO LIKE LINE OF IT_RADIO. ITEMS_NODE = WD_CONTEXT->GET_CHILD_NODE( NAME = 'RADIO' ). ITEMS_NODE->GET_STATIC_ATTRIBUTES_TABLE( IMPORTING TABLE = IT_RADIO ). LOOP AT IT_RADIO INTO WA_RADIO. CLEAR: WA_RADIO-ACCEPT, WA_RADIO-DENY.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 8

Page 9: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

IF WA_RADIO-SELECTEDKEY = 'a'. WA_RADIO-ACCEPT = 'X'. ELSEIF WA_RADIO-SELECTEDKEY = 'b'. WA_RADIO-DENY = 'X'. ENDIF. MODIFY IT_RADIO FROM WA_RADIO INDEX SY-TABIX. ENDLOOP. ITEMS_NODE->BIND_TABLE( IT_RADIO ). ENDMETHOD.

New table

Create a new Table UI element on the view and bind - Name, Accept and Deny fields of view context to the table UI element.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 9

Page 10: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

WebDynpro Application

Create a WebDynpro application

Execute

Execute the application and by default we will get the below screen

Now change the radio options and click on update button, will gives the below result.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 10

Page 11: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

Related Content For more information, visit the Web Dynpro ABAP homepage.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 11

Page 12: Radio Button

Web Dynpro for ABAP – Working with Horizontal Radio Buttons in a Table

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 12

Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.