Mit Gentics ANDP Version 2.3, haben Sie jetzt die Möglichkeit, bestehende Elemente, den PreSubmit- & PostSubmit Hook anzupassen. Diese Erweiterungen bieten Ihnen umfassende Kontrolle und Flexibilität bei der Gestaltung und Verarbeitung Ihrer Formulare.
Customizing von Elementen
Sie können bestehende Formularelemente anpassen oder vollständig neue Elemente erstellen, um den speziellen Anforderungen Ihrer Anwendungen gerecht zu werden. Dies umfasst die Anpassung des Layouts, der Validierungslogik und der Datenverarbeitung. Dadurch können Sie sicherstellen, dass Ihre Formulare exakt so funktionieren, wie es Ihre Geschäftsprozesse erfordern.
Maßgeschneiderte Lösungen: Custom-Elemente statt Standard-Elemente
Das Ersetzen bestehender Elemente durch Custom-Elemente ermöglicht es Ihnen, spezifische Funktionen, individuelle Validierungen, maßgeschneiderte Designs und angepasste Geschäftslogiken zu integrieren. So stellen Sie sicher, dass Ihre Anwendung nicht nur funktional, sondern auch optimal auf Ihre Anforderungen abgestimmt ist. Custom-Elemente bieten die Flexibilität, komplexe Anforderungen präzise umzusetzen und eine nahtlose Integration in Ihre bestehenden Prozesse zu gewährleisten.
In den folgenden Schritten zeigen wir Ihnen, wie einfach es ist, bestehende Elemente durch Custom-Elemente zu ersetzen und Ihre Anwendung optimal an Ihre Bedürfnisse anzupassen.
Schritt 1
Öffnen Sie Ihr ANDP-Projekt und navigieren Sie zum Verzeichnis ~/DEIN_PROJEKT/portal/formgen/src/.
Schritt 2
Sie sollten die folgenden drei Ordner vorfinden:
- custom: Dieser Abschnitt ist speziell für Sie vorgesehen, um Ihren eigenen Code einzufügen.
- elements: Dieser Bereich enthält alle vorhandenen Elemente. Bitte nehmen Sie keine Änderungen an den bestehenden Elementen vor. Es steht Ihnen jedoch frei, eigene Elemente hinzuzufügen, wir empfehlen jedoch, eigene Element in dem Verzeichnis custom hinzuzufügen.
- utils: In diesem Bereich sollten keine Änderungen vorgenommen werden.
~/DEIN_PROJEKT/portal/formgen/src/custom.Schritt 3
- ElementDefinitions.tsx: In dieser Datei sind alle Elemente mit ihren TypeScript-Namen sowie den jeweiligen Pfaden definiert.
- ElementTypes.tsx: In dieser Datei werden die Elemente aus ElementDefinitions.tsx den entsprechenden ActaNova/FormGrid-Elementtypen zugewiesen.
- HooksUtils.tsx: In dieser Datei befinden sich der Pre-Submit- & Post-Submit-Hook.
Für die Implementierung von Custom-Elementen werden ausschließlich die Dateien ElementDefinitions.tsx und ElementTypes.tsx benötigt. Erstellen Sie anschließend Ihr Custom-Element im Verzeichnis custom. In diesem Beispiel nenne ich die Datei CustomElementExample.tsx.
Schritt 4
In diesem Schritt zeige ich Ihnen, wie die Klasse CustomElementExample aufgebaut sein sollte und welche Methoden Ihnen zur Verfügung stehen.
So sieht eine Beispiel-Implementierung für ein Custom-Element aus:
import React from "react";
import * as interfaces from "../utils/Interfaces";
import { IFormComponentAttributes } from "../utils/Interfaces";
import { TFunction } from "i18next";
function CustomElementExample(
props: IFormComponentAttributes
) {
return (
<div>
<h1>ExampleElement</h1>
</div>
);
};
CustomElementExample.validate = function (
state: interfaces.IState,
jsonpath: string,
id: string,
updateErrorMessages: boolean,
t: TFunction,
formGridOptions?: interfaces.IFormGridOptions
) {
return true;
};
CustomElementExample.getSummaryValue = function (
state: interfaces.IState,
jsonpath: string,
id: string,
t: TFunction,
formGridOptions?: interfaces.IFormGridOptions
) {
return "summary value";
};
export default CustomElementExample;
Folgende Methoden müssen immer implementiert werden:
- .validate: Diese Funktion wird bei jeder Validierung des Formulars aufgerufen. Hier können Sie eine speziell auf das Custom-Element abgestimmte Validierung implementieren.
- .getSummaryValue
Mithilfe des CustomElementExample können Sie nun Ihr eigenes maßgeschneidertes Element implementieren und optimal an Ihren Bedürfnissen anpassen.
Schritt 5
Nachdem Sie Ihr Custom-Element implementiert haben, können Sie es einem vorhandenen ActaNova/FormGrid-Typ zuweisen.
Dazu definieren Sie zunächst den Pfad und die Bezeichnung des Elements in ElementDefinitions:
export { default as CustomElementExample } from '../custom/CustomElementExample';
Schritt 6
Im letzten Schritt ordnen Sie im ElementTypes.tsx den entsprechenden ElementType Ihrem neuen Custom-Element zu. Wenn alle Schritte korrekt ausgeführt wurden, sollte Ihr neues Custom-Element nach dem Build beim Start eines Formulars, das den angepassten ActaNova-Typ verwendet, angezeigt werden.
Hooks
- formid: Die ID des Formulars
- data: Die Daten der einzelnen ActaNova-Elemente
- state: Eine Sammlung von Daten und Methoden, mit denen du außerhalb der HooksUtils.tsx mit der FormGen-App kommunizieren kannst.
PreSubmit Hook
Innerhalb der Methode PreSubmitHook kannst du eigenen Code einfügen, der vor dem Absenden des Formulars ausgeführt wird. Wenn du den gesamten Vorgang bereits in der PreSubmitHook stoppen möchtest, kannst du eine benutzerdefinierte Ausnahme (Exception) auslösen. Andernfalls wird der Submit-Vorgang immer durchgeführt.
export async function preSubmitForm(
formid: any,
data: FormData,
state: IState,
callback: (res: Response) => void,
error: any
): Promise {
// Füge hier asynchrone Logik ein, die vor dem eigentlichen Funktionsaufruf ausgeführt werden soll
}
PostSubmit Hook
Der PostSubmit Hook ergänzt die Anpassungsmöglichkeiten, indem er es Ihnen ermöglicht, benutzerdefinierte Logik nach der erfolgreichen Übermittlung eines Formulars auszuführen. Mit diesem Hook können Sie Aktionen auslösen, die nach dem Speichern oder Verarbeiten der Formulardaten notwendig sind, wie z.B. das Triggern von Workflows oder die Ausführung zusätzlicher Datenverarbeitungsprozesse.
export async function postSubmitForm(
formid: any,
data: FormData,
state: IState,
callback: (res: Response) => void,
error: any
): Promise {
// Füge hier asynchrone Logik ein, die nach dem eigentlichen Funktionsaufruf ausgeführt werden soll
}
Durch diese neuen Anpassungsmöglichkeiten in Gentics FormGen können Sie sicherstellen, dass Ihre Formulare optimal an Ihre Geschäftsprozesse angepasst sind und genau die gewünschten Ergebnisse liefern. Nutzen Sie diese Features, um Ihre Formulare auf das nächste Level zu bringen.