prog:apex_classic_report_use_alert_card_layout
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende Überarbeitung | ||
prog:apex_classic_report_use_alert_card_layout [2016/10/07 22:40] – [Timeline Layout] gpipperr | prog:apex_classic_report_use_alert_card_layout [2016/10/11 09:45] (aktuell) – [CSS Klassen anpassen] gpipperr | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | =====Oracle Apex 5 - Mit CSS Alert Layout vom Classic Report anpassen===== | ||
+ | **Apex 5 - 10.2016** => [[prog: | ||
+ | |||
+ | |||
+ | |||
+ | 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 " | ||
+ | |||
+ | SQL mit den richtigen Namen für die Ergebnisspalten anlegen: | ||
+ | < | ||
+ | select to_char(news_date,' | ||
+ | , news_message | ||
+ | , null as ALERT_ACTION | ||
+ | from v_page_1_last_news | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | === CSS Template auswählen === | ||
+ | |||
+ | |||
+ | Region Attributes auswählen und unter " | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | === CSS Klassen anpassen === | ||
+ | Um die Farben und das Icon am Anfang der Meldung anzupassen folgende CSS Klassen in der Seite hinterlegt: | ||
+ | <code css> | ||
+ | div.t-Alert-wrap { | ||
+ | background-color: | ||
+ | } | ||
+ | div.t-Alert-icon { | ||
+ | background-color: | ||
+ | } | ||
+ | .t-Alert-icon: | ||
+ | font-family: | ||
+ | top: | ||
+ | left: | ||
+ | padding-right: | ||
+ | font-size: 4rem; | ||
+ | content: " | ||
+ | } | ||
+ | .t-Alert--horizontal .t-Alert-body{ | ||
+ | font-size: 2.5rem; | ||
+ | color: red; | ||
+ | } | ||
+ | .t-Alert--horizontal .t-Alert-title{ | ||
+ | font-size: 1.6rem; | ||
+ | font-weight: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | 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, | ||
+ | |||
+ | Daher den Style dann aus dem globalen Template als < | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== 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,' | ||
+ | , news_message | ||
+ | , 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: | ||
+ | <code sql> | ||
+ | select to_char(news_date,' | ||
+ | from v_page_1_last_news | ||
+ | </ | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Comments Layout === | ||
+ | |||
+ | |||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | |||
+ | Entsprechend den Platzhaltern das SQL anpassen | ||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Timeline Layout === | ||
+ | |||
+ | |||
+ | {{ : | ||
+ | |||
+ | Entsprechend den Platzhaltern das SQL anpassen | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Search | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | Entsprechend den Platzhaltern das SQL anpassen | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | === Value Attribute Pairs - Row und Pairs - Columns === | ||
+ | |||
+ | |||
+ | Pair - Rows | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | Pair - Columns | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | |||
+ | |||
+ | ---- | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Quellen ==== | ||
+ | |||
+ | font-awesome CSS Codes : | ||
+ | |||
+ | * https:// | ||
+ | * http:// |
prog/apex_classic_report_use_alert_card_layout.txt · Zuletzt geändert: 2016/10/11 09:45 von gpipperr