Verwendung von Tab-Reitern in Formularen
von Thomas Fuhr, ORACLE Deutschland GmbH

Sie wollen in Ihrer Apex-Anwendung eine Seite mit einem Formular erstellen, das sehr viele Felder enthält, und Sie suchen nach einer Möglichkeit, die Felder zwecks überschaubarer Handhabung für den Endanwender auf Tab-Reiter zu verteilen.

Eines vorab: Ihr Formular sollte trotz alledem nicht mehr 100 Elemente enthalten. Wenn Sie diese Anzahl überschreiten, benötigen Sie zusätzliche JavaScript- und PL/SQL-Logik, um alle Eingaben wirklich verarbeiten zu können.

Big Form

In diesem Tipp erfahren Sie, wie Sie unter Verwendung von JavaScript das Formular durch Nutzung von Tab-Reitern übersichtlicher gestalten können.

Formularseite in der APEX-Anwendung erstellen

Erstellen Sie wie gewohnt in APEX ein Formular basierend auf der gewünschten Tabelle.

Neues Regionstemplate erstellen

Erstellen Sie für die Anwendung ein völlig neues Regionstemplate (Gemeinsame Komponenten - Templates - Schaltfläche "Erstellen"):

  • Name: Tabbed Region
  • Template-Klasse:Custom 1
  • Template:
<div class="tomTabbedRegion" id="#REGION_ID#">
 <div id="#REGION_ID#_reiter" class="tomReiter">#TITLE#</div>
 <p class="tomTabbedRegionbody">#BODY#</p>
</div>
<script type="text/javascript">
<!--
 x=x+1;
 tabreiter[x] = new Array(2);
 tabreiter[x][0] = '#REGION_ID#';
 var titel = document.getElementById(tabreiter[x][0]+'_reiter').firstChild.nodeValue;
 tabreiter[x][1] = titel;
//-->            
</script>

Regionen erstellen und Elemente auf die Regionen verteilen

Ziel dieses Schrittes ist es, alle Elemente des Formulars auf einzelne Regionen zu verteilen.

  1. Erstellen Sie eine neue HTML-Region und weisen Sie dieser Region das eben erstellte Regionstemplate zu
  2. Kopieren Sie diese Region entsprechend der benötigten Anzahl von Regionen
  3. Weisen Sie den einzelnen Elementen (Items) die entsprechenden Regionen zu
Löschen Sie nicht die ursprüngliche Region. Sie enthält nach wie vor die Schaltflächen des Formulars.

Layout für die Tab-Reiter-Regionen festlegen

Geben Sie bei den Seiten-Attributen folgendes im Feld "Header Text/ Kopfzeilentext" ein: 

<style type="text/css">
 div.tomTabbedRegion {
  border:2px outset #CCC;
  position:absolute;
  top:150px;
  left:25px;
  width:900px;
  height:350px;
  background-color:#FFF;
 }
 div.tomReiter {
  border-bottom:1px solid #CCC;
 }
 div.tomTabbedRegion .tomTabbedRegionbody {
  padding:5px;
 }

 div.tomReiter a {margin-left:2px;margin-right:10px;}
</style>
Die o.g. CSS-Layoutangaben bewirken in den Tab-Reiter-Regionen folgendes:
StyleBeschreibung
border:2px outset #CCC Die Region wird mit einem 3D-Rahmen dargestellt
position:absolute Die Region wird absolut zum Rand des Windows positioniert
top:150px/ left:25px Die obere linke Ecke der Region wird 150px vom oberen Rand und 25 px vom linken Rand des Windows dargestellt.
width:900px Die Region hat eine Breite von 900px
height:350px Die Region hat eine Höhe von 350px
background-color:#FFF Die Region hat einen weißen Hintergrund
Ändern Sie die Angaben für "top", "left", "width" und "height" entsprechend Ihren Vorstellungen.

JavaScript-Funktionen erfassen

Geben Sie bei den Seiten-Attributen folgendes im Feld "Footer" ein: 

<script type="text/javascript">
<!--
 var reiter = '';
 for(var i = 1; i <= tabreiter.length-1; i++) {
  reiter += '<a id="' + tabreiter[i][0] + '_' + 'link' + i + '" ';
  reiter += 'href="javascript:aktiviere(\'' + tabreiter[i][0] + '\',';
  reiter += '\'link' + i + '\');">';
  reiter += tabreiter[i][1] + '</a>';
  document.getElementById(tabreiter[i][0]).style.visibility = 'hidden';
 }
 x = x+1;
 document.getElementById(tabreiter[1][0]).style.zIndex = x;
 document.getElementById(tabreiter[1][0]+'_reiter').innerHTML = reiter;
 document.getElementById(tabreiter[1][0]+'_link1').style.backgroundColor = "#CCC";
 document.getElementById(tabreiter[1][0]).style.visibility = 'visible';
 document.getElementById('TAB_AKTIV').value = tabreiter[1][0];
//-->
</script>

Fügen Sie weiterhin folgendes im Feld "HTML-Header" ein: 

<script language="JavaScript" type="text/javascript">
<!--
 var tabreiter = new Array();
 var x=0;
 function aktiviere(p_region_id,p_link_id) {
  x = x+1;
  var p_region_alt = document.getElementById('TAB_AKTIV').value;
  document.getElementById(p_region_id).style.zIndex = x;
  document.getElementById(p_region_alt).style.visibility = 'hidden';
  document.getElementById(p_region_alt+'_reiter').innerHTML = ' ';
  document.getElementById(p_region_id+'_reiter').innerHTML = reiter;
  document.getElementById(p_region_id + '_' + p_link_id).style.backgroundColor = "#CCC";
  document.getElementById(p_region_id).style.visibility = 'visible';
  document.getElementById('TAB_AKTIV').value = p_region_id;

 }

//-->
</script>

Ausgeblendetes Element erstellen

Erstellen Sie in der ursprünglichen HTML-Region des Formulars das ausgeblendete (hidden) Element (Item) TAB_AKTIV

Höhe des Formulars festlegen

Falls Sie ein Theme/ Layout verwenden, das auf der Seite eine Fußleiste anzeigt (z.B. bei Theme 3), müssen Sie ggf. im Seitentemplate eine feste Höhe für den Content-Bereich setzen.

Bsp. Feld "Body" im Seitentemplate "One Level Tabs" von Theme 3: 

...
<table style="width:100%;height:450px;">
 <tr>
  <td class="t3PageBody">
   <div class="t3Messages" align="center">#GLOBAL_NOTIFICATION##NOTIFICATION_MESSAGE# #SUCCESS_MESSAGE#</div>
   #BOX_BODY##REGION_POSITION_02##REGION_POSITION_04##REGION_POSITION_05#
   #REGION_POSITION_06##REGION_POSITION_07##REGION_POSITION_08#
  </td>
  <td align="right" valign="top">#REGION_POSITION_03#</td>
 </tr>
</table>
...

Nun sind alle erforderlichen Schritte durchgeführt - Probieren Sie es aus!

Das Ergebnis

Abb.1: Das Ergebnis

Zurück zur Community-Seite