Post on 02-Jun-2018
transcript
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 1/222
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 pressenter.
Step2: Provide the description of the BSP Application and click create button.
Activate the BSP Application.Step3: Create the pae as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 2/222
Step4: !ou will et the followin screen there you provide name pae and its description.
Step: Application automatically enerates the some code as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 3/222
Step!: "o e#ecute the BSP Application$ we use %&' (%niform &esource 'ocator). *e can find the %&' of the BSP Application as shown below.
Step": +ow o to SAP 'oon Pad and note down the application server.
Step#: +ow o to $:%&'()*&S%s+stem32%dri,ers%etc%hosts.txt$ ,pen this hosts.t#t file and provide theapplication server and %&' of the BSP Application as below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 4/222
Step-: +ow you can e#ecute the BSP Application in web browser.
Building a simple BSP Application to retrie,e aterial in/ormation
-o to transaction SE80. Select BSP application and input the name of the BSP application that you want
to create.
Save and activate the application.&iht click on the application name and click createpae.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 5/222
"he resultant window appears as follows.Enter the name of the pae that you want to create. n this case it is the /default.htm that am creatin.Enter the description of the pae and click on /continue.
Click save.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 6/222
!ou can observe the /paes with flow loic and under that you can find /default.htm pae in the BSPapplication tree.
Chane the code in the layout as shown in the imae below or copy and paste the code iven below inthe layout window.
<%@ page language="abap" %><html> <body BGCOLOR="#B5E1!" > <h!> <B> $ERL E$L& <'B> <'h!><(o)m method="po*t"> ate)+al ,umbe)
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 7/222
<+nput type=te-t name="matn)" .alue="" ><+nput type=te-t name="matn)!" .alue="" ><p> <+nput type=*ubm+t name="onnput/)o0e**+ng*ele0t2" .alue="Get eta+l*"><p> <+nput type=*ubm+t name="onnput/)o0e**+ngmate)+al*2" .alue="Get ll"><p> <0ente)><table bo)de)=1> <% data3 4ama)a type ma)a6 %> <% +( +ma)a +* not +n+t+al6 %>
<t)> <td><b>$,R<'b><'td> <td><b>ER&<'b><'td> <td><b>LE<'b><'td> <td><b>7/&$<'b><'td> <'t)> <% loop at +ma)a +nto 4ama)a6 %><t)> <td> <%= 4ama)a8matn) %> <'td> <td> <%= 4ama)a8e)*da %> <'td> <td> <%= 4ama)a8laeda %> <'td>
<td> <%= 4ama)a8.p*ta %> <'td><'t)> <% endloop6 %><% el*e6 %><t)> <td><b>$,R<'b><'td> <td><b>ER&<'b><'td> <td><b>LE<'b><'td><'t)> <% loop at +tma)a +nto &ma)a6 %> <t)> <td> <%= &ma)a8matn) %> <'td> <td> <%= &ma)a8e)*da %> <'td> <td> <%= &ma)a8laeda %> <'td> <'t)><% endloop6 %><% end+(6 %><'table><'(o)m> <'body><'html>
Create the pae attributes as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 8/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 9/222
Code under /,nnputProcessin.C&E E7E,$6 9:E, ;*ele0t;6 ,7G$O,8>&E$/RE$ER ;matn); 26&ELEC$ RO R ,$O $BLE R 9:ERE $,R BE$9EE, $,R , $,R!6 9:E, ;mate)+al*;6&ELEC$ RO R ,$O $BLE R6 9:E, O$:ER&6E,C&E6
Click on the BSP application name and input as shown below.
Save$ check and activate the BSP application and then e#ecute the application. "he pae would bedisplayed as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 10/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 11/222
Enter the material numbers in the te#tbo#es and then click on /-et details."he output would be as follows."he output is a result of the select 3uery that we fired selectin the specified set of fields.
Click on the /-et all button to et the output as follows.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 12/222
&emember$ we have fired a select 3uery selectin all the records from the database table /4A&A and aredisplayin it.
A Simple BSP application to select a range o/ Sales )ocument and displa+ the result onthe next Page
"his 5ocument e#plains about a simple BSP application where we can ive a rane of Sales 5ocument
+umber and then the respective data related to that Sales 5ocument +umber is displayed."he factors that have been considered while doin this BSP Application.
• 6irst to create a BSP Application and e#ecute it on the browser we have to include the P address
of the particular system and browser in the drivers proram. *e can do this by oin to STA0T0()0'50S5T$
• *e can use 2"4' or 2"4'B or any other codin to construct a BSP application. (2ere we are
usin 6T7B)
• *e have considered table BAP
• *e have use the class $786T7B8A(A950 and $786T7B855(T and created their
instances.Steps to create a BSP Application.
7. -o to "ransaction SE80$ select BSP Application and ive the name of the Application you want to
create. Press /E+"E&.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 13/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 14/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 15/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 16/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 17/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 18/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 19/222
7?. +ow 5esinin the S5$*() PA95;.
78. ,ur output on the second pae should be in tabular form. So$ in our layout we have to define tableview like this.
7@. 2ere on the Second Pae also we have to define the pae attributes like this.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 20/222
0. +ow we have to write the code in the '('T'A7'@AT'*(; event. Because this event triers whenever a new pae is called.
7. "he code is as follows. e.ent handle) (o) data )et)+e.al
data 3 4e.ent type )e( to 0lhtmlbe.ent 4e.ent+d type *t)+ng 4ob? type )e( to ob?e0t 4ob?1 type )e( to ob?e0t 4.beln type )e( to 0lhtmlb+nput(+eld 4.beln.al type *t)+ng 4.beln1 type .bap8.beln 4.beln! type .bap8.beln 6 Call+ng ethod (o) 4.belnCLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld;
+d = ;+.beln; )e0e+.+ng data = 4ob? 64.beln = 4ob? 6 " /a**+ng the ob?e0t .ale to 4.beln4.beln.al = 4.beln8>.alue 6 " no4 the .alue ()om 4.beln +* pa**ed to " 4.beln.al4.beln1 = 4.beln.al 6 " ,o4 .alue ()om 4.beln.a +* pa**ed to
" 4.beln1 :e)e 4e ha.e 0alled the 0la** 0lhtmlbmanage) and an +n*tan0e getdata ha* been 0)eated6CLL ,C$O, ;CO,7ER&O,E$L/:,/$; E/OR$,G
+nput = 4.beln1 /OR$,G O$/$ = 4.beln16 un0t+on to 0hange e-te)nal (o)mat to the +nte)nal (o)mat Call+ng ethod (o) 4.belnCLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+.beln1;
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 21/222
)e0e+.+ng data = 4ob? 64.beln = 4ob? 6 " /a**+ng the ob?e0t .ale to 4.beln4.beln.al = 4.beln8>.alue 6 " no4 the .alue ()om 4.beln +* pa**ed to " 4.beln.al4.beln! = 4.beln.al 6 " ,o4 .alue ()om 4.beln.a +* pa**ed to " 4.beln!CLL ,C$O, ;CO,7ER&O,E$L/:,/$; E/OR$,G +nput = 4.beln! /OR$,G O$/$ = 4.beln! 6
6unction to chane e#ternal format to the internal format
select from vbap into table tvbap where vbeln between wvbeln7 and wvbeln.. Save and activate the application.
+ow when we e#ecute the application. "he Screen will be like this.
,n Clickin the button /-et 5ata. "he output would be like this.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 22/222
Pro,iding 4 help in the BSP Application
Step1: "o provide f: help for the input field$ we have to add show6elp and onalue6elp attributes to the
inputield tag. Provide the values to those attributes as shown below.
Step2: "he attribute onalue6elpC has to assin a function$ which is to be defined. n this function$
usin the /document.open statement$ we can open a pae as a window to the input field as 6: help.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 23/222
Step3: Create a pae with the name specified in the function get$ustomer <?. And in the event
on0eDuest event handler et the data for f: help.
Step4: "o transfer the selected value in the f: help window to the input field$ we need to write a function
which is mentioned in button ta.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 24/222
2ere$ we define the function trans/ containin value of the parameter to be transferred in to input f ield.
+ow$ we have to catch this parameter value in the main pae by providin this code.
function transf (fval)
D
document.etElementByd(ipkunnr).value F fvalG
H
2ere$ we are assinin the parameter value to the id of input /ield.
Step: "he code is to be written in /irst.htm is
n 'ayout
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 25/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 26/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 27/222
*hen press the button Press 4e$ then
Pro,iding list box in a BSP application
-o to "ransaction SE801<
Select BSP Application J Enter a +ame to create a new BSP Application (EIyhbsplistbo#)I
Press E+"E& to create a new ,b;ect J Click on !esI
Enter the Short 5escription and Press EnterI
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 28/222
,nce the ,b;ect is created$ &iht Click on the +ame and create a PaeI1
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 29/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 30/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 31/222
+ow Pae is created. Enter the Below Code.
n 'ayout CodeI1
<%@page language="abap"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb"%>
<htmlb30ontent de*+gn="0la**+0Dde*+gn!!Dde*+gn!F"> <htmlb3page t+tle = "+)*t /age "> <htmlb3(o)m><htmlb3d)opdo4nL+*tBo- +d = "my)opdo4nL+*tay" toolt+p = "u+0H +n(o (o) my)opdo4nL+*tBo-"> <%LOO/ $ tmod ,$O (*mod6 %> <htmlb3l+*tBo-tem Hey = "<%=(*mod%>" .alue = "<%=(*mod%>"'> <% %><%E,LOO/6%>
<'htmlb3d)opdo4nL+*tBo-> <'htmlb3(o)m> <'htmlb3page>
<'htmlb30ontent>
n 5,enthandler F on 'nitilaliGation.
&ELEC$ modul RO Iemployee ,$O $BLE tmod6*o)t tmod6delete ad?a0ent dupl+0ate* ()om tmod 0ompa)+ng modul6
Page AttributesI1
6smod type typesmod
tmod type fsmodule.
n T+pe )e/initionI
$J/E&3 BEG, O type*mod modul $J/E Iemployee8modul E, O type*mod (*module type*tanda)d table
o( $J/E&O6
*TPT:
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 32/222
sing controller in BSP Application
This document describes the how to create a controller in BSP Application.
1. $reating BSP Application
Create a BSP Application in S5#H e..$ I6132#8T5ST8BSP and provide short description and create it.
2. $reating $ontroller on BSP Application F
&iht click on the application and create1< controller and enter name as main.do alon with description
and press continue.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 33/222
3. Populating $ontroller $lass
Enter the name of your controller class i.e. yh798controllermain. *e also need to create this class inS524
(5ouble click on yh798controllermain to create the class and press !ES)
4. $reating $ontroller $lass
n the Properties Tab of the class yh798controllermain ensure its super class is
C'BSPC,+"&,''E&.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 34/222
=. 0ede/ining ethods o/ the $lass
*e need to redefine some methods inherited from the superclass i.e. 5,+" and 5,&EK%ES".
!. 0ede/ine method )*8'('TJ dbl clicE on the method in change mode.
The DO_INIT Method behaves just like initialization event wherein we provide the data
declaration.
2ere we can fetch the data form the database table S6'-2" into internal table tfliht
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 35/222
"he attributes have to be set in the Attributes Tab of the Class
". 0ede/ine ethod )*805K5ST
Select the method 5,&EK%ES" and press the &edefine button and open the method in chane mode.n this method we would be callin 'ayout (Liew) we create a reference variable referencin the pae andthen call the methods C&EA"E LE* and pass it the actual view (not yet created). *e then call the view.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 36/222
.
#. $reate a BSP Page <iew?
n SE80 riht click on the BSP Application and select Create1<Pae1<Pae "ype1< Liew
Provide the pae as main1.htm and description.
-. Assigning attributes to the iew.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 37/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 38/222
This documents describes the 6ow to handle 'nteracti,e reporting <5xtension to BSP Application1
document?.
Step1: Create the BSP Application @BSP8TAB7585>T and pae name irst.htm.
Step2: Provide the selectoption on the screen.
Step3: when particular table row is selected then the correspondin detailed information should be
displayed."o achieve this functionality$ we have to select selectionode$ on0owSelection$ Ee+$olumn
in table,iew ta as shown.
Step4: Consider the "ableview event handler too alon with nputfield event handler in the 55(T
6A()750.
Step: "he code should be written as follows
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 39/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 40/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 41/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 42/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 43/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 44/222
2ere$ row8Ee+ is a field in t,8data which contains the selected row value (Le+ ,alue mentioned in thetableview).
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 45/222
)e/ine the page attributes as below:
fsvbak "!PE LBAM Sales 5ocumentI 2eader 5ata
itkna7 "!PE "!PESM+A7 nternal table to hold customer information
itvbak "!PE "!PESLBAM nternal table to hold Sales information
wfla "!PE C 6la
wkna7 "!PE M+A7 -eneral 5ata in Customer 4aster
wkunnrhih "!PE M+A71M%++& Customer +umber 7
wkunnrlow "!PE M+A71M%++& Customer +umber 7
)e/ine T+pe de/inition as belowI
typesI typeskna7 type table of kna7$
typesvbak type table of vbak.
typesI
bein of typesrane$
sin(7)$
option()$
low type kunnr$
hih type kunnr$
end of typesrane.
+ow e#ecute the BSP Application
)ispla+ing table contents on the BSP Application
Step1: n SE80 (,b;ect +aviator)$ 6or 2"4' tas$ -o to "A- B&,*SE& wherein select the BSP
E#tensions as below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 46/222
Step2: n "&A+SP,&"AB'E tree structure$ select 2"4'B where we can find all 2"4' tas like 'abel$Button$ and nput 6ield etc.
Step3: Create BSP Application and pae with name 6irst.htm.
Step4: "o place the 'abel and nput field in the web browser$ o to "ab browser1<BSP E#tensions1
<"ransportable1<2tmlb. -o to 'abel html ta$ dra and drop it into 'ayout. Similarly same as for input
field.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 47/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 48/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 49/222
Step1H: n the above output$ to retain the value iven customer field$ we can achieve it by the option,alue in the 'nput/ield in html ta.
+ow the output isI
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 50/222
Step11: "o display only selected field in the table$ then we can achieve this usin table,iewcolumn htmlta.
+ow the output will beI
(a,igation between BSP Pages
The ,alues can be na,igated between pages either b+ using (A'9AT'*( *BM5$T or $**L'5S.
sing (A'9AT'*( *BM5$TJ we can trans/er onl+ the ,alues where as b+ $**L'5SJ we can pass
tables too.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 51/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 52/222
Step4: n event handler$
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 53/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 54/222
$reate Ser,erSide $ooEies
!ours is a stateless or stateful application. if its stateful$ instead of cookies$ you can use application class
to hold the data
t is a stateless applicationG want to reduce the waitin time for a customer by preparin cookies for thatparticular customer in advance.
9o to S5#H$reate a BSP application$reate a page
$licE on la+out tab
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 55/222
Paste the code in la+out tab <html><body>&ele0t+on page&tate(ul o) *tatele**<(o)m method="po*t"><table><t)><td>*tate(ul<'td>
<td><+nput type=te-t name="L&$&$R,GE" .alue="" ><'td><td><+nput type=te-t name=",E$&$R,G" .alue="" ><'td><td><+nput type=*ubm+t name="onnput/)o0e**+ng)eAue*t2".alue="Ret)+e.e"><'td><'t)><t)><td>*tatele**<'td><td><+nput type=*ubm+t name="onan+pulat+onman+pulate2".alue="&to)e"><'td><'t)><'table><'(o)m><'body><'html>
$licE on e,ent handler tab
Paste it below code
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 56/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 57/222
Select oninputprocessingJ Paste the below code
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 58/222
onanipulation code
• event handler to manipulate dynamically the 2""P stream
data3 /GE$ type &$R,G6data3 ,E type &$R,G6e-po)t L&$&$R,GE ()om L&$&$R,GE&$R,G& ()om &$R,G&to data bu((e) /GE$6,E = &J8,E60all method CLB&/&ER7ER&ECOOKE=>&E$&ER7ERCOOKEe-po)t+ng,E = ;my0ooH+e*;//LC$O,,E = ;COOKE& ;//LC$O,,E&/CE =;COOKE& ;&ER,E = ,E&E&&O, = ;*ame(o)all;$,E = ;pagedata;$7LE = /GE$E/RJ$EREL = FM
Click on pae attributes tab.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 59/222
5eclare like this
'AS"S"&+-A55E5 "!PE S"&+-
S"&+-S "!PE S"&+-
Save$ check$ activate it$ screen appear like this and click ok button
Click on store button
After storin$ o to SE98
BSPS2,*SE&LE&C,,MES run this proram
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 60/222
E#ecute the proram
"hese cookies will save under SSC,,ME table
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 61/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 62/222
Create Client1Side Cookies
-o to "ransaction SE80 and create a BSP application.
Create pae
Click on layout button$ paste the below code.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 63/222
<html><head><t+tle>$e*t /age<'t+tle><*0)+pt >(un0t+on GetCooH+ename2 N.a) *ta)t = do0ument60ooH+e6+nde-O(nameD"="2.a) len = *ta)tDname6lengthD1+( P*ta)t2 QQ name P= do0ument60ooH+e6*ub*t)+ngname6length222 )etu)nnull+( *ta)t == 812 )etu)n null.a) end = do0ument60ooH+e6+nde-O(""len2+( end == 812 end = do0ument60ooH+e6length)etu)n une*0apedo0ument60ooH+e6*ub*t)+nglenend22(un0t+on &etCooH+ename.aluee-p+)e*pathdoma+n*e0u)e2 N.a) 0ooH+e&t)+ng = name D "=" De*0ape.alue2 D e-p+)e*2 "e-p+)e*=" D e-p+)e*6toG$&t)+ng2 3 ""2 D path2 "path=" D path 3 ""2 D doma+n2 "doma+n=" D doma+n 3 ""2 D *e0u)e2 "*e0u)e" 3 ""2do0ument60ooH+e = 0ooH+e&t)+ng
(un0t+on eleteCooH+enamepathdoma+n2 N+( GetCooH+ename22 do0ument60ooH+e = name D "=" D path2 "path=" D path 3 ""2 D doma+n2 "doma+n=" D doma+n 3 ""2 D"e-p+)e*=$hu 18San8T 331 G$".a) today = ne4 ate2.a) Ie)odate = ne4 ate2today6*et$+metoday6get$+me2 8 Ie)odate6get$+me22
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 64/222
.a) 0ooH+ee-p+)edate = ne4 atetoday6get$+me2 D U T UMV22(un0t+on *et7+*+to)2 N+( GetCooH+e;7+*+to);22 N.a) 7+*+to) = GetCooH+e;7+*+to);2el*eN&etCooH+e;7+*+to);ath6)andom20ooH+ee-p+)edate2(un0t+on *et&e**+on2 N+( PGetCooH+e;&e**+on;22&etCooH+e;&e**+on;ath6)andom22.a) loaded*0)+pt = t)ue<'*0)+pt><*0)+pt language="?a.a*0)+pt">''$h+* l+ne 0ould be u*ed to *et a 0ooH+e manually&etCooH+e "Hey" ".al" 0ooH+ee-p+)edate "'*tu((" (al*e 2''$h+* l+ne +* u*ed to *et a .+*+to) 4h+0h +* ea*+e)*et7+*+to)2<'*0)+pt>
<'head><body>
"his is only a test.
Obody<
Ohtml<
Sa,eJ acti,ate and execute
Click on oE button
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 65/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 66/222
A Simple BSP Application sing 6T7B components on TableiewJ group b+0adiobutton and )ropdown list box
ST5PSI
Create a BSP application by the name Qradiodropdown and create a pae named /dropdown.bsp.
Save check and activate the application.
n the layout tab of the BSP pae$ write the followin code as shown belowI
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 67/222
C,5E I
<%@page language="abap"%><%@page language="abap" (o)0eEn0ode="html"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb"%><%@e-ten*+on name="b*p" p)e(+-="b*p"%><htmlb30ontent +d="0ontent" de*+gn="0la**+0Dde*+gn!!Dde*+gn!F"0ont)olRende)+ng="*ap" )tluto&4+t0h = "t)ue">
<htmlb3page t+tle = "B&/ E-ten*+on3 :$LB ' Element3 )ad+oButtonG)oup Q)ad+oButton"> <htmlb3(o)m> <htmlb3)ad+oButtonG)oup +d = "myRad+oButtonG)oup1" > <htmlb3)ad+oButton +d = "a0t+.ate" te-t = "a0t+.ate = onCl+0H"onCl+0H="myCl+0H" '> <htmlb3)ad+oButton +d = "dea0t+.ate" te-t = "dea0t+.ate = onCl+0H"onCl+0H="myCl+0H" '> <'htmlb3)ad+oButtonG)oup> <b)> <b)> <htmlb3d)opdo4nL+*tBo- +d = "myd)opdo4nL+*tBo-1" > <htmlb3l+*tBo-tem Hey = "Hey.baH" .alue = ".baH" '>
<htmlb3l+*tBo-tem Hey = "Hey.bap" .alue = ".bap" '> <'htmlb3d)opdo4nL+*tBo-><% +( +t.baH +* not +n+t+al6%><htmlb3table7+e4 +d="t..baH" table="<%= +t.baH%>"><'htmlb3table7+e4><%end+(6%><% +( +t.bap +* not +n+t+al6%><htmlb3table7+e4 +d="t..bap" table="<%= +t.bap%>"><'htmlb3table7+e4><%end+(6%>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 68/222
<'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
n the pae attributes tab of the pae$ create the attributes as shown in the imae below.
n the Event handler tab of the BSP pae$ write the followin code as shown below.
C,5EI
e.ent handle) (o) 0he0H+ng and p)o0e**+ng u*e) +nput and (o) de(+n+ng na.+gat+on
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 69/222
$3 )ad+oButtong)oup $J/E RE $O CL:$LBROB$$O,GRO/6 )ad+oButtonG)oup = CL:$LB,GER=>GE$$ )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;)ad+oButtonG)oup; +d = ;myRad+oButtonG)oup1; 26 $3 data1 $J/E RE $O CL:$LBRO/O9,L&$BO6data1 = CL:$LB,GER=>GE$$ )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;d)opdo4nl+*tbo-; +d = ;myd)opdo4nL+*tBo-1;26 *ele0t+on1 = )ad+oButtong)oup8>*ele0t+on6 0a*e *ele0t+on16 4hen ;a0t+.ate;6 data1 & ,O$ ,$L6 *ele0t+on! = data18>*ele0t+on6 0a*e *ele0t+on! 6 4hen ;Hey.baH;6 *ele0t ()om .baH +nto table +t.baH6 4hen ;Hey.bap;6 *ele0t ()om .bap +nto table +t.bap6 end0a*e6
E,6 4hen ;dea0t+.ate;6 data18>d+*abled = ;$RE;6 end0a*e6E,6
Save$ check$ activate and e#ecute the application. Click the e#ecute icon to e#ecute the application.
nput the username and password to complete the authentication.
C'CM ,+ ,M B%"",+.
Click on the activate button and select a drop down list bo# element. i.e LBAM
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 70/222
"he below screen is the output of the LBAM table.
Click on the activate button and select the drop down list bo#. i.e. LBAP
"he below shown screen is the output of the LBAP table.
BSP Application on using a tree
By akada !a"hava# Mouri Tech $olutions
-o 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.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 71/222
Enter the name and short description of the application and click on the save icon.
+ow the window looks as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 72/222
Save and activate the application.
&iht click on the application name and o to createpae.
"he resultant window appears as follows.
Enter the name of the pae that you want to create. n this case it is the /treepae.htm that am creatin.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 73/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 74/222
Code in the layout "ab.
<%@page language="abap"%><%@page language="abap" (o)0eEn0ode="html"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb" %>
<%@e-ten*+on name="b*p" p)e(+-="b*p" %><htmlb30ontent +d = "0ontent" de*+gn = "0la**+0Dde*+gn!!Dde*+gn!F" 0ont)olRende)+ng = "*ap" )tluto&4+t0h = "t)ue"> <htmlb3page t+tle="B&/ E-ten*+on3 :$LB ' Element3 $)ee" ><htmlb3(o)m><h!><htmlb3label (o)="pmatn)" te-t="$ERL ,BER" '> <htmlb3+nput+eld +d="pmatn)lo4" .alue="<%= matn)lo4 %>" '> <htmlb3label (o)="pmatn)" te-t="$O" '> <htmlb3+nput+eld +d="pmatn)h+gh" .alue="<%= matn)h+gh %>" '><'h!> <htmlb3t)ee +d = "mate)+alt)ee" t+tle = "mate)+alt)ee"
toolt+p = "mate)+al +n(o)mat+on" toggle = "" > <htmlb3t)ee,ode +d = "mate)+al" te-t = "mate)+al" +*Open = "t)ue" toolt+p = "mate)+al"> <htmlb3t)ee,ode +d = "ma)a" te-t = "ma)a" on,odeCl+0H = "ma)a"'> <htmlb3t)ee,ode +d = "ma)d"
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 75/222
te-t = "ma)d" on,odeCl+0H = "ma)d"'> <'htmlb3t)ee,ode> <'htmlb3t)ee> <b)> <b)> <htmlb3t)ee +d = "*ap+n(o)mat+on" t+tle = "*ap +n(o)mat+on" toolt+p = "*ap +n(o)mat+on" toggle = "" > <htmlb3t)ee,ode +d = "*dn6*ap" l+nH = "http*3''4446*dn6*ap60om" te-t = "*dn6*ap60om" +*Open = "t)ue" '> <htmlb3t)ee,ode +d = "*apte0h" l+nH = "http3''4446*apte0hn+0al60om" te-t = "*ap te0hn+0al" +*Open = "t)ue" '> <'htmlb3t)ee> <b)>
<b)> <% +( +tma)a +* not +n+t+al6%> <htmlb3table7+e4 +d="t.ma)a" table="<%= +tma)a %>"><htmlb3table7+e4Column 0olumn,ame="$,R"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="ER&"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="ER,"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="LE"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="E,"><'htmlb3table7+e4Column> <'htmlb3table7+e4> <% end+(6%> <% +( +tma)d +* not +n+t+al6%> <htmlb3table7+e4 +d="t.ma)d" table="<%= +tma)d %>"><htmlb3table7+e4Column 0olumn,ame="$,R"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="9ERK&"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="LGOR$"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="/&$$"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="L7OR"><'htmlb3table7+e4Column> <'htmlb3table7+e4> <% end+(6%><'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
n the /Pae Attributes$ of treepae.htm$ enter the attributes as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 76/222
*e need our application to display the data by ivin the input in the inputbo# and when the treenode isclicked.
So we write the code in the /,nnputProcessin event.
n the /Event 2andler tab of treepae.htm$ under /,nnputProcessin event$ write the followin code.
Code3 e.ent handle) (o) 0he0H+ng and p)o0e**+ng u*e) +nput and
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 77/222
(o) de(+n+ng na.+gat+on $3 e.ent $J/E RE $O CL:$LBE7E,$6 e.ent = CL:$LB,GER=>gete.ent )unt+me8>*e).e)8>)eAue*t 26 $3 $,Olo4 $J/E RE $O CL:$LB,/$EL6 $,Olo4 = CL:$LB,GER=>GE$$ REE&$ = R,$E8>&ER7ER8>REE&$ ,E = ;+nput+eld; = ;p$,Rlo4; 26 $3 $,Oh+gh $J/E RE $O CL:$LB,/$EL6 $,Oh+gh = CL:$LB,GER=>GE$$ REE&$ = R,$E8>&ER7ER8>REE&$ ,E = ;+nput+eld; = ;p$,Rh+gh; 26 $3 t)eee.ent $J/E RE $O CL:$LBE7E,$$REE6 t)eee.ent = e.ent6 node = t)eee.ent8>node6 +( matnolo4 +* not +n+t+al and matnoh+gh +* not +n+t+al6 matn)lo4 = matnolo48>.alue6 matn)h+gh = matnoh+gh8>.alue6 0a*e node6
4hen ;ma)a;6 *ele0t ()om ma)a +nto table +tma)a 4he)e matn) bet4een matn)lo4 andmatn)h+gh6 9:E, ;ma)d;6 *ele0t ()om ma)d +nto table +tma)d 4he)e matn) bet4een matn)lo4 andmatn)h+gh6 end0a*e6 end+(6
Save$ Check and activate the treepae.htm. Save$ check and activate the application.
Enter the loin details in the window to continue e#ecutin the application.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 78/222
"he screen looks as shown below. nput the values as shown below and click on the treenode named/mara.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 79/222
"he output looks as follows.
+ow click on the treenode /mard for the storae location data of the materials.
+ow we are done with displayin the table contents usin /tree on the BSP Application paes.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 80/222
BSP Application using MVC Architecture - Displaying
Business Partner data using a BAPI
By !a"hava akada# Mouri Tech $olutions
0eDuirementI "o display business partner data usin the BAP bapibupasearch on a BSP
application view.
ST5PSI
7) -o to transaction SE80$ select /BSP application from the dropdown list.
) Create a BSP application with the name R4LCB%PA.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 81/222
9) Creatin a 4odel ClassI
-o to transaction SE: and enter the name of the class as shown below.
Class nameI RB%PA4,5E'
n the pop up window that appears$ enter the description and then click on the /save button.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 82/222
n the class$ o 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.
!ou can uncheck the checkbo# /6inal.
Add attributes to the new model class. Please create table types for those attributes in the tables tab of
the BAP. 2ere$ you can see that have used the table types to refer to the attributes of our class.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 83/222
Add a method to the new model class to et the business partner details
4odified method implementations
5ouble click on the -E"B%PA method.
*rite the followin code.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 84/222
ethod GE$B/6CLL ,C$O, ;B/B/&ERC:!; E/OR$,G RE&&$ = RE&&$ CE,$RL$ = CE,$RL$ $BLE& &ERC:RE&L$ = &ERC:RE&L$ RE$R, = RE$R,6endmethod6
Save$ check and activate the class.
C&EA"+- LE*S.
7) Create viewI n transaction SE80$ &iht1click on the BSP application name and naviate to
CreatePae.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 85/222
As shown below$ enter the name and description of the view that you want to create. Select the radio
button /Liew$ and then click on the /Continue button.
-ive the pae attributes of the view. "he attribute of the view is an ob;ect reference of the model class
that we created previously.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 86/222
4odify layout code for the search view (input.htm) as shown below.
Code I
Code 3<%@page language="abap"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb"%><htmlb30ontent de*+gn="de*+gn!F"> <htmlb3page t+tle = "nput page "> <htmlb3(o)m> </><CE,$ER><BR><BR>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 87/222
<BR><BR><htmlb3label (o)="''B/OBS'RE&&$6C$J1" '><htmlb3+nput+eld .alue="''B/OBS'RE&&$6C$J1" '><htmlb3label (o)="''B/OBS'CE,$RL$6/R$,ER" '><htmlb3+nput+eld .alue="''B/OBS'CE,$RL$6/R$,ER" '> <htmlb3label (o)="''B/OBS'CE,$RL$6C,E1" '><htmlb3+nput+eld .alue="''B/OBS'CE,$RL$6C,E1" '> <htmlb3label (o)="''B/OBS'CE,$RL$6&ERC:$ER1" '><htmlb3+nput+eld .alue="''B/OBS'CE,$RL$6&ERC:$ER1" '><htmlb3button te-t = "GE$ B/" onCl+0H = "my0l+0H1" '> <'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
) Create second view.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 88/222
-ive the pae attributes of the view. "he attribute of the view is an ob;ect reference of the model classthat we created previously.
4odify layout code for the search view (output.htm) as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 89/222
%ode &
<%@page language="abap"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb"%><htmlb30ontent de*+gn="de*+gn!F"> <htmlb3page t+tle = "Output page "> <htmlb3(o)m> </><CE,$ER>
<BR><BR><BR><BR> <htmlb3table7+e4 +d="&ERC:RE&L$&" table="''B/OBS'&ERC:RE&L$" .+*+bleRo4Count="1" 4+dth="1"> <htmlb3table7+e4Column*> <htmlb3table7+e4Column 0olumn,ame="/R$,ER"'> <htmlb3table7+e4Column 0olumn,ame="RE&&G"'> <htmlb3table7+e4Column 0olumn,ame="RE&&$J/E"'> <htmlb3table7+e4Column 0olumn,ame="CO/,J/R$,ER"'> <htmlb3table7+e4Column 0olumn,ame="/&$$"'> <'htmlb3table7+e4Column*> <'htmlb3table7+e4></><CE,$ER><BR><BR>
<htmlb3table7+e4 +d="B/RE$!" table="''B/OBS'RE$R," .+*+bleRo4Count="1" 4+dth="1"> <htmlb3table7+e4Column*> <htmlb3table7+e4Column 0olumn,ame="$J/E"'> <htmlb3table7+e4Column 0olumn,ame="E&&GE"'> <htmlb3table7+e4Column 0olumn,ame="/RE$ER"'> <htmlb3table7+e4Column 0olumn,ame="&J&$E"'> <'htmlb3table7+e4Column*> <'htmlb3table7+e4>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 90/222
<'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
create a controller for the application as shown below. &iht click on the application name Create
Controller.
nput the description of the controller and click on the continue button.
"he screen appears as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 91/222
Enter the name of the controller class that you want to create as shown in the above screen.
5ouble click on the controller class to enter into it. -ive the attributes of the class as shown.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 92/222
&edefinin "he Controller Class 4ethods
to use our model and views in controller class Qcontrollerbupa.do$ we have to redefine some of themethods inherited from base class clbspcontroller usin the class builders redefine function.
"he redefinition steps automatically add commented codin (shown in bold in the doinit e#ample belowI
method do+n+t 6 0all method *upe)8>do+n+t6 6endmethod6
f you uncomment those lines$ you would e#ecute the method implementation of the parent class. this ishelpful when you want to carry out the parent loic and some additional custom loic. we dont want toreuse functionality of the parent class in the e#ample$ however$ so be sure to delete the commented codebefore addin the new code.
&edefine the methods i.e. doinit$ dore3uest$ dohandleevent.
After that double click on the method doinit to implement it (write the code in the method).
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 93/222
COE3method O,$6
B/OBS = me8>0)eatemodel 0la**name = ;B/OEL; model+d = ;B/OBS; 26
endmethod6
6ollows the same procedure for the /dore3uest$ /dohandleevent.
COE3method OREE&$6CLL E$:O &/ER8>OREE&$ 6 e(+ne a .a)+able (o) the .+e4 4e a)e about to 0)eate data .+e4 type )e( to +(b*ppage6 +*pat0h the +nput *o that the e.ent handle) 0an p)o0e**
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 94/222
e.ent* l+He 4hen the agent 0l+0H* on the &ea)0h button me8>d+*pat0h+nput 26 $he att)+bute me8>.+e4name 0an be *et by the e.ent handle) to 0hange na.+gat+on to the (l+ght* d+*play +( me8>.+e4name +* +n+t+al6 me8>.+e4name = ;+nput6htm;6 end+(6 C)eate the )e*pon*e .+e4 .+e4 = me8>0)eate.+e4 .+e4name = me8>.+e4name 26 +( .+e4 +* bound6 dd a )e(e)en0e to the model +n*tan0e to the .+e4 *o that the .+e4 0an a00e** the model .+e48>*etatt)+bute name = ;B/OBS; .alue = me8>B/OBS 26 me8>0all.+e4 .+e4 26 end+(6
endmethod6
C'CM ,+ 5,2A+5'EELE+" 4E"2,5.
C,5EI
method O:,LEE7E,$6 Che0H that the e.ent ha* been t)+gge)ed by the *ea)0h button+( htmlbe.ent +* bound andhtmlbe.ent8>*e).e)e.ent = ;my0l+0H1;6 E-e0ute the *ea)0h +mplemented +n the Aue)y model
me8>B/OBS8>GE$B/ 26 l+ght* ha.e been (ound ne4 ta)get +* the h+t l+*t d+*play+( not me8>B/OBS8>&ERC:RE&L$WX +* +n+t+al6 me8>.+e4name = ;output6htm;6 el*e+( not me8>B/OBS8>RE$R,WX +* +n+t+al6 me8>.+e4name = ;output6htm;6end+(6end+(6
endmethod6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 95/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 96/222
Click on the -E" 5A"A button.
"hen business partner information ets displayed as follows
BSP Application using Date Navigator Control
By !a"hava akada# Mouri Tech $olutions
ScenarioI 5isplayin the selected date in an nputfield.
'o to transaction $()*. $elect B$+ application and input the na,e o- the B$+ application that
you want to create. +ress (nter or click on the display icon.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 97/222
Save and activate the application.
&iht click on the application name and click create pae.
"he resultant window appears as follows.
Enter the name of the pae that you want to create.
n this case it is the /first.htm that is bein created.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 98/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 99/222
of the respective paes.
-o to first.htm and put the followin code in the layout tab of the pae
Code in layout tab
<%@page language="abap"%><%@e-ten*+on name="htmlb" p)e(+-="htmlb"%><htmlb30ontent de*+gn="de*+gn!F"> <htmlb3page t+tle = "$E ,7G$OR "> <htmlb3(o)m> <h!> <htmlb3label (o)="date" te-t="$E" '> <htmlb3+nput+eld +d = "mydate" .alue = "<%= date%>" ma-length = "1" type = "date"'> <'h!> <htmlb3date,a.+gato) +d = "myate,a.+gato)" month*/e)Ro4 = "1"
on,a.+gate = "myOn,a.+gate" onayCl+0H = "myOnayCl+0H" on9eeHCl+0H = "myOn9eeHCl+0H" ononthCl+0H = "myOnonthCl+0H"> <'htmlb3date,a.+gato)> <'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 100/222
n the /Pae Attributes of first.htm$ enter the attributes as shown below.
*e need our application to take the date in input field when date is selected from 5ate+aviator control.
So we write the code in the /,nnputProcessin event.
Code in event handler tab for oninputprocessin event.
$3 datee.ent $J/E RE $O CL:$LB,/$EL6 datee.ent = CL:$LB,GER=>GE$$
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 101/222
REE&$ = R,$E8>&ER7ER8>REE&$ ,E = ;+nput+eld; = ;mydate; 26$3 e.ent $J/E RE $O CL:$LBE7E,$6 e.ent = CL:$LB,GER=>gete.ent )unt+me8>*e).e)8>)eAue*t 26$3 date,a.+gato)e.ent $J/E RE $O CL:$LBE7E,$$E,7G$OR6 date,a.+gato)e.ent = e.ent6 +( datee.ent8>.alue +* +n+t+al6 date = date,a.+gato)e.ent8>day6 el*e+( datee.ent8>.alue +* not +n+t+al6 date = date,a.+gato)e.ent8>day6
end+(6
Save$ Check and activate the first.htm. Save$ check and activate the application
and after that e#ecute it. "he below screen would be displayed.
Enter the username and password and click on /,M.
"he BSP pae appears as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 102/222
Select the date from 5ate+aviator.
"he date is displayed in input field as shown below.
+ow we are done with displayin the date in the inputfield usin the 5ate+aviator.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 103/222
Using Tastrips in BSP
By akada !a"hava# Mouri Tech $olutions
0eDuirementI "o display header and item details for sales order usin tab strip$ tray with ,"& te#t.
Steps to be followedI
7) -o to transaction SE80$ select /BSP application from the dropdown list.
) Create a BSP application with the name R4LC"ABS"&P.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 104/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 105/222
n the class$ o 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.
!ou can uncheck the checkbo# /6inal.
Add attributes to the new model class. 2ere$ you can see that have used the table types to refer to the
attributes of our class.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 106/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 107/222
*rite the followin code.
5ouble click on the -E"LBAP method.
Save$ check and activate the class.
C&EA"+- LE*S.
7) Create viewI n transaction SE80$ &iht1click on the BSP application name and naviate to
CreatePae.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 108/222
As shown below$ enter the name and description of the view that you want to create. Select the radio
button /Liew$ and then click on the /Continue button.
-ive the pae attributes of the view. "he attribute of the view is an ob;ect reference of the model class
that we created previously.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 109/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 110/222
<htmlb3table7+e4Column 0olumn,ame=".beln"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="po*n)"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="matn)"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="matHl"><'htmlb3table7+e4Column><htmlb3table7+e4Column 0olumn,ame="a)Ht-"><'htmlb3table7+e4Column> <'htmlb3table7+e4> <'htmlb3tab&t)+ptem> <'htmlb3tab&t)+p><'htmlb3t)ay> <'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
Create a controller for the application as shown below. &iht click on the application name Create
Controller.
nput the description of the controller and click on the continue button.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 111/222
"he screen appears as shown below.
Enter the name of the controller class that you want to create as shown in the above screen.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 112/222
5ouble click on the controller class to enter into it. -ive the attributes of the class as shown.
"o use our model and views in controller class Qclcontrollersales7$ we have to redefine some of themethods inherited from base class clbspcontroller usin the class builders redefine function( ). "heredefinition steps automatically add commented codin (shown in bold in the doinit e#ample below)I
method doinit .
call method super1<doinit.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 113/222
.
endmethod.
f you uncomment those lines$ you would e#ecute the method implementation of the parent class. "his ishelpful when you want to carry out the parent loic and some additional custom loic. we dont want to
reuse functionality of the parent class in the e#ample$ however$ so be sure to delete the commented codebefore addin the new code.
&edefine the methods i.e. doinit$ dore3uest$ dohandleevent.
After that double click on the method doinit to implement it (write the code in the method).
COE3method O,$6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 114/222
CLL E$:O &/ER8>O,$ 6&ELEC$ = me8>0)eatemodel 0la**name = ;CLOEL&LE&1; model+d = ;&ELEC$; 26endmethod6
6ollows the same procedure for the /dore3uest$ /dohandleevent.
COE3method OREE&$6CLL E$:O &/ER8>OREE&$ 6data .+e4 type )e( to +(b*ppage6data 3 *ele0t+on type *t)+ng6 me8>d+*pat0h+nput 26 +( me8>.+e4name +* +n+t+al6 me8>.+e4name = ;+npu6htm;6 end+(6 .+e4 = me8>0)eate.+e4 .+e4name = me8>.+e4name 26 +( .+e4 +* bound6.+e48>*etatt)+bute name = ;&ELEC$; .alue = me8>&ELEC$ 26 me8>0all.+e4 .+e4 26 end+(6endmethod6
C'CM ,+ 5,2A+5'EELE+" 4E"2,5.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 115/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 116/222
"estin the application.
Provide the user name and password. "hen click on /,M button.
"he Liew is displayed in the browser window as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 117/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 118/222
"hen e#pand the tray. 5isplay the header data.
"hen aain click on the item data.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 119/222
Creating a Si!ple BSP Application Using A"A#
By $u,an u,ar %hinna,# /0$1 Technolo"ies
Summar+:
n traditional NavaScript codin$ if you want to et any information from a database or a file on the server$or send user information to a server$ you will have to make an 2"4' form and -E" or P,S" data to theserver. "he user will have to click the Submit button to sendet the information$ wait for the server torespond$ and then a new pae will load with the results.
Because the server returns a new pae each time the user submits input$ traditional web applications canrun slowly and tend to be less user1friendly.
*ith ANA$ your NavaScript communicates directly with the server$ throuh the NavaScript>76ttp0eDuest ob;ect
*ith an 2""P re3uest$ a web pae can make a re3uest to$ and et a response from a web server 1without reloadin the pae. "he user will stay on the same pae$ and he or she will not notice that scriptsre3uest paes$ or send data to a server in the backround.
"his "utorial demonstrates how to use ANA in BSP for ettin the data from server without reloadin theentire pae and displays the information.
n this BSP application we will create two BSP PaesG one for providin the data in #ml format is calleddata.#ml and another pae for callin and displayin the results is called first.htm.
$reate BSP Application and Pages:
7. Create a BSP application usin "C,5E SE80 with name @T5ST8BSP8AMA>.. &iht Click on Application choose conte#t create and then Pae with name '0ST.htm
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 120/222
-o to layout of pae and desin the pae like below.
"his is a simple pae with two elements one is an input field to enter plant and another is te#tview to display the name of the plant.
*hen the user inputs data$ a function called Nget(ame< ?N is e#ecuted. "he e#ecution of thefunction is triered by the onkeyup event. n other wordsI Each time the user moves his fineraway from a keyboard key inside the input field$ the function et+ame is called.
f there is some input in the input field the function e#ecutes the followinI
• 5efines the url (filename) to send to the server
• Adds a parameter (plant) to the %&' with the content of the input field.
• ,pens the 4'2""P ob;ect with the iven %&'.
• Creates an 4'2""P ob;ect$ and tells the ob;ect to e#ecute a function called etLalue.
• Sends an 2""P re3uest to the server
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 121/222
"he getalue <? function e#ecutes every time the state of the 4'2""P ob;ect chanes.
*hen the state chanes to : (complete)$ the content of the text ,iew is filled with the response te#t.
9. Create pae with name data.xml which retrieves the data and scrambles the 4'.
"o create 4' pae ive 4' e#tension to the pae name.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 122/222
-o to layout of pae and write the below code.
5eclare 4' as strin in pae attributes.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 123/222
+ow switch to the tab Event handler of pae data.#ml and write the below code.
Activate the application$ to test the application riht click on pae '0ST.htm choose conte#t Test.
0esult:
Enter Plant value we will et the Plant name$ no need to pressclick any.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 124/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 125/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 126/222
STP (" #all transaction SE80; create a BSP application.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 127/222
STP )" *ight-clic+ the ob'ect name and create a page with ow-logic.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 128/222
STP " #hoose the Type Defnitions tab and create a type-de%nition.
$T(+ 3& %hoose the tab Page Attributes and de-ine the work variables# which you are "oin" touse in your application. Besides de-inin" work4variables# you have to de-ine an internal table and
a -ield strin".
To de-ine a -ield4strin"# use types: ff_progmr . 0nd to de-ine an internal table# use table4type o-
520!T_+!O'!0MM(!6 table. Open table usin" $(77# press Ctrl+Shift+F3 (Where-Used-
List), or click the icon # deselect other checkbo8es and select Table-Types, purse down the
table4type na,e -or the table 20!T_+!O'!0MM(!.
Or create a new table4type# i- there e8ists no table4type. %all transaction $(77->Data type-
>Create->Table Type->Line Type !"#T$%#&'#"#49$ave and 0ctivate.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 129/222
(l(lag $J/E ,$V(*p)ogm) $J/E /ROGR
tp)ogm) $J/E R$$$4dob $J/E $&4do? $J/E $&4emno $J/E R$/ROGRER8E,O4e-tdob $J/E C:R14e-tdo? $J/E C:R14+nde- $J/E ,$V4*ala)y $J/E R$/ROGRER8&LRJ
$T(+ :& %hoose the tab Layout and desi"n a web4pa"e that should contain a table4view and
table4view4colu,ns. Table4iew chooses the internal table -ro, which the data has to be -etchedand displays it in -or,atted ,anner. Table4iew4%olu,n.
To "et a table4view# choose Tag-Browser -ro, the le-t4hand pane; pull down BSP Extensions-
>Transportable->T!LB" 1ere you "et a lot o- ht,lb controls# dra" Table4iew control and
drop it in the layout <=or additional details about it# ri"ht4click the ta" and "o throu"hdocu,entation>.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 130/222
<htmlb30ontent de*+gn="de*+gn!F" > <htmlb3page t+tle="a+n /age " > <htmlb3(o)m> <% +( tp)ogm)WX +* not +n+t+al6 %> <0ente)>
<table> <t)> <td> <htmlb3table7+e4 +d = "/)og)amme)ata" table = "<%= tp)ogm) %>" .+*+bleRo4Count = "5" *ele0t+onode = "&,GLE&ELEC$" onRo4&ele0t+on = ")o4&ele0t+on" > <htmlb3table7+e4Column 0olumn,ame = "E,O" t+tle = "Employee ,umbe)" '> <htmlb3table7+e4Column 0olumn,ame = "OB" t+tle = "ate o( B+)th" '> <htmlb3table7+e4Column 0olumn,ame = "OS" t+tle = "ate o( So+n+ng" '>
<htmlb3table7+e4Column 0olumn,ame = "&LRJ" t+tle = "&ala)y" '> <'htmlb3table7+e4> <'td><'t)> <t)> <td> <0ente)> <htmlb3button +d = "0)eate" toolt+p = "C)eate ,e4 Ent)+e*" te-t = "CRE$E"
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 131/222
onCl+0H = "Onnput/)o0e**+ng2" '> <'0ente)> <'td><'t)> <'table> <'0ente)> <% end+(6 %>
?hen you activate this pa"e and choice to view the output# it can6t happen since internal table
contains no data.
$T(+ )& To populate data in internal table# choose E#ent an$ler tab and select
%n&nitiali'ation# this event is tri""ered no sooner the pa"e "ets re-reshed or called -or the -irstti,e.
%n&nitiali'ation:
&ELEC$ RO Ia)tp)og)amme) ,$O $BLE tp)ogm)6
$ave# activate and test the pa"e&
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 132/222
$election4Mode -or the table4view has been de-ined as 5$IN'@($(@(%T6# this selects desired
row. Now# we need $elected4!ow4Inde8# which eases our task to play around with any kind o-
,anipulation we desire.
$T(+ )& %hoose tab E#ent an$ler and select %n&nputPro(essing"
%n&nputPro(essing handles the events -or checkin" and processin" user input and
-or de-inin" navi"ation.
%ode the -ollowin" in OnInput+rocessin" event;
$3 4e.ent $J/E RE $O 0lhtmlbe.ent 4e.ent+d $J/E *t)+ng 4ob?e0t $J/E RE $O ob?e0t 4(+eld+d $J/E *t)+ng 4+n(+eld $J/E RE $O 0lhtmlb+nput(+eld 4+n.alue $J/E *t)+ng 4employee $J/E Ia)tp)og)amme)8emno 4do(b $J/E 0ha)1 4do(? $J/E 0ha)1 4e*ala)y $J/E Ia)tp)og)amme)8*ala)y6
CLL E$:O 0lhtmlbmanage)=>gete.ent E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t (a*te-+te.ent+d = (a*te-+te.ent0la** = RECE7,G e.ent = 4e.ent64e.ent+d = 4e.ent8>+d6
4e.ent+d E ;/)og)amme)ata;6
CL&& 0lhtmlbmanage) E,$O, LO6
C&E e.ent+d6
9:E, 0lhtmlbmanage)=>e.ent+d6
$3 e.ent $J/E RE $O +(htmlbdata *el)o4 $J/E RE $O 0lhtmlbtable.+e46
e.ent = 0lhtmlbmanage)=>gete.ente- )eAue*t 26 *el)o4 = 0lhtmlbmanage)=>getdata )eAue*t = )eAue*t name = ;table7+e4; +d = ;/)og)amme)ata26
$3 t.data $J/E RE $O 0lhtmlbe.enttable.+e46 t.data = *el)o48>data6
4+nde- = t.data8>*ele0ted)o4+nde-6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 133/222
E,C&E6
w_eventid contains the id o- button# table4view# etc.
w_inde8 contains selected4row4inde8 value.
To catch the event# we ,ake use o- %lass cl_ht,lb_,ana"er and ,ethod "et_event.
$i,ilarly# to catch data -ro, input4-ields# "et_data ,ethod is used.
$T(+ 7*& On the click o- create button# we set the -l_-la" as A# that can be used to display create
layout with an insert button on the sa,e pa"e. =urther# on click o- insert button# values o- all
input -ields are processed and inserted into database usin" a si,ple IN$(!T uery.
0dd the -ollowin" code in OnInput+rocessin";
EL&E 4e.ent+d E ;0)eate;6 (l(lag = !6
Now# add this piece o- code in the layout;
<% el*e+( (l(lag eA !6%> <0ente)> <table bg0olo)="+.o)y"> <t)> <td> <htmlb3label (o) = "+pemno"
label$ype = "E" te-t = "Employee ,umbe)" '> <'td> <td> <htmlb3+nput+eld +d = "+pemnoZ d+*abled = "L&E" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+pdob" label$ype = "E" te-t = "ate o( B+)th" '> <'td>
<td> <htmlb3+nput+eld +d = "+pdob" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+pdo?" label$ype = "E" te-t = "ate o( So+n+ng" '> <'td> <td>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 134/222
<htmlb3+nput+eld +d = "+pdo?" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+p*ala)y" label$ype = "E" te-t = "&ala)y" '> <'td> <td> <htmlb3+nput+eld +d = "+p*ala)y" '> <'td><'t)> <t)><td 0ol*pan = "!"> <0ente)> <htmlb3button +d = "+n*e)t" toolt+p = "C)eate a ,e4 Re0o)d" te-t = ",&ER$" onCl+0H = "Onnput/)o0e**+ng2" '> <'0ente)> <'td><'t)> <'table>
$T(+ 77& Now attach an action to insert button;
EL&E 4e.ent+d E ;+n*e)t;6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+pemno; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6 4+n.alue = 4+n(+eld8>.alue6 4employee = 4+n.alue6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+pdob; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6
CLL ,C$O, ;CO,7ER$$E$O,$ER,L; E/OR$,G datee-te)nal = 4+n(+eld8>.alue CCE/$,$L$E = /OR$,G date+nte)nal = 4do(b ECE/$O,& $EE$ER,L&,7L = 1
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 135/222
O$:ER& = ! 6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6 E,6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+pdo?; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6
CLL ,C$O, ;CO,7ER$$E$O,$ER,L;
E/OR$,G datee-te)nal = 4+n(+eld8>.alue CCE/$,$L$E = /OR$,G date+nte)nal = 4do(? ECE/$O,& $EE$ER,L&,7L = 1 O$:ER& = ! 6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6 E,6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+p*ala)y; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6 4+n.alue = 4+n(+eld8>.alue6 4e*ala)y = 4+n.alue6
(*p)ogm)8emno = 4employee6 (*p)ogm)8dob = 4do(b6 (*p)ogm)8do? = 4do(?6 (*p)ogm)8*ala)y = 4e*ala)y6
,&ER$ Ia)tp)og)amme) RO (*p)ogm)6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 136/222
N&T'( ?e have to convert date4-ields to internal -or,at be-ore insertin" the, in database# or
else un-or,atted date will be inserted into database.
(CT(!N0@ =O!M0T& A).*A.A**
INT(!N0@ =O!M0T ?IT1OET %ON(!$ION& A).*A.A*
(CT(!N0@ =O!M0T =O! DI$+@0/ ?IT1OET %ON(!$ION& A*.A..A).*
To avoid these discrepancies# we use %ON(!T_D0T(_TO_INT(!N0@ and
%ON(!T_D0T(_TO_(CT(!N0@ -unction ,odules.
Now save# activate and test the pa"e&
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 137/222
No sooner insert button is clicked# entries are pushed into the database table and pa"e shows
updated database status# since $(@(%T uery is "iven in %n&nitiali'ation event "
(ntries are very well inserted into the database table# we now ,ake innovations to the sa,e pa"e
to ,odi-y and delete entries.
$T(+ 7A& 0dd the -ollowin" piece o- code in %n&nitiali'ation"
4+nde- & ,O$ ,$L6 RE $BLE tp)ogm) ,$O (*p)ogm) ,E 4+nde-6
4emno = (*p)ogm)8emno6 4dob = (*p)ogm)8dob6 4do? = (*p)ogm)8do?6 4*ala)y = (*p)ogm)8*ala)y6 (l(lag = 16 CLL ,C$O, ;CO,7ER$$E$OE$ER,L; E/OR$,G date+nte)nal = 4dob /OR$,G datee-te)nal = 4e-tdob ECE/$O,& date+nte)nal+*+n.al+d = 1 O$:ER& = !6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 138/222
E,6
CLL ,C$O, ;CO,7ER$$E$OE$ER,L; E/OR$,G date+nte)nal = 4do? /OR$,G datee-te)nal = 4e-tdo? ECE/$O,& date+nte)nal+*+n.al+d = 1 O$:ER& = !6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6 E,6
E,6
?e use hi"hli"hted work4variables to store selected row data.
$T(+ 7F& In the layout# add the -ollowin" code;
<% el*e +( (l(lag eA 16 %> <0ente)> <table bg0olo)="+.o)y"> <t)> <td> <htmlb3label (o) = "+pemno" label$ype = "E" te-t = "Employee ,umbe)" '> <'td>
<td> <htmlb3+nput+eld +d = "+pemno" .alue = "<%= 4emno %>" d+*abled = "$RE" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+pdob" label$ype = "E" te-t = "ate o( B+)th" '> <'td> <td> <htmlb3+nput+eld +d = "+pdob"
.alue = "<%= 4e-tdob %>" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+pdo?" label$ype = "E" te-t = "ate o( So+n+ng" '> <'td> <td> <htmlb3+nput+eld +d = "+pdo?"
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 139/222
.alue = "<%= 4e-tdo? %>" '> <'td><'t)> <t)> <td> <htmlb3label (o) = "+p*ala)y" label$ype = "E" te-t = "&ala)y" '> <'td> <td> <htmlb3+nput+eld +d = "+p*ala)y" .alue = "<%= 4*ala)y %>" '> <'td><'t)> <t)><td> <0ente)> <htmlb3button +d = "*a.e" toolt+p = "od+(y the Content" te-t = "OJ" onCl+0H = "Onnput/)o0e**+ng2" '> <htmlb3button +d = "delete" toolt+p = "elete &ele0ted Ent)y"
te-t = "ELE$E" onCl+0H = "Onnput/)o0e**+ng2" '> <'0ente)> <'td><'t)> <'table> <% end+(6 %>
$T(+ 7G& Now# when MODI=/ button is clicked# the values chan"ed should be stored in
database without chan"in" e,ployee id# since that6s pri,ary key.
EL&E 4e.ent+d E ;*a.e;6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+pemno; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6 4+n.alue = 4+n(+eld8>.alue6 4employee = 4+n.alue6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 140/222
name = ;+nput(+eld; +d = ;+pdob; RECE7,G data = 4ob?e0t6 4+n(+eld = 4ob?e0t6
CLL ,C$O, ;CO,7ER$$E$O,$ER,L; E/OR$,G datee-te)nal = 4+n(+eld8>.alue CCE/$,$L$E = /OR$,G date+nte)nal = 4do(b ECE/$O,& $EE$ER,L&,7L = 1 O$:ER& = ! 6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6 E,6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+pdo?; RECE7,G data = 4ob?e0t6
4+n(+eld = 4ob?e0t6
CLL ,C$O, ;CO,7ER$$E$O,$ER,L; E/OR$,G datee-te)nal = 4+n(+eld8>.alue CCE/$,$L$E = /OR$,G date+nte)nal = 4do(? ECE/$O,& $EE$ER,L&,7L = 1 O$:ER& = ! 6 *y8*ub)0 <> 6 E&&GE *y8m*g+d $J/E *y8m*gty ,BER *y8m*gno 9$: *y8m*g.1 *y8m*g.! *y8m*g.F *y8m*g.V6 E,6
CLER3 4ob?e0t4+n(+eld4+n.alue6
CLL E$:O 0lhtmlbmanage)=>getdata E/OR$,G )eAue*t = )unt+me8>*e).e)8>)eAue*t name = ;+nput(+eld; +d = ;+p*ala)y; RECE7,G data = 4ob?e0t6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 141/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 142/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 143/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 144/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 145/222
de*+gn = "E/:&E" '>
<'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell )o4nde- = "V"
0olumnnde- = "!" >
<htmlb3te-tEd+t +d = "add)e**"
0ol* = "F"
)o4* = "V"
te-t = "<%= +add)e** %>" '>
<'htmlb3g)+dLayoutCell>
<b)'><b)'>
<htmlb3g)+dLayoutCell )o4nde- = "5"
0olumnnde- = "1" >
<htmlb3te-t7+e4 te-t = "ual+(+0at+on"
de*+gn = "E/:&E" '>
<'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell )o4nde- = "5"
0olumnnde- = "!" >
<htmlb3d)opdo4nL+*tBo- +d = "L+*tBo-1"
on&ele0t = "L+*tBo-1E.ent"
*ele0t+on = "<%= *ele0t+on! %>"
>
<htmlb3l+*tBo-tem Hey = "B6Com" .alue = "B6Com" '>
<htmlb3l+*tBo-tem Hey = "BC" .alue = "BC" '>
<htmlb3l+*tBo-tem Hey = "B6E" .alue = "B6E" '>
<htmlb3l+*tBo-tem Hey = "C" .alue = "C" '>
<htmlb3l+*tBo-tem Hey = "B" .alue = "B" '>
<'htmlb3d)opdo4nL+*tBo->
<'htmlb3g)+dLayoutCell>
<b)'><b)'>
<htmlb3g)+dLayoutCell )o4nde- = "M" 0olumnnde- = "1" >
<htmlb3te-t7+e4 te-t = "y &t)ength*"
de*+gn = "E/:&E" '>
<'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell )o4nde- = "M"
0olumnnde- = "!" >
<htmlb30he0Hbo- +d = "&el(Con(+den0e"
te-t = "&el( Con(+den0e"
0he0Hed = "<%=+0he0H %>"'>
<b)'>
<htmlb30he0Hbo- +d = ":a)d9o)He)" te-t = ":a)d9o)He)"
0he0Hed = "<%=+0he0H %>" '>
<b)'>
<htmlb30he0Hbo- +d = "C)eat+.+ty&en*e"
te-t = "C)eat+.+ty &en*e"
0he0Hed = "<%=+0he0H %>" '>
<b)'>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 146/222
<htmlb30he0Hbo- +d = "le-+bleto&u))ound+ng*"
te-t = "le-+ble to &u))ound+ng*"
0he0Hed = "<%=+0he0H %>" '>
<'htmlb3g)+dLayoutCell>
<b)'> <b)'>
<htmlb3g)+dLayoutCell )o4nde- = "T"
0olumnnde- = "1" >
<htmlb3te-t7+e4 te-t = "E-t)a 0t+.+t+e*"
de*+gn = "E/:&E" '>
<'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell )o4nde- = "T"
0olumnnde- = "!" >
<htmlb3te-tEd+t +d = "ea"
0ol* = "F"
)o4* = "V"
te-t = "<%= +a0t %>"'>
<'htmlb3g)+dLayoutCell>
<b)'> <b)'>
<'htmlb3g)+dLayout>
<htmlb3button +d="btn*ubm+t"
te-t = "&ubm+t ) eta+l*"
onCl+0H = "myeta+l" '>
<htmlb3button +d="btn*a.e"
te-t = "&a.e ) eta+l*"
onCl+0H = "my*a.e"
onCl+entCl+0H="ale)t;) deta+l* a)e updatedP;2" '> <htmlb3button +d="btnd+*play"
te-t = "+*play eta+l*"
onCl+0H = "myeta+l*" '>
<'htmlb3g)oupBody>
<'htmlb3g)oup>
<'htmlb3(o)m>
<'htmlb3page>
<'htmlb30ontent>
Types:
$J/E&3 table)e* type RE&$$6
Page attributes:
0te-t $J/E &$R,G+tab $J/E RE&$$
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 147/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 148/222
+d = ;(emale;
name = ;)ad+obutton(+eld; 26
+*e- = me8>*ele0t+on16
end+(6
end+(6
**************************
ad) = 0lhtmlbmanage)=>getdata )eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;te-ted+t;
+d = ;add)e**; 26
+add)e** = ad)8>te-t6
******************
e.ent = 0lhtmlbmanage)=>gete.ent )unt+me8>*e).e)8>)eAue*t 26
Aual+(y = 0lhtmlbmanage)=>getdata
)eAue*t =)unt+me8>*e).e)8>)eAue*t
name = ;d)opdo4nL+*tBo-;
+d = ;L+*tBo-1; 26
+( Aual+(y +* not +n+t+al6
*ele0t+on! = Aual+(y8>*ele0t+on6
end+(6
+Aual+(y = me8>*ele0t+on!6
*************
a0t = 0lhtmlbmanage)=>getdata
)eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;te-ted+t;
+d = ;ea; 26
+a0t = a0t8>te-t6
************************
+( e.ent8>+d = ;btn*ubm+t;6
+name = 0lhtmlbmanage)=>getdata )eAue*t = )unt+me8>*e).e)8>)eAue*t
+d = ;+name;
name = ;+nput(+eld; 26
+age = 0lhtmlbmanage)=>getdata )eAue*t = )unt+me8>*e).e)8>)eAue*t
+d = ;+age;
name = ;+nput(+eld; 26
e.ent = 0lhtmlbmanage)=>gete.ent )unt+me8>*e).e)8>)eAue*t 26
+( e.ent8>name = ;0he0HBo-; and e.ent8>e.enttype = ;0l+0H;6
0a*e e.ent8>+d 6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 149/222
4hen ;&el(Con(+den0e;6
0he0Hbo- = 0lhtmlbmanage)=>getdata
)eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;0he0Hbo-;
+d = ;&el(Con(+den0e; 26
4hen ;:a)d9o)He);6
0he0Hbo- = 0lhtmlbmanage)=>getdata
)eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;0he0Hbo-;
+d = ;:a)d9o)He); 26
4hen ;C)eat+.+ty&en*e;6
0he0Hbo- = 0lhtmlbmanage)=>getdata
)eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;0he0Hbo-;
+d = ;C)eat+.+ty&en*e; 26 4hen ;le-+bleto&u))ound+ng*;6
0he0Hbo- = 0lhtmlbmanage)=>getdata
)eAue*t = )unt+me8>*e).e)8>)eAue*t
name = ;0he0Hbo-;
+d = ;le-+bleto&u))ound+ng*; 26
end0a*e6
end+(6
0he0Hbo- & ,O$ ,$L6
+0he0H = 0he0Hbo-8>0he0Hed6
+( +0he0H = ;;6 0te-t = 0he0Hbo-8>+d6
end+(6
E,6
+name = +name8>.alue6
+age = +age8>.alue6
+*e- = me8>*ele0t+on16
+Aual+(y = me8>*ele0t+on!6
* i_check = me->i_check 6
na.+gat+on8>*etpa)amete) name = ;+name; .alue = me8>+name 26
na.+gat+on8>*etpa)amete) name = ;+age; .alue = me8>+age 26
na.+gat+on8>*etpa)amete) name = ;+*e-; .alue = me8>+*e- 26
na.+gat+on8>*etpa)amete) name = ;+add)e**; .alue = me8>+add)e** 26
na.+gat+on8>*etpa)amete) name = ;+Aual+(y; .alue = me8>+Aual+(y 26
na.+gat+on8>*etpa)amete) name = ;+a0t; .alue = me8>+a0t 26
na.+gat+on8>*etpa)amete) name = ;0te-t; .alue = 0te-t 26
na.+gat+on8>gotopage ;*e0ond6htm; 26
end+(6
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 150/222
+( e.ent8>+d = ;btn*a.e;6
+( +tab +* +n+t+al6
*loop at itab into wa.
mo.e +name to 4a8name6
4a8age = me8>+age6
4a8*e- = me8>*ele0t+on16
4a8add)e** = me8>+add)e**6
4a8Aual+(y = me8>*ele0t+on!6 "i_qualify.
4a8a0t = me8>+a0t6
append 4a to +tab6
mod+(y I)e* ()om table +tab6
0omm+t 4o)H6
*enloop.
end+(6
end+(6
+( e.ent8>+d = ;btnd+*play;6
na.+gat+on8>gotopage ;th+)d6htm; 26
end+(6
&utput )%irst*ht!+(
Second*ht!(
<%@page language="abap"%>
<%@ extension name="htmlb" prefix="htmlb" %>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 151/222
<htmlb30ontent de*+gn="0la**+0Dde*+gn!!Dde*+gn!F">
<htmlb3page t+tle="&+mple o)mat"> <htmlb3(o)m>
<hF><b><(ont *+Ie="1M" (a0e="0ou)+e) ne4" 0olo)=;g)een;><u> Jou) eta+l*<'u><'(ont><'b><'hF>
<htmlb3g)+dLayout 0olumn&+Ie="!" )o4&+Ie="T">
<htmlb3g)+dLayoutCell 0olumnnde-="1" )o4nde-="1"><(ont *+Ie="M" (a0e="0ou)+e) ne4" 0olo)=;blue;> <b> ,ame3<'b> <'(ont><'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" )o4nde-="1"><(ont *+Ie="M" (a0e="0ou)+e) ne4" 0olo)=;)ed;> <b> <%page8>4)+te .alue =+name 26%> <'b> <'(ont><'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="$">
<(ont *+Ie="%" face="courier new" color=&blue&> 'b> ()e '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="$"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =i_a)e /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="0"> <(ont *+Ie="%" face="courier new" color=&blue&> 'b> 1e# '+b> '+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="0"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =i_se# /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="2"> <(ont *+Ie="%" face="courier new" color=&blue&> 'b> (ress'+b> '+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="2"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =i_aress /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="3">
<(ont *+Ie="%" face="courier new" color=&blue&> 'b> 4ualification'+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="3"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =i_qualify /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="%">
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 152/222
<(ont *+Ie="%" face="courier new" color=&blue&> 'b> 5y 1tren)ths'+b> '+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="%"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =c_te#t /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="!" rowne#="6"> <(ont *+Ie="%" face="courier new" color=&blue&> 'b> 7#tra (ctiities'+b>'+font> <'htmlb3g)+dLayoutCell>
<htmlb3g)+dLayoutCell 0olumnnde-="$" rowne#="6"> <(ont *+Ie="%" face="courier new" color=&re&> 'b> ', pa)e->write alue =i_act /. ,> '+b>'+font> <'htmlb3g)+dLayoutCell><'htmlb3g)+dLayout><'(ont><'b>
<'htmlb3(o)m><'htmlb3page><'htmlb30ontent>
Page Attriutes(
0te-t $J/E &$R,G+tab1 $J/E RE&$$+a0t $J/E C:RV+add)e** $J/E C:RV+age $J/E ,C!+0he0H $J/E &$R,G+name $J/E C:RV
+Aual+(y $J/E C:R5+*e- $J/E C:RM*ele0t+on1 $J/E &$R,G*ele0t+on! $J/E &$R,G
third*ht!(
<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>
<htmlb30ontent de*+gn="de*+gn!F"> <htmlb3page t+tle = " ">
<htmlb3(o)m> <b><htmlb3label (o)="lb" te-t="Jou) eta+l*" '><'b><% +( +tab1 +* not +n+t+al6 %><htmlb3table7+e4 +d="t" table="',= itab! ,>"> <htmlb3table7+e4Column 0olumn,ame="8(57"title="8(57">'+htmlbtable9iew:olumn> <htmlb3table7+e4Column 0olumn,ame="(;7" title="(;7">'+htmlbtable9iew:olumn> <htmlb3table7+e4Column 0olumn,ame="(<<R711"title="(<<R711">'+htmlbtable9iew:olumn>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 153/222
<htmlb3table7+e4Column 0olumn,ame="17" title="17">'+htmlbtable9iew:olumn> <htmlb3table7+e4Column 0olumn,ame="4(?F@"title="4(?F@">'+htmlbtable9iew:olumn> <htmlb3table7+e4Column 0olumn,ame="(:A"title="(:A9A@">'+htmlbtable9iew:olumn> <'htmlb3table7+e4><% end+(6 %> <'htmlb3(o)m> <'htmlb3page><'htmlb30ontent>
Types(
itab7 T/+( 2!($_TT
,inal &utput(
hen clic. on Su!it(
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 154/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 155/222
hen Clic. on /eset(
9enerate >7 /rom BSP
S"EP7I have a controller in the BSP application endin with .#ml (for eI e#port.#ml)
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 156/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 157/222
S"EP9.7I "he function module will have the followin codeI
6%+C",+ Qi0=?>?8test#ml.
1111111111111111111111111111111111111111111111111111111111111111111111
'ocal interfaceI
4P,&"+-
&E6E&E+CE(""AB) "!PE S"A+5A&5 "AB'E
EP,&"+-
&E6E&E+CE(EL,%"P%") "!PE S"&+-
1111111111111111111111111111111111111111111111111111111111111111111111
5A"AI ltcolumn "!PE "AB'E ,6 dfies$
lscolumn 'ME '+E ,6 ltcolumn$
ls;s "!PE strin$
lre#porttableref "!PE &E6 ", data$
lri#ml "!PE &E6 ", ifi#ml$
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 158/222
lrstreamfactory "!PE &E6 ", ifi#mlstreamfactory$
lrencodin "!PE &E6 ", ifi#mlencodin$
lrresstream "!PE &E6 ", ifi#mlostream$
lrdoc "!PE &E6 ", ifi#mldocument$
lrrootnode "!PE &E6 ", ifi#mlelement.
6E'51S!4B,'SI Ofs< 'ME ititab$
Otab< "!PE table.
C,+S"A+"SI cencodin "!PE strin LA'%E U%"618U.
create new data ob;ect and copy ititab into it
C&EA"E 5A"A lre#porttableref 'ME ititab.
ASS-+ lre#porttableref1< ", Ofs<.
Ofs< F ititab.
create an instance of the #ml Processor
lri#ml F cli#mlF<create( ).
create #ml docu
lrdoc F lri#ml1<createdocument( ).
create the Stream 6actory
lrstreamfactory F lri#ml1<createstreamfactory( ).
create an Endcodin and Byte ,rder
lrencodin F lri#ml1<createencodin( characterset F cencodin
byteorder F 0 ).
set encodin for docu
lrdoc1<setencodin( encodin F lrencodin ).
append root node
lrrootnode F lrdoc1<createelement( name F UtableU ).
lrdoc1<appendchild( newchild F lrrootnode ).
create the output stream with a pointer to our binary strin
lrresstream F lrstreamfactory1<createostreamcstrin( evoutput ).
et a pointer to our data table
ASS-+ lre#porttableref1< ", Otab<.
set the Encodin into a stream
lrresstream1<setencodin( encodin F lrencodin ).
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 159/222
call "ransformation usin the simple S'" idindent
CA'' "&A+S6,&4A",+ idindent
S,%&CE itab F Otab<
&ES%'" 4' lrresstream.
E+56%+C",+.
S"EP:I +ow test the controller to see the pop up of the 4'.
Simple BSP Application to ,alidate the date /ields in ront end using MAAS$0'PT
-o to "ransaction SE80.
Select BSP Application J enter the name to create a +ew BSP Application (EIyhdate)I
Press Enter to create a new ,b;ect J click on !esI
Enter the short description and press EnterI
&iht Click on the +ame and o to Create a Pae.
Enter the pae name and the description and select pae with 6low 'oic option
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 160/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 161/222
Dalert(Please enter a valid Start 5ate ( mm.dd.yyyy ))Gdocument.etElementByd(sd).style.color F redGdocument.etElementByd(sd).style.borderColor F redGHHelseDalert(Please enter a valid Start 5ate ( mm.dd.yyyy ))Gdocument.etElementByd(sd).style.color F redGdocument.etElementByd(sd).style.borderColor F redGHOscript<
Oscript forFed eventFonchane typeFte#t;avascript<var data F this.valueGvar date F data.split(.)Gif (data VF U U)Dvar day F dateW0XG
var month F dateW7XGvar year F dateWXGdocument.etElementByd(ed).style.borderColor F blackGdocument.etElementByd(ed).style.color F blackGif ((dayO7 YY day <97) YY (monthO7 YY month<7) YY
(year.lenth VF :))Dalert(Please enter a valid End 5ate ( mm.dd.yyyy ))Gdocument.etElementByd(ed).style.color F redGdocument.etElementByd(ed).style.borderColor F redGHHelse
Dalert(Please enter a valid End 5ate ( mm.dd.yyyy ))Gdocument.etElementByd(ed).style.color F redGdocument.etElementByd(ed).style.borderColor F redGHOscript<
OZ[pae lanuaeFabap Z<OZ[e#tension nameFhtmlb prefi#Fhtmlb Z<OhtmlbIcontent desinFdesin009 < OhtmlbIpae titleFmaster < OhtmlbIform< OhtmlbIrid'ayout columnSiQe F 9
rowSiQe F 9 cellPaddin F 70 cellSpacin F 70 width F =0Z < OhtmlbIrid'ayoutCell columnnde# F 7 rownde# F 7 width F =0Z < Ofont faceFverdana styleFfont1siQeI70p#< Ob<Startin 5ateOb<Ofont<Obr< OhtmlbIinput6ield id F sd
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 162/222
width F =0Z type F 5A"E show2elp F invalid F OZF ws+ Z< alinment F CE+"E& ma#lenth F 70 value F OZF wsd Z< < OhtmlbIrid'ayoutCell< OhtmlbIrid'ayoutCell columnnde# F rownde# F 7 width F =0Z < Ofont faceFverdana styleFfont1siQeI70p#< Ob<End 5ateOb<Ofont<Obr< OhtmlbIinput6ield id F ed width F =0Z type F 5A"E show2elp F invalid F OZF we+ Z< alinment F CE+"E& ma#lenth F 70
value F OZF wed Z< < OhtmlbIrid'ayoutCell< OhtmlbIrid'ayout< OhtmlbIform< OhtmlbIpae<OhtmlbIcontent<
'n 5,enthandler F on 'nitialiGation.
wsd F sy1datum. wed F sy1datum.
'n T+pe )e/inition:
wed "!PE S!15A"%4
weedate "!PE C2A&70
we+ "!PE C
wsd "!PE S!15A"%4
wsin "!PE C
*TPT
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 163/222
*henever an invalid date is provide this NavaScript will et triered.
)ate here is in ))..IIII ormat.
Case 7.
2ere the startin day field contains 00.which is invalid.
,nce you press ok the input field color will chane to &ed.
,nce the valid date is provided it revert back to oriinal color
"his above condition will work for day as well as month values.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 164/222
Case .
2ere if the total lenth of month is less than : the followin error is triered.
,nce you press ok the input field color will chane to &ed.
,nce the valid date is provided it revert back to oriinal color
Case 9.
f the startin date field is blank.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 165/222
,nce you press ok the input field color will chane to &ed.
Aain$ as above once the valid date is provided it revert back to oriinal color.
"his is all about the date validations that can be done on front1end usin Nava scripts.
BSP application to download the table contents into excel sheet
Scenario: 5ownload the table contents into e#cel sheet with the button click can be achieved by usin
class $78BSP8T'7'TI download.
Step1: -o to SE80 transaction select BSP application and provide the name of application.
Step2: -ive the short description of application and assin packae to application.
Step3: &iht1click on application and create a pae.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 166/222
Step4: Provide the name and description of pae.
StepI C,5E
7a+out code:
OZ[pae lanuaeFabap Z<
OZ[e#tension nameFhtmlb prefi#Fhtmlb Z<
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 167/222
OhtmlbIcontent desinFdesin009 <
OhtmlbIpae titleF6irst Pae <
Otable widthF700Z heihtF700Z borderF0<
OhtmlbIform<
Otr <
Otd bcolor F \666666 <Ocenter <
OZ
if flfla F 7.
Z<
OhtmlbItableLiew id F fliht
table F OZF tfliht Z<
width F =0Z
on&owSelection F rowSelection
desin F standard
table'ayout F A%",
footerLisible F false <
OhtmlbItableLiewColumn column+ame F CA&&5
title F Ob<Carrier dOb< <
OhtmlbItableLiewColumn<
OhtmlbItableLiewColumn column+ame F C,++5
title F Ob<Connection 5Ob< <
OhtmlbItableLiewColumn<
OhtmlbItableLiewColumn column+ame F 6'5A"E
title F Ob<6liht 5ateOb< <
OhtmlbItableLiewColumn<
OhtmlbItableLiewColumn column+ame F P'A+E"!PE
title F Ob<Plane "ypeOb< <
OhtmlbItableLiewColumn<
OhtmlbItableLiew<
Obr <Ocenter <
OhtmlbIbutton id F submit
te#t F 5ownload
onClick F test
width F 0Z<
OZendif.Z<
Ocenter <
Otd<Otr <
OhtmlbIform<
Otable<
OhtmlbIpae<
OhtmlbIcontent<
*n$reate $ode:
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 168/222
select carrid connid fldate planetype from sfliht into table tfliht
up to 70 rows.
if sy1subrc e3 0.
flfla F 7.
endif.
*n'nPutProcessing $ode:
event handler for checkin and processin user input and
for definin naviation
5A"AI buttonevent "!PE &E6 ", clhtmlbeventbutton $
event "!PE &E6 ", ifhtmlbdata.
5A"AI lsfliht 'ME '+E ,6 tfliht.
5A"AI
output "!PE strin $ l#strin "!PE #strin$
apptype "!PE strin.
event F clhtmlbmanaerF<etevent( re3uest ).
6 event S +," +"A' A+5 event1<eventname F
htmlbeventSF<B%"",+ .
buttonevent ]F event .
CASE event1<eventservername.
*2E+ UtestU .
6 tfliht S +," +"A'.
',,P A" tfliht +", lsfliht.
C,+CA"E+A"E
output
lsfliht1carrid
clabapcharutilitiesF<horiQontaltab
lsfliht1connid
clabapcharutilitiesF<horiQontaltab lsfliht1fldate
clabapcharutilitiesF<horiQontaltab
lsfliht1planetype
clabapcharutilitiesF<crlf
+", output SEPA&A"E5 B! space.
E+5',,P.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 169/222
apptype F UAPP'CA",+4SECE'GcharsetFutf17>leU.
CA'' 6%+C",+ USC4SS"&+-",S"&+-U
EP,&"+-
te#t F output
mimetype F UAPP'CA",+4SECE'GcharsetFutf17>leU
4P,&"+-
buffer F l#strin.
C,+CA"E+A"E
clabapcharutilitiesF<byteordermarklittle
l#strin +", l#strin
+ B!"E 4,5E.
CA'' 4E"2,5 clbsputilityF<download
EP,&"+-
ob;ects F l#strin
contenttype F apptype
contentdisposition FUattachmentGfilenameF6liht5etails.#ls response F mresponse
naviation F naviation.
E+56.
E+5CASE.
E+56.
Page Attributes:
(l(lag $J/E (*(l+ght1 $J/E $J/E&LG:$
t(l+ght $J/E &LG:$40a))+d $J/E &LG:$8CRR4+nput $J/E &$R,G
T+pes )e/inition:
typesI
bein of typesfliht$
carrid type sfliht1carrid$
connid type sfliht1connid$
fldate type sfliht1fldate$
planetype type sfliht1planetype$
end of typesfliht$ fsfliht type standard table of typesfliht.
*TPT:
Step!: 'ayout is as follows with the fliht details and user has option to download the table details with
the button click.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 170/222
Click on download button$ Pop up appears askin to open or to save a file.
Popup appears for location of file and name of file.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 171/222
E#cel sheet is stored as fliht details as followsI
Steps to integrate Business Ser,er pages <BSP? with A)*B5 75>
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 172/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 173/222
n the second.#ml pae$ try to populate the 4' file usin simple S6'-2" table information.
have used the replace statements because 4' parsin in 6le# failed due to special characters.
"est the second.#ml pae$ 4' file will open in a separate browser as below$
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 174/222
Create a 6le# application in the Adobe 6le# builder. have created a 44' application named
sap/lexbsp inside the pro;ect /lexwebser,ice.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 175/222
%se the followin code in the created 44' application.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 176/222
!ou will see the list of all the swf and html ob;ects created for the pro;ect in the history folder.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 177/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 178/222
mport the Created S*6 file in the SAP 44E &epository as shown.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 179/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 180/222
'ntegrating SAP data <0O3 or B& )ata? with the B*>celsius <Business *bects?using BSP
Part 0( SAP BSP 1 B&-#celsius )'2cel #M3 Maps Connection+
Create a BSP application usin SE80 transaction (@)5*85>$57APS)
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 181/222
Create a Liew (P*6')1)ATA.>7 which will have the 4' data. "his data will be actin as the main
source for the celsius file which is oin to be created in the further steps. %se the below code in the
layout of the 4' view.
OZ[pae lanuaeFabapZ<
OZ 5A"AI "AB "!PE "AB'E ,6 S6'-2"$
4'S"&+- "!PE S"&+- .
SE'EC" 6&,4 S6'-2" +", "AB'E "AB %P ", = &,*S.
"&!.
CA'' "&A+S6,&4A",+ (U5U)
S,%&CE PA&A F "AB
&ES%'" 4' 4'S"&+-.
CA"C2 CS"E&&,&.
E+5"&!.
&EP'ACE A'' ,CC%&&E+CES ,6 Uutf17>U + 4'S"&+- *"2 Uutf18U .
CA'' 4E"2,5 &ESP,+SE1<62""PE+""!^SE"C5A"A
EP,&"+-
5A"A F 4'S"&+-.
Z<
"he above code is used to enerate the 4' data. "he internal table returned from the select statement
will be presented to the standard $A77 T0A(S*0AT'*( <')? to enerate the 4'. "he 4' format
may be either in %"618 or %"617> or anythin. Based on the settin and server confiurations the
versions have to be set. "he 4' file has to be tested and the enerated 4' will be saved locally in
order to desin the Chart.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 182/222
+ow an E#cel file is imported with the 4' data saved locally. "he data returned from the 64 will be
presented in the e#cel file and the file will be saved locally.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 183/222
+ow the B,1celsius will be opened and imported with e#cel file which is saved in the previous step. "hedata will be feed into the e#cel sheet of the celsius and the report is desined by usin several
components available.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 184/222
+ow the connectivity has to be made by openin the anage )ata $onnections Add 5xcel >7
aps. +ame the connection and mention the 4' data %&'. "he view represented in BSP application for
the 4' file has the %&' and will be represented.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 185/222
"he desined celsius file will be saved in '6 format locally which will be then e#ported as S*6 file.
"he S*6 file will be imported as 44E ob;ect into the BSP application.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 186/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 187/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 188/222
Part 4( SAP BSP 1 B&-#celsius )5e Service Connection+
As we discussed earlier about the SAP and B, interation usin BSP and celsius$ here have used
another connection of celsius to interate with the SAP BSP.
"his e#periment is intended to describe the interation of SAP with B,1celsius usin web service. "he
&9 or B* data will be consumed as web service so that the service will be used with the data
connectivity of celsius. "he data ets refreshed every moment based on the user action throuh the
interface where we are oin to use SAP BSP as the tool.
"he first step is to create the 64$ where the loical operation of the report has to perform. *e can either
use &9 tables$ Classes$ methods etc or B* Kuery as the source.
Create 64 @SAP8>$57T$ with the followin code as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 189/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 190/222
+ow the 64 has to be published as a web service. 6ollow the below steps which is mentioned in the
screens.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 191/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 192/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 193/222
,nce the above steps are done$ open the S,A 4A+A-E4E+" throuh S,A4A+A-E& transaction andfollow the below screens stepwise.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 194/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 195/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 196/222
+ow the report has to be desined based on the functionality users re3uirement of the report. "he nput(&ead from) and ,utput (nsert n) cells have to be mapped to the celsius1E#cel sheet durin the desinphase.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 197/222
"he desined celsius file will be saved in '6 format locally which will be then e#ported as S*6 file.
+ow the created S*6 file has to be presented to the dashboard by havin SAP BSP as the web interface.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 198/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 199/222
2ere the &9 data is consumed as a 64 and used as the source. n the previous part also &9 data isused as the source. B* data can also be used as the source data in the previous and for this e#perimentalso.
Part 6( SAP BSP 1 B&-#celsius )#M3 Data Connection+
n this presentation the third connection of celsius _ 4' data is used to interate with SAP BSP$ so that
the data will be presented in the dashboard.
Create a sample BSP application R5E4,4'5A"AT
Create a 4' view in the BSP application based on the P*6' model. Embed the below code shown in
the followin screens. "he code is mainly pro;ected to enerate the 4' file which is oin to act as a
source for the S*6 file in a particular format. "he CA'' T0A(S*0AT'*( <=')=? will enerate the 4'
file usin the data in a format based on the system server settins. "he pre defined format has to be
achieved based on replacin some tas with other values as shown in the below screens.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 200/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 201/222
"he below screen is the predefined format with data$ variable$ row and column tas enerated while
testin the 4' view. "he enerated 4' has to be parsed to the celsius file. Sometimes the taret
miht not be achieved if the format of the 4' file is not proper.
,pen the celsius 008 and desin the canvas usin a list bo# and a column chart. "he list bo# will be
holdin the date of the fliht and the column chart will represent the ma#imum and occupied seats of the
particular class on the selected date.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 202/222
+ow the data connectivity has to be assined to the celsius file. "he 4' path will be taken from the
properties of the 4' view as shown below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 203/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 204/222
+ow the data from the 4' has to be mapped to a series of rane. 4ark check on Enable 'oadT andclick on `T. +ame the series as K7T which we used the variable name in the 4' file and select theranes based on the data. Click on preview 4' and compare the 4' file enerated by celsiuspreview and the 4' enerated while testin 4' view from BSP application. "he format should be thesame$ so that the data can be parsed easily between the BSP and S*6 file which is oin to beenerated
.
+ow e#port the celsius file as a flash file.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 205/222
+ow the BSP application will be enhanced with an 2"4' pae which will be holdin S*6 file and will bedisplayed durin the run time. Place the below code shown in the screen on the layout of 2"4' view.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 206/222
+ow test the 2"4' view and S*6 file will be enerated. Based on the different selections on fliht datethe data will be chaned as shown in the below screens.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 207/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 208/222
Step2I %ser has option to select the *S5' sources$ select local file click on continue. %ser has option to
select the *S5' file. ("o download the *S5' file used in this scenario$ click here)
Step3I+e#t is port selection$ select the sendsmssoap.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 209/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 210/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 211/222
Step4: -ive the pae name and description
Step: 7a+out code:
OZ[pae lanuaeFabap Z<OZ[e#tension nameFhtmlb prefi#Fhtmlb Z<OhtmlbIcontent desinFdesin009 < OhtmlbIpae titleF6irst pae < OhtmlbIform<
Ocenter< OhtmlbIte#tLiew te#t F 4obile +o desin F E4P2ASRE5 <
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 212/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 213/222
call method clhtmlbmanaerF<etevent e#portin re3uest F runtime1<server1<re3uest receivin event F wevent.case wevent1<id.when UetU.CA'' 4E"2,5 clhtmlbmanaerF<etdata EP,&"+- re3uest F runtime1<server1<re3uest name F UinputfieldU id F UmobU &ECEL+- data F wob;. winputfield ]F wob;. wmobno F winputfield1<value.
winput F wmobno. clear wob;.
CA'' 4E"2,5 clhtmlbmanaerF<etdata EP,&"+- re3uest F runtime1<server1<re3uest name F UinputfieldU id F UmailU &ECEL+- data F wob;. winputfield ]F wob;. wmail F winputfield1<value.
winput F wmail. clear wob;.
CA'' 4E"2,5 clhtmlbmanaerF<etdata EP,&"+- re3uest F runtime1<server1<re3uest name F UinputfieldU id F UmsU &ECEL+- data F wob;. winputfield ]F wob;. wms F winputfield1<value.
winput F wms. clear wob;.
dataItv type &E6 ", R"C,SE+5S4SS,AP $tin type R"SE+5S4S",+5AS,AP+$tin7 type &E6 ", R"SE+5S4S",+5AS,AP+$tinn like standard table of tin.
"&!. C&EA"E ,BNEC" tv EP,&"+-
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 214/222
loicalportname F . CA"C2 c#aisystemfault . E+5"&!.
tin14,B'E+%4BE& F wmobno.tin16&,4E4A'A55&ESS F wmail.tin14ESSA-E F wms.
APPE+5 tin to tinn.
"&!.CA'' 4E"2,5 tv1<sendsmstoindia EP,&"+- input F tin 4P,&"+- output F tou . CA"C2 c#aisystemfault . CA"C2 c#aiapplicationfault .
E+5"&!.if tou is not initial. flfla F 7. endif.
endcase.
Page attributes:
flfla "!PE
tou "!PE R"SE+5S4S",+5AS,AP,%"
winput "!PE S"&+-
wmail "!PE R"SE+5S4S",+5AS,AP+16&,4E4A'A55&ESS
wmobno "!PE R"SE+5S4S",+5AS,AP+14,B'E+%4BE&
wms "!PE R"SE+5S4S",+5AS,AP+14ESSA-E
*PT:
-ive the mobile number$ mailid and messae and click on button.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 215/222
,utput is as follows with the mobile1no$ mailid$ service provider$ place and status of messae (4essae isdelivered or not delivered)
60'$ 5nhancement )ate TAB Addition
"his technical document is about how to add a new 5A"E tab ne#t to the follow1up tab in the 2&1C
standard *eb % component which will display the S'A dates for the 2& Service ticket.
Step1:
*e need to enhance the 2&1C component with the followin enhancement set.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 216/222
Step2:
"he click on the Component Structure browser and o the views. "hen choose the followin view.
'$$P8BT8STO6eaderPartnerolpiewSet. "his view needs to be enhanced in order to add a new
tab ne#t to the follow1up tab. "hen riht click on the view and choose E+2A+CE. "his will create a pop1
up for the Q1implementation classes of controller$ view1layout for that view which will allow you to make
chanes in the view1layout of 6ollow1up viewset.
Step3:
Click on the view layout and o to the 2eaderPartner6ol%pLiewSet.htm. 5ouble click on it which will take
you to the 2eaderPartner6ol%pLiewSet.htm Pae.
+ow we need to update the naviational link which has the followin tabsI Cateories$ Actions$ 6ollow1
upT. "he below code need to be added in the naviational link internal table and activate it to et the
5A"E tab reflectin in the 2&1C Client *eb %.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 217/222
lsline1id F UhelpU.
lsline1onclick F UhelpU.
lsline1te#t F U5atesU.
lsline1tooltip F U5atesU.
lsline1te#tdirection F U5atesU.
insert lsline into table controller1<tnavlinktab.
C'EA&I lsline.
Step4:
+ow test the component and check the *eb Client % where you can find the new 5A"E tab ne#t to the
follow1up "AB but without a view assined to it and we need to establish a link for a view to show up in
the newly added "AB.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 218/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 219/222
"he viewset LiewSet CC4PB"SL"S'ALiew has a view Liew tem5ates.4ain*indow which can beused for displayin in the 5A"ES tab which has information like 6irst &esponse and 5ue dates.
A +aviational'ink "oSladatesT has to be established from the source LiewSetCC4PB"SL"2eaderPartner6ol%pLiewSet with an ,utbound plu 5A"ES to "arettem5ates.4ain*indow with an nbound Plu 5E6A%'" as shown below.
Sa,e the 0epositor+ $hanges.
Step":
+ow dra the Liew tem5ates.4ain*indow from the LiewSet CC4PB"SL"S'ALiew and itsLiewArea tem5ates to the Liewset CC4PB"SL"2eaderPartner6ol%pLiewSet and its LiewArea2eaderPartner6ol%p4ain as show below.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 220/222
Sa,e the 0epositor+ $hanges.
Step#:
+ow we have established a (a,igational7inE ToSladates and draed the tem view to the Partner6ollow1up Liew set. 6ew chanes in the event handler EL,+2E'P and outbound1plu ,P5A"ES willthe brin temdates view in the 5A"E tab with the re3uired data like 6irst &esponse 5ate and 5ue 5ate.
Add the followin code in the event handler E2,+2E'P and activate it.
Add the followin code in the outbound1plu ,P5A"ES and activate it.
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 221/222
8/10/2019 BSP creation
http://slidepdf.com/reader/full/bsp-creation 222/222