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.
Andon-Board
Kanban-Board
Schwarzes Brett
Verpackungsvorschriften
Aktuelle Informationen zu Produktionsschritten an einer Maschine
Dashboards
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 eine Tachokontrolle neu
* @method loadGauge
*/
function loadGauge()
{
var gauge = new upGaugeControl();
var html = getElement("<GUID des Tachos>");
gauge.reloadData(html, {animated: true});
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:
Die Gruppierung ist auf dem
Reiter Optionen
als HTML-Element vom Typ "Div" eingestellt
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:
Die Gruppierung ist auf dem
Reiter Optionen
als HTML-Element vom Typ "Div" eingestellt
/**
* 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.