Inhaltsverzeichnis
Oracle Apex 5 - Mit CSS Alert Layout vom Classic Report anpassen
Apex 5 - 10.2016 ⇒ Zurück zur Übersicht Apex 5
Aufgabe: Auf der Startseite einer Applikation sollen Hinweise eingeblendet werden
So sieht das dann am Ende aus:
SQL Statement mit den richtigen Ergebnisspalten hinterlegen
Region anlegen mit dem Typ „Classic Report“
SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
select to_char(news_date,'dd.mm.yyyy') as ALERT_TITLE , news_message as ALERT_DESC , null as ALERT_ACTION from v_page_1_last_news
CSS Template auswählen
Region Attributes auswählen und unter „Layout/Apperance“ Template Type „Theme“ und Template „Alerts“ einstellen
CSS Klassen anpassen
Um die Farben und das Icon am Anfang der Meldung anzupassen folgende CSS Klassen in der Seite hinterlegt:
div.t-Alert-wrap { background-color: #e6f7ff; } div.t-Alert-icon { background-color: #ffcc00; } .t-Alert-icon:before { font-family: FontAwesome; top:0; left:-5px; padding-right:10px; font-size: 4rem; content: "\f11e"; } .t-Alert--horizontal .t-Alert-body{ font-size: 2.5rem; color: red; } .t-Alert--horizontal .t-Alert-title{ font-size: 1.6rem; font-weight: bold; }
Zuerst habe ich die passenden Klassen mit Hilfe des Theme Rollers und dem Developer Tool im Chrome Brower entworfen.
Im Globalen Template ist das dann aber etwas unpraktisch, ALLE anderen Alert werden dann auch so dargestellt und das passt bei der Anwendung dann nicht.
Daher den Style dann aus dem globalen Template als <style> Block im der „Page\CSS\Inline“ hinterlegt.
Weitere Classic Report Layout im Default von Apex 5
Interessant ist auch die weiteren Layout , die es erlauben statt einem tabellarischen Bericht eine Anzeige mit einzelnen Karten Elemente zu erzeugen. Diese lassen sich dann mit CSS Klassen wieder je nach Geschmack anpassen.
Card Layout
Entsprechend den Platzhaltern das SQL anpassen
SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
select to_char(news_date,'dd.mm.yyyy') as CART_TITLE , news_message as CART_TEXT , null as CART_SUBTEXT from v_page_1_last_news
Mit den Template Optionen kann dann noch ausgewählt werden wieviele Karten nebeneinander dargestellt werden sollen
Badge Layout
Kreise mit Wert darstellen, Beschriftung ist der Spaltenname
Entsprechend den Platzhaltern das SQL anpassen
SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
SELECT to_char(news_date,'MMDD') AS Spalten_Name FROM v_page_1_last_news
Comments Layout
Timeline Layout
Search Result Layout
Value Attribute Pairs - Row und Pairs - Columns
Quellen
font-awesome CSS Codes :