Als DataEngine Admin hast du die Möglichkeit, durch benutzerdefiniertes JavaScript (JS) die Funktionalität der MARINI DataEngine maßgeschneidert zu erweitern. Dies erlaubt die Erstellung spezifischer Funktionen, die perfekt auf deinen Anwendungsfall zugeschnitten sind. Ob du Interaktionen verbessern oder dynamische Inhalte hinzufügen möchtest – Custom JavaScript bietet dir diese Flexibilität.
Schritt-für-Schritt Anleitung
- Admin-Panel aufrufen: Logge dich in die DataEngine als Admin ein und navigiere zum Admin-Bereich.
- Custom JavaScript Bereich finden: Gehe zu den „Systemeinstellungen“ und wähle den Abschnitt „Custom JavaScript“. Hier kannst du benutzerdefinierten JavaScript-Code für dein System hinzufügen.
- JavaScript-Code hinzufügen: Gib den JavaScript-Code ein, der deine gewünschten Funktionen implementiert. Dies kann das Anpassen von User-Interaktionen, das Bearbeiten von Daten oder die Integration von Drittanbieterdiensten umfassen. Du kannst auch Standard-JS-Funktionen verwenden, wie zum Beispiel Event Listener, um dynamisch auf Benutzereingaben zu reagieren.
- Änderungen speichern: Nachdem du den JS-Code eingegeben hast, speichere die Änderungen. Die neuen Funktionen werden dann sofort im gesamten System aktiviert.
Tipps & Best Practices
- Kollaboratives Arbeiten: Dokumentiere deinen JavaScript-Code sorgfältig, insbesondere bei komplexen Funktionen. So können andere Admins oder Entwickler besser verstehen, welche Änderungen vorgenommen wurden.
- Fehlerbehebung und Testing: Teste deinen Code gründlich, um sicherzustellen, dass er keine unerwarteten Fehler verursacht. Dies gilt besonders für umfangreiche oder komplexe Anpassungen.
- Code-Organisation: Vermeide unnötig lange oder ineffiziente Codeblöcke. Teile den Code in gut strukturierte Funktionen auf, um ihn wartbarer zu gestalten.
- Performance beachten: JavaScript kann die Ladezeiten und Performance der DataEngine beeinflussen. Achte daher darauf, dass dein Code schlank und effizient ist, um unnötige Verzögerungen zu vermeiden.
Erweiterte Anwendungsmöglichkeiten
- Benutzerdefinierte Validierung: Du kannst benutzerdefinierte JavaScript-Validierungen implementieren, um sicherzustellen, dass die eingegebenen Daten bestimmten Regeln entsprechen, bevor sie im System gespeichert werden.
- Automatisierungen: Verwende JavaScript, um automatisch Abläufe zu starten, z.B. Daten zu aktualisieren, ohne dass der Benutzer manuell eingreifen muss. Dies kann durch die Nutzung von APIs oder Webhooks geschehen, um externe Systeme zu integrieren.
- Dynamische UI-Anpassungen: Mit JS kannst du dynamische Anpassungen der Benutzeroberfläche vornehmen, etwa durch das Einblenden oder Ausblenden von Feldern basierend auf Benutzeraktionen.
Fehlervermeidung und Sicherheitsaspekte
- Eingabevalidierung: Überprüfe Benutzereingaben nicht nur auf der Client-Seite mit JavaScript, sondern ergänze dies auch mit serverseitiger Validierung, um Sicherheitsrisiken wie Cross-Site Scripting (XSS) zu vermeiden.
- Debugging-Tools verwenden: Nutze Browser-Konsolen oder JavaScript-Debugger, um Fehler und Warnungen im Code frühzeitig zu identifizieren und zu beheben.
- Performance optimieren: Verwende asynchrones JavaScript (z.B.
async
oderdefer
-Attribute), um die Ladezeiten der Seite zu verbessern.
Durch den gezielten Einsatz von Custom JavaScript kannst du das Benutzererlebnis und die Funktionalität der MARINI DataEngine nicht nur optisch, sondern auch technisch erheblich aufwerten. Nutze diese Möglichkeiten, um deinen spezifischen Anforderungen gerecht zu werden und eine maßgeschneiderte Lösung zu entwickeln.
Beispiel: Page-Reload nach Inline-Edit
Über Custom JS hast du in der MARINI DataEngine die Möglichkeit, einen Page-Reload nach einem Inline-Edit zu triggern. Das kann sinnvoll sein, wenn nach dem Speichern eines Datensatzes Workflows angestoßen werden und Werte in der jeweiligen Sicht (Detail View) nach dem Speichern neu berechnet und direkt angezeigt werden sollen.
Nutze dafür folgenden JS-Code
$(document).on('inlineEditSaveEvent', function (e, module, field) {
if (module === 'module_name' && field === 'module_field') {
location.reload();
}
});
Die beiden Variablen module
und field
müssen entsprechend definieren werden.
Wichtig: Stelle sicher, dass die Funktion „Inline-Edit“ für das definierte Feld aktiviert ist. Das kannst du im Studio im Admin-Bereich überprüfen.