APEX: Regions per Checkbox ein/ausblenden

Heute stand ich vor der Aufgabe, abhängig dem Status von 3 Checkboxen, entsprechend 3 Regions ein/auszublenden. Der Anwender soll nur die Eingabefelder, in den passenden Regions, angezeigt bekommen, für die er sich per Checkbox entschieden hat.

Als erstes habe ich die 3 Regions (TEST, TEST2, TEST3) angelegt. Wichtig ist, in den Eigenschaften jeder Region einen Bezeichner (STATIC ID) zu vergeben, damit man mit JavaScript darauf zugreifen kann (siehe Bild).

Bild1

Die Bezeichner für jede Region entsprechend anpassen (TEST2, TEST3).

 

Jetzt werden 3 Checkboxen angelegt, deren Eigenschaft “HTML Form Element Attributes” folgenden Eintrag erhält:

1
onClick="javascript:showhide('TEST', this)";
Bild2 

Und auch hier wieder die Eigenschaft der Region entsprechend anpassen (TEST2, TEST3).

In den Eigenschaften der Page, im Bereich HTML Body Attributes wird jetzt der onload-Code eingetragen. Damit werden die Regions beim Aufruf der Seite erstmal versteckt.

1
2
3
document.getElementById('TEST').style.display = 'none';
document.getElementById('TEST2').style.display = 'none';
document.getElementById('TEST3').style.display = 'none';

Bild3

Der JavaScript-Code, der die Regions bei onClick der Checkboxen ein/ausblendet, wird ebenfalls in die Page Attributes eingetragen. Der passende Platz ist “Header and Footer/Header Text”. Man könnte den JavaScript-Code auch in eine Datei auslagern und im Template laden. Das kann jeder selbst entscheiden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script type="text/javascript">
function showhide(x,y){
 
switch (x)
  {
  case "TEST":
        if (y.checked)
        {
          $x('TEST').style.display = 'block';
        }
        else
        {
          $x('TEST').style.display = 'none';
        }
        break;
  case "TEST2":
        if (y.checked)
        {
          $x('TEST2').style.display = 'block';
        }
        else
        {
          $x('TEST2').style.display = 'none';
        }
        break;
  case "TEST3":
        if (y.checked)
        {
          $x('TEST3').style.display = 'block';
        }
        else
        {
          $x('TEST3').style.display = 'none';
        }
        break;
  default:        
        break;  
  }
}
</script>

Fertig ist eine Seite mit je 3 Regions/Checkboxen, die dynamisch ein/ausgeblendet werden.

Dieser Beitrag wurde unter APEX, Oracle abgelegt und mit verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.