📜 Form Scripting

← Terug naar Develop

Toepassen van client-side form scripting binnen Dataverse.

📖 Introductie

Form scripting wordt gebruikt om gedrag en interactie op formulieren binnen Model-Driven Apps te sturen.

Deze pagina beschrijft:

🎯 Doel

Form scripting maakt het mogelijk om dynamisch gedrag toe te voegen aan formulieren.

Toepassingen

💡 Gebruik Form Scripting wanneer standaardfunctionaliteit zoals Business Rules onvoldoende mogelijkheden biedt.

✅ Wanneer gebruik je Form Scripting?

Gebruik Form Scripting wanneer:

✅ Complexe logica nodig is

✅ Meerdere velden gecombineerd moeten worden

✅ Interactie met externe data nodig is

✅ Dynamisch gedrag niet mogelijk is via Business Rules

Niet gebruiken wanneer

❌ Eenvoudige logica mogelijk is via Business Rules

❌ Server-side validatie vereist is (gebruik Plugins)

💡 Business Rules blijven altijd de eerste keuze voor eenvoudige UI-logica.

⚙️ Werking van Form Scripting

JavaScript wordt gekoppeld aan events van een formulier.

Scripts worden uitgevoerd wanneer een gebeurtenis plaatsvindt, bijvoorbeeld:

Proces

Form Event
     ↓
JavaScript Handler
     ↓
Business Logica
     ↓
UI Update / Validatie

💡 Scripts worden gekoppeld via Web Resources en Event Handlers.

📋 Belangrijkste Form Events

OnLoad

Wordt uitgevoerd wanneer een formulier wordt geopend.

Gebruik voor

Voorbeelden

✅ Standaardwaarden instellen

✅ Velden zichtbaar maken

✅ Configuratie laden

OnChange

Wordt uitgevoerd wanneer de waarde van een veld verandert.

Gebruik voor

Voorbeelden

✅ BTW berekenen

✅ Naamvelden combineren

✅ Secties tonen op basis van keuzes

Voorbeeld

// Phonenumber binding
unica.core.Field.addOnChangeSafe(
    formContext,
    "telephone1",
    brenkeAccount.onChange_Phonenumber
);

💡 Voeg OnChange handlers bij voorkeur toe tijdens OnLoad.

OnSave

Wordt uitgevoerd tijdens het opslaan van een record.

Gebruik voor

Voorbeelden

✅ IBAN valideren

✅ Verplichte gegevens controleren

✅ Save stoppen bij fouten

🖥️ Veelvoorkomende Scenario's

UI Gedrag

Velden tonen of verbergen

core.UI = {
    showField: function (formContext, fieldName, show) {
        const control = formContext.getControl(fieldName);
        if (control) {
            control.setVisible(show);
        }
    }
}

Secties tonen of verbergen

core.UI = {
    showSection: function (formContext, tabName, sectionName, show) {
        const tab = formContext.ui.tabs.get(tabName);
        if (!tab) return;

        const section = tab.sections.get(sectionName);

        if (section) {
            section.setVisible(show);
        }
    }
}

Tabs tonen of verbergen

core.UI = {
    showTab: function (formContext, tabName, show) {
        const tab = formContext.ui.tabs.get(tabName);

        if (tab) {
            tab.setVisible(show);
        }
    }
}

Velden uitschakelen

core.UI = {
    setFieldDisabled: function (formContext, fieldName, disabled) {
        if (!formContext || !fieldName) return;

        const control = formContext.getControl(fieldName);

        if (!control) {
            console.warn(`Control not found: ${fieldName}`);
            return;
        }

        if (typeof control.setDisabled === "function") {
            control.setDisabled(!!disabled);
        }
    }
}

🔄 Data Manipulatie

Veld automatisch vullen

core.Field = {
    setDefaultValue: function (formContext, name, value) {
        const current =
            core.Field.getValue(formContext, name);

        if (
            current === null ||
            current === "" ||
            (Array.isArray(current) && current.length === 0)
        ) {
            core.Field.setValue(
                formContext,
                name,
                value
            );
        }
    }
}

Waarde kopiëren

core.Field = {
    copyTextField: function (
        formContext,
        nameSource,
        nameDestination
    ) {
        const value =
            core.Field.getValue(
                formContext,
                nameSource
            );

        core.Field.setTextValue(
            formContext,
            nameDestination,
            value
        );
    }
}

Data normaliseren

core.IBAN = {
    normalize: function (value) {
        if (!value || typeof value !== "string")
            return "";

        return value
            .replace(/\s+/g, "")
            .toUpperCase();
    }
}

✅ Validatie

Gebruik Form Scripting voor:

Voorbeelden

✅ IBAN-controle

✅ Postcodevalidatie

✅ Datumberekeningen

✅ Verplichte invoer

🔗 Interactie

Form scripting ondersteunt gebruikersinteractie.

Voorbeelden

🛠️ Werkwijze

Stap 1 – Business Requirement

Bepaal de gewenste functionaliteit.

Stap 2 – JavaScript Ontwikkelen

Ontwikkel de benodigde logica.

Stap 3 – Web Resource

Publiceer het script als Web Resource.

Stap 4 – Koppelen aan Formulier

Voeg het script toe aan het formulier.

Stap 5 – Event Handlers Configureren

Registreer:

Stap 6 – Testen

Valideer functionaliteit, gebruikerservaring en prestaties.

📏 Richtlijnen

Gebruik

Performance

Onderhoudbaarheid

Voorbeeld

unica.account
unica.contact
unica.opportunity

Consistentie

⚠️ Veelgemaakte Fouten

🚩 Te veel logica in OnLoad

🚩 Business Rules en JavaScript combineren zonder noodzaak

🚩 Dubbele Event Handlers

🚩 Geen rekening houden met performance

🚩 Alleen client-side validatie uitvoeren

🚩 Geen namespace-structuur gebruiken

🚩 Grote monolithische scripts ontwikkelen

🏛️ Positionering Binnen de Oplossing

Form Scripting maakt onderdeel uit van de UI & Interaction Layer.

Het bepaalt:

💡 Form Scripting beïnvloedt gebruikersgedrag en presentatie, niet het datamodel.

🔗 Samenhang met Andere Onderdelen

Form Scripting hangt nauw samen met:

Besliskader

Business Rule
      ↓
Eenvoudige UI Logica

JavaScript
      ↓
Complexe Form Logica

PCF Control
      ↓
Custom UI Component

Plugin / API
      ↓
Server-side Logica

✅ Checklist

Ontwerp

Ontwikkeling

Kwaliteit

ALM

✅ Resultaat

Na toepassing van Form Scripting:

Form Scripting vormt daarmee een essentieel onderdeel van de UI & Interaction-laag binnen Model-Driven Apps en ondersteunt geavanceerde gebruikersinteractie wanneer standaardplatformfunctionaliteit niet voldoende is.