JavaScript

Im Browser bietet sich vor allem JavaScript zur Programmierung an. Der Einsatzzweck liegt hier klar bei der Steigerung der Usability und der User Experience. Möchte man etwa je nach Auswahl des Anwenders nur gewisse Bereiche eines Formulars anzeigen, ist JavaScript genau der richtige Weg. Auch das Verhalten einer Seite (automatische Aktualisierung der Daten) oder die Benutzerführung können Sie in Intrexx mit JavaScript anpassen. Dafür gibt es ein eigenes Javascript-API, das Ihnen den Zugriff auf die Kontrollelemente von Intrexx einfach zugänglich macht.

Allgemeine Informationen zum Thema "Scripting" finden Sie hier.

Bei allen JavaScript-fähigen Applikationselementen können Sie den JavaScript-Editor in den Eigenschaften auf dem Reiter "Skript" erreichen. Weitere Informationen dazu finden Sie hier.

Bibliotheken

Im JavaScript-Editor haben Sie im Bereich "Bibliotheken" Zugriff auf die Intrexx Bibliothek für mobile Endgeräte und die Intrexx-Standardbibliothek. Wenn Sie einen Eintrag in einer der Bibliotheken markiert haben, finden Sie unten rechts die folgenden Schaltflächen:

Beschreibung anzeigen

Hier finden Sie eine Beschreibung der aktuell ausgewählten Funktion mit Beispiel-Skript.

Link öffnen

Verlinkt auf entsprechende Seiten mit weiterführenden Informationen.

Intrexx Bibliothek für mobile Endgeräte

Werte auslesen und schreiben

In Eingabefeld oder Textfeld schreiben

Schreibt einen übergebenen Wert in ein Eingabefeld oder ein Ansichtsfeld.

Beispiel

Browser.setValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"), "Some text");

Snippet

Browser.setValue(oHtml, strValue);

Class Browser

Eingabefeld oder Ansichtsfeld auslesen

Wert aus einem Eingabefeld oder Ansichtsfeld auslesen.

Beispiel

Browser.getValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"));

Snippet

Browser.getValue(oHtml);

Class Browser

Intrexx-Standardbibliothek

Ajax

UserWorkflowEvent triggern

Triggert einen UserWorkflowEvent, um damit einen Prozess auszulösen. Parameter: Die GUID des UserWorkflowEvents.

triggerUserWorkflowEvent("");

UserWorkflowEvent mit Requestparametern triggern

Triggert einen UserWorkflowEvent mit zusätzlichen Requestparametern, um damit einen Prozess auszulösen.

Die übergebenen Request-Parameter stehen auf dem Server als Requestvariablen zur Verfügung.

Parameter 1: Die GUID des UserWorkflowEvents.
Parameter 2: JSON Liste mit Parametern

Beispiel

triggerUserWorkflowEvent("BE2514445AC5C88F74891F9B296C283AC06F366C",  {qs_param: paramValue});

Snippet

triggerUserWorkflowEvent("",  {});

UserWorkflowEvent triggern mit Ergebnisverarbeitung

Triggert einen UserWorkflowEvent, um damit einen Prozess auszulösen und überprüft den Status des Prozessablaufs.

Die übergebenen Request-Parameter stehen auf dem Server als Requestvariablen zur Verfügung.

Parameter: Die GUID des UserWorkflowEvents.

$.when(triggerUserWorkflowEvent('89033337B02D89F2E3CCFCFAA914F4D054897D7C',  {param1: 'value 1', param2: 42}))
.done(function()
	{
		alert("done")
	}
)
.fail(function()
	{
		alert("failed")
	}
);
return true;

Velocity-Datei aufrufen und XML erhalten (Portal)

Form einer Seite an den Server schicken, XML aus einer VM-Datei zurück an den Browser senden und in ein statisches Textfeld schreiben.

var el = getElement("GUID_STATIC_TEXTFIELD");
ajaxVTL("internal/system/vm/custom/.vm", {
    dataType: 'xml',
    data: {
        fr_param1: Browser.getValue(getElement("GUID_FORM_FIELD"))
    },
    success: function (data) {
        Browser.setValue(el, data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
});

Velocity-Datei aufrufen und Text erhalten (Applikation)

Formulardaten senden und in ein statisches Textfeld schreiben. In der VM-Datei (aus dem Applikationspaket) kann der Formularwert aus diesem Beispiel über $Request.get("fr_param1") ausgelesen werden.

var el = getElement("GUID_STATIC_TEXTFIELD");
ajaxAppVTL(".vm", {
    dataType: 'text',
    data: {
        fr_param1: Browser.getValue(getElement("GUID_FORM_FIELD"))
    },
    success: function (data) {
        Browser.setValue(el, data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Velocity-Datei aufrufen und JSON erhalten (Applikation)

Erzeugen einer eigenen JSON-Response innerhalb einer VM-Datei (aus dem Applikationspaket) und an den Browser senden.

var el = getElement("GUID_FROM_ANY_CONTROL");
ajaxAppVTL(".vm", {
    dataType: 'json',
    success: function (data) {
        alert(data.myJSONAnswer);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Groovy-Datei aufrufen und JSON erhalten (Portal)

Ruft eine portalweit gültige Groovy-Datei mit Ajax auf und sendet die Antwort an den Browser zurück.

// Path to Groovy file
ix.ajax().requestGroovy('groovy/.groovy', {
    dataType: "json",
    data: {
        "param_a": "1",
        "param_b": "2"
    },
    success: function (data) {
        alert(data);
    }
});

Groovy-Datei aufrufen und JSON erhalten (Applikation)

Ruft eine anwendungsspezifische Groovy-Datei mit Ajax auf und sendet die Response an den Browser zurück.

var el = getElement("GUID_FROM_ANY_CONTROL");
ix.ajax().requestAppGroovy("file.groovy", {
    dataType: "json",
    data: {
        "param_a": "1",
        "param_b": "2"
    },
    success: function (data) {
        alert(data);
    },
    ixWaitAnim: {
        element: el,
        type: "overlay"
    }
}, el);

Berechnung

Einfache arithmetische Berechnungen

Berechnet das Ergebnis zweier Werte aus HTML-Kontrollen mit Hilfe eines Operators und schreibt das Ergebnis in eine HTML-Kontrolle.

Beispiel

calculate(getElement("F28BA7351E3C8F5123880548CFA72B64566A1421"), getElement("80467069EA61BD786CFFEB508786723D6451F2F5"), "+", getElement("B52A9E9FC555A820984E63DECF13BCAA33E308CD"));

Snippet

calculate(oHtmlNumber1, oHtmlNumber2, strOperator, oHtmlResult);

Notifier

Einfache Statusmeldung

Zeigt eine einfache Statusmeldung in der unteren rechten Ecke des Browsers an. Alternativ kann statt "notify" auch "warn" oder "error" verwendet werden.

Notifier.status.notify("Settings were applied");

Meldung an einem HTML-Element ausgerichtet anzeigen

Zeigt eine einfache Statusmeldung unterhalb eines HTML-Elements an (an der linken unteren Ecke ausgerichtet). Alternativ kann statt "notify" auch "error" verwendet werden.

Notifier.element.notify(getElement(), "EXAMPLE_TEXT");

Schaltflächen

Ganztägigen Termin setzen

Setzt 2 Datenfelder vom Typ Datum auf die Dauer eines ganzen Tages: datumVon 00:00 Uhr, datumBis 00:00 Uhr des nächsten Tages.

Beispiel

Ausführbar im onclick()-Event einer Checkbox):

setFullDays(getElement("123401F1E55C9A193BE6EC4091B45C6A5A6C8154"), getElement("DD2E01F1E55C9A193BE6EC4091B45C6A5A6C8154"), getElement("4D0708BDECC7D088613F818CE1B09B8D812F5750") );

Snippet

setFullDays(oHtmlCheckbox, oHtmlDateFrom, oHtmlDateTo);

Skript nach dem Speichern / Löschen auslösen

Das Event "onActionDone" wird immer dann ausgelöst, wenn eine Schaltfläche eine Aktion vom Typ "Speichern" oder "Löschen" abgesetzt hat und diese erfolgreich war. Bei Schaltflächen kann eingestellt werden, dass die öffnende Seite bzw. Tabelle neu geladen werden soll. An dieser Stelle wird das Event angetriggert. Programmatisch kann ein Callback für das Event hinterlegt werden (z.B. beim Laden der Seite):

Snippet

getElement(<GUID>).oUp.bindEvent("onActionDone", function() {
		// ...
});

Tabellen

Zeilen und Spalten einfärben (Zahlenwerte)

Färbt Zeilen und Zellen einer Ansichtstabelle in Abhängigkeit eines Zahlenwertes ein. Die Farbe kann hexadezimal oder als Name angegeben werden. Eingefärbt werden kann "row" = ganze Zeile (tr), "cell" = ganze Zelle (td), "span" = Text der Zelle (span).

Beispiel

Färbt alle Zeilen, die im Feld viewcontrolD54BA2DD einen Wert größer als 10 besitzen):

inking("viewcontrolD54BA2DD", ">", 10, "#008000", "row");

Snippet

inking(strControlName, strOperator, compareValue, strColor, colored);

Zeilen und Spalten einfärben (Datumswerte)

Färbt Zeilen und Zellen einer Ansichtstabelle in Abhängigkeit des aktuellen Datumswerts ein. Mögliche Vergleichswerte sind aktuelles Datum ("date") oder aktuelles Datum und aktuelle Zeit ("datetime"). Die Farbe kann hexadezimal oder als Name angegeben werden. Eingefärbt werden kann "row" = ganze Zeile (tr), "cell" = ganze Zelle (td), "span" = Text der Zelle (span).

Beispiel

Färbt alle Zeilen, die im Feld viewcontrolD54BA2DD ein Datum haben, das kleiner ist als das aktuelle Datum:

inkingDate("viewcontrolD54BA2DD", "<", "date", "#008000", "row");

Snippet

inkingDate(strControlName, strOperator, dateType, strColor, colored);

Zeilen und Spalten einfärben (Strings)

Färbt Zeilen und Zellen einer Ansichtstabelle in Abhängigkeit eines Stringvergleichs. Die Farbe kann hexadezimal oder als Name angegeben werden. Eingefärbt werden kann "row" = ganze Zeile (tr), "cell" = ganze Zelle (td), "span" = Text der Zelle (span)

Beispiel

Färbt alle Zeilen, die im Feld viewcontrolD54BA2DD den Status "erledigt" besitzen:

inkingString("viewcontrolD54BA2DD", "==", "erledigt", "#008000", "row");

Snippet

inkingString(strControlName, strOperator, strValue, strColor, colored);

Zeile abfragen

Liefert den Elternknoten (die Zeile) des übergebenen Knotens.

getRow(node)

Spalte abfragen

Liefert den Elternknoten (die Spalte) des übergebenen Knotens.

getCol(node)

Werte auslesen und schreiben

In Ansichtsfeld / Textfeld schreiben (mit ID)

Schreibt einen übergebenen Wert in ein Ansichtsfeld oder ein statisches Textfeld, das mit Hilfe von dessen DOM-ID (Attribut "ID" des HTMl-Elements) referenziert wird.

Beispiel

setTextValueById("ID_labelcontrol900CB1AB", "Some text");

Snippet

setTextValueById(strHtmlId, strValue);

In Ansichtsfeld / Textfeld schreiben

Schreibt einen übergebenen Wert in ein Ansichtsfeld oder ein statisches Textfeld.

Beispiel

Browser.setValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"), "Some text");

Snippet

Browser.setValue(oHtml, strValue);

Class Browser

Ansichtsfeld / Textfeld auslesen (mit ID)

Wert aus einem Ansichtsfeld oder einem statischen Textfeld mit Hilfe der DOM ID auslesen.

Beispiel

getTextValueById("ID_labelcontrol900CB1AB");

Snippet

getTextValueById(strHtmlId);

Ansichtsfeld / Textfeld auslesen

Wert aus einem Ansichtsfeld oder einem statischen Textfeld auslesen.

Beispiel

Browser.getValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"));

Snippet

Browser.getValue(oHtml);

Class Browser

Text in Zwischenablage kopieren

Sendet einen Text an die Zwischenablage. Sollte diese Funktion aus Sicherheitsgründen deaktiviert sein, wird statt dessen ein Tooltip mit dem zu kopierenden Text angezeigt. Übergabeparameter:

param1:
Text oder eine Aktionskontrolle. Im Falle einer Kontrolle wird aus dieser der URL des Sprungziels in die Zwischenablage kopiert.

param2:
Optionaler Parameter als Liste mit folgenden möglichen Übergabeparametern:
strMsgTitle - Titel der Rückmeldung an den Benutzer
strMsgBody - Text der Rückmeldung an den Benutzer, wenn der Text erfolgreich in die Zwischenablage kopiert werden konnte
bFallback - true (Default) oder false. Falls der Text nicht in die Zwischenablage kopiert werden konnte, so wird im Falle von bFallback=true der Text in einem Tooltip angezeigt.
iTextHeight - Zeilenhöhe innherhalb der Tooltips (Default: 1)
iTextWidth - Breite des Tooltips (Default: 50)
strTextStyles - CSS-Styles für das Tooltip

Beispiel

Helper.sendToClipboard("Hello World!", {strMsgTitle: "Clipboard", strMsgBody: "Text copied to clipboard", bFallback: true, iTextHeight:1, iTextWidth:50};
Helper.sendToClipboard(getElement("56C159AEECD062FC3B273F0E999A67FA842D3FB8").oUp);

Snippet

Helper.sendToClipboard(param1, param2);

Werte formatieren

Float aus lokal formatiertem String

Parst einen lokal formatierten String zu einem Float (Number-Objekt).

Beispiel

getFloatByLocalString("1.234");

Snippet

getFloatByLocalString(strValue);

Float-String aus lokal formatiertem String

Parst einen lokal formatierten String zu einem String im Floatformat (z.B. 1.234,56 -> 1234.56).

Beispiel

getFloatStringByLocal("1.234,56");

Snippet

getFloatStringByLocal(strValue);

Integer aus lokal formatiertem String

Parst einen lokal formatierten String zu einem Integer (Number-Objekt).

Beispiel

getIntegerByLocalString("1.234");

Snippet

getIntegerByLocalString(strValue);

Integer-String aus lokal formatiertem String

Parst einen lokal formatierten String zu einem String im Integerformat (z.B. 1.234 -> 1234).

Beispiel

getIntegerStringByLocal("1.234");

Snippet

getIntegerStringByLocal(strValue);

JavaScript-Datum aus HTML-Kontrolle

Erzeugt aus einer HTML-Kontrolle vom Typ "date", "time" oder "date & time" ein JavaScript Datumsobjekt.

Beispiel

getDateObject(getElement("A84E5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Snippet

getDateObject(oHtml);

JavaScript-Zahl aus HTML-Kontrolle

Erzeugt aus einer HTML-Kontrolle vom Typ "integer", "float" oder "currency" ein JavaScript-Zahlenobjekt.

Beispiel

getNumberObject(getElement("5F7S5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Snippet

getNumberObject(oHtml);

Lokal formatierter String aus Number-/Datumsstring

Erzeugt einen lokal formatierten String aus einem Number- oder aus einem Datumsstring. Mit dem Parameter "oHtml" wird eine Referenz auf eine Eingabekontrolle mit Typ "integer", "float", "currency" oder "datetime" erstellt. Damit werden Typen- und Formatierungsvorgaben des Wertes definiert. "strValue" definiert den zu formatierenden Wert.

Beispiel

toLocalString(getElement("DDB279D4974A17DB27A89F58DB36F7BF4E10DA13"),"123.45");

Snippet

toLocalString(oHtml, strValue);

String formatieren und in Kontrolle schreiben

Erzeugt einen lokal formatierten String aus einem Number- oder aus einem Datumsstring und schreibt das Ergebnis in eine HTML-Eingabekontrolle.

toLocalString(oHtml, strValue)
oHtml - Referenz auf eine Eingabekontrolle mit Typ "integer", "float", "currency" oder "datetime". Damit werden Typen- und Formatierungsvorgaben des Wertes definiert. Das Ergebnis wird in diese Kontrolle geschrieben. strValue - zu formatierender Wert.

Beispiel

writeLocalString(getElement("DDB279D4974A17DB27A89F58DB36F7BF4E10DA13"),"123.45");

Snippet

writeLocalString(oHtml, strValue);

Währung aus lokal formatiertem String

Parst einen lokal formatierten String zu einer Währung (Number-Objekt).

Beispiel

getCurrencyByLocalString("1.234");

Snippet

writeLocalString(oHtml, strValue);

Währungs-String aus lokal formatiertem String

Parst einen lokal formatierten String zu einem String im Währungsformat (z.B. 1.234,56 -> 1234.56).

Beispiel

getCurrencyStringByLocal("1.234,56");

Snippet

getCurrencyStringByLocal(strValue);

WebSockets

Die JavaScript-Methoden im Zusammenhang mit WebSockets bieten die Möglichkeit Nachrichten (Topics) zu subskribieren und das Subskribieren wieder zu beenden.

ix.websocket

4.8.1 Subskribieren eines Topics starten

Hinweis: Beachten Sie, dass die folgenden Beispiele nicht für den IE11 ausgelegt sind.

Beispiel 1

const mySubscriber = await ix.websocket.subscribeToTopic("D00F000000000000000000000000000000000000", {
   onmessage: (data) => {
      console.log(data);
   }
});

Beispiel 2

const mySubscriber = await ix.websocket.subscribeToTopic("D00F000000000000000000000000000000000000", {
   key: "key1",
   onmessageJSON: (data) => {
      console.log(data);
   },
   onerror: (error) => {
      console.log(error);
   },
   onclose: (event) => {
      console.log(event);
   }
});

Snippet

ix.websocket.subscribeToTopic(topic, subscriber [, websocketAlias])

Namespace IxWebsocket

4.8.2 Subskribieren eines Topics beenden

Hinweis: Beachten Sie, dass die folgenden Beispiele nicht für den IE11 ausgelegt sind.

Beispiel 1

ix.websocket.unsubscribeFromTopic(mySubscriber)

Beispiel 2

ix.websocket.unsubscribeFromTopic("key1")

Snippet

ix.websocket.unsubscribeFromTopic(subscriber [, websocketAlias])

Namespace IxWebsocket

Eingabe erforderlich

Überprüft die übergebene Eingabekontrolle, als wäre die Option "Eingabe erforderlich" aktiviert oder überprüft alle Kontrollen einer übergebenen Gruppierung, bei denen die Option "Eingabe erforderlich" gesetzt wurde. Als zweiter Parameter kann optional ein alternativer Text angegeben werden, der im Fehlerfall statt dem voreingestellten Text angezeigt wird.

Beispiel

checkRequired(getElement("E94A9FBDADD46039BB62F76870E1EC57C226C6DC"), "An alternative text");

Snippet

checkRequired(oHtml,strMessage);

Datum vergleichen

Vergleicht den Wert einer Datumskontrolle ("date", "time" oder "datetime") mit dem aktuellen Datum. Möglich für Eingabe- und Ansichtskontrollen. Bei Ansichtskontrollen muss das Expertattribut jsobject = true (Boolean) gesetzt werden.

Beispiel

dateComparedToNow(getElement("5F7S5E7F9EA9ED1A829DB98DBF5459F59961FA3B"));

Mögliche Rückgabewerte:
-1, wenn ein Fehler aufgetreten ist oder die übergebene Kontrolle leer ist.
0, wenn das Datum kleiner als das aktuelle Datum ist.
1, wenn das Datum gleich dem aktuellen Datum ist.
2, wenn das Datum größer als das aktuelle Datum ist.

Snippet

dateComparedToNow(oHtmlDate);

Zeitintervall addieren / subtrahieren

Addiert oder subtrahiert einen Zeitanteil zu/von einem übergebenen JavaScript Datumsobjekt. Mögliche Parameter:
"ms" - Millisekunden / "s" - Sekunden / "mi" - Minuten / "h" - Stunden / "d" - Tage / "mo" - Monate / "y" - Jahre

Beispiel

var dtNow = new Date();
var dtAdd1 = dateAdd("d", 1, dtNow); // adds 1 day to the current date
var dtAdd2 = dateAdd("h", -2, dtNow); // subtracts 2 hours of the current date

Snippet

dateAdd(typeOfInterval, intValue, oHtmlDate);

Seite einer Applikation öffnen

Führt eine Applikationsrequest aus und öffnet eine Seite einer Applikation in einem neuen Fenster.

Beispiel

makeAppRequest("5C9AA563556C7A98CD03AAFAE9E93EC13B6EBB07", "8875BAC49802DC90A9FE41F5114D8F1E28036891", "1", false, false, false);

Snippet

makeAppRequest(strApplicationGuid, strPageGuid, strRecId, false, false, true);

JavaScript-Komprimierung ausschalten

Durch Einfügen dieses Kommentars kann die Minifizierung der JavaScript-Dateien z.B. zu Debugging-Zwecken deaktiviert werden.

// compress = false

Zugriff auf Sprachkonstanten

Beispiel 1

Zugriff auf globale Sprachkonstanten:

ix.text.i18n.get('WIDTH')

Beispiel 2

Zugriff auf Sprachkonstanten aus Applikationen:

ix.text.i18n.getByApp('AB4B031834F042FCADB595DF1923B768C7773F00', 'SHARE_FEED_MORE_COMMENTS')

Snippet

ix.text.i18n

Datensatz kopieren

Funktion für das Kopieren eines Datensatzes bei Klick auf eine Schaltfläche.

Snippet

function copyRecord(p_button) {
   p_button.oUp.setActionModeInsert();
   return true;
}