=====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/