Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_classic_report_use_alert_card_layout

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
prog:apex_classic_report_use_alert_card_layout [2016/10/07 22:40]
gpipperr [Badge Layout]
prog:apex_classic_report_use_alert_card_layout [2016/10/11 09:45] (aktuell)
gpipperr [CSS Klassen anpassen]
Zeile 1: Zeile 1:
 +=====Oracle Apex 5 - Mit CSS Alert Layout vom Classic Report anpassen=====
  
 +**Apex 5 - 10.2016** => [[prog:oracle_apex|Zurück zur Übersicht Apex 5]]
 +
 +
 +
 +Aufgabe: Auf der Startseite einer Applikation sollen Hinweise eingeblendet werden
 +
 +
 +So sieht das dann am Ende aus:
 +
 +{{ :prog:apex:apex_classic_report_alert_css_layout.png | Oracle Apex Classic Report Alert CSS Layout}}
 +
 +
 +
 +----
 +
 +===SQL Statement mit den richtigen Ergebnisspalten hinterlegen ===
 +
 +Region anlegen mit dem Typ "Classic Report"
 +
 +SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
 +<code>
 +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
 +</code>
 +
 +
 +----
 +
 +
 +=== CSS Template auswählen ===
 +
 +
 +Region Attributes auswählen und unter "Layout/Apperance" Template Type "Theme" und Template "Alerts" einstellen
 +
 +{{ :prog:apex:apex_classic_report_alert_set_template.png | Template Type für Classic Report auf Alert setzen}}
 +
 +
 +----
 +
 +
 +=== 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: #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;
 +}
 +</code>
 +
 +
 +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 <nowiki><style></nowiki> 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===
 +
 +{{ :prog:apex_classic_report_cart_layout.png | Classic Report Card Layout}}
 +
 +Entsprechend den Platzhaltern das SQL anpassen
 +
 +SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
 +<code>
 +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
 +</code>
 +
 +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
 +
 +
 +{{ :prog:apex:apex_classic_report_badge_layout.png | Classic Report Card Badget Layout }}
 +
 +Entsprechend den Platzhaltern das SQL anpassen
 +
 +SQL mit den richtigen Namen für die Ergebnisspalten anlegen:
 +<code sql>
 +select to_char(news_date,'MMDD') as Spalten_Name
 +from v_page_1_last_news     
 +</code>
 +
 +
 +----
 +
 +=== Comments Layout ===
 +
 +
 +
 +{{ :prog:apex:apex_classic_report_comments_layout.png | Classic Report Card Comments layout}}
 +
 +
 +
 +Entsprechend den Platzhaltern das SQL anpassen
 +
 +
 +----
 +
 +=== Timeline Layout ===
 +
 +
 +{{ :prog:apex:apex_classic_report_timeline_layout.png | Classic Report TimeLine layout }}
 +
 +Entsprechend den Platzhaltern das SQL anpassen
 +
 +
 +
 +----
 +
 +=== Search  Result Layout ===
 +
 +{{ :prog:apex:apex_classic_report_search_result_layout.png | Classic Report Search  Result layout }}
 +
 +Entsprechend den Platzhaltern das SQL anpassen
 +
 +
 +
 +----
 +
 +=== Value Attribute Pairs - Row und Pairs - Columns ===
 +
 +
 +Pair - Rows
 +
 +{{ :prog:apex:apex_classic_report_pair_rows_layout.png | Apex Classic Report Value Attribute Pairs Rows}}
 +
 +
 +Pair - Columns
 +
 +{{ :prog:apex:apex_classic_report_pair_columns_layout.png | Apex Classic Report Value Attribute Columns Rows }}
 +
 +
 +
 +----
 +
 +
 +
 +
 +==== Quellen ====
 +
 +font-awesome CSS Codes :
 +
 +  * https://astronautweb.co/snippet/font-awesome/
 +  * http://fontawesome.io/cheatsheet/
"Autor: Gunther Pipperr"
prog/apex_classic_report_use_alert_card_layout.txt · Zuletzt geändert: 2016/10/11 09:45 von gpipperr