UUseful SAP BSP application code - ABAP, HTML, HTMLB, Javascript, CSS
--The javascript getElementById statement
See here for example syntax using the getElementById command
--Add multiple classes to an HTML element
This is fairly straight forward simply enter both classes with a space between
class="cssclass1 cssclass2"
--Stop Enter key triggering event
onkeypress="return event.keyCode != 13"
--Stop OnInputProcessing event being triggered when pressing enter
This code is to fix an issue I often have where pressing enter within an html input field
triggers the submit form/button. You could use the code above to stop all enter functionality
happening on each field but sometimes you may want javascript code to run on enter which updates other screen
fields etc.
One trick I have found to do this is to have a second hidden button which is before the
main submit button so that it is the default. You can then give this button a separate event_id so that
you know the user was simply pressing enter on a field rather than pressing the visible submit button.
All you have to do then is capture all the screen fields and re-display it as if nothing as happened.
Here is the html code to hide a button on a white screen
<input style="background-color:#ffffff; border:0;" name="OnInputProcessing(enterpressed)" type="submit" value="" id="enterpressed">
Then in your "OnInputProcessing" event just add the following code
IF event_id EQ 'enterpressed'.
* Capture all fields on screen save them and then do nothing to
* return user to to screen as if nothing happened
ENDIF.
--Replace Enter press event with Tab
A much simpler solution to stop a user pressing enter and firing the submit button(OnInputProcessing)
would be to turn the enter key pressed action into a tab, by adding the following code.
The following code works in IE, chrome and FireFox although you may need to add
tabindex attributes to some of your elements. The code simply gets placed within the <head> tag of your
page as shown below. No other code is required to initiate it as it adds the functionality to a keydown listener so
that whenever a keydown action is performed this code gets fired.
The code then checks if the action was an Enter press (keyCode == 13), then in IE it changes it to a
tab event (keyCode = 9) and in chrome it targets the next element in the tabindex.
Please note having fields within a <fieldset> or hidden can stop this working in Chrome so if
it doesn't work check this first. See here for very simple page
which demonstrates Enter key to Tab key working. You could create this page as
a BSP and check that the OnInputProcessing doesn't get triggered.
<head>
<script type="text/javascript">
window.onload = function()
{
var form = document.getElementById("formlist");
if (window.addEventListener)
form.addEventListener("keydown", function(e)
{
if (e.keyCode == 13) {
e.preventDefault();
form.elements[e.target.tabIndex].focus();
}
}, true);
else if (window.attachEvent)
form.attachEvent("onkeydown", function()
{
if (window.event.keyCode == 13)
return window.event.keyCode = 9;
});
}
</script>
</head>
This is an alternative way of changing the Enter functionality but this version only seems to work in IE.
Within chrome it captures the Enter event but fails to turn it into a tab event.
First of all add the onkeydown attribute to your body tag and then add the second code section within
your <head> tag
<body onkeydown="ModifyEnterKeyPressAsTab(event);">
<head>
<script language="JavaScript">
function ModifyEnterKeyPressAsTab(e)
{
e = e || window.event;
if (e.keyCode == 13){
if (window.event)
e.keyCode = 9;
}
}
</script>
</head>
--Add select all checkboxes option to HTML page
Add the following javascript code between your head tags
<script language="JavaScript">
function processAll(source) {
checkboxes = document.getElementsByTagName("input");
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
Add the following html code where you want the option to appear
<input type="checkbox" onClick="processAll(this);" /> Select/Unselect All
--Add HTML code to DIV section using javascript code
This could also be added to a js function that could be called from events such as onclick, onchange etc
<script type="text/javascript">
<!--
var dl = 'hello';
document.getElementById("display_location").innerHTML = ' ';
var f = document.createElement("div");
f.innerHTML = dl;
document.getElementById("display_location").appendChild(f);
//-->
</script>
--Call one or more Javascript functions from HTML element event (onchange, onclick...)
<input onchange="getTest();getTest2();" id="test_id" name="test_id" type="text" value="test"/>
--Call Javascript code from HTML element event (onchange, onclick...)
<input onchange="alert('hello world');" id="test_id" name="test_id" type="text" value="test"/>
onClick="document.getElementById('testradio').checked=false;"
--Capture row selected in HTML select/option field
First add html to create select dropdown field
<select id="dropdownmenu" name="dropdownmenu" onchange="getSelectedRow(this);">
<option value="" selected="selected">Choose Investigator</option>
<option id="1" value="value1"> Text1</option>
<option id="2" value="value2"> Text2</option>
<option id="3" value="value3"> Text3</option>
</select>
Then add the following javascript code
function getSelectedRow( v_this )
{
var line = v_this.selectedIndex;
if (v_this.getElementsByTagName("OPTION")[line].id == '1')
{
alert('Row 1 selected');
}
if (v_this.getElementsByTagName("OPTION")[line].id == '2')
{
alert('Row 2 selected');
}
if (v_this.getElementsByTagName("OPTION")[line].id == '3')
{
alert('Row 3 selected');
}
}
An alternative way without passing the 'this' option so do not know which option is selected yet
function getSelectedRow( )
{
for ( var i = 0; i < document.getElementById('dropdownmenu').options.length; i++ ) {
if ( document.getElementById('dropdownmenu').options[i].value == document.getElementById('dropdownmenu').value ) {
var usertype = document.getElementById('dropdownmenu').options[i].id;
}
}
//alert(usertype);
}
--Set Dropdown value in chosen.js Jquery addon
Where 'document.getElementById('field1')' = the dropdown field to be updated
and 'Value1' is the value to set it too
setSelectedValue(document.getElementById('field1'), 'Value1');
function setSelectedValue(s, v) {
for ( var i = 0; i < s.options.length; i++ ) {
if ( s.options[i].value == v ) {
/* sets selected dropdown row */
s.options[i].selected = true;
$("#country").val(i).trigger("liszt:updated");
return;
}
}
}
--Display value with specific number of decimal values (.toFixed)
<%
data: value1 type string,
value2 type string,
totalvalue type string,
value1 = 'unitcost1'. "ID attribute of field
value2 = 'numunits1'. "ID attribute of field
totalvalue = 'tot1'. "ID attribute of field
%>
var num =
document.getElementById("<%=value1%>").value * document.getElementById("<%=value2%>").value;
document.getElementById("<%=totalvalue%>").value = num.toFixed(2);
--Disable 'right mouse click' on your SAP BSP
Simply add the following javascript code to your HTML BSP, within the head tags
<head>
<script type="text/javascript">
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
</script>
</head>
--JQuery example code based on the jquery chosen dropdown functionality
$('div[id="location_chzn"]').attr('readonly', 'readonly'); /*set field as readonly*/
$('div[id="location_chzn"]').attr('readonly', ''); /*remove readonly attribute*/
$('div[id="location_chzn"]').attr('disabled', 'disabled'); /*set field as disabled*/
$('div[id="location_chzn"]').removeAttr('disabled'); /*remove disabled attribute*/
--Style <INPUT> tag with image
html:
<input type="submit" name="OnInputProcessing(getexcel)" class="btn-save" value="Save" >
CSS styling code:
input.btn-save {
display:block;
height: 36px;
padding: 2px 5px 2px 26px;
margin-top: 0px;
border: 1px solid #afafaf;
color:#008FD2;
font-weight: bold;
font-size: 12px;
cursor: pointer;
background: url(../img/save.png) left no-repeat #e4e4e4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
input.btn-save:hover {
border: 1px solid #004284;
color: #004284;
}
input.btn-save:active {
position: relative;
top: 1px;
border: 1px solid red;
color: red;
}
--Capture HTML code of current page
Call from onclick event and stores html code into hidden input field on page. Can then capture this within the OnInputProcessing BSP event
html code: <input onclick="exportHtml();" type="submit" name="OnInputProcessing(gethtml)" value="Export to file" >
<input type="hidden" name="storehtml" id="storehtml" />
Javascript code:
<script type="text/javascript">
function exportHtml() {
var storecode = document.getElementsByTagName('body')[0].innerHTML;
document.getElementById('storehtml').value = storecode;
alert(test);
};
</script>
--Capture selected radiobutton using javascript
HTML Code:
<input type="radio" id="sos_staff" name="sos" value="Staff">Staff
<input type="radio" id="sos_student" name="sos" value="Student">Student
Javascript code:
if(document.getElementById('sos_staff').checked) {
}else if(document.getElementById('sos_student').checked) {
}
Related Articles
Using AJAX functionality within our SAP BSP
Close BSP Session (type 'Pluggin HTTP') including when in SAP portal
SAP BSP to auto select region when user selects country using HTML and Javascript
HTML and Javascript code to force enter key to perform tab
JavaScrip command getElementById useful examples
MVC BSP input field - Demonstrate how to retrieve a value entered into text input field
Allowing multiple instances of a BSP application to be run by a user
Execute Standard SAP Transaction from BSP using dynamically created shortcut
Uplaod file within SAP BSP application using HTML and ABAP coding
Creating a BSP Application class to help store and pass data betwenn your BSP pages
Training Course and Workshop Booking Form
BSP checkboxes using HTML and the OnInputProcessing BSP Event
BSP checkboxes using HTML and the OnInputProcessing BSP Event
Check HTML checkbox is checked using Javascript within your SAP BSP
BSP Dropdown List - create a BSP dropdown list which allows user selection!!
ABAP BSP to allow user to select from SAP HR org structure - CSS file
Java script to display tree structure on your SAP BSP web page
Create a Simple BSP - Simple BSP to display text and call section BSP page using HTML
SAP BSP Training course booking - Creating an example training course booking form using BSP
Creating an SAP BSP which executes an ABAP report to retrieve data for use within BSP application
org selection BSP - detials.htm page
Display page of the SAP BSP example application to store favourite tcodes as a cookie
Execute.htm page of the SAP BSP example application to store favourite tcodes as a cookie
Favourites cookie bsp - initial page to display input fields and retrieve user input
BSP using cookies - Demonstrate use of cookies within a BSP to store user favourits
ABAP Export data to memory - Demonstrate use of ABAP program to retrieve data for use in BSP
MVC BSP HTMLB input field - Demonstrate how to retrieve a value entered into text input field
BSP development using standard HTML code instead of Business HTML (HTMLB)
Business HTML (HTMLB) - List of business HTML tags you can use within your BSP
Adding JavaScript to BSP (HTML) pages - Shows how to add javascript to your BSP pages
Example JavaScript code which can be added to your BSP application
BSP MIME Objects for Org. search application
Call onInputProcessing event from SAP BSP page via href or button
Organisation selection BSP - close internet window using javascript
Organisation selection BSP - get server side cookie ( get_server_cookie )
orgaisation selection BSP - set and get server side cookie ( set_server_cookie )
Display orgaisation selection BSP
BSP which allows HR Organisation Structure search and selection using javascript
Organisation update program - get server side cookie ( get_server_cookie )
BSP to capture user entry into HTML input fields
Capture BSP radiobutton selection using HTML and the OnInputProcessing BSP Event
BSP checkboxes using HTML and the OnInputProcessing BSP Event
Stateful and stateless BSP applications
Get user entry into HTML input fields with SAP BSP
Javascript to capture when a user closes or leaves sap bsp html page
Creating a BSP using the Model View Controller ( MVC ) technique
Using SAP Model View Controller (MVC) development techniques to develop BSPs
Adding a JavaScript date selection field to a BSP
Creating a BSP using the Model View Controller ( MVC ) technique
Creating a BSP using the Model View Controller(MVC) technique
Creating a BSP using the Model View Controller ( MVC ) technique
Retrieve value from input text field within a model view controller ( MVC) BSP
Web Application Development - Example code and information on development using BSP
SAP BSP / Business Server Pages combine ABAP and other web technologies such as HTML, CSS
BSP development screen - developing application using business server pages
Standard Program created in SE38 or SE80
