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.
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);
Eingabefeld oder Ansichtsfeld auslesen
Wert aus einem Eingabefeld oder Ansichtsfeld auslesen.
Beispiel
Browser.getValue(getElement("F28BA7351E3C8F5123880548CFA72B64566A1433"));
Snippet
Browser.getValue(oHtml);
Ajax
Javascript-Datei nachladen
Lädt eine Javascriptdatei anhand ihres Pfades nach.
Loader.loadJsFileOnDemand(strFileName)
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);
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);
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.
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])
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])
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;
}