Copyright 2022 - BV TallVision IT

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.