Tipps & Tricks - Seiteninhalte mit JavaScript aktualisieren

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.

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.

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. 

/**
* Reloads a table
* @method loadTable
*/
function loadTable()
{
    getElement("<GUID of the table>").oUp.reload();

    return true;
}

/**
* Reloads a free layout table
* @method loadShapedTable
*/
function loadShapedTable()
{
     getElement("<GUID of the table>").oUp.reload();

     return true;
}

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. 

/**
* Reloads a chart
* @method loadChart
*/
function loadChart()
{
    getElement("<GUID of the chart>").oUp.reload();

    return true;
}

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. 

/*
* Reloads the gauge when it obtains the data via the control itself
*/

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

/*
* Reloads the speedometer if it gets the data via a JavaScript function
*/
function gaugeJs() {
  var gauge = getElement("<GUID of the gauge>").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;
}

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"} 

/**
* Loads a velocity template into a grouping
* @method loadContainer
*/
function loadContainer()
{
  ix.loader.container({
    vm: "internal/application/resource/52C9EFA84564B161D33A89B3947CC707516368EF/container.vm",
    html: ix.util.getHtml("11B8A1C611174F48F114C61864BCCF6A09B2667A"),
    ixApp: {
      guid: "52C9EFA84564B161D33A89B3947CC707516368EF",
      pageGuid: "812FE404BA1E0C302B2A7F7970BDE9DAB99E55B8"
    },
    onBeforeUnload: () => {
      // your code here
    },
    data: {
      rq_xhrReload: "1",
    }
  });
}

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: 

/**
* Reloads a gauge
* @method loadTooltip
*/
function loadTooltip()
{
    ix.loader.tooltip({
                    ixApp: {
                         guid: '<GUID of the application>',
                         pageGuid: '<GUID of the target page>',
                         recId: '-1'                        
                            },
                    data: { rq_myParameter: "1234"},
                    windowSettings: {
                         position: 'embedded',
                         htmlTarget: $('div[id=ID_myTooltip]')[0],
                         title:'',
                         closeByButton:false,
                         closeByEsc:false,
                         key:'openTTP'                        },
                   });
}

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 Seite, die als Portlet definiert ist, in der Applikationsstruktur markiert ist. Damit wird die XML-Ansicht der Seite geöffnet. Dort finden Sie die GUID des Portlets (nach key="portletGuid").

Auch Portlets können mit Javascript aktualisiert werden. Beachten Sie bitte, dass der Wert "<GUID of the portlet>" durch die entsprechende GUID des gewünschten Elementes ausgetauscht werden muss. 

/**
* Reloads a single portlet
* @method loadPortlet
*/
function loadPortlet()
{
   UpPortal.reloadPortlet("<GUID of the portlet>")
   
   return;
}

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.