Kategorien
Kleine Tipps

Höhe eines Shuttle-Items dynamisch anpassen

Folgender Code passt die Höhe eines Shuttle-Items dynamisch an das Browser-Fenster an. Ich benötige das in einer Applikation, um ein Shuttle mit vielen Elementen möglichst groß zu gestalten, ohne das ein Scrollbalken auf der rechten Seite des Browsers erscheint. (UX: Mehrfache Scrollbalken — hier im Shuttle als auch im Browserfenster — sind unerwünscht.)

apex.jQuery(window).on('apexwindowresized', function() {
    console.log('Window resized.');
    if ($("body").hasClass("js-regionIsMaximized")) {
        $('select#P1_SHUTTLE_LEFT').height(window.innerHeight-165);
        $('select#P1_SHUTTLE_RIGHT').height(window.innerHeight-165);
    } else {
        $('select#P1_SHUTTLE_LEFT').height(window.innerHeight-340);
        $('select#P1_SHUTTLE_RIGHT').height(window.innerHeight-340);
    }
});

Der Trigger „apexwindowresized“ reagiert sowohl auf die Größenveränderung des Browser-Fensters, als auch auf das Maximieren und Wiederherstellen von Regionen (aktivierbar per Template Option „Show Maximize Button“).
In meinem Beispiel heißt das Item P1_SHUTTLE. Da das Shuttle aus zwei Select-Listen (…_LEFT und …_RIGHT) besteht, müssen wir beide in der Größe verändern.
Um die Höhe auszurechnen, ziehe eine bestimmte Pixelhöhe von der Fensterhöhe ab (window.innerHeight-340). Die 340 Pixel hab ich durch ausprobieren bestimmt. Dieser Wert ist je nach Seitenlayout anzupassen.
Falls die Region maximiert wurde (das Body-Tag besitzt die CSS-Klasse „js-regionIsMaximized“), wird eine noch größere Höhe für das Shuttle gesetzt.

Das funktioniert schon fast so wie gewünscht. Nur das erste mal nach dem Laden der Seite funktioniert das noch nicht. Die Höhe wird in diesem Fall schon berechnet, bevor die Region maximiert wurde. Beim zweiten Maximieren wird komischerweise „apexwindowresized“ 2x ausgeführt. Das Problem habe ich dank Stack Overflow folgendermaßen gelöst:

var rtime;
var timeout = false;
var delta = 200;

apex.jQuery(window).on('apexwindowresized', function() {
    console.log('Window resized.');
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        console.log('Done resizing.');
        if ($("body").hasClass("js-regionIsMaximized")) {
            $('select#P1_SHUTTLE_LEFT').height(window.innerHeight-165);
            $('select#P1_SHUTTLE_RIGHT').height(window.innerHeight-165);
        } else {
            $('select#P1_SHUTTLE_LEFT').height(window.innerHeight-340);
            $('select#P1_SHUTTLE_RIGHT').height(window.innerHeight-340);
        }
    }               
}
Kategorien
Allgemein Kleine Tipps

RegEx für Mail-Adressen

Zur Validierung von E-Mail-Adressen verwende ich seit kurzem folgende Regular Expression:

^[a-zA-Z0-9]{1}[a-zA-Z0-9_+\.\-]{1,}@[a-zA-Z0-9]{1}[a-zA-Z0-9\.\-]{1,}\.{1}[a-zA-Z]{2,4}$

(Ich schreibe diesen Tipp vor allem für mich, damit ich beim nächsten mal nicht lange suchen muss. ^^)

Kategorien
Allgemein Kleine Tipps

APEX 5.1: Icons auf Font APEX umstellen

Mit Oracle APEX 5.1 wird eine neue Icon-Sammlung „Font APEX“ mitgeliefert.  Diese sehen nicht nur schöner aus, sondern bieten auch mehr Icons als das bisherige „Font Awesome 4.2“. Wer von Font Awesome auf Font APEX umstellen will, geht folgenden Weg:

Shared Components \ Themes \ Edit Theme \ Icons \ Library

Kategorien
Kleine Tipps

Checkbox-Label per CSS korrigieren

Fast jede Anwendung benötigt Checkboxen.  In APEX gibt es allerdings eine kleine „Unschönheit“, wenn man Labels neben den Checkboxen verwendet.

Kategorien
Kleine Tipps

IR: Alternativen Report per URL auswählen

Ein beliebtes Feature vom Interactive Report sind die alternativen Standardreports, zusätzlich zum Hauptreport. Ich wurde vor kurzem gefragt, ob man einen alternativen Report auch per URL setzen kann.

Wir sprechen hier von APEX, ‚türlich kann man das. ;-)Der Link muss nur folgendes Format haben:

f?p=&APP_ID.:2:&APP_SESSION.:IR[customer_ir]_12345
Kategorien
Kleine Tipps

Theme Style kopieren

Ein Theme Style zu übertragen ist nicht so einfach. Hier mein übliches Vorgehen:

Kategorien
Kleine Tipps

Buttons mit Confirm-Message in Report einbauen

Links in Reports zu erstellen, ist in Oracle APEX denkbar einfach. Auch Font-Awesome-Icons lassen sind dabei verwenden, wie Tobias gezeigt hat.

Individuelle Buttons zum Kopieren oder Löschen von einzelnen Zeilen lassen sich damit ganz fix erstellen. Aktionen wie Löschen sollten vom Benutzer allerdings vorher bestätigt werden.

Und wie mache ich das am geschicktesten?

Kategorien
Allgemein Kleine Tipps

Ist Benutzer angemeldet als Entwickler?

Manchmal muss man wissen, ob der angemeldete Applikations-Benutzer  auch als Entwickler im Workspace angemeldet ist. Das kann man über die undokumentierte PL/SQL-Funktion apex_application.g_edit_cookie_session_id herausfinden.

Die Funktion gibt uns die ID der Workspace-Session zurück. (Im Gegensatz zur Funktion apex_application.g_cookie_session_id bzw. zum Substitution String :APP_SESSION, die uns die Session ID der Anwendung zurück geben.)

Dieser Tipp wurde vor längerer Zeit schon von Patrick Wolf gepostet.

http://www.inside-oracle-apex.com/is-my-application-running-in-developer-mode/

Weil ich nicht mit Google-Skills, sondern erst durch Zufall wieder auf diesen Beitrag gestoßen bin, erwähne ich es hier noch einmal.

Mit der Workspace-Session-ID kann man übrigens auch weitere interessante Sachen anstellen. Unter anderem ist damit ein Deep Link zum Workspace möglich und man kann z.B. eine bestimmte Stelle im Page Designer verklinken. Derartige Links sind ohne gültige Session nicht möglich, denn man landet nach dem Login immer auf der Startseite des Workspaces.

Übrigens: Wenn man wissen möchte, ob der angemeldete Benutzer prinzipiell Workspace-Rechte besitzt, auch wenn die Seite nicht im Developer Mode läuft, dann hilft sicher mein Tipp „Feststellen ob Benutzer APEX-Developer ist“.

Kategorien
Allgemein Kleine Tipps

Classic Report über gesamte Breite strecken

Update:

Ich habe irgendwann durch Zufall gesehen, dass man auch auf deklarativem Weg einen Classic Report über die ganze Region strecken kann. Einfach den Haken setzen unter Classic-Report >> Attributes >> Template Options >> Stretch Report.

Das ist natürlich besser (!), weil deklarativ, weil Standard und für spätere APEX-Updates wartungsfrei.

Kategorien
Kleine Tipps

Universal Theme: Den Abstand zwischen Formular-Elementen verringern

Update vom 3. April 2017:

Seit APEX 5.1 kann man die Abstände zwischen den Items auch deklarativ in 3 Stufen einstellen. Nun sogar mit dem neu eingeführten Live Template Options direkt am User Interface.


Das Universal Theme geht ja bekanntermaßen recht großzügig mit dem vorhandenen Platz auf dem Bildschirm um. Zwischen Regionen und Formularelementen sind standardmäßig große Abstände definiert. Mir gefällt das gut.

Wer allerdings möglichst viele Eingabefelder auf seinem Bildschirm unterbringen möchte, dem hilft vielleicht dieser kleine Tipp.