Crear BSP Desde Cero

Building a simple BSP Application
This document describes the how to create and execute the BSP Application.
Step1: SE80 is the transaction where you can build the BSP Application.
Select BSP Application as shown below and provide the name of the BSP Application name and press
enter.
Step2: Provide the description of the BSP Application and click create button.
Activate the BSP Application.

Step3: Create the page as shown below.
Step4: You will get the following screen there you provide name page and its description.
Step5: Application automatically generates the some code as shown below.

Step6: To execute the BSP Application, we use URL (Uniform Resource Locator). We can find the URL of
the BSP Application as shown below.
Step7: Now go to SAP Logon Pad and note down the application server.
Step8: Now go to C:\WINDOWS\system32\drivers\etc\hosts.txt, Open this hosts.txt file and provide the
application server and URL of the BSP Application as below.
Step9: Now you can execute the BSP Application in web browser.
Building a simple BSP Application to retrieve Material information
Go to transaction SE80. Select BSP application and input the name of the BSP application that you want
to create.
Save and activate the application.

Right click on the application name and click createpage.
The resultant window appears as follows.
Enter the name of the page that you want to create. In this case it is the default.htm that I am creating.
Enter the description of the page and click on continue.
Click save.
You can observe the pages with flow logic and under that you can find default.htm page in the BSP
application tree.
Change the code in the layout as shown in the image below or copy and paste the code given below in
the layout window.
<%@ page language="abap" %>

<html>
<body BGCOLOR="#B5E1D2" >
<h2> <B> MATERIAL DETAILS </B> </h2>
<form method="post">
Material Number
<input type=text name="matnr" value="" >
<input type=text name="matnr2" value="" >
<p>
<input type=submit name="onInputProcessing(select)" value="Get Details">
<p>
<input type=submit name="onInputProcessing(materials)" value="Get All">
<p> <center>
<table border=1>
<% data: wa_mara type mara. %>
<% if i_mara is not initial. %>
<tr> <td><b>MATNR</b></td>
<td><b>ERSDA</b></td>
<td><b>LAEDA</b></td>
<td><b>VPSTA</b></td>
</tr>
<% loop at i_mara into wa_mara. %>
<tr>
<td> <%= wa_mara-matnr %> </td>
<td> <%= wa_mara-ersda %> </td>
<td> <%= wa_mara-laeda %> </td>
<td> <%= wa_mara-vpsta %> </td>
</tr>
<% endloop. %>
<% else. %>
<tr> <td><b>MATNR</b></td>
<td><b>ERSDA</b></td>
<td><b>LAEDA</b></td>
</tr>
<% loop at it_mara into S_mara. %>
<tr>
<td> <%= S_mara-matnr %> </td>
<td> <%= S_mara-ersda %> </td>
<td> <%= S_mara-laeda %> </td>
</tr>
<% endloop. %>
<% endif. %>
</table>
</form>
</body>
</html>
Create the page attributes as shown below.

Save, Check and activate the BSP application and execute. Enter the login name and password in the
pop-up that appears.
The BSP page looks as shown below.
In the Event Handler tab, under OnInputProcessing tab, write the code as shown below or copy and
paste the code that is given below.
Code under OnInputProcessing.
CASE EVENT_ID.
WHEN 'select'.
NAVIGATION->SET_PARAMETER( 'matnr' ).
SELECT * FROM MARA INTO TABLE I_MARA WHERE MATNR BETWEEN MATNR AND MATNR2.
WHEN 'materials'.
SELECT * FROM MARA INTO TABLE I_MARA.
WHEN OTHERS.
ENDCASE.
Click on the BSP application name and input as shown below.
Save, check and activate the BSP application and then execute the application. The page would be
displayed as shown below.
Enter the material numbers in the textboxes and then click on Get details.
The output would be as follows.
The output is a result of the select query that we fired selecting the specified set of fields.
Click on the Get all button to get the output as follows.

Remember, we have fired a select query selecting all the records from the database table MARA and are
displaying it.
A Simple BSP application to select a range of Sales Document and display the result on
the next Page
This Document explains about a simple BSP application where we can give a range of Sales Document
Number and then the respective data related to that Sales Document Number is displayed.
The factors that have been considered while doing this BSP Application.
First to create a BSP Application and execute it on the browser we have to include the IP address
of the particular system and browser in the drivers program. We can do this by going to START-
>RUN->DRIVERS->ETC
We can use HTML or HTMLB or any other coding to construct a BSP application. (Here we are
using HTMLB)
We have considered table VBAP
We have use the class CL_HTMLB_MANAGER and CL_HTMLB_EVENT and created their
instances.
Steps to create a BSP Application.
1. Go to Transaction SE80, select BSP Application and give the name of the Application you want to
create. Press ENTER.
2. A pop-up window appears where we have to give a short description and press Create.
3. After creating the Application assign it to package.

4. Now go to the object right click on it. Say Create->Page.
5. Then a pop up window appears, we have to give the name of the page we are creating (here
First.htm) and give some short description.
6. A page of layout tab will be created with some amount of coding on it. When we execute it we get a
web page provide all the host address is mentioned correctly in drivers.
7. Activate the page and the application as well. Then we will see a hierarchy of the application and
pages.
8. Now go to the page First.htm of what we have created.
9. This hierarchy of application and pages are from the Repository Browser. On the layout of the
page to include any input fields or buttons or tabular structures we have to go to the Tag Browser,
from where we have to select the tags.
10. After going to the Tag Browser. Go to BSP Extensions -> Transportable -> HTMLB.
11. Once we click open the HTMLB, there are many tags. For our purpose on the first page we need.
Since we need to enter a range of Sales Document Numbers, we need 2 input fields.
One label to indicate the input field.
One Button, which on clicking will get us the required data.
12. So we drag and drop the required TAGS from the Tag Browser. Our Coding with all the Input fields,
buttons and labels will be like this.
13. Here in the above coding the variables w_vbeln1 and w_vbeln2 have to be declared in Page
Attributes and the IDs given to each input field or button is of at most importance because they
uniquely identify each Field or button.
14. Here in the above coding the variables w_vbeln1 and w_vbeln2 have to be declared in Page
Attributes and the IDs given to each input field or button is of at most importance because they
uniquely identify each Field or button.
15. Now, we have to write our main code in the event OnInputProcessing. For that purpose we have
to go to the Event Handler tab and select OnInputProcessing event there.
16. Since we are using the class CL_HTMLB_MANAGER we have to call this class and have to create
an Instance according to it.
We also have to write the Page Navigation logic here because we are Navigating from the first
page to the second page. Create the Second Page and name it as Second.htm.
The coding on the page is like this.

Here the values in the braces of SET_PARAMETER are the IDs of the input fields.
This is the navigation logic. On the last line navigation->next_page( 'NEXT' ).
NEXT here is defined like this.
Double Click on the application.
The following screen will appear.
17. Now Designing the SECOND PAGE.
18. Our output on the second page should be in tabular form. So, in our layout we have to define table
view like this.
19. Here on the Second Page also we have to define the page attributes like this.
20. Now we have to write the code in the INITIALIZATION event. Because this event triggers when
ever a new page is called.
21. The code is as follows.
* event handler for data retrieval
data :
w_event type ref to cl_htmlb_event ,
w_eventid type string ,
w_obj type ref to object ,
w_obj1 type ref to object ,
w_vbeln type ref to cl_htmlb_inputfield ,
w_vbelnval type string ,
w_vbeln1 type vbap-vbeln ,
w_vbeln2 type vbap-vbeln .
* Calling Method for w_vbeln
CALL METHOD cl_htmlb_manager=>get_data
EXPORTING
request = runtime->server->request
name = 'inputfield'
id = 'i_vbeln'
receiving
data = w_obj
.
w_vbeln ?= w_obj . " Passing the object vale to w_vbeln
w_vbelnval = w_vbeln->value . " now the value from w_vbeln is passed to
" w_vbelnval
w_vbeln1 = w_vbelnval . " Now value from w_vbelnva is passed to
" w_vbeln1
* Here we have called the class cl_htmlb_manager and an instance get_data has
* * been created.
CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'
EXPORTING
input = w_vbeln1
IMPORTING
OUTPUT = w_vbeln1.
* Function to change external format to the internal format
* Calling Method for w_vbeln
EXPORTING
name = 'inputfield'
id = 'i_vbeln1'
receiving
data = w_obj .
w_vbeln ?= w_obj . " Passing the object vale to w_vbeln
w_vbelnval = w_vbeln->value . " now the value from w_vbeln is passed to
" w_vbelnval
w_vbeln2 = w_vbelnval . " Now value from w_vbelnva is passed to
" w_vbeln2
CALL FUNCTION 'CONVERSION_EXIT_ALPHA_INPUT'
EXPORTING
input = w_vbeln2
IMPORTING
OUTPUT = w_vbeln2 .
* Function to change external format to the internal format
select * from vbap into table t_vbap where vbeln between w_vbeln1 and w_vbeln2.
22. Save and activate the application.
Now when we execute the application. The Screen will be like this.
On Clicking the button Get Data. The output would be like this.
Providing F4 help in the BSP Application
Step1: To provide f4 help for the input field, we have to add showHelp and onValueHelp attributes to the
inputField tag. Provide the values to those attributes as shown below.
Step2: The attribute onValueHelp has to assign a function, which is to be defined. In this function,
using the document.open statement, we can open a page as a window to the input field as F4 help.
Step3: Create a page with the name specified in the function getCustomer (). And in the event
onRequest event handler get the data for f4 help.
Step4: To transfer the selected value in the f4 help window to the input field, we need to write a function
which is mentioned in button tag.
Here, we define the function transf containing value of the parameter to be transferred in to input field.
Now, we have to catch this parameter value in the main page by providing this code.
function transf (fval)
document.getElementById("ip_kunnr").value = fval;
Here, we are assigning the parameter value to the id of input field.
Step5: The code is to be written in first.htm is
In Layout
The code in customer.htm is
In layout:
Here, we have to use the attribute onClientClick and a function name is to be assigned to this attribute.
In this function, we have to write the code for transfer the selected value in to the input field after pressing
the button.
In onInputProcess:
In onRequest:
Step6:
The output of the screen shots as shown below:

When press the button Press Me, then
Providing list box in a BSP application
Go to Transaction SE80->
Select BSP Application & Enter a Name to create a new BSP Application (Eg:yhbsplistbox):
Press ENTER to create a new Object & Click on Yes:
Enter the Short Description and Press Enter:

Once the Object is created, Right Click on the Name and create a Page:-
Enter the Page Name and the Description and select page with Flow Logic Option
Now Page is created. Enter the Below Code.
In Layout Code:-
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<htmlb:content design="classic+design2002+design2003">
<htmlb:page title = "First Page ">
<htmlb:form>
<htmlb:dropdownListBox id = "myDropdownListDay"
tooltip = "Quick info for myDropdownListBox">
<%
LOOP AT t_mod INTO fs_mod.
%>
<htmlb:listBoxItem key = "<%=fs_mod%>"
value = "<%=fs_mod%>"/>
<%
%>
<%ENDLOOP.%>
</htmlb:dropdownListBox>
</htmlb:form>
</htmlb:page>
</htmlb:content>
In Event-handler on Initilalization.
SELECT modul FROM zemployee INTO TABLE t_mod.

sort t_mod.
delete adjacent duplicates from t_mod comparing modul.
Page Attributes:-
Fs_mod type types_mod
t_mod type fs_module.
In Type Definition:
TYPES:
BEGIN OF types_mod,
modul TYPE zemployee-modul,
END OF types_mod,
fs_module type
standard table
of TYPES_MOD.
OUTPUT:
Using controller in BSP Application
This document describes the how to create a controller in BSP Application.
1. Creating BSP Application
Create a BSP Application in SE80 e.g., YH1328_TEST_BSP and provide short description and create it.
2. Creating Controller on BSP Application
Right click on the application and create-> controller and enter name as main.do along with description
and press continue.
3. Populating Controller Class
Enter the name of your controller class i.e. yh1328_controller_main. We also need to create this class in
SE24
(Double click on yh1328_controller_main to create the class and press YES)
4. Creating Controller Class
In the Properties Tab of the class yh1328_controller_main ensure its super class is
CL_BSP_CONTROLLER2.
5. Redefining Methods of the Class
We need to redefine some methods inherited from the superclass i.e. DO_INIT and DO_REQUEST.
6. Redefine method DO_INIT, dbl click on the method in change mode.
The DO_INIT Method behaves just like initialization event wherein we provide the data
declaration.
Here we can fetch the data form the database table SFLIGHT into internal table t_flight
The attributes have to be set in the Attributes Tab of the Class
7. Redefine Method DO_REQUEST
Select the method DO_REQUEST and press the Redefine button and open the method in change mode.
In this method we would be calling Layout (View) we create a reference variable referencing the page and
then call the methods CREATE VIEW and pass it the actual view (not yet created). We then call the view.
.
8. Create a BSP Page (View)
In SE80 right click on the BSP Application and select Create->Page->Page Type-> View
Provide the page as main1.htm and description.
9. Assigning attributes to the View.

10. Populate the view with data.
11. Save and Activate BSP Application
12. Execute the controller: Go to the controller index and double click. Use the test (execute) button to
view the results.
Building interactive BSP Application

This documents describes the How to handle Interactive reporting (Extension to BSP Application1
document).
Step1: Create the BSP Application ZBSP_TABLE_EXT and page name First.htm.
Step2: Provide the select-option on the screen.
Step3: when particular table row is selected then the corresponding detailed information should be
displayed.To achieve this functionality, we have to select selectionMode, onRowSelection, keyColumn
in tableview tag as shown.
Step4: Consider the Tableview event handler too along with Inputfield event handler in the EVENT
HANDLER.
Step5: The code should be written as follows

The code in Layout is:
The code in the Event handler:
Here, row_key is a field in tv_data which contains the selected row value (Key value mentioned in the
tableview).
Define the page attributes as below:
fs_vbak TYPE VBAK Sales Document: Header Data
it_kna1 TYPE TYPES_KNA1 Internal table to hold customer information
it_vbak TYPE TYPES_VBAK Internal table to hold Sales information
w_flag TYPE C Flag
w_kna1 TYPE KNA1 General Data in Customer Master
w_kunnr_high TYPE KNA1-KUNNR Customer Number 1
w_kunnr_low TYPE KNA1-KUNNR Customer Number 1
Define Type definition as below:
types: types_kna1 type table of kna1,
types_vbak type table of vbak.
types:
begin of types_range,
sign(1),
option(2),
low type kunnr,
high type kunnr,
end of types_range.
Now execute the BSP Application
Displaying table contents on the BSP Application
Step1: In SE80 (Object Navigator), For HTML tags, Go to TAG BROWSER wherein select the BSP
Extensions as below.
Step2: In TRANSPORTABLE tree structure, select HTMLB where we can find all HTML tags like Label,
Button, and Input Field etc.
Step3: Create BSP Application and page with name First.htm.
Step4: To place the Label and Input field in the web browser, go to Tab browser->BSP Extensions-
>Transportable->Htmlb. Go to Label html tag, drag and drop it into Layout. Similarly same as for input
field.
Step5: User-define data types can be defined in Type Definition tab strip.
Step6: Page Attributes are parameters declared explicitly for one page. We can access the page
attributes from Layout and event handler.
Step7: When the button is pressed, the process to be executed can be written in OnInputProcess event
handler. Copy the some event handler code from Input Field Documentation and do necessary
modifications as shown.
Step8: To display table, we have to use tableview html tag. Provide the id and table name as shown.
Step9: Execute the application then the following screen appears.
Provide the customer name then the output screen is:

Step10: In the above output, to retain the value given customer field, we can achieve it by the option
value in the Inputfield in html tag.
Now the output is:

Step11: To display only selected field in the table, then we can achieve this using tableviewcolumn html
tag.
Now the output will be:
Navigation between BSP Pages
The values can be navigated between pages either by using NAVIGATION OBJECT or COOKIES.
Using NAVIGATION OBJECT, we can transfer only the values where as by COOKIES, we can pass
tables too.
Step1: You can find the Objects and their signature for individual events handler by choosing
SIGNATURE button in web application browser.
Step2: In this navigation object, we have methods which are used to determine the characters of
subsequent page and the methods which can be used to pass the values from one page to its
subsequent pages.
We can use NEXT_PAGE method to determine the subsequent page and SET_PARAMETER method to
transfer the values between pages.
Step3: To transfer the values between pages, we have to define the parameters as AUTO PAGE
ATTRIBUTE (in case of OBJECT NAVIGATION) as shown.
Step4: In event handler,
Step5: We can also transfer the values using COOKIES too. Here, we have to set the cookie (using
NAME parameter) and get the cookie in subsequent page.
We have to mention the expiry date of cookie also.
Step6: We have to get this cookie in subsequent page of OnRequest Event handler as shown below.
Create Server-Side Cookies
Yours is a stateless or stateful application. if its stateful, instead of cookies, you can use application class
to hold the data
It is a stateless application; I want to reduce the waiting time for a customer by preparing cookies for that
particular customer in advance.
Go to SE80
Create a BSP application
Create a page
Click on layout tab

Paste the code in layout tab
<html>
<body>
Selection page
Stateful or stateless?
<form method="post">
<table>
<tr>
<td>stateful</td>
<td><input type=text name="LAST_STRING_ADDED" value="" >
</td>
<td><input type=text name="NEXT_STRING" value="" >
</td>
<td><input type=submit name="onInputProcessing(request)"
value="Retrieve"></td></tr>
<tr>
<td>stateless</td>
<td><input type=submit name="onManipulation(manipulate)"
value="Store"></td></tr>
</table>
</form>
</body>
</html>
Click on event handler tab
Paste it below code

Select oninputprocessing, Paste the below code
onManipulation code
event handler to manipulate dynamically the HTTP stream
data: PAGE_DATA type XSTRING.

data: NAME type STRING.
export LAST_STRING_ADDED from LAST_STRING_ADDED
STRINGS from STRINGS
to data buffer PAGE_DATA.
NAME = SY-UNAME.
call method CL_BSP_SERVER_SIDE_COOKIE=>SET_SERVER_COOKIE
exporting
NAME = 'my_cookies'
APPLICATION_NAME = 'ZCOOKIES '
APPLICATION_NAMESPACE ='ZCOOKIES '
USERNAME = NAME
SESSION_ID = 'same_for_all'
DATA_NAME = 'page_data'
DATA_VALUE = PAGE_DATA
EXPIRY_TIME_REL = 3600
Click on page attributes tab.

Declare like this
LAST_STRING_ADDED TYPE STRING
STRINGS TYPE STRING
Save, check, activate it, screen appear like this and click ok button
Click on store button
After storing, go to SE38
BSP_SHOW_SERVER_COOKIES run this program

Execute the program
These cookies will save under SSCOOKIE table

Create Client-Side Cookies
Go to Transaction SE80 and create a BSP application.
Create page
Click on layout button, paste the below code.

<html>
<head>
<title>Test Page</title>
<script >
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return
null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
function Set_Cookie(name,value,expires,path,domain,secure) {
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
function Delete_Cookie(name,path,domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
";expires=Thu, 01-Jan-70 00:00:01 GMT";
}
var today = new Date();
var zero_date = new Date(0,0,0);
today.setTime(today.getTime() - zero_date.getTime());
var cookie_expire_date = new Date(today.getTime() + (8 * 7 * 86400000));
function setVisitorID() {
if (Get_Cookie('VisitorID')) {
var VisitorID = Get_Cookie('VisitorID');
}else{
Set_Cookie('VisitorID',Math.random(),cookie_expire_date);
}
}
function setSessionID() {
if (!Get_Cookie('SessionID'))
Set_Cookie('SessionID',Math.random());
}
var loaded_script = true;
</script>
<script language="javascript">
//This line could be used to set a cookie manually
Set_Cookie( "key" , "val" , cookie_expire_date , "/stuff" , false );
//This line is used to set a visitor ID, which is easier
setVisitorID();
</script>
</head>
<body>
This is only a test.
</body>
</html>
Save, activate and execute
Click on ok button
Then displaying like this
Then go to client server (our system) where would be stored cookies, go to that path, my system path I
shown here.
C:\Documents and Settings\mouriuser\Cookies

A Simple BSP Application Using HTMLB components on TableView, group by
Radiobutton and Dropdown list box
STEPS:
Create a BSP application by the name zradiodropdown and create a page named dropdown.bsp.
Save check and activate the application.
In the layout tab of the BSP page, write the following code as shown below:
CODE :
<%@page language="abap" forceEncode="html"%>
<%@extension name="bsp" prefix="bsp"%>
<htmlb:content id="content" design="classic+design2002+design2003"
controlRendering="sap"
rtlAutoSwitch = "true">
<htmlb:page title = "BSP Extension: HTMLB / Element: radioButtonGroup &
radioButton">
<htmlb:form>
<htmlb:radioButtonGroup id = "myRadioButtonGroup1" >
<htmlb:radioButton id = "activate" text = "activate = onClick"
onClick="myClick" />
<htmlb:radioButton id = "deactivate" text = "deactivate = onClick"
onClick="myClick" />
</htmlb:radioButtonGroup>
<br>
<br>
<htmlb:dropdownListBox id = "mydropdownListBox1" >
<htmlb:listBoxItem key = "key_vbak" value = "vbak" />
<htmlb:listBoxItem key = "key_vbap" value = "vbap" />
<% if it_vbak is not initial.%>
<htmlb:tableView id="tv_vbak" table="<%= it_vbak%>">
</htmlb:tableView>
<%endif.%>
<% if it_vbap is not initial.%>
<htmlb:tableView id="tv_vbap" table="<%= it_vbap%>">
</htmlb:tableView>
<%endif.%>
</htmlb:form>
</htmlb:page>
</htmlb:content>
In the page attributes tab of the page, create the attributes as shown in the image below.
In the Event handler tab of the BSP page, write the following code as shown below.
CODE:
* event handler for checking and processing user input and

* for defining navigation
DATA: radioButtongroup TYPE REF TO CL_HTMLB_RADIOBUTTONGROUP.
radioButtonGroup ?= CL_HTMLB_MANAGER=>GET_DATA(
name = 'radioButtonGroup'
id = 'myRadioButtonGroup1' ).
DATA: data1 TYPE REF TO CL_HTMLB_DROPDOWNLISTBOX.
data1 ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request
name = 'dropdownlistbox'
id = 'mydropdownListBox1').
selection1 = radioButtongroup->selection.
case selection1.
when 'activate'.
** IF data1 IS NOT INITIAL.
selection2 = data1->selection.
case selection2 .
when 'key_vbak'.
select * from vbak into table it_vbak.
when 'key_vbap'.
select * from vbap into table it_vbap.
endcase.
** ENDIF.
when 'deactivate'.
data1->disabled = 'TRUE'.
endcase.
ENDIF.
Save, check, activate and execute the application. Click the execute icon to execute the application.
Input the username and password to complete the authentication.
CLICK ON OK BUTTON.
Click on the activate button and select a drop down list box element. i.e VBAK
The below screen is the output of the VBAK table.
Click on the activate button and select the drop down list box. i.e. VBAP
The below shown screen is the output of the VBAP table.
BSP Application on using a tree

By Vakada Raghava, Mouri Tech Solutions
Go to transaction SE80. Select BSP application and input the name of the BSP application that you want
to create. Press Enter or click on the display icon.
Enter the name and short description of the application and click on the save icon.
Now the window looks as shown below.

Right click on the application name and go to createpage.
Enter the name of the page that you want to create. In this case it is the treepage.htm that I am creating.
Enter the name, description of the page, select the Page with Flow Logic radio button and click on
continue. Create three pages in the same way and name them as per your requirement or convenience.
Now we are done with creating the pages.
Your screen should look as shown below.
We proceed with providing the layout, attributes and the Event handling of the respective pages.
Go to treepage.htm, delete the existing code and write the following code in the layout tab of the page.
Code in the layout Tab.
<%@page language="abap" forceEncode="html"%>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<htmlb:content id = "content"
design = "classic+design2002+design2003"
controlRendering = "sap"
rtlAutoSwitch = "true">
<htmlb:page title="BSP Extension: HTMLB / Element: Tree" >
<htmlb:form>
<h2><htmlb:label for="p_matnr" text="MATERIAL NUMBER" />
<htmlb:inputField id="p_matnr_low" value="<%= matnr_low %>" />
<htmlb:label for="p_matnr" text="TO" />
<htmlb:inputField id="p_matnr_high" value="<%= matnr_high %>" /></h2>
<htmlb:tree id = "materialtree"
title = "materialtree"
tooltip = "material information"
toggle = "X" >
<htmlb:treeNode id = "material"
text = "material"
isOpen = "true"
tooltip = "material">
<htmlb:treeNode id = "mara"
text = "mara"
onNodeClick = "mara"/>
<htmlb:treeNode id = "mard"
text = "mard"
onNodeClick = "mard"/>
</htmlb:treeNode>
</htmlb:tree>
<br>
<br>
<htmlb:tree id = "sapinformation"
title = "sap information"
tooltip = "sap information"
toggle = "X" >
<htmlb:treeNode id = "sdn.sap"
link = "https://www.sdn.sap.com"
text = "sdn.sap.com"
isOpen = "true" />
<htmlb:treeNode id = "saptech"
link = "http://www.saptechnical.com"
text = "sap technical"
isOpen = "true" />
</htmlb:tree>
<br>
<br>
<% if it_mara is not initial.%>
<htmlb:tableView id="tv_mara" table="<%= it_mara %>">
<htmlb:tableViewColumn columnName="MATNR"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERSDA"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERNAM"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LAEDA"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="AENAM"></htmlb:tableViewColumn>
</htmlb:tableView>
<% endif.%>
<% if it_mard is not initial.%>
<htmlb:tableView id="tv_mard" table="<%= it_mard %>">
<htmlb:tableViewColumn columnName="MATNR"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="WERKS"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LGORT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="PSTAT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="LVORM"></htmlb:tableViewColumn>
</htmlb:tableView>
<% endif.%>
</htmlb:form>
</htmlb:page>
</htmlb:content>
In the Page Attributes, of treepage.htm, enter the attributes as shown below.

We need our application to display the data by giving the input in the inputbox and when the treenode is
clicked.
So we write the code in the OnInputProcessing event.
In the Event Handler tab of treepage.htm, under OnInputProcessing event, write the following code.
Code:
DATA: event TYPE REF TO CL_HTMLB_EVENT.
event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).
DATA: MATNO_low TYPE REF TO CL_HTMLB_INPUTFIELD.
MATNO_low ?= CL_HTMLB_MANAGER=>GET_DATA(
REQUEST = RUNTIME->SERVER->REQUEST
NAME = 'inputField'
ID = 'p_MATNR_low' ).
DATA: MATNO_high TYPE REF TO CL_HTMLB_INPUTFIELD.
MATNO_high ?= CL_HTMLB_MANAGER=>GET_DATA(
NAME = 'inputField'
ID = 'p_MATNR_high' ).
DATA: tree_event TYPE REF TO CL_HTMLB_EVENT_TREE.
tree_event ?= event.
node = tree_event->node.
if matno_low is not initial and matno_high is not initial.
matnr_low = matno_low->value.
matnr_high = matno_high->value.
case node.
when 'mara'.
select * from mara into table it_mara where matnr between matnr_low and
matnr_high.
WHEN 'mard'.
select * from mard into table it_mard where matnr between matnr_low and
matnr_high.
endcase.
endif.
Save, Check and activate the treepage.htm. Save, check and activate the application.
Enter the login details in the window to continue executing the application.
The screen looks as shown below. Input the values as shown below and click on the treenode named
mara.
The output looks as follows.
Now click on the treenode mard for the storage location data of the materials.
Now we are done with displaying the table contents using tree on the BSP Application pages.
BSP Application using MVC Architecture - Displaying
Business Partner data using a BAPI
By Raghava Vakada, Mouri Tech Solutions
Requirement: To display business partner data using the BAPI bapi_bupa_search_2 on a BSP
application view.
STEPS:
1) Go to transaction SE80, select BSP application from the dropdown list.
2) Create a BSP application with the name ZMVC_BUPA.

3) Creating a Model Class:
Go to transaction SE24 and enter the name of the class as shown below.
Class name: ZBUPA_MODEL
In the pop up window that appears, enter the description and then click on the save button.
In the class, go to the properties tab and then specify the superclass for the new model class so that all
the methods and attributes will be inherited to the model class.
You can uncheck the checkbox Final.
Add attributes to the new model class. Please create table types for those attributes in the tables tab of
the BAPI. Here, you can see that I have used the table types to refer to the attributes of our class.
Add a method to the new model class to get the business partner details
Modified method implementations
Double click on the GETBUPA method.
Write the following code.

Method GETBUPA.
CALL FUNCTION 'BAPI_BUPA_SEARCH_2'
EXPORTING
ADDRESSDATA = ADDRESSDATA
CENTRALDATA = CENTRALDATA
TABLES
SEARCHRESULT = SEARCHRESULT
RETURN = RETURN.
endmethod.
Save, check and activate the class.
CREATING VIEWS.
1) Create view: In transaction SE80, Right-click on the BSP application name and navigate to
CreatePage.
As shown below, enter the name and description of the view that you want to create. Select the radio
button View, and then click on the Continue button.
Give the page attributes of the view. The attribute of the view is an object reference of the model class
that we created previously.
Modify layout code for the search view (input.htm) as shown below.
Code :
Code :
<htmlb:content design="design2003">
<htmlb:page title = "Input page ">
<htmlb:form>
<P><CENTER>
<BR><BR>
<BR><BR>
<htmlb:label for="//BUPAOBJ/ADDRESSDATA.CITY1" />
<htmlb:inputField value="//BUPAOBJ/ADDRESSDATA.CITY1" />
<htmlb:label for="//BUPAOBJ/CENTRALDATA.PARTNER" />
<htmlb:inputField value="//BUPAOBJ/CENTRALDATA.PARTNER" />
<htmlb:label for="//BUPAOBJ/CENTRALDATA.MC_NAME1" />
<htmlb:inputField value="//BUPAOBJ/CENTRALDATA.MC_NAME1" />
<htmlb:label for="//BUPAOBJ/CENTRALDATA.SEARCHTERM1" />
<htmlb:inputField value="//BUPAOBJ/CENTRALDATA.SEARCHTERM1" />
<htmlb:button text = "GET BUPA" onClick = "myclick1" />
</htmlb:form>
</htmlb:page>
</htmlb:content>
2) Create second view.

Modify layout code for the search view (output.htm) as shown below.
Code :
<htmlb:page title = "Output page ">
<htmlb:form>
<P><CENTER>
<BR><BR>
<BR><BR>
<htmlb:tableView id="SEARCHRESULTS" table="//BUPAOBJ/SEARCHRESULT"
visibleRowCount="10" width="10">
<htmlb:tableViewColumns>
<htmlb:tableViewColumn columnName="PARTNER"/>
<htmlb:tableViewColumn columnName="ADDRESSGUID"/>
<htmlb:tableViewColumn columnName="ADDRESSTYPE"/>
<htmlb:tableViewColumn columnName="COMPANY_PARTNER"/>
<htmlb:tableViewColumn columnName="PSTAT"/>
</htmlb:tableViewColumns>
</htmlb:tableView>
<P><CENTER>
<BR><BR>
<htmlb:tableView id="BAPIRET2"
table="//BUPAOBJ/RETURN"
visibleRowCount="10" width="10">
<htmlb:tableViewColumns>
<htmlb:tableViewColumn columnName="TYPE"/>
<htmlb:tableViewColumn columnName="MESSAGE"/>
<htmlb:tableViewColumn columnName="PARAMETER"/>
<htmlb:tableViewColumn columnName="SYSTEM"/>
</htmlb:tableViewColumns>
</htmlb:tableView>
</htmlb:form>
</htmlb:page>
</htmlb:content>
create a controller for the application as shown below. Right click on the application name Create
Controller.
Input the description of the controller and click on the continue button.
The screen appears as shown below.

Enter the name of the controller class that you want to create as shown in the above screen.
Double click on the controller class to enter into it. Give the attributes of the class as shown.
_ Redefining The Controller Class Methods
to use our model and views in controller class zcontroller_bupa.do, we have to redefine some of the
methods inherited from base class cl_bsp_controller2 using the class builders redefine function.
The redefinition steps automatically add commented coding (shown in bold in the do_init example below:
method do_init .
* call method super->do_init.
* .
endmethod.
If you uncomment those lines, you would execute the method implementation of the parent class. this is
helpful when you want to carry out the parent logic and some additional custom logic. we dont want to
reuse functionality of the parent class in the example, however, so be sure to delete the commented code
before adding the new code.
Redefine the methods i.e. do_init, do_request, do_handle_event.
After that double click on the method do_init to implement it (write the code in the method).
CODE:
method DO_INIT.
BUPAOBJ ?= me->create_model(
class_name = 'ZBUPA_MODEL'
model_id = 'BUPAOBJ' ).
endmethod.
Follows the same procedure for the do_request, do_handle_event.
CODE:
method DO_REQUEST.
*CALL METHOD SUPER->DO_REQUEST
* .
* Define a variable for the view we are about to create
data view type ref to if_bsp_page.
* Dispatch the input so that the event handler can process
* events like when the agent clicks on the Search button
me->dispatch_input( ).
* The attribute me->view_name can be set by the event handler
* to change navigation to the flights display
if me->view_name is initial.
me->view_name = 'input.htm'.
endif.
* Create the response view
view = me->create_view( view_name = me->view_name ).
if view is bound.
* Add a reference to the model instance to the view,
* so that the view can access the model
view->set_attribute( name = 'BUPAOBJ' value = me->BUPAOBJ ).
me->call_view( view ).
endif.
endmethod.
CLICK ON DO_HANDLE_EVENT METHOD.
CODE:
method DO_HANDLE_EVENT.
* Check that the event has been triggered by the search button
if htmlb_event is bound and
htmlb_event->server_event = 'myclick1'.
* Execute the search implemented in the query model
me->BUPAOBJ->GETBUPA( ).
* Flights have been found, new target is the hit list display
if not me->BUPAOBJ->SEARCHRESULT[] is initial.
me->view_name = 'output.htm'.
elseif not me->BUPAOBJ->RETURN[] is initial.
me->view_name = 'output.htm'.
endif.
endif.
endmethod.
Save, check and activate the application.
Testing the application.
Input the user name and password for the authentication and click on ok button.
The View is displayed in the browser window as shown below.
Provide the information to get business partner data.

Click on the GET DATA button.
Then business partner information gets displayed as follows
BSP Application using Date Navigator Control

By Raghava Vakada, Mouri Tech Solutions
Scenario: Displaying the selected date in an Inputfield.
Go to transaction SE80. Select BSP application and input the name of the BSP application that
you want to create. Press Enter or click on the display icon.
Right click on the application name and click create page.
Enter the name of the page that you want to create.
In this case it is the first.htm that is being created.

Enter the name, description of the page,
select the Page with Flow Logic radio button and click on continue.
Now we are done with creating the pages.
Your screen should look as shown below.
We proceed with providing the layout, attributes and the Event handling
of the respective pages.
Go to first.htm and put the following code in the layout tab of the page
Code in layout tab
<htmlb:page title = "DATE NAVIGATOR ">
<htmlb:form>
<h2> <htmlb:label for="date" text="DATE" />
<htmlb:inputField id = "mydate"
value = "<%= date%>"
maxlength = "10"
type = "date"/>
</h2>
<htmlb:dateNavigator id = "myDateNavigator"
monthsPerRow = "1"
onNavigate = "myOnNavigate"
onDayClick = "myOnDayClick"
onWeekClick = "myOnWeekClick"
onMonthClick = "myOnMonthClick">
</htmlb:dateNavigator>
</htmlb:form>
</htmlb:page>
</htmlb:content>
In the Page Attributes of first.htm, enter the attributes as shown below.
We need our application to take the date in input field when date is selected from DateNavigator control.
So we write the code in the OnInputProcessing event.
Code in event handler tab for oninputprocessing event.
DATA: date_event TYPE REF TO CL_HTMLB_INPUTFIELD.

date_event ?= CL_HTMLB_MANAGER=>GET_DATA(
NAME = 'inputField'
ID = 'mydate' ).
DATA: event TYPE REF TO CL_HTMLB_EVENT.
event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).
DATA: dateNavigator_event TYPE REF TO CL_HTMLB_EVENT_DATENAVIGATOR.
dateNavigator_event ?= event.
if date_event->value is initial.
date = dateNavigator_event->day.
elseif date_event->value is not initial.

date = dateNavigator_event->day.
endif.
Save, Check and activate the first.htm. Save, check and activate the application
and after that execute it. The below screen would be displayed.
Enter the username and password and click on OK.
The BSP page appears as shown below.

Select the date from DateNavigator.
The date is displayed in input field as shown below.
Now we are done with displaying the date in the inputfield using the DateNavigator.
Using Tabstrips in BSP
By Vakada Raghava, Mouri Tech Solutions
Requirement: To display header and item details for sales order using tab strip, tray with OTR text.
Steps to be followed:
1) Go to transaction SE80, select BSP application from the dropdown list.
2) Create a BSP application with the name ZMVC_TABSTRIP.

3) Creating a Model Class:
Go to transaction SE24 and enter the name of the class as shown below.
Class name: ZCL_MODEL_SALES1
In the pop up window that appears, enter the description and then click on the save button.
In the class, go to the properties tab and then specify the superclass for the new model class so that all
the methods and attributes will be inherited to the model class.
You can uncheck the checkbox Final.
Add attributes to the new model class. Here, you can see that I have used the table types to refer to the
attributes of our class.
Add a method to the new model class to get the header and item details
Double-click on the GETVBAK method.

Write the following code.
Double click on the GETVBAP method.
Save, check and activate the class.
CREATING VIEWS.
1) Create view: In transaction SE80, Right-click on the BSP application name and navigate to
CreatePage.
As shown below, enter the name and description of the view that you want to create. Select the radio
button View, and then click on the Continue button.
Modify layout code for the search view (input.htm) as shown below.
Code :
<htmlb:page title = "create input fields ">
<htmlb:form>
<%= otr($TMP/MYALIAS) %>
<h2> <htmlb:label for="//SELECT/P_VBELN"/>
<htmlb:inputField value="//SELECT/P_VBELN"/></h2>
<br>
<br>
<otr>TO DISPLAY HEADER AND ITEM DETAILS</otr>
<htmlb:tray id = "traybox"
isCollapsed = "true" >
<htmlb:tabStrip id = "TabStrip"
bodyHeight = "300"
width = "400">
<htmlb:tabStripItem id = "headerdata"
index = "1"
onSelect = "TabStripheader"
title = "header data"
tooltip = "header data" >
<htmlb:tableView id="TV_VBAK" table="//SELECT/I_VBAK">
<htmlb:tableViewColumn columnName="vbeln"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERDAT"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERZET"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ERNAM"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ANGDT"></htmlb:tableViewColumn>
</htmlb:tableView>
</htmlb:tabStripItem>
<htmlb:tabStripItem id = "itemdata"
index = "2"
onSelect = "TabStripItem"
title = "item data"
tooltip = "item data" >
<htmlb:tableView id="TV_VBAP" table="//SELECT/I_VBAP">
<htmlb:tableViewColumn columnName="vbeln"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="posnr"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="matnr"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="matkl"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="arktx"></htmlb:tableViewColumn>
</htmlb:tableView>
</htmlb:tabStripItem>
</htmlb:tabStrip>
</htmlb:tray>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Create a controller for the application as shown below. Right click on the application name Create
Controller.
Input the description of the controller and click on the continue button.
The screen appears as shown below.
Enter the name of the controller class that you want to create as shown in the above screen.
Double click on the controller class to enter into it. Give the attributes of the class as shown.
To use our model and views in controller class zcl_controller_sales1, we have to redefine some of the
methods inherited from base class cl_bsp_controller2 using the class builders redefine function( ). The
redefinition steps automatically add commented coding (shown in bold in the do_init example below):
method do_init .
* call method super->do_init.

*.
endmethod.
If you uncomment those lines, you would execute the method implementation of the parent class. This is
helpful when you want to carry out the parent logic and some additional custom logic. we dont want to
reuse functionality of the parent class in the example, however, so be sure to delete the commented code
before adding the new code.
Redefine the methods i.e. do_init, do_request, do_handle_event.
After that double click on the method do_init to implement it (write the code in the method).
CODE:
method DO_INIT.
*CALL METHOD SUPER->DO_INIT
* .
SELECT ?= me->create_model(
class_name = 'ZCL_MODEL_SALES1'
model_id = 'SELECT' ).
endmethod.
Follows the same procedure for the do_request, do_handle_event.
CODE:
method DO_REQUEST.
*CALL METHOD SUPER->DO_REQUEST
* .
data view type ref to if_bsp_page.
**data : selection type string.
me->dispatch_input( ).
if me->view_name is initial.
me->view_name = 'inpu.htm'.
endif.
view = me->create_view( view_name = me->view_name ).
if view is bound.
view->set_attribute( name = 'SELECT' value = me->SELECT ).
me->call_view( view ).
endif.
endmethod.
CLICK ON DO_HANDLE_EVENT METHOD.

CODE:
method DO_HANDLE_EVENT.
*CALL METHOD SUPER->DO_HANDLE_EVENT
* EXPORTING
* EVENT =
* HTMLB_EVENT =
** HTMLB_EVENT_EX =
* GLOBAL_MESSAGES =
* RECEIVING
* GLOBAL_EVENT =
* .
htmlb_event->server_event = 'TabStripheader'.
me->select->getvbak( ).
if not me->select->i_vbak[] is initial.
endif.
endif.
htmlb_event->server_event = 'TabStripItem'.
me->select->getvbap( ).
* Flights have been found, new target is the hit list display
if not me->select->i_vbap[] is initial.
endif.
endif.
endmethod.
Save, check and activate the application.

Testing the application.
Provide the user name and password. Then click on OK button.
The View is displayed in the browser window as shown below.

Provide the sales document.
Then expand the tray.
Click on header data.

Then expand the tray. Display the header data.
Then again click on the item data.

Creating a Simple BSP Application Using AJAX
By Suman Kumar Chinnam, YASH Technologies
Summary:
In traditional JavaScript coding, if you want to get any information from a database or a file on the server,
or send user information to a server, you will have to make an HTML form and GET or POST data to the
server. The user will have to click the "Submit" button to send/get the information, wait for the server to
respond, and then a new page will load with the results.
Because the server returns a new page each time the user submits input, traditional web applications can
run slowly and tend to be less user-friendly.
With AJAX, your JavaScript communicates directly with the server, through the JavaScript
XMLHttpRequest object
With an HTTP request, a web page can make a request to, and get a response from a web server -
without reloading the page. The user will stay on the same page, and he or she will not notice that scripts
request pages, or send data to a server in the background.
This Tutorial demonstrates how to use AJAX in BSP for getting the data from server without reloading the
entire page and displays the information.
In this BSP application we will create two BSP Pages; one for providing the data in xml format is called
data.xml and another page for calling and displaying the results is called first.htm.
Create BSP Application and Pages:
1. Create a BSP application using TCODE SE80 with name ZTEST_BSP_AJAX.

2. Right Click on Application choose context create and then Page with name FIRST.htm
Go to layout of page and design the page like below.
This is a simple page with two elements one is an input field to enter plant and another is text
view to display the name of the plant.
When the user inputs data, a function called "getName( )" is executed. The execution of the
function is triggered by the "onkeyup" event. In other words: Each time the user moves his finger
away from a keyboard key inside the input field, the function getName is called.
If there is some input in the input field the function executes the following:
Defines the url (filename) to send to the server

Adds a parameter (plant) to the URL with the content of the input field.
Opens the XMLHTTP object with the given URL.
Creates an XMLHTTP object, and tells the object to execute a function called getValue.
Sends an HTTP request to the server

The getValue () function executes every time the state of the XMLHTTP object changes.
When the state changes to 4 ("complete"), the content of the text view is filled with the response text.
3. Create page with name data.xml which retrieves the data and scrambles the XML.
To create XML page give XML extension to the page name.

Go to layout of page and write the below code.
Declare XML as string in page attributes.

Now switch to the tab Event handler of page data.xml and write the below code.
Activate the application, to test the application right click on page FIRST.htm choose context Test.
Result:
Enter Plant value we will get the Plant name, no need to press/click any.
Simple BSP application to Create, Modify and Delete the
database entries
By Tanveer Zahack, YASH Technologies
This tutorial will give you blow-by-blow description of how to design a simple BSP application that would
fetch entries from database table and create entries, if there exists no entry.
Before building a BSP application, youll have to have database table.
STEP 1: Call transaction SE11; create a database table using predefined types.
STEP 2: Push some entries in the table;
Enter a bunch of employee-ids, corresponding date-of-birth, date-of-joining and salary.

STEP 3: Call transaction SE80; create a BSP application.
STEP 4: Right-click the object name and create a page with flow-logic.
STEP 5: Choose the Type Definitions tab and create a type-definition.
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 cant 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:

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
* 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.
STEP 10: On the click of create button, we set the fl_flag as 2, that can be used to display create
layout with an insert button on the same page. Further, on click of insert button, values of all
input fields are processed and inserted into database using a simple INSERT query.
Add the following code in OnInputProcessing;
ELSEIF w_eventid EQ 'create'.

fl_flag = 2.
Now, add this piece of code in the layout;
<%
elseif fl_flag eq 2.
%>
<center>
<table bgcolor="ivory">
<tr>
<td>
<htmlb:label for = "ip_emno"
labelType = "MEDIUM"
text = "Employee Number" />
</td>
<td>
<htmlb:inputField id = "ip_emno
disabled = "FALSE" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_dob"
text = "Date of Birth" />
</td>
<td>
<htmlb:inputField id = "ip_dob" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_doj"
text = "Date of Joining" />
</td>
<td>
<htmlb:inputField id = "ip_doj" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_salary"
text = "Salary" />
</td>
<td>
<htmlb:inputField id = "ip_salary" />
</td></tr>
<tr><td colspan = "2">
<center>
<htmlb:button id = "insert"
tooltip = "Create a New Record"
text = "INSERT"
</center>
</td></tr>
</table>
STEP 11: Now attach an action to insert button;
ELSEIF w_eventid EQ 'insert'.

EXPORTING
name = 'inputfield'
id = 'ip_emno'
RECEIVING
data = w_object.
w_in_field ?= w_object.
w_in_value = w_in_field->value.
w_employee = w_in_value.
CLEAR: w_object,w_in_field,w_in_value.

EXPORTING
name = 'inputfield'
id = 'ip_dob'
RECEIVING
data = w_object.
CALL FUNCTION 'CONVERT_DATE_TO_INTERNAL'

EXPORTING
date_external = w_in_field->value
* ACCEPT_INITIAL_DATE =
IMPORTING
date_internal = w_dofb
* EXCEPTIONS
* DATE_EXTERNAL_IS_INVALID = 1
* OTHERS = 2
.
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_doj'
RECEIVING
data = w_object.

EXPORTING
IMPORTING
date_internal = w_dofj
* EXCEPTIONS
* OTHERS = 2
.
IF sy-subrc <> 0.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_salary'
RECEIVING
data = w_object.
w_esalary = w_in_value.
fs_progmr-emno = w_employee.
fs_progmr-dob = w_dofb.
fs_progmr-doj = w_dofj.
fs_progmr-salary = w_esalary.
INSERT zart_programmer FROM fs_progmr.

NOTE: We have to convert date-fields to internal format before inserting them in database, or
else unformatted date will be inserted into database.
EXTERNAL FORMAT: 28.02.2009
INTERNAL FORMAT WITHOUT CONVERSION: 28.02.20
EXTERNAL FORMAT FOR DISPLAY WITHOUT CONVERSION: 20.2..28.0
To avoid these discrepancies, we use CONVERT_DATE_TO_INTERNAL and

CONVERT_DATE_TO_EXTERNAL function modules.
Now save, activate and test the page:

No sooner insert button is clicked, entries are pushed into the database table and page shows
updated database status, since SELECT query is given in OnInitialization event.
Entries are very well inserted into the database table, we now make innovations to the same page
to modify and delete entries.
STEP 12: Add the following piece of code in OnInitialization.
IF w_index IS NOT INITIAL.

READ TABLE t_progmr INTO fs_progmr INDEX w_index.
w_emno = fs_progmr-emno.
w_dob = fs_progmr-dob.
w_doj = fs_progmr-doj.
w_salary = fs_progmr-salary.
fl_flag = 1.
CALL FUNCTION 'CONVERT_DATE_TO_EXTERNAL'
EXPORTING
date_internal = w_dob
IMPORTING
date_external = w_ext_dob
EXCEPTIONS
date_internal_is_invalid = 1
OTHERS = 2.
IF sy-subrc <> 0.
ENDIF.
CALL FUNCTION 'CONVERT_DATE_TO_EXTERNAL'

EXPORTING
date_internal = w_doj
IMPORTING
date_external = w_ext_doj
EXCEPTIONS
date_internal_is_invalid = 1
OTHERS = 2.
IF sy-subrc <> 0.
ENDIF.
ENDIF.
We use highlighted work-variables to store selected row data.
STEP 13: In the layout, add the following code;
<%
else if fl_flag eq 1.
%>
<center>
<table bgcolor="ivory">
<tr>
<td>
<htmlb:label for = "ip_emno"
text = "Employee Number" />
</td>
<td>
<htmlb:inputField id = "ip_emno"
value = "<%= w_emno %>"
disabled = "TRUE" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_dob"
text = "Date of Birth" />
</td>
<td>
<htmlb:inputField id = "ip_dob"
value = "<%= w_ext_dob %>" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_doj"
text = "Date of Joining" />
</td>
<td>
<htmlb:inputField id = "ip_doj"
value = "<%= w_ext_doj %>" />
</td></tr>
<tr>
<td>
<htmlb:label for = "ip_salary"
text = "Salary" />
</td>
<td>
<htmlb:inputField id = "ip_salary"
value = "<%= w_salary %>" />
</td></tr>
<tr><td>
<center>
<htmlb:button id = "save"
tooltip = "Modify the Content"
text = "MODIFY"
<htmlb:button id = "delete"
tooltip = "Delete Selected Entry"
text = "DELETE"
</center>
</td></tr>
</table>
<%
endif.
%>
STEP 14: Now, when MODIFY button is clicked, the values changed should be stored in
database without changing employee id, since thats primary key.
ELSEIF w_eventid EQ 'save'.

EXPORTING
name = 'inputfield'
id = 'ip_emno'
RECEIVING
data = w_object.

EXPORTING
name = 'inputfield'
id = 'ip_dob'
RECEIVING
data = w_object.

EXPORTING
IMPORTING
* EXCEPTIONS
* OTHERS = 2
.
IF sy-subrc <> 0.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_doj'
RECEIVING
data = w_object.

EXPORTING
IMPORTING
* EXCEPTIONS
* OTHERS = 2
.
IF sy-subrc <> 0.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_salary'
RECEIVING
data = w_object.
UPDATE zart_programmer SET emno = w_employee

dob = w_dofb
doj = w_dofj
salary = w_esalary
WHERE emno = w_employee.
STEP 15: Deleting an entry from database is quite simple, since it doesnt require any conditions
except index.
We give the same code as above, except for the query at the bottom.
ELSEIF w_eventid EQ 'delete'.

EXPORTING
name = 'inputfield'
id = 'ip_emno'
RECEIVING
data = w_object.

EXPORTING
name = 'inputfield'
id = 'ip_dob'
RECEIVING
data = w_object.

EXPORTING
IMPORTING
* EXCEPTIONS
* OTHERS = 2
.
IF sy-subrc <> 0.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_doj'
RECEIVING
data = w_object.

EXPORTING
IMPORTING
* EXCEPTIONS
* OTHERS = 2
.
IF sy-subrc <> 0.
ENDIF.

EXPORTING
name = 'inputfield'
id = 'ip_salary'
RECEIVING
data = w_object.
fs_progmr-emno = w_employee.
fs_progmr-dob = w_dofb.
fs_progmr-doj = w_dofj.
fs_progmr-salary = w_esalary.
DELETE zart_programmer FROM fs_progmr.
ENDIF.
STEP 16: Save, activate and test the program.

Resume application using BSP Application
Resume Application using BSP:
Create a BSP application as Zres_app in transaction SE80 and create 3 pages(Page with flow
logic) for the created BSP application as follows
Page with flow Logic:
First.htm, Second.htm, Third.htm
Scenario:
User can fill their details in first.htm and he/she has 3 options Save (or) Submit (or) Display their details
via button event.
First.htm:
*For Reset Button

<script type="text/javascript">
function formReset()
var x=document.getElementById("myForm").reset();
alert ('Are You sure want to Reset ur details');
</script>
<%@ extension name="htmlb" prefix="htmlb" %>
<htmlb:content id="res" design="classic+design2002+design2003">
<htmlb:page title="Resume Application">

<htmlb:form>
<htmlb:group title = "Enter Your Resume Details"
width = "550px" >
<htmlb:groupBody>
<htmlb:gridLayout id = "myGridLayout1"
columnSize = "2"
rowSize = "7" >
<htmlb:gridLayoutCell rowIndex = "1"
columnIndex = "1">
<htmlb:textView text = "Name"
design = "EMPHASIZED" />
</htmlb:gridLayoutCell>
columnIndex = "2" >
<htmlb:inputField id = "i_name"
type = "string"
size = "10"
value = "<%= i_name %>" />
<br/>
columnIndex = "1">
<htmlb:textView text = "Age"
columnIndex = "2" >
<htmlb:inputField id = "i_age"
type = "string"
size = "2"
value = "<%= i_age %>" />
<br/> <br/>
columnIndex = "1" >
<htmlb:textView design="EMPHASIZED"
text="Sex"/>
columnIndex = "2" >
<htmlb:radioButtonGroup id="gro" selection="<%= selection1 %>">

<htmlb:radioButton id="Male"
text="Male"
onClick="myClick">
</htmlb:radioButton>
<htmlb:radioButton id="Female"
text="Female"
onClick="myClick">
</htmlb:radioButton>
</htmlb:radioButtonGroup>
<br/><br/>
columnIndex = "1" >
<htmlb:textView text = "Address"
columnIndex = "2" >
<htmlb:textEdit id = "address"
cols = "30"
rows = "4"
text = "<%= i_address %>" />
<br/><br/>
columnIndex = "1" >
<htmlb:textView text = "Qualification"
columnIndex = "2" >
<htmlb:dropdownListBox id = "ListBox1"
onSelect = "ListBox1Event"
selection = "<%= selection2 %>"
>
<htmlb:listBoxItem key = "B.Com" value = "B.Com" />
<htmlb:listBoxItem key = "BCA" value = "BCA" />
<htmlb:listBoxItem key = "B.E" value = "B.E" />
<htmlb:listBoxItem key = "MCA" value = "MCA" />
<htmlb:listBoxItem key = "MBA" value = "MBA" />
<br/><br/>
columnIndex = "1" >
<htmlb:textView text = "My Strengths"

columnIndex = "2" >
<htmlb:checkbox id = "SelfConfidence"
text = "Self Confidence"
checked = "<%=i_check %>"/>
<br/>
<htmlb:checkbox id = "HardWorker"
text = "HardWorker"
checked = "<%=i_check %>" />
<br/>
<htmlb:checkbox id = "CreativitySense"
text = "Creativity Sense"
<br/>
<htmlb:checkbox id = "FlexibletoSurroundings"
text = "Flexible to Surroundings"
<br/> <br/>

columnIndex = "1" >
<htmlb:textView text = "Extra Activities"
columnIndex = "2" >
<htmlb:textEdit id = "ea"
cols = "30"
rows = "4"
text = "<%= i_act %>"/>
<br/> <br/>
</htmlb:gridLayout>
<htmlb:button id="btn_submit"
text = "Submit Ur Details"
onClick = "myDetail" />
<htmlb:button id="btn_save"
text = "Save Ur Details"
onClick = "mysave"
onClientClick="alert('Ur details are updated!')" />
<htmlb:button id="btn_display"
text = "Display Details"
onClick = "myDetails" />
</htmlb:groupBody>
</htmlb:group>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Types:
TYPES: table_res type ZRES_TT.
Page attributes:
c_text TYPE STRING

itab TYPE ZRES_TT
i_act TYPE CHAR40
i_address TYPE CHAR40
i_age TYPE NUMC2
i_check TYPE STRING
i_name TYPE CHAR40
i_qualify TYPE CHAR5
i_sex TYPE CHAR6
selection1 TYPE STRING
wa TYPE ZRES
Event Handler(OninputProcessing):
DATA: iname type ref to cl_htmlb_inputfield,

iage type ref to cl_htmlb_inputfield,
isex type ref to cl_htmlb_radiobutton,
event type ref to cl_htmlb_event.
DATA: irb type ref to cl_htmlb_radiobuttongroup.
DATA: radio type ref to cl_htmlb_event_radiobutton.
DATA: adr type ref to cl_htmlb_textedit.
DATA: qualify type ref to cl_htmlb_dropdownlistbox,
data1 type char5.
DATA: act type ref to cl_htmlb_textedit.
DATA: checkbox TYPE REF TO CL_HTMLB_CHECKBOX,

c_text type string.
event ?= cl_htmlb_manager=>get_event( runtime->server->request ).
***********************
irb ?= cl_htmlb_manager=>get_data( request = runtime->server->request
name = 'radiobuttongroup'
id = 'gro' ).
if irb is not initial.
selection1 = irb->selection.
endif.
************************
if event->name = 'radioButton' and event->event_type = 'click'.

radio ?= event.
if radio->id = 'Male'.
isex ?= cl_htmlb_manager=>get_data( request = runtime->server->request
id = 'Male'
name = 'radiobuttonfield' ).
i_sex = me->selection1.
else.
isex ?= cl_htmlb_manager=>get_data( request = runtime->server->request
id = 'female'
name = 'radiobuttonfield' ).
endif.
endif.
**************************
adr ?= cl_htmlb_manager=>get_data( request = runtime->server->request

name = 'textedit'
id = 'address' ).
i_address = adr->text.
******************
event ?= cl_htmlb_manager=>get_event( runtime->server->request ).
qualify ?= cl_htmlb_manager=>get_data(
request =runtime->server->request
name = 'dropdownListBox'
id = 'ListBox1' ).
if qualify is not initial.
selection2 = qualify->selection.
endif.
i_qualify = me->selection2.
*************
act ?= cl_htmlb_manager=>get_data(
name = 'textedit'
id = 'ea' ).
i_act = act->text.
************************
if event->id = 'btn_submit'.
iname ?= cl_htmlb_manager=>get_data( request = runtime->server->request
id = 'i_name'
name = 'inputfield' ).
iage ?= cl_htmlb_manager=>get_data( request = runtime->server->request
id = 'i_age'
name = 'inputfield' ).
event = cl_htmlb_manager=>get_event( runtime->server->request ).
if event->name = 'checkBox' and event->event_type = 'click'.
case event->id .
when 'SelfConfidence'.
checkbox ?= cl_htmlb_manager=>get_data(
name = 'checkbox'
id = 'SelfConfidence' ).
when 'HardWorker'.
name = 'checkbox'
id = 'HardWorker' ).
when 'CreativitySense'.
name = 'checkbox'
id = 'CreativitySense' ).
when 'FlexibletoSurroundings'.
name = 'checkbox'
id = 'FlexibletoSurroundings' ).
endcase.
endif.
IF checkbox IS NOT INITIAL.

i_check = checkbox->checked.
if i_check = 'X'.
c_text = checkbox->id.
endif.
ENDIF.
i_name = iname->value.
i_age = iage->value.
i_qualify = me->selection2.
* i_check = me->i_check .
navigation->set_parameter( name = 'i_name' value = me->i_name ).
navigation->set_parameter( name = 'i_age' value = me->i_age ).
navigation->set_parameter( name = 'i_sex' value = me->i_sex ).
navigation->set_parameter( name = 'i_address' value = me->i_address ).
navigation->set_parameter( name = 'i_qualify' value = me->i_qualify ).
navigation->set_parameter( name = 'i_act' value = me->i_act ).
navigation->set_parameter( name = 'c_text' value = c_text ).
navigation->goto_page( 'second.htm' ).
endif.
if event->id = 'btn_save'.
if itab is initial.
*loop at itab into wa.
move i_name to wa-name.
wa-age = me->i_age.
wa-sex = me->selection1.
wa-address = me->i_address.
wa-qualify = me->selection2. "i_qualify.
wa-act = me->i_act.
append wa to itab.
modify zres from table itab.
commit work.
*endloop.
endif.
endif.
if event->id = 'btn_display'.
navigation->goto_page( 'third.htm' ).
endif.
Output (first.htm):
Second.htm:
<%@ extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="classic+design2002+design2003">
<htmlb:page title="Simple Format">

<htmlb:form>
<h3><b><font size="16" face="courier new" color='green'><u> Your Details

</u></font></b></h3>
<htmlb:gridLayout columnSize="2" rowSize="7">
<htmlb:gridLayoutCell columnIndex="1" rowIndex="1">

<font size="6" face="courier new" color='blue'> <b> Name:</b> </font>

<font size="6" face="courier new" color='red'> <b> <%page->write( value =
i_name ).%> </b> </font>

<font size="6" face="courier new" color='blue'> <b> Age :</b></font>

<font size="6" face="courier new" color='red'> <b> <% page->write( value =
i_age ). %> </b></font>

<font size="6" face="courier new" color='blue'> <b> Sex :</b> </font>

i_sex ). %> </b></font>

<font size="6" face="courier new" color='blue'> <b> Address:</b> </font>

i_address ). %> </b></font>

<font size="6" face="courier new" color='blue'> <b> Qualification:</b>
</font>

i_qualify ). %> </b></font>

<font size="6" face="courier new" color='blue'> <b> My Strengths:</b> </font>

c_text ). %> </b></font>

<font size="6" face="courier new" color='blue'> <b> Extra Activities:</b>
</font>

i_act ). %> </b></font>
</htmlb:gridLayout>
</font>
</b>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Page Attributes:
c_text TYPE STRING

itab1 TYPE ZRES_TT
i_act TYPE CHAR40
i_address TYPE CHAR40
i_age TYPE NUMC2
i_check TYPE STRING
i_name TYPE CHAR40
i_qualify TYPE CHAR5
i_sex TYPE CHAR6
third.htm:
<htmlb:page title = " ">
<htmlb:form>
<b><htmlb:label for="lb" text="Your Details" /></b>
<% if itab1 is not initial. %>
<htmlb:tableView id="tv" table="<%= itab1 %>">
<htmlb:tableViewColumn columnName="NAME"
title="NAME"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="AGE" title="AGE"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ADDRESS"
title="ADDRESS"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="SEX" title="SEX"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="QUALIFY"
title="QUALIFY"></htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName="ACT"
title="ACTIVITY"></htmlb:tableViewColumn>
</htmlb:tableView>
<% endif. %>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Types:
itab1 TYPE ZRES_TT
Final Output:
When click on Submit:

When click on Save:
When click on Display:

When Click on Reset:
Generate XML from BSP
STEP1: have a controller in the BSP application ending with .xml (for eg: export.xml)
STEP2: create a controller class for the controller(zcl_c_xml_export)
STEP3: In the do_request method of the of the controller class, pass the internal table to be converted to
the xml file via a function module ZI057678_TEST_XML; which will return the xml string.
Now, call the write method of the cl_bsp_controller and pass the xml string
STEP3.1: The function module will have the following code:
FUNCTION zi057678_test_xml.
*"----------------------------------------------------------------------
*"*"Local interface:
*" IMPORTING
*" REFERENCE(IT_ITAB) TYPE STANDARD TABLE
*" EXPORTING
*" REFERENCE(EV_OUTPUT) TYPE STRING
*"----------------------------------------------------------------------
DATA: lt_column TYPE TABLE OF dfies,

ls_column LIKE LINE OF lt_column,
ls_js TYPE string,
lr_export_table_ref TYPE REF TO data,
lr_ixml TYPE REF TO if_ixml,
lr_stream_factory TYPE REF TO if_ixml_stream_factory,
lr_encoding TYPE REF TO if_ixml_encoding,
lr_resstream TYPE REF TO if_ixml_ostream,
lr_doc TYPE REF TO if_ixml_document,
lr_root_node TYPE REF TO if_ixml_element.
FIELD-SYMBOLS: <fs> LIKE it_itab,

<tab> TYPE table.
CONSTANTS: c_encoding TYPE string VALUE 'UTF-8'.
"create new data object and copy it_itab into it

CREATE DATA lr_export_table_ref LIKE it_itab.
ASSIGN lr_export_table_ref->* TO <fs>.
<fs> = it_itab.
"create an instance of the Ixml Processor

lr_ixml = cl_ixml=>create( ).
"create xml docu

lr_doc = lr_ixml->create_document( ).
"create the Stream Factory

lr_stream_factory = lr_ixml->create_stream_factory( ).
"create an Endcoding and Byte Order

lr_encoding = lr_ixml->create_encoding( character_set = c_encoding
byte_order = 0 ).
"set encoding for docu

lr_doc->set_encoding( encoding = lr_encoding ).
"append root node

lr_root_node = lr_doc->create_element( name = 'table' ).
lr_doc->append_child( new_child = lr_root_node ).
"create the output stream with a pointer to our binary string
lr_resstream = lr_stream_factory->create_ostream_cstring( ev_output ).
"get a pointer to our data table

ASSIGN lr_export_table_ref->* TO <tab>.
"set the Encoding into a stream

lr_resstream->set_encoding( encoding = lr_encoding ).
"call Transformation using the simple XSLT id_indent
CALL TRANSFORMATION id_indent
SOURCE itab = <tab>
RESULT XML lr_resstream.
ENDFUNCTION.
STEP4: Now test the controller to see the pop up of the XML.
Simple BSP Application to validate the date fields in Front end using JAVASCRIPT
Go to Transaction SE80.
Select BSP Application & enter the name to create a New BSP Application (Eg:yh_date):
Press Enter to create a new Object & click on Yes:
Enter the short description and press Enter:
Right Click on the Name and go to Create a Page.
Enter the page name and the description and select page with Flow Logic option
Now Page is created. Enter the below code.
In Layout Code:-
<script for="sd" event=onchange type="text/javascript">

var data = this.value;
var date = data.split(".");
if (data != ' ')
{
var day = date[0];
var month = date[1];
var year = date[2];
document.getElementById("sd").style.borderColor = "black";
document.getElementById("sd").style.color = "black";
if ((day<1 || day >31) || (month<1 || month>12) ||(year.length != 4))
{
alert("Please enter a valid Start Date ( mm.dd.yyyy )");
document.getElementById("sd").style.color = "red";
document.getElementById("sd").style.borderColor = "red";
}
}
else
{
alert("Please enter a valid Start Date ( mm.dd.yyyy )");
document.getElementById("sd").style.color = "red";
document.getElementById("sd").style.borderColor = "red";
}
</script>
<script for="ed" event=onchange type="text/javascript">

var data = this.value;
var date = data.split(".");
if (data != ' ')
{
var day = date[0];
var month = date[1];
var year = date[2];
document.getElementById("ed").style.borderColor = "black";
document.getElementById("ed").style.color = "black";
if ((day<1 || day >31) || (month<1 || month>12) ||
(year.length != 4))
{
alert("Please enter a valid End Date ( mm.dd.yyyy )");
document.getElementById("ed").style.color = "red";
document.getElementById("ed").style.borderColor = "red";
}
}
else
{
alert("Please enter a valid End Date ( mm.dd.yyyy )");
document.getElementById("ed").style.color = "red";
document.getElementById("ed").style.borderColor = "red";
}
</script>
<%@page language="abap" %>

<htmlb:page title="master " >
<htmlb:form>
<htmlb:gridLayout columnSize = "3"
rowSize = "3"
cellPadding = "10"
cellSpacing = "10"
width = "50%" >
<htmlb:gridLayoutCell columnIndex = "1"
rowIndex = "1"
width = "50%" >
<font face=verdana style="font-size:10px">
<b>Starting Date</b></font><br>
<htmlb:inputField id = "sd"
width = "50%"
type = "DATE"
showHelp = "X"
invalid = "<%= w_sIN %>"
alignment = "CENTER"
maxlength = "10"
value = "<%= w_sd %>" />
<htmlb:gridLayoutCell columnIndex = "2"
rowIndex = "1"
width = "50%" >
<font face=verdana style="font-size:10px">
<b>End Date</b></font><br>
<htmlb:inputField id = "ed"
width = "50%"
type = "DATE"
showHelp = "X"
invalid = "<%= w_eIN %>"
alignment = "CENTER"
maxlength = "10"
value = "<%= w_ed %>" />
</htmlb:gridLayout>
</htmlb:form>
</htmlb:page>
</htmlb:content>
In Event-handler on Initialization.
w_sd = sy-datum.
w_ed = sy-datum.
In Type Definition:
w_ed TYPE SY-DATUM
w_eedate TYPE CHAR10
w_eIN TYPE C
w_sd TYPE SY-DATUM
w_sin TYPE C
OUTPUT
Whenever an invalid date is provide this JavaScript will get triggered.
Date here is in DD.MM.YYYY Format.
Case 1.
Here the starting day field contains 00.which is invalid.
Once you press ok the input field color will change to Red.
Once the valid date is provided it revert back to original color
This above condition will work for day as well as month values.
Case 2.
Here if the total length of month is less than 4 the following error is triggered.
Once the valid date is provided it revert back to original color
Case 3.
If the starting date field is blank.

Again, as above once the valid date is provided it revert back to original color.
This is all about the date validations that can be done on front-end using Java scripts.
BSP application to download the table contents into excel sheet
Scenario: Download the table contents into excel sheet with the button click can be achieved by using
class CL_BSP_UTILITY download.
Step1: Go to SE80 transaction select BSP application and provide the name of application.
Step2: Give the short description of application and assign package to application.
Step3: Right-click on application and create a page.

Step4: Provide the name and description of page.
Step5: CODE
Layout code:

<htmlb:page title="First Page " >
<table width="100%" height="100%" border="0">
<htmlb:form>
<tr>
<td bgcolor = "#FFFFFF" >
<center>
<%
if fl_flag = 1.
%>
<htmlb:tableView id = "flight"
table = "<%= t_flight %>"
width = "50%"
onRowSelection = "rowSelection"
design = "standard"
tableLayout = "AUTO"
footerVisible = "false" >
<htmlb:tableViewColumn columnName = "CARRID"
title = "<b>Carrier Id</b>" >
</htmlb:tableViewColumn>
<htmlb:tableViewColumn columnName = "CONNID"
title = "<b>Connection ID</b>" >
<htmlb:tableViewColumn columnName = "FLDATE"
title = "<b>Flight Date</b>" >
<htmlb:tableViewColumn columnName = "PLANETYPE"
title = "<b>Plane Type</b>" >
</htmlb:tableView>
<br><center>
<htmlb:button id = "submit"
text = "Download"
onClick = "test"
width = "20%"/>
<%endif.%>
</center>
</td></tr>
</htmlb:form>
</table>
</htmlb:page>
</htmlb:content>
OnCreate Code:
select carrid connid fldate planetype from sflight into table t_flight
up to 10 rows.
if sy-subrc eq 0.
fl_flag = 1.
endif.
OnInPutProcessing Code:

DATA: button_event TYPE REF TO cl_htmlb_event_button ,

event TYPE REF TO if_htmlb_data.
DATA: ls_flight LIKE LINE OF t_flight.
DATA:
output TYPE string ,
l_xstring TYPE xstring,
app_type TYPE string.
event = cl_htmlb_manager=>get_event( request ).
IF event IS NOT INITIAL AND event->event_name =

htmlb_eventS=>BUTTON .
button_event ?= event .
CASE event->event_server_name.
WHEN 'test' .
IF t_flight IS NOT INITIAL.
LOOP AT t_flight INTO ls_flight.

CONCATENATE
output
ls_flight-carrid
cl_abap_char_utilities=>horizontal_tab
ls_flight-connid
ls_flight-fldate
ls_flight-planetype
cl_abap_char_utilities=>cr_lf
INTO output SEPARATED BY space.

ENDLOOP.
app_type = 'APPLICATION/MSEXCEL;charset=utf-16le'.
CALL FUNCTION 'SCMS_STRING_TO_XSTRING'

EXPORTING
text = output
mimetype = 'APPLICATION/MSEXCEL;charset=utf-16le'
IMPORTING
buffer = l_xstring.
CONCATENATE
cl_abap_char_utilities=>byte_order_mark_little
l_xstring INTO l_xstring
IN BYTE MODE.
CALL METHOD cl_bsp_utility=>download
EXPORTING
object_s = l_xstring
content_type = app_type
content_disposition ='attachment;filename=FlightDetails.xls
response = _m_response
navigation = navigation.
ENDIF.
ENDCASE.
ENDIF.
Page Attributes:
fl_flag TYPE I
fs_flight1 TYPE TYPE_S_FLIGHT
t_flight TYPE FS_FLIGHT
w_carrid TYPE SFLIGHT-CARRID
w_input TYPE STRING
Types Definition:
types:
begin of type_s_flight,
carrid type sflight-carrid,
connid type sflight-connid,
fldate type sflight-fldate,
planetype type sflight-planetype,
end of type_s_flight,
fs_flight type standard table of type_s_flight.
OUTPUT:
Step6: Layout is as follows with the flight details and user has option to download the table details with
the button click.
Click on download button, Pop up appears asking to open or to save a file.
Popup appears for location of file and name of file.

Excel sheet is stored as flight details as follows:
Steps to integrate Business Server pages (BSP) with ADOBE FLEX

Create a simple BSP application using SE80 Transaction.
Just create two pages first and second using page with Flow logic as the page type.
Create the first page as first.html and second page as second.xml as shown below.
In the second.xml page, try to populate the XML file using simple SFLIGHT table information.
I have used the replace statements because XML parsing in Flex failed due to special characters.
Test the second.xml page, XML file will open in a separate browser as below,
Create a Flex application in the Adobe Flex builder. I have created a MXML application named
sapflexbsp inside the project flexwebservice.
Use the following code in the created MXML application.
You will see the list of all the swf and html objects created for the project in the history folder.
Copy the created swf file.
Right click the html file and copy the below source code in the first.htm page of your BSP application as
shown.
Import the Created SWF file in the SAP MIME Repository as shown.
Once you have done all the above steps, execute the first.htm page. It will call the MIME object and
execute complete application.
Following is the result of the complete integration between SAP BSP and ADOBE Flex.
Integrating SAP data (R/3 or BW Data) with the BO-Xcelsius (Business Objects)
using BSP
Part 1: SAP BSP + BO-Xcelsius (Excel XML Maps Connection)
Create a BSP application using SE80 transaction (ZDEMO_EXCELMAPS)

Create a View (PWFL)-DATA.XML which will have the XML data. This data will be acting as the main
source for the Xcelsius file which is going to be created in the further steps. Use the below code in the
layout of the XML view.
<% DATA: ITAB TYPE TABLE OF SFLIGHT,
XML_STRING TYPE STRING .
SELECT * FROM SFLIGHT INTO TABLE ITAB UP TO 5 ROWS.
TRY.
CALL TRANSFORMATION ('ID')
SOURCE PARA = ITAB
RESULT XML XML_STRING.
CATCH CX_ST_ERROR.
ENDTRY.
REPLACE ALL OCCURRENCES OF 'utf-16' IN XML_STRING WITH 'utf-8' .
CALL METHOD RESPONSE->IF_HTTP_ENTITY~SET_CDATA

EXPORTING
DATA = XML_STRING.
%>
The above code is used to generate the XML data. The internal table returned from the select statement
will be presented to the standard CALL TRANSFORMATION (ID) to generate the XML. The XML format
may be either in UTF-8 or UTF-16 or anything. Based on the setting and server configurations the
versions have to be set. The XML file has to be tested and the generated XML will be saved locally in
order to design the Chart.
Now an Excel file is imported with the XML data saved locally. The data returned from the FM will be
presented in the excel file and the file will be saved locally.
Now the BO-Xcelsius will be opened and imported with excel file which is saved in the previous step. The
data will be feed into the excel sheet of the Xcelsius and the report is designed by using several
components available.
Now the connectivity has to be made by opening the Manage Data Connections - > Add - > Excel XML
Maps. Name the connection and mention the XML data URL. The view represented in BSP application for
the XML file has the URL and will be represented.
The designed Xcelsius file will be saved in XLF format locally which will be then exported as SWF file.
The SWF file will be imported as MIME object into the BSP application.
Another HTML view will be created inside the same BSP application in order to display the MIME object.
Apply the below code in the layout of FLIGHTS.HTML view.
<htmlb:page title = "XCelsius-SAP (Excel XMl Maps Connection)">
<htmlb:form>
<object>
<embed src="Excel_XML_MAPS.swf" quality="high"
bgcolor="#869ca7" width="50%" height="50%"
name="test_page" align="middle" play="true" loop="false" quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Now test the FLIGHTS.HTML page. The HTML page first calls the Xcelsius SWF file. The SWF file gets
data from the XML page created as a view in the BSP application. You can easily have a view by
debugging the application on keeping the break point in the appropriate places. For example when a
refresh button is placed in the Xcelsius file and whenever it is clicked, the data gets refreshed and acts
based on the current data.
I think the blog on Excel XML maps connection gave a basic idea of integrating SAP with the BO. Not only
R/3 data can be presented as a report or dashboard, but also the BW data can also be presented by
representing the BW Query or BW objects into the customized FMs and can be operated as the same as
that of operating the R/3 data through the XML file. Below shows the sample application which is
consuming data from BW query.
Part 2: SAP BSP + BO-Xcelsius (web Service Connection)
As we discussed earlier about the SAP and BO integration using BSP and Xcelsius, here I have used
another connection of Xcelsius to integrate with the SAP BSP.
This experiment is intended to describe the integration of SAP with BO-Xcelsius using web service. The
R/3 or BW data will be consumed as web service so that the service will be used with the data
connectivity of Xcelsius. The data gets refreshed every moment based on the user action through the
interface where we are going to use SAP BSP as the tool.
The first step is to create the FM, where the logical operation of the report has to perform. We can either
use R/3 tables, Classes, methods etc or BW Query as the source.
Create FM ZSAP_XCEL, with the following code as shown below.

Now the FM has to be published as a web service. Follow the below steps which is mentioned in the
screens.
Once the above steps are done, open the SOA MANAGEMENT through SOAMANAGER transaction and
follow the below screens stepwise.
We can test the data of the FM as XML file through the web service URL by copying the link which is
highlighted above and place it in IE.
Now the report has to be designed in BO-Xcelsius based on the data from web service which will be
consumed as WSDL URL.
Now the report has to be designed based on the functionality / users requirement of the report. The Input
(Read from) and Output (Insert In) cells have to be mapped to the Xcelsius-Excel sheet during the design
phase.
The designed Xcelsius file will be saved in XLF format locally which will be then exported as SWF file.
Now the created SWF file has to be presented to the dashboard by having SAP BSP as the web
interface.
Create a BSP Application ZDEMO_WEBSERV with a HTML View-DISPLAY.HTML with the following
code. Import the SWF file into the BSP application in the MIME folder.
Now test the DISPLAY.HTML and interact with Xcelsius file by giving input and output will be based on the
functionality of the web service.
Here the R/3 data is consumed as a FM and used as the source. In the previous part also R/3 data is
used as the source. BW data can also be used as the source data in the previous and for this experiment
also.
Part 3: SAP BSP + BO-Xcelsius (XML Data Connection)
In this presentation the third connection of Xcelsius XML data is used to integrate with SAP BSP, so that
the data will be presented in the dashboard.
Create a sample BSP application ZDEMO_XMLDATA
Create a XML view in the BSP application based on the PWFL model. Embed the below code shown in
the following screens. The code is mainly projected to generate the XML file which is going to act as a
source for the SWF file in a particular format. The CALL TRANSFORMATION ('ID') will generate the XML
file using the data in a format based on the system / server settings. The pre defined format has to be
achieved based on replacing some tags with other values as shown in the below screens.
The below screen is the predefined format with data, variable, row and column tags generated while
testing the XML view. The generated XML has to be parsed to the Xcelsius file. Sometimes the target
might not be achieved if the format of the XML file is not proper.
Open the Xcelsius 2008 and design the canvas using a list box and a column chart. The list box will be
holding the date of the flight and the column chart will represent the maximum and occupied seats of the
particular class on the selected date.
Now the data connectivity has to be assigned to the Xcelsius file. The XML path will be taken from the
properties of the XML view as shown below.
The XML data URL will be the copied URL from the above screen. The URL can also be dynamically
changed by keeping tags on the server name. eq. http://<webserver>.com:<port>/sap(namesapce)
Now the data from the XML has to be mapped to a series of range. Mark check on Enable Load and
click on +. Name the series as Q1 which we used the variable name in the XML file and select the
ranges based on the data. Click on preview XML and compare the XML file generated by Xcelsius
preview and the XML generated while testing XML view from BSP application. The format should be the
same, so that the data can be parsed easily between the BSP and SWF file which is going to be
generated
Now export the Xcelsius file as a flash file.

Now the BSP application will be enhanced with an HTML page which will be holding SWF file and will be
displayed during the run time. Place the below code shown in the screen on the layout of HTML view.
Now test the HTML view and SWF file will be generated. Based on the different selections on flight date
the data will be changed as shown in the below screens.
Consuming Web Service with WSDL file through BSP
Sending SMS to Mobile
Scenario: Consuming WSDL file through BSP which involves the proxy development.
Proxy generation
Step1: Go to SE80 transaction, select the package and right click on package create enterprise
service/web service and right click and select on proxy object.
Step2: User has option to select the WSDL sources, select local file click on continue. User has option to
select the WSDL file. (To download the WSDL file used in this scenario, click here)
Step3:Next is port selection, select the sendsmssoap.

Stpe4: Give the package name and also prefix
Step5: Save and activate the application, Proxy was generated.

Step6: Go to SE24 and check the class name, a method was created with import and export parameters.
In BSP application call the method which was generated and with this we can send SMS to mobile. We
can also check the status of application whether message is delivered or not.
Creation of BSP application and consuming the web-service.
Step1: Go to SE80 transaction and create a BSP application
Step2: Give the short description of application and assign package to application.
Step3: Right-click on application name and create a page.

Step4: Give the page name and description
Step5: Layout code:

<htmlb:page title="First page " >
<htmlb:form>
<center>
<htmlb:textView text = "Mobile No"
<htmlb:inputField id = "mob"
value = "<%= w_mobno %>"
size = "12" />
<br>
<htmlb:textView text = "Mail ID"
<htmlb:inputField id = "mail"
value = "<%= w_mail %>" />
<br>
<htmlb:textView text = "Message"
<htmlb:inputField id = "msg"
value = "<%= w_msg %>"
size = "12" />
<br>
<br>
<htmlb:button text = "Send SMS"
id = "get"
onClick = "OnInputProcessing" />
<%
if fl_flag eq 1.
%>
<%
if t_ou is not initial.
%>
<center>
<font face=verdana style="font-size:12px" color ="#228B22"> <%= t_ou-
SEND_SMSTO_INDIA_result-FROM_EMAIL_ADDRESS%>
<br><%= t_ou-SEND_SMSTO_INDIA_result-MOBILE_NUMBER%>
<br><%= t_ou-SEND_SMSTO_INDIA_result-PROVIDER%>
<br><%= t_ou-SEND_SMSTO_INDIA_result-STATE%>
<br><%= t_ou-SEND_SMSTO_INDIA_result-STATUS%> </b></h6></center>
<%
endif.
%>
<%
Endif.
%>
</center>
</htmlb:form>
</htmlb:page>
</htmlb:content>
Step6:
OnInPutProcessing Code:

data:
w_event type ref to cl_htmlb_event,
w_obj type ref to object,
w_inputfield type ref to cl_htmlb_inputfield.
call method cl_htmlb_manager=>get_event
exporting
receiving
event = w_event.
case w_event->id.
when 'get'.
EXPORTING
name = 'inputfield'
id = 'mob'
RECEIVING
data = w_obj.
w_inputfield ?= w_obj.
w_mobno = w_inputfield->value.
w_input = w_mobno.
clear w_obj.

EXPORTING
name = 'inputfield'
id = 'mail'
RECEIVING
data = w_obj.
w_mail = w_inputfield->value.
w_input = w_mail.
clear w_obj.

EXPORTING
name = 'inputfield'
id = 'msg'
RECEIVING
data = w_obj.
w_msg = w_inputfield->value.
w_input = w_msg.
clear w_obj.
data:
tv type REF TO ZTCO_SEND_SMSSOAP ,
t_in type ZTSEND_SMSTO_INDIA_SOAP_IN,
t_in1 type REF TO ZTSEND_SMSTO_INDIA_SOAP_IN,
t_inn like standard table of t_in.
TRY.
CREATE OBJECT tv
* EXPORTING
* logical_port_name =
.
CATCH cx_ai_system_fault .
ENDTRY.
t_in-MOBILE_NUMBER = w_mobno.
t_in-FROM_EMAIL_ADDRESS = w_mail.
t_in-MESSAGE = w_msg.*
APPEND t_in to t_inn.
TRY.
CALL METHOD tv->send_smsto_india
EXPORTING
input = t_in
IMPORTING
output = t_ou
.
CATCH cx_ai_system_fault .
CATCH cx_ai_application_fault .
ENDTRY.
if t_ou is not initial.
fl_flag = 1.
endif.
endcase.
Page attributes:
fl_flag TYPE I
t_ou TYPE ZTSEND_SMSTO_INDIA_SOAP_OUT
w_input TYPE STRING
w_mail TYPE ZTSEND_SMSTO_INDIA_SOAP_IN-FROM_EMAIL_ADDRESS
w_mobno TYPE ZTSEND_SMSTO_INDIA_SOAP_IN-MOBILE_NUMBER
w_msg TYPE ZTSEND_SMSTO_INDIA_SOAP_IN-MESSAGE
OUPUT:
Give the mobile number, mailid and message and click on button.
Output is as follows with the mobile-no, mailid, service provider, place and status of message (Message is
delivered or not delivered)
HR-IC Enhancement Date TAB Addition
This technical document is about how to add a new DATE tab next to the follow-up tab in the HR-IC
standard Web UI component which will display the SLA dates for the HR Service ticket.
Step-1:
We need to enhance the HR-IC component with the following enhancement set.
Step-2:
The click on the Component Structure browser and go the views. Then choose the following view.
ICCMP_BT_SVT/HeaderPartnerFolUpViewSet. This view needs to be enhanced in order to add a new

tab next to the follow-up tab. Then right click on the view and choose ENHANCE. This will create a pop-
up for the z-implementation classes of controller, view-layout for that view which will allow you to make
changes in the view-layout of Follow-up viewset.
Step-3:
Click on the view layout and go to the HeaderPartnerFolUpViewSet.htm. Double click on it which will take
you to the HeaderPartnerFolUpViewSet.htm Page.
Now we need to update the navigational link which has the following tabs: Categories, Actions, Follow-
up. The below code need to be added in the navigational link internal table and activate it to get the
DATE tab reflecting in the HR-IC Client Web UI.
ls_line-id = 'help'.
ls_line-onclick = 'help'.
ls_line-text = 'Dates'.
ls_line-tooltip = 'Dates'.
"ls_line-textdirection = 'Dates'.
insert ls_line into table controller->gt_navlink_tab.
CLEAR: ls_line.
Step-4:
Now test the component and check the Web Client UI where you can find the new DATE tab next to the
follow-up TAB but without a view assigned to it and we need to establish a link for a view to show up in
the newly added TAB.
Step-5:
The next step is to get the SLA Date information like Processing Date and Due Date in the Dates TAB.
Create an event EH_HELP and outbound plug OP_DATES. This event will trigger the action HELP
which will fire an outbound plug OP_DATES which in turn will establish a link for the respective view
specified in the navigational link.
Step-6:
The viewset ViewSet ICCMP_BT_SVT/SLAView has a view View ItemDates.MainWindow which can be
used for displaying in the DATES tab which has information like First Response and Due dates.
A NavigationalLink ToSladates has to be established from the source ViewSet

ICCMP_BT_SVT/HeaderPartnerFolUpViewSet with an Outbound plug DATES to Target
ItemDates.MainWindow with an Inbound Plug DEFAULT as shown below.
Save the Repository Changes.
Step-7:
Now drag the View ItemDates.MainWindow from the ViewSet ICCMP_BT_SVT/SLAView and its
ViewArea ItemDates to the Viewset ICCMP_BT_SVT/HeaderPartnerFolUpViewSet and its ViewArea
HeaderPartnerFolUpMain as show below.
Save the Repository Changes.
Step-8:
Now we have established a NavigationalLink ToSladates and dragged the Item view to the Partner
Follow-up View set. Few changes in the event handler EV_ONHELP and outbound-plug OP_DATES will
the bring Itemdates view in the DATE tab with the required data like First Response Date and Due Date.
Add the following code in the event handler EH_ONHELP and activate it.
Add the following code in the outbound-plug OP_DATES and activate it.
Step-9:
Now test the service and it will show the respective SLA dates in the DATE tab as below.

Crear BSP Desde Cero

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Crear BSP Desde Cero

Hochgeladen von

Copyright:

Verfügbare Formate

Building a simple BSP Application

Activate the BSP Application.

Step5: Application automatically generates the some code as shown below.

Building a simple BSP Application to retrieve Material information

Save and activate the application.

<%@ page language="abap" %>

Create the page attributes as shown below.

The BSP page looks as shown below.

Click on the Get all button to get the output as follows.

3. After creating the Application assign it to package.

The coding on the page is like this.

* Function to change external format to the internal format

function transf (fval)

Here, we are assigning the parameter value to the id of input field.

Step5: The code is to be written in first.htm is

The output of the screen shots as shown below:

Providing list box in a BSP application

Press ENTER to create a new Object & Click on Yes:

Enter the Short Description and Press Enter:

SELECT modul FROM zemployee INTO TABLE t_mod.

Fs_mod type types_mod

t_mod type fs_module.

This document describes the how to create a controller in BSP Application.

1. Creating BSP Application

2. Creating Controller on BSP Application

(Double click on yh1328_controller_main to create the class and press YES)

4. Creating Controller Class

6. Redefine method DO_INIT, dbl click on the method in change mode.

7. Redefine Method DO_REQUEST

8. Create a BSP Page (View)

Provide the page as main1.htm and description.

9. Assigning attributes to the View.

11. Save and Activate BSP Application

Building interactive BSP Application

Step2: Provide the select-option on the screen.

Step5: The code should be written as follows

fs_vbak TYPE VBAK Sales Document: Header Data

it_kna1 TYPE TYPES_KNA1 Internal table to hold customer information

it_vbak TYPE TYPES_VBAK Internal table to hold Sales information

w_flag TYPE C Flag

w_kna1 TYPE KNA1 General Data in Customer Master

w_kunnr_high TYPE KNA1-KUNNR Customer Number 1

w_kunnr_low TYPE KNA1-KUNNR Customer Number 1

Define Type definition as below:

types: types_kna1 type table of kna1,

types_vbak type table of vbak.

low type kunnr,

high type kunnr,

Now execute the BSP Application

Displaying table contents on the BSP Application

Step3: Create BSP Application and page with name First.htm.

Save and activate the application.

Step9: Execute the application then the following screen appears.

Provide the customer name then the output screen is:

Now the output is:

Now the output will be:

Navigation between BSP Pages

We have to mention the expiry date of cookie also.

Click on layout tab

Click on event handler tab

Paste it below code

event handler to manipulate dynamically the HTTP stream

data: PAGE_DATA type XSTRING.