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",
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",
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
GIP_dialog({
uniqueId: "myUniqueName" + Nr
value: *any*
})GIP_dialog({
uniqueId: "myUniqueName" + Nr
style: ""
value: *any*
showAsModal: true
})GIP_dialog({
uniqueId: "myUniqueName" + Nr
class: ""
style: ""
value: *any*
showAsModal: true
showCloseButton: true
})GIP_dialog({
uniqueId: "",
class: "",
style: "",
value: *any*,
showAsModal: true,
showCloseButton: true,
})html( raw(GIP_master({})) +
raw(GIP_dialog({
uniqueId: "",
class: "",
style: "",
value: *any*,
showAsModal: true,
showCloseButton: true,
})
))Key-Table
Beispiele
Dialog: Ohne weitere Module
Beschreibung
Wir möchten einen einfachen Dialog vom Typ Alert anzeigen, ohne dafür weitere GIP-Module zu nutzen.
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>"))let dialogId := "MeinDialog" + Nr;
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>")Dialog: Eingabemaske mit Form-ID
Beschreibung
Wir möchten eine Eingabemaske als Dialog erstellen, aus der die Daten erst in Ninox-Felder übernommen werden, wenn ein Button gedrückt wird.
Dazu legen wir zunächst einen Dialog an, in dem ein Text-Input und ein Number-Input liegen. Beide Input-Felder erhalten mit den Keys recordId und fieldId jeweils einen Verweis auf die Ninox-Felder, die geupdated werden sollen. Zusätzlich vergeben wir aber auch eine formId. Dadurch werden Werte, die in die Input-Felder eingetragen werden, zunächst im Session Storage zwischengespeichert.
Außerdem erhält unsere Eingabemaske einen Button, mit dem die Eingaben aus dem Session Storage in die Ninox-Eingabefelder übernommen werden sollen. Dies erreichen wir durch ein Action-Skript vom type "submitGIPform" und der Angabe der Form-ID.
let dialogId := "Eingabemaske" + Nr;
GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 400px; height: 300px;",
value: GIP_layout({
uniqueId: "InputFelder" + Nr,
direction: "vertical",
style: "width: auto; padding: 30px; height: auto;",
blocks: [{
style: "justify-content: center; color: #7F0000; font: bold 20px/3 arial; text-align: center;",
value: "Bitte Werte eingeben"
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Firma" + Nr,
inputType: "text",
recordId: Nr,
fieldId: fieldId(this, "Firmenname"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: Firmenname
},
title: {
style: "",
prefix: "Firma: "
},
placeholder: {
value: "Firmenname eingeben"
}
})
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Jaehrlicher Umsatz" + Nr,
inputType: "number",
recordId: Nr,
fieldId: fieldId(this, "Jährlicher Umsatz"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: number('Jährlicher Umsatz')
},
title: {
style: "",
suffix: " /a",
numberFormat: {
formatType: "intl",
locale: "en-IN",
options: {
style: "currency",
currency: "USD",
minimumFractionDigits: 2
}
}
},
placeholder: {
style: "justify-content: flex-start;",
value: "Jahresumsatz eingeben"
}
})
}, {
style: "justify-content: center; padding-top: 20px;",
value: GIP_interaction({
uniqueId: "FormButton" + Nr,
direction: "horizontal",
class: "GIPColorBlue",
style: "height: 30px; width: 70%;",
blocks: [{
value: "Eingaben übernehmen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "submitGIPform",
formId: "MyForm"
}, {
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
})
}]
})
})Nun muss noch ein Element mit Actions gebaut werden, um unsere Eingabemaske zu öffnen. Dafür können alle GIP-Module mit dem Key actions verwendet werden, wir verwenden in diesem Beispiel ein Interaction-Element.
GIP_interaction({
uniqueId: "Button" + Nr,
class: "GIPColorBlue",
blocks: [{
value: "Öffne Dialog"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId,
showCloseButton: true,
showAsModal: true
}]
}]
})Code des Beispiels
let dialogId := "Eingabemaske" + Nr;
html(raw(GIP_master({})) +
raw(GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 400px; height: 300px;",
value: GIP_layout({
uniqueId: "InputFelder" + Nr,
direction: "vertical",
style: "width: auto; padding: 30px; height: auto;",
blocks: [{
style: "justify-content: center; color: #7F0000; font: bold 20px/3 arial; text-align: center;",
value: "Bitte Werte eingeben"
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Firma" + Nr,
inputType: "text",
recordId: Nr,
fieldId: fieldId(this, "Firmenname"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: Firmenname
},
title: {
style: "",
prefix: "Firma: "
},
placeholder: {
value: "Firmenname eingeben"
}
})
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Jaehrlicher Umsatz" + Nr,
inputType: "number",
recordId: Nr,
fieldId: fieldId(this, "Jährlicher Umsatz"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: number('Jährlicher Umsatz')
},
title: {
style: "",
suffix: " /a",
numberFormat: {
formatType: "intl",
locale: "en-IN",
options: {
style: "currency",
currency: "USD",
minimumFractionDigits: 2
}
}
},
placeholder: {
style: "justify-content: flex-start;",
value: "Jahresumsatz eingeben"
}
})
}, {
style: "justify-content: center; padding-top: 20px;",
value: GIP_interaction({
uniqueId: "FormButton" + Nr,
direction: "horizontal",
class: "GIPColorBlue",
style: "height: 30px; width: 70%;",
blocks: [{
value: "Eingaben übernehmen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "submitGIPform",
formId: "MyForm"
}, {
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
})
}]
})
})) +
raw(GIP_interaction({
uniqueId: "Button" + Nr,
class: "GIPColorBlue",
blocks: [{
value: "Öffne Dialog"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId,
showCloseButton: true,
showAsModal: true
}]
}]
})))let dialogId := "Eingabemaske" + Nr;
raw(GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 400px; height: 300px;",
value: GIP_layout({
uniqueId: "InputFelder" + Nr,
direction: "vertical",
style: "width: auto; padding: 30px; height: auto;",
blocks: [{
style: "justify-content: center; color: #7F0000; font: bold 20px/3 arial; text-align: center;",
value: "Bitte Werte eingeben"
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Firma" + Nr,
inputType: "text",
recordId: Nr,
fieldId: fieldId(this, "Firmenname"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: Firmenname
},
title: {
style: "",
prefix: "Firma: "
},
placeholder: {
value: "Firmenname eingeben"
}
})
}, {
style: "justify-content: center;",
value: GIP_input({
uniqueId: "Jaehrlicher Umsatz" + Nr,
inputType: "number",
recordId: Nr,
fieldId: fieldId(this, "Jährlicher Umsatz"),
formId: "MyForm",
style: "width: 150px; height: 50px; align-items: center;",
fieldContent: {
value: number('Jährlicher Umsatz')
},
title: {
style: "",
suffix: " /a",
numberFormat: {
formatType: "intl",
locale: "en-IN",
options: {
style: "currency",
currency: "USD",
minimumFractionDigits: 2
}
}
},
placeholder: {
style: "justify-content: flex-start;",
value: "Jahresumsatz eingeben"
}
})
}, {
style: "justify-content: center; padding-top: 20px;",
value: GIP_interaction({
uniqueId: "FormButton" + Nr,
direction: "horizontal",
class: "GIPColorBlue",
style: "height: 30px; width: 70%;",
blocks: [{
value: "Eingaben übernehmen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "submitGIPform",
formId: "MyForm"
}, {
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
})
}]
})
})) +
raw(GIP_interaction({
uniqueId: "Button" + Nr,
embedded: true,
class: "GIPColorBlue",
blocks: [{
value: "Öffne Dialog"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId,
showCloseButton: true,
showAsModal: true
}]
}]
}))Dialog: Sidebar-Menu
Beschreibung
Wir möchten ein Sidebar-Menu erstellen, dass beim Klicken auf einen Button am Rechten Bildschirmrand geöffnet wird.
Für den Inhalt des Menüs wird in diesem Beispiel ein Layout mit Text verwendet, aber es kommen auch alle anderen Module in Frage, z.B. Inputs, Selects oder Interactions. Dadurch kann diese Sidebar für das Setzen von Filtern, die Eingabe von Werten, zum anzeigen allgemeiner Infos und noch vielem mehr genutzt werden.
Das Dialog-Element muss für das gewünschte Verhalten ein besonderes Styling erhalten, das den Dialog:
- Vor dem Einblenden hinter dem rechten Bildschirmrand versteckt.
- Auf die komplette Bildschirmhöhe skaliert.
- Auf eine Breite skaliert, die sowohl am PC, als auch auf Smartphones eine sinnvolle Ansicht ergibt.
let dialogId := "SidebarMenu" + Nr;
GIP_dialog({
uniqueId: myDialogId,
class: "",
style: "transform: translateX(100%); transition: transform 0.3s ease-out; position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 80%; max-width: 500px; height: 100%; max-height: 100%; border-radius: 0;",
value: GIP_layout({
uniqueId: "DialogContent" + Nr,
embedded: true,
direction: "vertical",
style: "width: 100%; height: 100%; padding: 30px; gap: 20px;",
blocks: [{
style: "font-size: 22px; font-weight: bold; color: #e67e22; justify-content: start;",
value: "Inhalt der Side-Bar"
}, {
style: "",
value: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}, {
style: "",
value: "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}]
}),
showCloseButton: true,
showAsModal: true
})Nun muss noch ein Element mit actions (in diesem Beispiel ein GIP-Interaction) gebaut werden, um unsere Sidebar anzuzeigen. Dafür müssen wir zwei Scripte schreiben: Das Öffnen des Dialogs und ein Custom Javascript, das den Dialogs hereingleiten zu lassen.
GIP_interaction({
uniqueId: "DialogOeffnen" + Nr,
embedded: false,
blocks: [{
style: "",
value: "Dialog öffnen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: myDialogId
}, {
type: "customJS",
value: "const myModalElement = document.getElementById('GIPDialog" + myDialogId +
"active');
setTimeout(() => {
myModalElement.style.transform = 'translateX(0)';
}, 10);
myModalElement.addEventListener('close', () => {
myModalElement.style.transform = 'translateX(100%)';
});"
}]
}]
})Code des Beispiels
let myDialogId := "SidebarMenu" + Nr;
html(raw(GIP_master({})) +
raw(GIP_dialog({
uniqueId: myDialogId,
class: "",
style: "transform: translateX(100%); transition: transform 0.3s ease-out; position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 80%; max-width: 500px; height: 100%; max-height: 100%; border-radius: 0;",
value: GIP_layout({
uniqueId: "DialogContent" + Nr,
embedded: true,
direction: "vertical",
style: "width: 100%; height: 100%; padding: 30px; gap: 20px;",
blocks: [{
style: "font-size: 22px; font-weight: bold; color: #e67e22; justify-content: start;",
value: "Inhalt der Side-Bar"
}, {
style: "",
value: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}, {
style: "",
value: "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}]
}),
showCloseButton: true,
showAsModal: true
})) +
raw(GIP_interaction({
uniqueId: "DialogOeffnen" + Nr,
embedded: false,
blocks: [{
style: "",
value: "Dialog öffnen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: myDialogId
}, {
type: "customJS",
value: "const myModalElement = document.getElementById('GIPDialog" + myDialogId +
"active');
setTimeout(() => {
myModalElement.style.transform = 'translateX(0)';
}, 10);
myModalElement.addEventListener('close', () => {
myModalElement.style.transform = 'translateX(100%)';
});"
}]
}]
})))let myDialogId := "SidebarMenu" + Nr;
raw(GIP_dialog({
uniqueId: myDialogId,
class: "",
style: "transform: translateX(100%); transition: transform 0.3s ease-out; position: fixed; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 80%; max-width: 500px; height: 100%; max-height: 100%; border-radius: 0;",
value: GIP_layout({
uniqueId: "DialogContent" + Nr,
embedded: true,
direction: "vertical",
style: "width: 100%; height: 100%; padding: 30px; gap: 20px;",
blocks: [{
style: "font-size: 22px; font-weight: bold; color: #e67e22; justify-content: start;",
value: "Inhalt der Side-Bar"
}, {
style: "",
value: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. "
}, {
style: "",
value: "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}]
}),
showCloseButton: true,
showAsModal: true
})) +
raw(GIP_interaction({
uniqueId: "DialogOeffnen" + Nr,
embedded: true,
blocks: [{
style: "",
value: "Dialog öffnen"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: myDialogId
}, {
type: "customJS",
value: "const myModalElement = document.getElementById('GIPDialog" + myDialogId +
"active');
setTimeout(() => {
myModalElement.style.transform = 'translateX(0)';
}, 10);
myModalElement.addEventListener('close', () => {
myModalElement.style.transform = 'translateX(100%)';
});"
}]
}]
}))Dialog: Video in Iframe
Beschreibung
Wir möchten eine Video-Anleitung in einen Dialog einbetten, damit Nutzer diese unkompliziert aufrufen können.
Der Aufruf des Dialogs erfolgt über ein GIP-Modul mit dem actions-Key, hier Beispielhaft ein Interaction-Element. Im Dialog selbst nutzen wir ein Layout, um zusätzlich zum Video noch einen alternativen Schließen-Button und eine Überschrift anzuordnen.
GIP_layout({
uniqueId: "VideoContainer" + Nr,
direction: "vertical",
style: "display: flex; flex-direction: column; height: 100%;",
blocks: [{
style: "justify-content: flex-end;",
value: GIP_materialSymbols({
filling: true,
scalingFactor: 1.3,
color: "#1F305E",
icon: "disabled_by_default"
}),
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
}, {
style: "justify-content: center; margin-bottom: 20px; color: #7F0000; font: bold 20px arial; text-align: center;",
value: "Verwendung des Moduls - Ausgangsrechnungen"
}]
})Damit nur dieser alternative Button verfügbar ist, setzen wir im Dialog showCloseButton auf false. Außerdem öffnen wir in diesem Beispiel den Dialog als modal, was aber optional ist.
GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 100%; height: 100%; max-width: 80vw; max-height: 80vh; padding: 20px 30px;",
value: GIP_layout({
uniqueId: "VideoContainer" + Nr,
direction: "vertical",
style: "display: flex; flex-direction: column; height: 100%;",
blocks: [{
style: "justify-content: flex-end;",
value: GIP_materialSymbols({
filling: true,
scalingFactor: 1.3,
color: "#1F305E",
icon: "disabled_by_default"
}),
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
}, {
style: "justify-content: center; margin-bottom: 20px; color: #7F0000; font: bold 20px arial; text-align: center;",
value: "Verwendung des Moduls - Ausgangsrechnungen"
}]
}),
showCloseButton: false,
showAsModal: true
})Um nun das Video im Dialog darzustellen, nutzen wir einen Iframe. In diesem Fall nutzen wir ein YouTube-Video und kopieren von dort den Iframe-Code. Zusätzlich fügen wir styling hinzu, um die Größe an den Dialog anzupassen. Den Iframe können wir danach einfach als value eines neuen Layout-Blocks übergeben.
GIP_layout({
uniqueId: "VideoContainer" + Nr,
direction: "vertical",
style: "display: flex; flex-direction: column; height: 100%;",
blocks: [{
style: "justify-content: flex-end;",
value: GIP_materialSymbols({
filling: true,
scalingFactor: 1.3,
color: "#1F305E",
icon: "disabled_by_default"
}),
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
}, {
style: "justify-content: center; margin-bottom: 20px; color: #7F0000; font: bold 20px arial; text-align: center;",
value: "Verwendung des Moduls - Ausgangsrechnungen"
}, {
style: "justify-content: center; align-items: center;",
value: ---
<iframe style="max-width: 100%; max-height: 800px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/hYQCYr7Y19w?si=lqLT9Gd5y9DaUJk-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
---
}]
})Code des Beispiels
let dialogId := "DialogMitVideoanleitung" + Nr;
html(raw(GIP_master({})) +
raw(GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 100%; height: 100%; max-width: 80vw; max-height: 80vh; padding: 20px 30px;",
value: GIP_layout({
uniqueId: "VideoContainer" + Nr,
direction: "vertical",
style: "display: flex; flex-direction: column; height: 100%;",
blocks: [{
style: "justify-content: flex-end;",
value: GIP_materialSymbols({
filling: true,
scalingFactor: 1.3,
color: "#1F305E",
icon: "disabled_by_default"
}),
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
}, {
style: "justify-content: center; margin-bottom: 20px; color: #7F0000; font: bold 20px arial; text-align: center;",
value: "Verwendung des Moduls - Ausgangsrechnungen"
}, {
style: "justify-content: center; align-items: center;",
value: ---
<iframe style="max-width: 100%; max-height: 800px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/hYQCYr7Y19w?si=lqLT9Gd5y9DaUJk-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
---
}]
}),
showCloseButton: false,
showAsModal: true
})) +
raw(GIP_interaction({
uniqueId: "ButtonFürVideoanleitung" + Nr,
class: "GIPColorBlue",
blocks: [{
value: "Öffne Video-Anleitung"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId
}]
}]
})))let dialogId := "DialogMitVideoanleitung" + Nr;
raw(GIP_dialog({
uniqueId: dialogId,
class: "",
style: "width: 100%; height: 100%; max-width: 80vw; max-height: 80vh; padding: 20px 30px;",
value: GIP_layout({
uniqueId: "VideoContainer" + Nr,
direction: "vertical",
style: "display: flex; flex-direction: column; height: 100%;",
blocks: [{
style: "justify-content: flex-end;",
value: GIP_materialSymbols({
filling: true,
scalingFactor: 1.3,
color: "#1F305E",
icon: "disabled_by_default"
}),
actions: [{
trigger: "click",
scripts: [{
type: "closeGIPdialog",
dialogId: dialogId
}]
}]
}, {
style: "justify-content: center; margin-bottom: 20px; color: #7F0000; font: bold 20px arial; text-align: center;",
value: "Verwendung des Moduls - Ausgangsrechnungen"
}, {
style: "justify-content: center; align-items: center;",
value: ---
<iframe style="max-width: 100%; max-height: 800px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/hYQCYr7Y19w?si=lqLT9Gd5y9DaUJk-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
---
}]
}),
showCloseButton: false,
showAsModal: true
})) +
raw(GIP_interaction({
uniqueId: "ButtonFürVideoanleitung" + Nr,
embedded: true
class: "GIPColorBlue",
blocks: [{
value: "Öffne Video-Anleitung"
}],
actions: [{
trigger: "click",
scripts: [{
type: "openGIPdialog",
dialogId: dialogId
}]
}]
}))