Dialog

Mit dem Dialog-Modul kannst du nun Alerts, Dialoge und sogar Tooltips frei gestalten. Von einer einfachen Warn-Nachricht bis zur umfangreichen Eingabemaske sind dir keine Grenzen gesetzt. Wie bei all unseren Modulen setzen wir auch hier wieder auf eine gute Mischung aus Flexibilität für dich und eine hohe Performance.

Funktion und Aussehen

Damit das Dialog-Modul so flexibel und performant wie möglich ist, bringt es keine Blockstruktur mit. Stattdessen kannst du selbst entscheiden, ob du mithilfe eines Layouts eine verschachtelte Ansicht bauen möchtest, mit Input-Feldern, Buttons und deinem ganz persönlichen Design. Oder ob dir eine simple Textzeile ausreicht, die du in den Value-Key schreibst. Dadurch vermeiden wir unnötigen Datenmüll im Hintergrund und drücken dir keine feste Struktur auf.

Das Styling deines Dialog-Elementes kannst du sowohl mit dem Class-Key, als auch mit dem Style-Key ganz nach deinen Wünschen anpassen. Mit dem Class-Key kannst du CSS-Klassen zuweisen, die von dir oder uns im Globalen Code definiert wurden (siehe Globaler CSS-Code). Zusätzlich kannst du den Style-Key für Inline-CSS nutzen. Beachte dabei, dass Inline-Styles immer Vorrang haben und die Class-Styles überschreiben, sofern sie dieselbe Property (z.B. background-color) betreffen.

Aufruf des Dialog-Elementes im Ninox-Code

Aufrufen kannst du das Dialog-Element mit jedem GIP-Modul, das den Actions-Key hat. Der Code des Script-Elements sieht wie folgt aus:

    scripts: [{
        type: "openGIPdialog", 
        value: {
            dialogId: "Unique Dialog ID", 
            showCloseButton: true, 
            showAsModal: true
        }
    }]

Äquivalent dazu kannst du mit dem Type “closeGIPdialog” dein Dialog-Element wieder schließen:

    scripts: [{
        type: "closeGIPdialog", 
        value: {
            dialogId: "Unique Dialog ID"
        }
    }]

Um einen Tooltip, statt einem Dialog/Alert aufzurufen, muss zusätzlich im Class-Key des Dialogs die Class “GIPTooltip” eingetragen werden.

Da zum Aufrufen/Schließen nur die Unique-ID des Dialog-Elementes benötigt wird, muss das Dialog-Element nicht zwangsläufig im selben Ninox-Formelfeld erstellt werden, wie das triggernde Element. Sogar Record-übergreifend kann ein Aufruf gebaut werden. Einzige Voraussetzung: Das Dialog-Element muss einmal von Ninox geladen worden sein. Die folgenden Varianten kannst du zum Bau deines Dialog-Elementes nutzen. Als triggerndes Element nutzen wir hier beispielhaft ein Interaction-Element:

Variante 1 - Alles in einem Formelfeld

Anwendung

Du möchtest den Dialog nur in einem einzigen Formelfeld verwenden.

Du kannst das Dialog-Element im selben Formelfeld wie das Interaction-Element bauen. Dabei besteht die Besonderheit, dass die Elemente wie folgt aneinander gereiht werden müssen:

    html( 
       raw( GIP_dialog[{...}] )
       + raw( GIP_interaction[{...}] )
   )

Andernfalls führt Ninox die erste globale Funktion der beiden, hier die Dialog-Funktion, nicht aus. Das heißt, das Dialog-Element würde nicht erstellt werden und kann dadurch auch nicht aufgerufen werden.

Variante 2 - Zwei Formelfelder im selben Record (und im selben Tab)

Anwendung

Du möchtest den Dialog in mehreren Formelfeldern im selben Record verwenden.

Bei dieser Variante legst du im Formelfeld A den Dialog an (html() und raw() sind nicht nötig). Im Formelfeld B erstellst du dein Interaction-Element und rufst deinen Dialog in einer action mithilfe seiner Unique-ID auf. Das funktioniert, weil ein erstellter Dialog an den Document-Body angehängt wird. Blendest du Formelfeld A aber durch "Feld nur anzeigen, wenn” aus oder verschiebst es in einen Tab im Record, den du vor dem Klick auf das Interaction-Element nicht geöffnet hattest, wird der Dialog-Code nicht ausgeführt. Bei dieser Variante musst du also sicher stellen, dass Ninox dein Dialog-Formelfeld einmal geladen hat, damit der Dialog im Document-Body liegt. Bei einem Reload der Seite (z.B. durch Schließen und Öffnen des Browsers oder Drücken von F5) muss auch der Dialog neu geladen werden.

Variante 3 - Zwei Formelfelder in unterschiedlichen Tabs oder Records

Anwendung

Du möchtest den Dialog in mehreren Formelfeldern in unterschiedlichen Records verwenden.

Wenn ein Dialog wie in Variante 2 beschrieben bereits im Document-Body liegt, kannst du ihn aus jeder Tabelle in der Datenbank mit der Unique-ID aufrufen. Aber dafür muss wie gesagt sichergestellt werden, dass das Dialog-Formelfeld einmal geladen wurde (z.B. indem der Record und entsprechende Tab geöffnet wurde). Sicherer ist es aber, eine Kombination aus Variante 1 und Variante 2 zu nutzen. Lege dafür den Dialog in Tabelle 1 im Formelfeld A an. In Tabelle 2 schreibst du in Formelfeld B den Code deines Interaction-Elements, in dem du mit einer Action den Dialog aufrufst, und kombinierst ihn dann wie folgt mit dem Dialog-Formelfeld aus dem 1. Record von Tabelle 1:

    html(
        raw( record( 'Tabelle 1’, 1).'Formelfeld A’ )
        + raw( GIP_interaction[{...}] )
    )

Nutzer-Interaktion

Den Großteil der Nutzer-Interaktion überlassen wir dir beim Bau des Dialog-Elementes. Denn jeder Programmierer hat andere Bedürfnisse und Vorstellungen. Wir geben dir allerdings die Möglichkeit, einen Schließen-Button in der rechten oberen Ecke ein- und auszublenden, damit du z.B. für einen kurzen Alert mit reinem Text nicht extra einen Button bauen musst. Außerdem kannst du das Dialog-Element wahlweise als Modal-Element anzeigen lassen. Der Nutzer kann dann nur mit dem Dialog-Element, aber nicht mit den Ninox-Feldern im Hintergrund interagieren. Bei einem Nicht-Modal-Element ist die Interaktion mit den Hintergrundfeldern weiterhin möglich.

Modulcode

Vollständiger Code

GIP_dialog({
   uniqueId: "",
   class: "",
   style: "",
   value: *any*,
   showCloseButton: true,
   showAsModal: true,
})

Minimaler Code

GIP_dialog({
   uniqueId: "",
   value: *any*,
})

Vollständiger Code mit Master

html( raw(GIP_master({})) + 
raw(GIP_dialog({
   	uniqueId: "",
   	class: "",
   	style: "",
   	value: *any*,
   	showCloseButton: true,
   	showAsModal: true,
})
))

Modulkeys

uniqueId

Datentyp	Ist Pflichtkey?	Default
string	true	-

Eindeutige Kennung des eingesetzten Moduls. Ideal ist eine Kombination aus Text und der Record-ID, also z.B.:

uniqueId: "LayoutÜberschrift" + Nr

Ist die ID nicht einzigartig, kann es zu Fehlern bei Anzeige und Funktion der eingesetzten Module in der Tabelle kommen.

class

Datentyp	Ist Pflichtkey?	Default
string	false	-

Styling des Moduls mithilfe der in GIP_globalCSS vordefinierten CSS-Stylings (siehe globaler GIP-Modul-Code). Um mehrere CSS-Stylings zu referenzieren, werden sie einfach als String mit Leerzeichen zwischen den Class-names aneinandergereiht.

style

Datentyp	Ist Pflichtkey?	Default
string	false	Siehe (Globaler CSS-Code)[/GlobalerCSS-Code]

Inline CSS-Styling des Moduls.

value

Datentyp	Ist Pflichtkey?	Default
any	true	-

Eingabe des gewünschten Wertes.

showCloseButton

Datentyp	Ist Pflichtkey?	Default
boolean	false	true

Gibt an, ob ein Schließen-Button in der oberen rechten Ecke des Dialogs angezeigt werden soll. Achtung: Wenn showCloseButton = false ist, sollte der Programmierer die Funktion "closeGIPdialog" in ein Feld einbauen, damit der Nutzer den Dialog wieder schließen kann.

showAsModal

Datentyp	Ist Pflichtkey?	Default
boolean	false	true

Gibt an, ob das Dialog-Element als Modal-Element angezeigt werden soll. Modal-Element: Der Nutzer kann nur mit dem Dialog-Element, aber nicht mit den Ninox-Feldern im Hintergrund interagieren, wenn der Dialog geöffnet ist. Nicht-Modal-Element: Die Interaktion mit den Ninox-Feldern im Hintergrund ist weiterhin möglich, wenn der Dialog geöffnet ist. .

Beispiele

Dialog ohne weitere Module

Wir möchten einen einfachen Dialog vom Typ Alert anzeigen, ohne dafür weitere GIP-Module zu nutzen. Das gewünschte Ergebnis siehst du im folgenden Video:

Einfacher Dialog / Alert

Das Dialog-Element erhält zunächst die folgenden Werte:

let dialogId := "MeinDialog" + Nr;
GIP_dialog({
    uniqueId: dialogId, //Die ID des Dialogs, mit dem wir ihn wieder aufrufen und öffnen können.
    class: "",
    style: "width: 300px; height: 100px; text-align: center; align-content: center;", //Größe des Dialogs und die Anordnung des Inhalts innerhalb des Dialogs.
    value: "<p style='font-size: 20px; margin:0;'>Hallo Welt:</p><p style='font-size: 15px; margin:0;'>Dies ist ein Alert!</p>", //Text, der im Dialog angezeigt werden soll, mit zusätzlichem Inline-Styling.
    showCloseButton: true, //true: Ein Button zum Schließen des Dialogs wird automatisch eingeblendet. false: Es wird kein Schließen-Button automatisch eingeblendet. In diesem Fall muss der Programmierer selbst einen Button zum Schließen für den Nutzer einbauen.
    showAsModal: true //true: Der Dialog wird als Modal-Element angezeigt und blockiert Interaktion mit Ninox-Feldern im Hintergrund. false: Die Interaktion mit Ninox-Feldern im Hintergrund ist nicht blockiert.
})

Als nächstes schreiben wir den HTML- und Javascript-Befehl, mit dem der Dialog aufgerufen werden soll. In diesem Beispiel haben wir ein Button-Element mit einer Click-Action gewählt:

<button id='ButtonOpenDialog' class='GIPColorBlue' style='border: none;' onclick='dialogFunction()'>Click me</button> //Button-Element mit Styling.
<script>
function dialogFunction() {
	GIP.functions([{ //Aufruf der GIP-eigenen Functions, die in Elementen mit dem Actions-Key genutzt werden.
		type: 'openGIPdialog',
		dialogId: '" + replacex(text(dialogId), "[^\w-]", "") + "' //Ersetzten von Sonderzeichen in der Dialog-ID. Wenn die Dialog-ID keine Sonderzeichen enthält, kann die ID auch direkt angegeben werden.
	}]);
}
</script>

Code des Beispiels

let dialogId := "MeinDialog" + Nr;
html(raw(GIP_master({})) +
raw(GIP_dialog({
		uniqueId: dialogId,
		class: "",
		style: "width: 300px; height: 100px; text-align: center; align-content: center;",
		value: "<p style='font-size: 20px; margin:0;'>Hallo Welt:</p><p style='font-size: 15px; margin:0;'>Dies ist ein Alert!</p>",
		showCloseButton: true,
		showAsModal: true
	})) +
raw("<button id='ButtonOpenDialog' class='GIPColorBlue' style='border: none;' onclick='dialogFunction()'>Click me</button>
<script>
function dialogFunction() {
	GIP.functions([{
		type: 'openGIPdialog',
		dialogId: '" +
replacex(text(dialogId), "[^\w-]", "") +
"'
	}]);
}
</script>"))