APEX: Interactive Grid - Spaltengrupppen und einfärben

Zum individuellen Einfärben eines Interactive Grids (IG) bieten sich die Möglichkeiten von CSS an.

Zum Färben eines konkreten IG bekommt dieses zur Identifikation eine Static_ID:
Advanced / Static ID: Px_IG

Sollen alle IGs identisch gefärbt werden, kann dieser Step entfallen.

Im CSS sind mehreren Ebenen des IG zu behandeln:

  • Header-Gruppe
  • Header
  • Spalten - allgemein
  • Spalten - readonly

Seiten-Ebene

Die wesentlichen Definitionen werden auf Seiten-Ebene als Inline-CSS festgelegt:
PageX (oberster Knoten) / CSS / Inline

/* Spaltengruppen */ #P4_IG .a-GV-headerGroup[data-idx="1"] { background-color: khaki; } /* Edit-Modus: nichtänderbarer Text trotzdem in schwarz (= besser lesber) eigentlich: ALLE Zellen mit Textfarbe schwarz */ #P4_IG .a-GV-cell { color: black; } /* Farbschema-Gruppe 1 - zum Einfärben bestimmter Spalten */ #P4_IG .fs_grp1 { background-color: khaki; } /* Edit-Modus: Hintergrundfarbe für den änderbaren Text */ #P4_IG .fs_grp_edit { background-color: lightyellow; }

Die Spaltengruppen werden hier direkt über [data-idx="x"] adressiert, da es nur wenige geben sollte.
#P4_IG .a-GV-cell legt die Farbe für ALLE Zellen fest. Damit wird verhindert, dass nicht-änderbare Zellen ausgegraut dargestellt werden.
#P4_IG .fs_grp1 definiert die Eigenschaften, die unten den Zellen und Spaltenköpfen zugewiesen werden.
#P4_IG .fs_grp_edit passt die Hintergrundfarbe für die änderbaren Felder an, damit diese besser zum gesmten Farbschema passen.

Spalten-Ebene

Auf Spaltenebene sind für Spalte und Kopf getrennte definitionen vorzugeben.

Festlegung für Spalten-Kopf:
- Spalte / Spaltengruppe markieren
- Advanced / JavaScript Initialization Code

function(config) {
    config.defaultGridColumnOptions = {
        headingCssClasses: "fs_grp1"
    }
    return config;
}

Für die Kopfzeile muss leider eine JavaScript-Funktion genutzt werden. Im Gegensatz zu den Zellen ist hier keine deklarative Zuweisung möglich.

Festlegung für Spalten-Zellen:
- Spalte / Spaltengruppe markieren
- Appearance / CSS Classes: fs_grp1
Die Zuweisung zu den Spalten erfolgt deklarativ.

Quelle u.a.: https://community.oracle.com/tech/developers/discussion/comment/14920914/#Comment_14920914

Kommentare

Beliebte Posts aus diesem Blog

PGA unter Oracle 11g

trunc(sysdate) - nette Spiele mit dem Datum

Datapump - Verzeichnis erstellen