Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- prog:oracle_apex_show_runtime_enviroment_prd_tst [2018/03/21 21:59] – [CSS Style Sheet der Applikation anpassen] gpipperr
+++ prog:oracle_apex_show_runtime_enviroment_prd_tst [2018/03/21 22:09] (aktuell) – [Oracle Apex 5 - Die aktuelle Umgebung per Banner auf allen Seiten anzeigen] gpipperr
@@ Zeile 1: / Zeile 1: @@
+=====Oracle Apex 5 - Die aktuelle Umgebung per Banner auf allen Seiten anzeigen=====
+**Apex 5 unter Oracle 12c R1**
+**Aufgabe:**
+Banner einblenden um die Umgebung (TST/PRD) läuft eindeutig zu unterscheiden.
+Dazu sollten keine Einstellungen in der Applikation notwendig werden.die Apex App muss das selber merken.
+Das Deployment über den sehr weit entfernten und sehr unmotivierten outgesourcten Partner des, vom externen IT Dienstleister, outgesourcten Hosters möglichst zu erleichtern und überhaupt zu ermöglichen.
+Banner im Header von Apex um zu erkennen in welcher Umgebung wir sind:
+{{ :prog:apex:apex_enviroment_header.png | Banner im Header von Apex um zu erkennen in welcher Umgebung wir sind}}
+**Idee**:
+  * Globales Applikation Item anlegen um bei Start der Session die Umgebung zu hinterlegen
+  * Prozess auf Login Page erstellen um diese Variable zu füllen
+  * Global Page 0 erstellen und dort eine Region für das Banner erstellen, dieser Region "ohne alles" anlegen, diese Region mit einer Static ID und mit eigenen CSS Klassen je nach Umgebung dynamisch konfigurieren
+  * Stylesheet der Applikation anpassen
+Problem: Banner lässt sich nur im Kopf in der "Breadcrump Bar" Region anzeigen, ich hätte das aber gerne um eine Ebene höher im "Page Navigation" Bereich angezeigt. Mit dem Stylesheet können wir das DIV zwar innerhalb der der Region fixieren, aber nicht außerhalb, diese Region ist ja fest in die Apex Div Logig eingebunden.
+Mit etwas Java Script ließe sich das auch bestimmt anders wo hinschieben.
+**Alternativ**
+Alternativ ließe sich das ganze natürlich auch ganz in Java Script lösen, so bleiben wir aber mit wenig Aufwand nah am Standard von Apex, die Wartung sollte dadurch so einfach wie möglich werden.
+Etwas schöner wird es noch wenn selber ein DIV mit den entsprechenden Klassen im Template der Page hinterlegt wird, dann lässt sich das besser im Kopf der Seite positionieren, bei einen Apex Upgrade besteht aber das Risiko selber wieder das eigene zentrale Template auf das neue Release anzupassen.
+----
+==== Umsetzung ====
+=== Applikation Item anlegen==
+Unter Application 500 \ Shared Components \ Application Items anlegen
+  * GLOBAL_ENV_CLASS
+  * GLOBAL_ENV_NAME
+----
+=== Process auf Login Page ===
+Applications > 500 - GPI_ADMIN > Pages > 2 - Login Page > Processes > GET_ENV
+<code plsql>
+declare
+v_http_host varchar2(2000):=OWA_UTIL.GET_CGI_ENV(param_name => 'HTTP_HOST');
+v_env       varchar2(2000):='UNKOWN';
+v_class     varchar2(2000):='DEV';
+begin
+     v_env:='UNKOWN - set the name of the apex host in the page 2';
+     v_class:='DEV';
+     if instr(v_http_host,'gpid') > 0          then  v_env:='GPI Development';    v_class:='DEV';  end if;
+     if instr(v_http_host,'gpit') > 0          then  v_env:='GPI Test';           v_class:='TEST'; end if;
+     if instr(v_http_host,'gpip') > 0          then  v_env:='GPI Production';     v_class:='PROD'; end if;
+    :GLOBAL_ENV_NAME := v_env;
+    :GLOBAL_ENV_CLASS:= v_class;
+end;
+</code>
+----
+=== Globale Seite 0 ===
+Über den Page Wizard und über das Template "Global Page" die Seite 0 anlegen.
+Alles auf der Seite 0 wird auf jeder Apex Seite in der gesamten Applikation angezeigt
+----
+=== Region für das Banner auf Page 0 ===
+Region anlegen:
+  * Titel: Enviroment
+  * Type: Static Content
+  * Text: &GLOBAL_ENV_NAME.
+  * Template: Blank with no Attibute
+  * CSS Classes: RUNTIME_ENVIRONMENT_&GLOBAL_ENV_CLASS. RUNTIME_ENVIRONMENT
+  * Statik ID: RUNTIME_ENVIRONMENT_FLAG
+  * Comments: Global Value set by Process get_env on the login page
+In "CSS Classes" auf das Leerzeichen zwischen den Klassen achten!
+Über die Referenzierung mit &GLOBAL_ENV_CLASS. wird der Klassenname auf die jeweilige Umgebung angepasst.
+Die Statik ID kann dann bei Bedarf verwendet werden um das ganze noch mit JavaScript zu hübschen.
+----
+=== CSS Style Sheet der Applikation anpassen===
+Für jede Umgebung ist ein Style hinterlegt, die gemeinsamen Eigenschaften sind über die Klasse  RUNTIME_ENVIRONMENT  definiert.
+Über den Theme Roller "Custom CSS" hinterlegen
+<code css>
+.RUNTIME_ENVIRONMENT {
+        border: 1px solid  #ffffcc;
+        position: absolute;
+                  left: 30em;
+        top:     5px;
+        width: 250px;
+        height: 30px;
+        padding: 5px;
+        text-align: center;
+        vertical-align: middle;
+}
+.RUNTIME_ENVIRONMENT_PROD:before {
+	font-family: font-apex!important;
+	top:0;
+	left:-5px;
+	padding-right:10px;
+	font-size: 2rem;
+	content: "\f164";
+}
+.RUNTIME_ENVIRONMENT_PROD {
+	   background-color:  #009933;
+	   color: #ffffcc;
+}
+.RUNTIME_ENVIRONMENT_TEST:before {
+	font-family: font-apex!important;
+	top:0;
+	left:-5px;
+	padding-right:10px;
+	font-size: 2rem;
+	content: "\eaf1";
+}
+.RUNTIME_ENVIRONMENT_TEST {
+	 background-color: #e6f7ff;
+	 color: #663300;
+}
+.RUNTIME_ENVIRONMENT_DEV:before {
+	font-family: font-apex!important;
+	top:0;
+	left:-5px;
+	padding-right:10px;
+	font-size: 2rem;
+	content: "\1f60e";
+}
+.RUNTIME_ENVIRONMENT_DEV  {
+   background-color:  #ffcc00;
+   color:000099
+}
+</code>
+Passende Icons über https://apex.oracle.com/pls/apex/f?p=42:icons heraussuchen, die content Values über die Developer Tools von Chrome ermitteln
+----
+==== Quellen ====
+Icons:
+  * https://apex.oracle.com/pls/apex/f?p=42:icons
+Oracle OWA_UTIL
+  * https://docs.oracle.com/database/121/ARPLS/w_util.htm#ARPLS397