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).

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)";

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';

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.