This is the layout of a full blown layout with JavaScript functionality incorporated.
<%@page language="abap" %>
<title>Development Customizing - editor</title>
<%@include file="header.htm" %>
<script language=javascript>
var pleasewait='<br>Please wait...<br><br>';
var objectList=new Array();
/* ----------------------------------------------------------------
Short functions - manipulating HTML objects
---------------------------------------------------------------- */
function _redefine(id,htmlstr) {
var divId = document.getElementById(id);
divId.innerHTML = htmlstr;
}
function _show(id) {
var divId = document.getElementById(id);
divId.style.visibility = 'visible';
}
function _hide(id) {
var divId = document.getElementById(id);
divId.style.visibility = 'hidden';
}
/* ----------------------------------------------------------------
Message popups: info('message text') and warning('message text');
---------------------------------------------------------------- */
function info(text) {
_redefine('info',text);
_show('popup_info');
setTimeout("_hide('popup_info')",2000);
}
function setFocus(objecttype,keyqualifier) {
with (document.forms[0]) {
FOCUS_OBJECT.value = objecttype;
FOCUS_QUALIFIER.value = keyqualifier;
for (var i=0;i<objectList.length;i++) {
if (objectList[i].objecttype==objecttype)
FOCUS_SUMMARY.value = objectList[i].toHtml();
}
}
}
function objectEntry(objecttype,description,qualdescription,docu) {
this.objecttype=objecttype;
this.description=description;
this.qualdescription=qualdescription;
this.docu=docu;
this.toHtml=function() {
return '<table cellpadding=2px cellspacing=2px><tr class=infolist>'+
'<td class=flabel width=100pt>Subject:<td>'+this.description+
'<td class=flabel>Object: '+this.objecttype+
'<tr class=infolist><td class=flabel>'+
'Current settings:<td>'+this.qualdescription+
'<td class=flabel>Qualifier: '+
document.forms[0].FOCUS_QUALIFIER.value+
'<tr class=infolist><td class=flabel>Documentation:'+
'<td colspan=2>'+this.docu+'</table>';
}
}
function addObject(objecttype,description,qualdescription,docu) {
objectList[objectList.length]=new
objectEntry(objecttype,description,qualdescription,docu);
}
</script>
<body>
<form method="POST">
<!-- ----------------------------------------------------------------
BSP header - title
---------------------------------------------------------------- -->
<table width=100% >
<tr><td style="text-align:right;font-size:14pt;">
Maintenance of Development Customizing settings
<br>
<Input
class=button type="submit"
name="OnInputProcessing(QUIT)"
value=" Quit "
onclick=javascript:info(pleasewait); >
</table>
<table cellspacing=1 cellpadding=2 style="background:transparent;">
<!-- -------------------------------------------------------- -->
<%
loop at OBJECTLIST into OBJECT.
IF LASTOBJECT NE OBJECT-OBJECTTYPE.
%>
<tr><td style="font-size:9pt;text-align:right;vertical-align:bottom;"><br>Title:
<td style="font-size:12pt;"><br><%= OBJECT-OBJECT_DESCRIPTION %>
<tr><td style="font-size:9pt;text-align:right;vertical-align:top;">
Info:
<td style="font-size:10pt;"><%= OBJECT-DOCU1 %> <%= OBJECT-DOCU2 %>
<%
LASTOBJECT = OBJECT-OBJECTTYPE. ENDIF.
%>
<tr><td>
<td>
<% IF OBJECT-EDIT EQ ' ' AND OBJECT-DISPLAY EQ ' '. %>
<Input
class=button type="submit"
value=" "
title="You are not authorised to change or display this object"
onmouseover=javascript:setFocus("<%= OBJECT-OBJECTTYPE %>",
"<%= OBJECT-KEYQUALIFIER %>");
onclick=javascript:info(pleasewait); >
<% ENDIF. %>
<% IF OBJECT-EDIT EQ 'X'. %>
<Input
class=button type="submit"
name="OnInputProcessing(EDIT)"
value=" Edit "
onmouseover=javascript:setFocus("<%= OBJECT-OBJECTTYPE %>",
"<%= OBJECT-KEYQUALIFIER %>");
onclick=javascript:info(pleasewait); >
<% ENDIF. %>
<% IF OBJECT-DISPLAY EQ 'X'. %>
<Input
class=button type="submit"
name="OnInputProcessing(DISPLAY)"
value=" Display "
onmouseover=javascript:setFocus("<%= OBJECT-OBJECTTYPE %>",
"<%= OBJECT-KEYQUALIFIER %>");
onclick=javascript:info(pleasewait); >
<% ENDIF. %>
<%= OBJECT-QUAL_DESCRIPTION %>
<!-- -------------------------------------------------------- -->
<%
endloop.
if sy-subrc ne 0. %>
<tr><td>
<p><font style="font-size:26pt">Sorry!</font>
<p>None of the development customizing settings are currently
available for editing via the web.
<p>Please contact your system administrator.
<% endif. %>
<!-- -------------------------------------------------------- -->
</table>
<input type=hidden name="FOCUS_EDITMODE">
<input type=hidden name="FOCUS_OBJECT">
<input type=hidden name="FOCUS_QUALIFIER">
<input type=hidden name="FOCUS_SUMMARY">
</form>
<!-- -------------------------------------------------------------------
The info message:
---------------------------------------------------------------- -->
<div id="popup_info"
style="position:absolute;top:200;left:200;visibility:hidden;width:300pt">
<table style="background-color:#7FCCFF;" cellpadding=3 cellspacing=1>
<tr><td class=popupheader style="background-color:#7FCCFF" width=300pt>
<img src="/imo_s_n_info.gif"> Message
<tr><td style="text-align:center;background-color:white;">
<div id="info"> </div>
</table></div>
<script language=javascript>
/* Make sure the OBJECTLIST table is also available in JavaScript: */
<% loop at OBJECTLIST into OBJECT. %>
addObject('<%=OBJECT-OBJECTTYPE %>','<%=OBJECT-OBJECT_DESCRIPTION %>',
'<%=OBJECT-QUAL_DESCRIPTION %>','<%=OBJECT-DOCU1 %> <%=OBJECT-DOCU2 %>');
<% endloop. %>
</script>
</body>
Only the event handlers OnCreate and OnInputProcessing have been set up for this application.