Gadget eFormFields

Dieses Skript enthält Callbacks für das Gadget eFormFields .

tipp

Zum Aktivieren der Callbacks muss das Skript ou.tmpl.eFiles.callbacks.GadgetFormField in ou.cust.eFiles.callbacks.GadgetFormField umbenannt werden.

Verwendung

Für was kann ich diese Callbacks verwenden?

• Wenn man Felder dynamisch modifizieren möchte
• Einsatz der MultiTable als Feldtyp
• Auswahl der Kategorien einschränken
• Deaktivieren der TOP 5 Kategorien

Welche Callbacks sind definiert?

• onConfigureField: Triggert, wenn ein Feld im Gadget konfiguriert wurde
• onOptionsLoaded: Triggert, die Optionen für das Gadget geladen wurden
• onTemplateLoaded: Triggert, wenn das Template geladen wurde

Callbacks

onConfigureField

Dieser Callback wird getriggert, wenn ein Feld im Gadget konfiguriert wurde.

onConfigureField(field: {
    technicalName: string;
    displayName: string;
    displayNameDE?: string;
    displayNameEN?: string;
    dataType: "number" | "string" | "date" | "checkbox" | "bool" | "select" | "text" | "separator" | "tags" | "table";
    mandatory: boolean;
    readOnly: boolean;
    sameLine: boolean;
    hitlistField?: string;
    length?: number;
    width?: string;
    userExit?: "focus" | "blur" | "change" | "none";
    selectionValues?: string | string[] | Array<{ text: string; value: string }>;
    placeholder?: string;
    help?: string;
    height?: string;
    visible?: boolean;
    defaultValue?: any;
    currency?: string;
}): void

Hier kann die Einstellung der einzelnen Felder dynamisch überschrieben werden.

onConfigureField: function(field) {
    /**
     * @type {eFile}
     */
    var docFile = context.file;

    if (field.technicalName == "expressPayment" && docFile.globalState != "30") {
        field.readOnly = true;
    }
}

MultiTable Einstellungen

Um Felder vom Typ MultiTable zu konfigurieren, muss dieser Callback verwendet werden.

Ist das Feld vom MultiTable, so steht eine zusätzliche Eigenschaft tableOptions zur Verfügung.

onConfigureField: function(field) {
    /**
     * @type {eFile}
     */
    var docFile = context.file;

    if (field.technicalName === "table2" && field.type === "table") {
        field.tableOptions.columns = {
            article: {
                label: "de:Artikelnr.;en:Article number",
                type: "default",
                change: function(value, options) {
                    if (!value) {
                        return "leer";
                    }

                    showTableDialog({
                        height: 600,
                        width: 1000,
                        title: "Beispieldatensätze",
                        rows: [{
                            article: "1",
                            articleName: "Artikel 1"
                        }, {
                            article: "2",
                            articleName: "Artikel 2"
                        }, {
                            article: "3",
                            articleName: "Artikel 3"
                        }],
                        columns: {
                            article: "de:Artikelnr.;en:Article number",
                            articleName: "de:Artikel;en:Article"
                        },
                        success: function(selectedRows) {
                            options.row.set(selectedRows[0]);
                            options.row.focus("amount");
                        }
                    });
                    return "";
                }
            },
            articleName: {
                label: "de:Artikel;en:Article",
                allowEdit: false
            },
            amount: {
                label: "de:Netto;en:net",
                type: "currency"
            }
        };
    }
}

onOptionsLoaded

Dieser Callback wird getriggert, wenn alle Optionen für das Gadget geladen wurden.

onOptionsLoaded(options: {
    allowSelectCategory: boolean;

    availableCategories?: Array<Category>;
    availableForms: gadgetFormConfiguration[];
    selectedCategory?: Category;
    selectedSubCategory?: SubCategory;
    userTopCategories?: Array<SubCategory>;

    selectedForm?: gadgetFormConfiguration;
    formData?: gadgetFormData;

    language: "de" | "en" | string;
    locales: locales;
    showHelp?: boolean;

    error?: string;
}): void

Hier kann z. B. die Auswahl der Kategorien beschränkt werden.

onOptionsLoaded: (options) => {
    /**
     * @type {eFile}
     */
    const docFile = context.file;

    // Auswahl nur wenn globalState gleich 10 (Indexieren)
    options.allowSelectCategory = docFile.globalState === "10";
},

Oder die TOP5 Auswahlliste deaktivieren:

onOptionsLoaded: (options) => {
    // Zum Deaktivieren der TOP 5 Auswahlliste, einfach Array leeren.
    options.userTopCategories = [];
},

onTemplateLoaded

Dieser Callback wird getriggert, wenn das HTML-Template geladen wurde.

onTemplateLoaded: (html: string): string | void

gefahr

Achtung! Hier sollten keine Änderungen vorgenommen werden.

Das Template enthält das komplette Vue-Template.