Tipps & Tricks - Seiteninhalte mit JavaScript aktualisieren

1. Allgemeines

Wenn Sie etwas Programmiererfahrung haben, zeigt Ihnen dieser Beitrag, wie Sie mit wenig Aufwand ganz gezielt Inhalte einer Seite austauschen können. Dabei wird auf die unterschiedlichen Kontrolltypen in Intrexx eingegangen. In der Beispielapplikation, die Sie hier herunterladen und wie gewohnt in Ihr Portal importieren können, sind alle Beispiele dieser Dokumentation enthalten.

2. Einführung

Oft gibt es die Anforderung, dass Teile einer Seite - z.B. eine oder mehrere Tabellen - aktualisiert werden sollen. Insbesondere ist dies der Fall, wenn es sich um Inhalte handelt, die eine automatische Aktualisierung erforderlich machen, da z.B. eine Änderung der Daten über einen Prozess erfolgt und der Benutzer zeitnah darauf hingewiesen werden soll. und viele Anwendungsfälle mehr. Diese Funktion wird benötigt, wenn das Portal nicht direkt durch Mitarbeiter bedient wird, sondern ein gut sichtbarer Screen automatisch aktualisiert werden muss. Oft gehen Entwickler so vor, dass sie in derartigen Fällen die gesamte anzuzeigende Seite mit allen sichtbaren Elementen neu laden. Dies erhöht aber unnötig die Last auf den Server, da ja nicht immer Inhalte aktualisiert werden müssen. Viele Vorgänge dieser Art können zu erhöhten Ladezeiten führen.

3. Ansichtstabellen und Frei gestaltete Tabellen

Intrexx bietet eine einfache Möglichkeit Ansichtstabellen und Frei gestaltete Tabellen neu zu laden. Mit diesem Mechanismus werden nicht nur die Daten neu geladen, sondern auch alle Einstellungen der Tabelle wie z.B. Filter, Abhängigkeitsfilter, Paging und Sortierung beibehalten. Beachten Sie bitte, dass der Wert "<GUID der Tabelle>" durch die entsprechende GUID des gewünschten Elementes ausgetauscht werden muss.
/**
* Lädt eine Tabelle neu
* @method loadTable
*/
function loadTable()
{
    getElement("<GUID der Tabelle>").oUp.reload();

    return true;
}

/**
* Lädt Frei gestaltete Tabelle neu
* @method loadShapedTable
*/
function loadShapedTable()
{
     getElement("<GUID der Tabelle>").oUp.reload();

     return true;
}

4. Diagramme

Wie die Tabellen werden auch bei Diagrammen entsprechend nicht nur die Daten neu geladen, sondern auch alle Einstellungen des Diagrammes wie z.B. Filter, Abhängigkeitsfilter und Sortierung beibehalten. Beachten Sie bitte, dass der Wert "<GUID des Diagrammes>" durch die entsprechende GUID des gewünschten Elementes ausgetauscht werden muss.
/**
* Lädt ein Chart neu
* @method loadChart
*/
function loadChart()
{
    getElement("<GUID des Diagrammes>").oUp.reload();

    return true;
}

5. Tachometer

Auch bei Tachokontrollen können die Werte mit Javascript aktualisiert werden. Diese Funktionalität steht Ihnen ab dem Online Update 11 für Intrexx 8 zur Verfügung. Beachten Sie bitte, dass der Wert "<GUID des Tachos>" durch die entsprechende GUID des gewünschten Elementes ausgetauscht werden muss.
/*
* Lädt den Tacho neu, wenn dieser die Daten über die Kontrolle selbst bezieht
*/

function gauge() {
  var gauge = getElement("<GUID des Tachos>").oUp;
  gauge.reloadData(getElement("<GUID des Tachos>"), {animated:true});
  return;
}

/*
* Lädt den Tacho neu, wenn dieser die Daten über eine JavaScript-Funktion bezieht
*/
function gaugeJs() {
  var gauge = getElement("<GUID des Tachos>").oUp;
  var data = [{
    "animated": true,
    "gaugeValue": 20,
    "gaugeDisplayValue": 20,
    "gaugeDescr": "Lorem ipsum",
    "gaugeMinVal": 0,
    "gaugeMaxVal": 100,
    "gaugeValDescr": "%",
    "bands": gauge.options.axes[0].bands
  }];
  gauge.reloadDataJS(data);
  return;
}

6. Inhalte einzelner Container aus einem eigenen Velocity-Template nachladen

Dieses Beispiel ist etwas komplexer – dafür bietet es eine sehr gute Möglichkeit, komplett individuelle Inhalte in eine Seite einzubetten und zu aktualisieren. In der Beispiel-Applikation wird eine individuelle Datenbankabfrage auf den Datenbestand ausgeführt. Das Objekt "upSimpleAjaxContainer" steht immer in Intrexx zur Verfügung, um eine bestimmte Datei in einer Gruppierung anzuzeigen. Bitte beachten Sie: Folgende Werte sind dabei wichtig:
$('div[id=ID_myContainer]')[0]
In diesem Beispiel wurde hier das HTML-Attribut "id" der Gruppierung verwendet, in der der Inhalt geladen werden soll. Sie können natürlich mit der Standard-Funktion getElement("<GUID der Gruppierung>") das identische Ergebnis erzielen.
oRqParams:{}
Hier können Sie gezielt Werte an Ihr Velocity-Template übergeben. Diese Werte werden in einer JSON-Struktur übergeben (z.B. oRqParams:{myParam1:"value1", myParam2:"value2"}).

Beim Aufruf der Funktion "loadAppSnippetVm" sind folgende Parameter interessant:

Pfad auf die Datei: Im Beispiel wird ein Velocity-Template aus dem Applikationspaket verwendet. Der Pfad wird entsprechend in der Form "internal/application/resource/<GUID der Applikation>/<Dateiname>" angegeben.

{} : Request parameter, z.B. {rq_myParam1:"value1", rq_myParam2:"value2"}
{} : Form parameter to, z.B. {myParam1:"value1", myParam2:"value2"}
/**
* Lädt ein Velocity-Template in eine Gruppierung
* @method loadContainer
*/
function loadContainer()
{
	
var l_oSC  = new upSimpleAjaxContainer($('div[id=ID_myContainer]')[0], {oRqParams:{}});
l_oSC.oFup = ContainerAgent.getFuncPart($('div[id=ID_myContainer]')[0]);

	l_oSC.loadAppSnippetVm("internal/application/resource/1141ED6364F3A52C111D803D7EFC2B490153BCF9/container.vm", {}, {}, {rq_xhrReload:"1"});

return;

}

7. Applikationsseite in einer Gruppierung nachladen

Seit Intrexx 8 werden die sogenannten Embedded Tooltips unterstützt. Diese Funktionalität erlaubt es, eine Seite aus einer Intrexx-Applikation in eine Gruppierung einer Seite zu laden. Auch hier kann es sinnvoll sein, diese Seite dynamisch zu aktualisieren. Es kann auch interessant sein, je nach Nutzerverhalten unterschiedliche Seiten an der identischen Stelle in der Applikation anzuzeigen. In der Beispiel-Applikation wird eine Seite mit einer Ansichtstabelle in eine Gruppierung geladen. Bitte beachten Sie:
/**
* Lädt eine Tachokontrolle neu
* @method loadTooltip
*/
function loadTooltip()
{
    ix.loader.tooltip({
                    ixApp: {
                         guid: '<GUID der Applikation>',
                         pageGuid: '<GUID der Zielseite>',
                         recId: '-1'                        
                            },
                    data: { rq_meinParameter: "1234"},
                    windowSettings: {
                         position: 'embedded',
                         htmlTarget: $('div[id=ID_myTooltip]')[0],
                         title:'',
                         closeByButton:false,
                         closeByEsc:false,
                         key:'openTTP'
                        },
                   });
}

8. Einzelnes Portlet auf einer Portalseite nachladen

Soll ein einzelnes Portlet nachgeladen werden, gibt es auch dafür eine Basisfunktionalität von Intrexx. Allerdings muss beachtet werden, dass Sie in der Beispielapplikation zunächst das Portlet auf der Portalseite hinzufügen müssen. Wenn Sie diese Funktion nützen möchten, benötigen Sie die GUID des Portlets, das aktualisiert werden soll. Die GUID kann mit der Taste F4 ermittelt werden, wenn die Portalkontrolle selektiert ist. Damit wird die XML-Ansicht der Kontrolle geöffnet. Dort finden Sie die GUID des Portlets.



Auch Portlets können mit Javascript aktualisiert werden. Beachten Sie bitte, dass der Wert "<GUID des Portlets>" durch die entsprechende GUID des gewünschten Elementes ausgetauscht werden muss.
/**
* Lädt ein einzelnes Portlet neu
* @method loadPortlet
*/
function loadPortlet()
{
   g_Portal.getPortlet("<GUID des Portlets>").reload()
   
   return;
}

9. Abschließende Hinweise

An vielen Stellen werden die GUIDs von Elementen benötigt. Dazu bietet Ihnen der Intrexx-Script-Editor immer die Möglichkeit, auf die gesamte Applikationsstruktur zuzugreifen und die GUID an der entsprechenden Stelle einzufügen. Bitte beachten Sie, dass alle Schritte in den Beispieldateien bereits umgesetzt sind und Sie daher nicht jedes Wort abtippen müssen. Wir wünschen Ihnen viel Spaß und hoffen, dass dieser Tipp Ihnen von Nutzen sein wird.