Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_classic_report_use_alert_card_layout

Oracle Apex 5 - Mit CSS Alert Layout vom Classic Report anpassen

Apex 5 - 10.2016Zurück zur Übersicht Apex 5

Aufgabe: Auf der Startseite einer Applikation sollen Hinweise eingeblendet werden

So sieht das dann am Ende aus:

 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:

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

 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:

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

 Classic Report 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

 Classic Report Card Badget Layout

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

 Classic Report Card Comments layout

Entsprechend den Platzhaltern das SQL anpassen


Timeline Layout

 Classic Report TimeLine layout

Entsprechend den Platzhaltern das SQL anpassen


Search Result Layout

 Classic Report Search  Result layout

Entsprechend den Platzhaltern das SQL anpassen


Value Attribute Pairs - Row und Pairs - Columns

Pair - Rows

 Apex Classic Report Value Attribute Pairs Rows

Pair - Columns

 Apex Classic Report Value Attribute Columns Rows


Quellen

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
"Autor: Gunther Pipperr"
prog/apex_classic_report_use_alert_card_layout.txt · Zuletzt geändert: 2016/10/11 09:45 von Gunther Pippèrr