Element-Hilfetexte direkt im Formular anzeigen ...

Hilfetext im Formular anzeigen...

von Thomas Fuhr, Oracle Consulting, mailto:Thomas[dot]Fuhr[at]oracle[dot]com

Dieser Beitrag widmet sich dem Thema Hilfetexte in Application Express-Formularen. Bisher kennen Sie die Möglichkeit, dass der Anwender durch Anklicken des Labels den Hilfetext zu einem Formularfeld in einem Popup-Window angezeigt bekommt - dies ist das Standard-Verhalten von Application Express.

Heute stellen wir Ihnen eine Variante vor, welche den Hilfetext direkt im Formular zur Anzeige bringen kann, wenn der Cursor im entsprechenden Formularfeld steht - man spart sich das Popup-Window.

Abbildung 1: Das Ziel: Hilfetexte im Formular rechts anzeigen

Der Tipp basiert auf den mit Application Express 3.0 eingeführten Data Dictionary Views. Daher läuft der Tipp auch nur mit Version 3.0 oder höher.

Erstellen Sie zunächst eine Anwendungsseite mit einem Formular; achten Sie dabei darauf, dass Hilfetexte bei den Formularelementen hinterlegt sind - es soll ja etwas angezeigt werden.

Abbildung 2: Hilfetexte bei den Elementeigenschaften bearbeiten

Navigieren Sie anschließend zu den Eigenschaften der Seite und dort zum Template für die Region mit dem Formular.

Abbildung 3: Das Template für die Formular-Region bearbeiten

Navigieren Sie zur Template-Definition und tragen Sie dort zu Beginn (vor dem HTML-Tag <table>) folgendes ein:

<div id="hilfe">&nbsp;</div>

Abbildung 4: "DIV-Container" für den Hilfetext ins Formular-Template aufnehmen

Speichern Sie das Template und navigieren Sie zur Bearbeitung des Seiten-Template.

Abbildung 5: Seiten-Template bearbeiten

Navigieren Sie in der Template-Definition zum Header und fügen Sie innerhalb der HTML-Tags <head> und </head> folgenden (CSS-)Code ein:

<style>
 #hilfe {
  display: none;
  float: right;
  width: 200px;
  color: #000000;
  background-color: yellow;
  border: 1px solid black;
  margin-right: 20px;
  padding: 5px;
 }

 #hilfe p {
  font-size:0.9em;
 }

 #hilfe span.tom-label{
  color: red; 
  font-weight: bold;
  margin-right:3px;
 }
</style>

Abbildung 6: CSS-Angaben ins Seiten-Template eintragen

Navigieren Sie nun zu den Eigenschaften der Seite, dort zum Seiten-Header und tragen Sie folgenden JavaScript-Code ein:

<script language="JavaScript" type="text/javascript">
<!--
 htmldb_delete_message='"DELETE_CONFIRM_MSG"';

 var app_id = '&APP_ID.';
 var app_page_id = '&APP_PAGE_ID.';

 function hideHelp() {
  document.getElementById("hilfe").innerHTML = "&nbsp;";
  document.getElementById("hilfe").style.display =  "none";
 }

 function showHelp(p_this){
  var l_id = p_this.id;
  var get = new htmldb_Get(null,app_id,'APPLICATION_PROCESS=get_Help',0);
  if(p_this.type == "radio") {
     l_id = l_id.substring(0,l_id.lastIndexOf("_"));
  }
  get.add('GBL_ITEM_NAME',l_id);
  get.add('GBL_APP_PAGE_ID',app_page_id);
  gReturn = get.get();
  if (gReturn){
   document.getElementById("hilfe").innerHTML = gReturn;
   document.getElementById("hilfe").style.display =  "block";
  }
  get = null;
 }

//-->
</script>

Navigieren Sie anschließend zu den Gemeinsamen Komponenten, dort zu den Anwendungselementen und erzeugen Sie zwei neue Elemente: GBL_APP_PAGE_ID und GBL_ITEM_NAME.

Abbildung 7: Anwendungselemente "GBL_APP_PAGE_ID" und "GBL_ITEM_NAME" erstellen

Erstellen Sie nun einen neuen Anwendungsprozeß mit Namen get_Help (achten Sie auf die Groß- und Kleinschreibung). Stellen Sie sicher, dass der Prozeß Bedarfsgesteuert (on Demand) ausgeführt wird und hinterlegen Sie folgenden PL/SQL Code.

DECLARE
  l_label          VARCHAR2(100);
  l_item_help_text VARCHAR2(4000);
BEGIN
  begin
   SELECT label, nvl(item_help_text, 'Keine Hilfe verfügbar.') item_help_text 
    INTO l_label, l_item_help_text 
   FROM apex_application_page_items
   WHERE application_id = v('APP_ID') AND
         page_id = :GBL_APP_PAGE_ID AND
         item_name = :GBL_ITEM_NAME;
   htp.p('<p><span class="tom-label">' || l_label || '</span><br />' || l_item_help_text || '</p>');
  exception 
    WHEN NO_DATA_FOUND Then 
      htp.p(
        '<p><span class="tom-label">' || 
        :GBL_ITEM_NAME || 
        '</span><br />Dieses Element existiert nicht.</p>'
      );
  end;
END;

Zum Abschluß müssen Sie die Hilfefunktion noch für die einzelnen Elemente aktivieren. Navigieren Sie in den Seitenattributen zu den Formularelementen, für die Sie die Hilfe aktivieren möchten, dort zum Bereich HTML-Form-Elementattribute und tragen Sie dort folgendes ein:

onFocus="javascript:showHelp(this);" onBlur="javascript:hideHelp();"

Fertig.

Starten Sie die Seite neu. Sobald sich der Cursor in einem der Formularfelder befindet, sehen Sie rechter Hand den hinterlegten Hilfetext.

Abbildung 8: Das Ergebnis: Automatisch eingeblendeter Hilfetext

Zurück zur Community-Seite