Simple BSP application to Create, Modify and Delete the database entries

...Previous

STEP 6: Choose the tab Page Attributes and define the work variables, which you are going to use in your application. Besides defining work-variables, you have to define an internal table and a field string.

To define a field-string, use types: ff_progmr. And to define an internal table, use table-type of ‘ZART_PROGRAMMER’ table. Open table using SE11, press Ctrl+Shift+F3 (Where-Used-List), or click the icon , deselect other checkboxes and select Table-Types, purse down the table-type name for the table ZART_PROGRAMMER.

Or create a new table-type, if there exists no table-type. Call transaction SE11->Data type->Create->Table Type->Line Type: ZART_PROGRAMMER->Save and Activate. 

 

fl_flag		TYPE		INT4
fs_progmr	TYPE		FF_PROGMR
t_progmr	TYPE 		ZART_TT
w_dob		TYPE 		DATS
w_doj		TYPE		DATS
w_emno	TYPE		ZART_PROGRAMMER-EMNO
w_ext_dob	TYPE		CHAR10
w_ext_doj	TYPE		CHAR10
w_index	TYPE		INT4
w_salary	TYPE		ZART_PROGRAMMER-SALARY

STEP 7: Choose the tab Layout and design a web-page that should contain a table-view and table-view-columns. Table-View chooses the internal table from which the data has to be fetched and displays it in formatted manner. Table-View-Column.

To get a table-view, choose Tag-Browser from the left-hand pane; pull down BSP Extensions->Transportable->HTMLB. Here you get a lot of htmlb controls, drag Table-View control and drop it in the layout (For additional details about it, right-click the tag and go through documentation). 

 

<htmlb:content design="design2003" >
  <htmlb:page 
title="Main Page " >
    <htmlb:
form>
      
<%
  
if t_progmr[] is not initial.
      
%>
      <
center>
      <
table>
      <
tr>
      <
td>
      <htmlb:tableView 
id              = "Programmer_Data"
                       
table           = "<%= t_progmr %>"
                       visibleRowCount = 
"5"
                       selectionMode   = 
"SINGLESELECT"
                       onRowSelection  = 
"rowSelection" >
        <htmlb:tableViewColumn columnName = 
"EMNO"
                               
title      = "Employee Number" />
        <htmlb:tableViewColumn columnName = 
"DOB"
                               
title      = "Date of Birth" />
        <htmlb:tableViewColumn columnName = 
"DOJ"
                               
title      = "Date of Joining" />
        <htmlb:tableViewColumn columnName = 
"SALARY"
                               
title      = "Salary" />
      </htmlb:tableView>
      </
td></tr>
       <
tr> <td>
                  <
center>
      <htmlb:
button id      = "create"
                    tooltip = 
"Create New Entries"
                    
text    = "CREATE"
                    
onClick = "OnInputProcessing()" />
      </
center>
            </
td></tr>
      </
table>
      </
center>
      
<%
  
endif.
      
%> 

When you activate this page and choice to view the output, it can’t happen since internal table contains no data.

STEP 8: To populate data in internal table, choose Event Handler tab and select OnInitialization, this event is triggered no sooner the page gets refreshed or called for the first time.

OnInitialization:

SELECT * FROM zart_programmer INTO TABLE t_progmr. 

Save, activate and test the page:

[SCM]actwin,-4,-4,1028,742;Main Page - Microsoft Internet Explorer
iexplore.exe
2/28/2009 , 11:50:31 AM
 

Selection-Mode for the table-view has been defined as ‘SINGLESELECT’, this selects desired row. Now, we need Selected-Row-Index, which eases our task to play around with any kind of manipulation we desire.

STEP 8: Choose tab Event Handler and select OnInputProcessing.

OnInputProcessing handles the events for checking and processing user input and for defining navigation.

Code the following in OnInputProcessing event;

DATA:
  w_event    
TYPE REF TO cl_htmlb_event,
  w_eventid  
TYPE string,
  w_object   
TYPE REF TO object,
  w_fieldid  
TYPE string,
  w_in_field 
TYPE REF TO cl_htmlb_inputfield,
  w_in_value 
TYPE string,
  w_employee 
TYPE zart_programmer-emno,
  w_dofb     
TYPE char10,
  w_dofj     
TYPE char10,
  w_esalary  
TYPE zart_programmer-salary.

CALL METHOD cl_htmlb_manager=>get_event
  
EXPORTING
    request               = runtime->server->request
*    fast_exit_event_id    =
*    fast_exit_event_class =
  RECEIVING
    
event                 = w_event.
w_eventid = w_event->
id.

IF w_eventid EQ 'Programmer_Data'.

  
CLASS cl_htmlb_manager DEFINITION LOAD.

  
CASE event_id.

    
WHEN cl_htmlb_manager=>event_id.

      
DATA:
        
event  TYPE REF TO if_htmlb_data,
        selrow 
TYPE REF TO cl_htmlb_tableview.

      
event = cl_htmlb_manager=>get_event_ex( request ).
      selrow ?= cl_htmlb_manager=>get_data( request = request
                                            name    = 
'tableView'
                                            
id      = 'Programmer_Data).

      
DATA: tv_data TYPE REF TO cl_htmlb_event_tableview.
      tv_data = selrow->
data.

      w_index = tv_data->selectedrowindex.

  ENDCASE. 

w_eventid contains the id of button, table-view, etc.

w_index contains selected-row-index value. 

To catch the event, we make use of Class cl_htmlb_manager and method get_event.

Similarly, to catch data from input-fields, get_data method is used.

Click here to continue...

Please send us your feedback/suggestions at webmaster@SAPTechnical.COM 

HomeContribute About Us Privacy Terms Of Use • Disclaimer • SafeCompanies: Advertise on SAPTechnical.COM | Post JobContact Us  

Graphic Design by Round the Bend Wizards

footer image footer image