Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a
Below is the individual JavScript code for implementing the various methods of doing this either by showing/hiding and element on screen or by removing it altogether and then re-adding it. Both have there pros and cons so just need to decide which fits in with your requirements.
Full code listing
Alternatively here a basic code snippet which you can just copy and paste into your your SAP BSP or a HTML file and test this out for yourself.
<html>
<head>
<title>Demonstrate how to add and delete buttons and links</title>
<script type=”text/javascript”>
function delbutton()
{
var elem = document.getElementById(‘report1’);
elem.parentNode.removeChild(elem);
}
function addbutton()
{
var addbut = document.createElement(‘input’);
addbut.type = “submit”;
addbut.value = “Test Button”;
addbut.name = “test1”;
addbut.id = “report1”;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘button1’).appendChild(addbut);
}
function dellink()
{
var elem = document.getElementById(‘report2’);
elem.parentNode.removeChild(elem);
}
function addlink()
{
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Test link”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “#”;
addLink.id = “report2″;
addLink.setAttribute(‘class’, ‘test’);
document.getElementById(‘link1’).appendChild(addLink);
}
function hideelement() {
document.getElementById(‘report1’).style.visibility = ‘hidden’;
}
function showelement() {
document.getElementById(‘report1’).style.visibility = ‘visible’;
}
</script>
</head>
<body>
<form id=”sapbspform” name=”sapbspform” method=”post” action=””>
<p>
<ul>
<li id=”button1″>
some text
<input id=”report1″ type=”submit” name=”testbut1″ value=”Test Button” >
some more text
</li>
<li id=”link1″>
<a href=”#” id=”report2″ value=”1″ >Test link</a>
</li>
</ul>
<br><br>
<a href=”#” onclick=”delbutton();” value=”Del” id=”delbutton” >del button</a>
<br><a href=”#” onclick=”addbutton();” value=”Add” id=”addbutton” >Add button</a>
<br><br><a href=”#” onclick=”dellink();” value=”Del” id=”dellink” >del link</a>
<br><a href=”#” onclick=”addlink();” value=”Add” id=”addlink” >Add link</a>
<br><br><a href=”#” onclick=”hideelement();” value=”Del”>Hide button</a>
<br><a href=”#” onclick=”showelement();” value=”Add”>Show button</a>
</p>
</form>
</body>
</html>
Executing the HTML code
When you execute the report you will notice the following behaviour: