This is the fourth part in this series, which talks about, creating multi frame applications in the Internet Transaction Server (ITS). The multi frame application in the HTML corresponds to sub-screen module pool programming in ABAP. This article is probably the most important one in the series, as most of the standard SRM transactions contain sub screens. The content presented in this article will help you to understand the development of web transactions for the corresponding sub screen module pool programs.
To explain the development of multi frame applications, an example program with name ZYMOVIE3 has been created , which contains one main screen (9000) and two sub screens ( 9001 and 9002).
The main screen 9000 contains two input fields “Year” , “Category” , two pushbuttons “Winner” , “Nominees” and one sub screen area “SUBSCR”.
The sub screen 9001 contains one I/O field with name “winner”.
The sub screen 9002 contains three I/O fields with names “nominee1″, nominee2” and “nominee3”.
The program logic is very simple. When the button “winner” is clicked, sub screen 9001 is called and when “nominees” button is clicked sub screen 9002 is called. The ABAP logic is not explained here, assuming that the reader has the necessary knowledge about module pool programming.
The HTML code for the main screen 9000 is shown below:
</head>
<body>
`Background()`
`ApplicationTitle(title.value=TEST)` <BR>
`~messageline`
<form name="BBPForm" method="post" action="`wgateURL()`">
<input type="hidden" name="~OKCode" value="">
<input type="hidden" name="~event" value="">
<input type="hidden" name="~control" value="">
`BBPVSpace()`
`BBPBoxBegin()`
`Table(class="format")`
`TR()`
`TD(class="label")`<label for="`YMOVIE-YYEAR.name`"> Year</label>
`if (YMOVIE-YYEAR.disabled)`
`TD(YMOVIE-YYEAR.value, class="data", active="")`
`else`
<input type=text id="`YMOVIE-YYEAR.name`" name="`YMOVIE-YYEAR.name`" value="`YMOVIE-YYEAR.value`" maxlength="04" size="04" >
`end`
`TR()`
`TD(class="label")`<label for="`YMOVIE-CATEGORY.name`"> `YMOVIE-CATEGORY.label`</label>
`if (YMOVIE-CATEGORY.disabled)`
`TD(YMOVIE-CATEGORY.value, class="data", active="")`
`else`
<input type=text id="`YMOVIE-CATEGORY.name`" name="`YMOVIE-CATEGORY.name`" value="`YMOVIE-CATEGORY.value`" maxlength="04" size="04">
`end`
`F4HelpButton(bbpformname,
"YMOVIE-CATEGORY",
"#Z_SELECT",
"category")`
`endTable()`
`BBPBoxEnd()`
`BBPTabStripBegin()`
`BBPTabLineBegin()`
`BBPTab("",winn.label, "WINN")`
`BBPTab("",nomi.label, "NOMI")`
`BBPTabLineEnd()`
`BBPTabStripEnd()`
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="tabcontent">
`includeFrame (~frameName="SUBSCR")`
</td>
</tr>
</table>
</form>
</body>
It is assumed that the reader has already gone through the part1, part2 and part3 of this series. So, things that are common in all these submissions are not explained here ( like <table> , F4helpbutton, <input> tags etc., ). The important thing to note in the above code is the “includeframe” function:
`includeFrame (~frameName="SUBSCR")`
This HTMLB function creates a frame on the webpage with the name SUBSCR. This name is same as the name of sub screen area in screen 9000.
Another important thing to understand is about the creation of the tab buttons . In most of the SRM transactions (like process purchase orders, settings or sourcing cockpit etc., ) , the navigation between different screens happens through tab buttons , instead of push buttons For example in “Process purchase orders” transaction we have “header data” and “Item data” tabs. When “header data” tab is clicked, system displays header data and when “Item data” tab is clicked, item data is displayed. In reality these tabs are developed as buttons in the module pool, but in the web page these are displayed as the tabs.
This is possible by one of the HTMLB function called “BBPTab()” .
Function BBPTab() has three important input parameters.
- Isactive — Is tab button should be highlighted or not, when the page is displayed
- Label — What is the label that needs to be appear on the tab
- Okcode — OKcode that needs to be triggered, when the user clicks on the tab
In the above code the line `BBPTab(“”,winn.label, “WINN”)` makes the tab “winner” inactive and triggers the function code “WINN” in SAP GUI when the user clicks on this tab. Similar logic holds for the “NOMINEES” tab also.
Now coming to the HTML code for sub screen 9001, the code is written as shown below:
<form method="post" action="`wgateURL(~target = "SUBSCR")`"> `Table(class="format")`
`TR()`
`TD(class="label")`<label for="`YMOVIE-WINNER.name`"> `YMOVIE-WINNER.label`</label>
`TD(class="data")` <input type=text id="`YMOVIE-WINNER.name`" name="`YMOVIE-WINNER.name`" value="`YMOVIE-WINNER.value`" maxlength="15" size="15">
</form>
The important thing to note here is the “~target ” parameter. The ~target parameter tells the system, where to post the values when the form is submitted by the user. The ~target parameter in this example is “SUBSCR’, sub screen area of the main screen 9000. This makes the system to put the sub screen 9001 in the sub screen area of the main screen. The code for the second sub screen 9002 is exactly same.
The below screenshots show how the screen looks in the web, when the user clicks on “WINNER” tab.
When the user clicks on “NOMINEES” tab, the screen looks as shown below:
Useful links:
- For learning HTML and Javascript, the best starting point would be w3schools.com
- For learning HTMLB, I haven’t found anything better than this link
Sankar Rao Bhatta is an SAP NetWeaver Consultant with Intel, India. After completing M.Tech from IIT Bombay, he worked with IBM as SAP Consultant before joining Intel. Other areas of his expertise include SAP SRM and ABAP.
Hello Sankar,
I have a question on integrating portal with SRM.
I have integrated SRM 5.0 into Portal.Most of the iviews are IAC i.e., all are ITS based services.
The issue is that the Portal Theme does not get reflected on these services after integration.
When a BSP or Webdynpro is integrated the the application gets the Portal Theme when executed from Portal but the ITS services are not getting this.
Now I know that there is an OSS raised in SAP and that their recommendation is that we modify the stylesheets within SRM itself.(ebpapplication.css).
Transaction SE80
Internet Service BBPGLOBAL
-> Mime Objects
-> Style
Is there any guide which explains on a step by step basis on how to do this? I have tried modifying the stylesheets through this method, but am not sure if I am doing it right, since its not working! Any help on this is greatly appreciated.
Any responses can be sent to rahulforlove@yahoo.com
A wonderful article from Sankar , you rock !
Rahul , You can come in the SAP Portal and look in to the SAP ITS theme generator ( System Administration ->Portal Display ->ITS Theme Generator ) and then make it avaliable to the ITS , this will give the SRM 5.0 ITS services Portal look and style.
Yes, we thought so as well and we tried it but it didn’t work. In addition please have a look at the following article: https://www.sdn.sap.com/irj/sdn/thread?messageID=6243769#6243769
where customer got confirmed by sap that the only whay to adapt look and feel is changing the css in SRM itself.
Have you been aware of this or this there something else we missed?
Hi
Excellent Article.
its very easy to understand.
I have a small problem like when ever i use POPUP_TO_CONFIRM
the popup text is not shown
Ex: like if i ask a question for confirmation in the popup screen
like Do you want to approve?
the text wasshown up in the pop up screen in SRM-UI
how can i rectify this error
Regards,
Siva.
javascript codings can prevent people from seeing the code, but when the browser is about to execute it, it has to have a copy. People can simply disable Javascript or they may look in the browser cache files to see the source codes.