🧩 UI Helper

Utility functies voor het beheren van form UI elementen binnen Dataverse (velden, secties, tabs en enable/disable gedrag).

← Terug naar Core Library

📖 Introductie

De UI Helper biedt herbruikbare functies voor het aanpassen van de gebruikersinterface binnen model-driven apps. Hiermee kunnen velden, secties en tabs dynamisch worden getoond, verborgen of uitgeschakeld.

👉 Vereenvoudigt complexe UI-logica en zorgt voor consistente form behavior.

📦 Functionaliteit

👁️ Zichtbaarheid

  • showField(formContext, fieldName, show) → Toon/verberg veld
  • showSection(formContext, tabName, sectionName, show) → Toon/verberg sectie
  • showTab(formContext, tabName, show) → Toon/verberg tab

🔒 Enable / Disable

  • setFieldDisabled(formContext, fieldName, disabled) → Enable/disable veld
  • setFieldsDisabled(formContext, fieldNames, disabled) → Enable/disable meerdere velden
  • setSectionFieldsDisabled(formContext, tabName, sectionName, disabled) → Enable/disable sectie velden
  • setAllFieldsDisabled(formContext, disabled) → Enable/disable hele formulier

⚙️ Werking

De helper biedt een abstractielaag bovenop de Dataverse formContext UI API.

👉 De helper werkt met:
  • Directe control access
  • UI manipulatie via standaard API's
  • Veilige uitvoering (null checks & try/catch)

1. Controls ophalen

  • formContext.getControl()
  • formContext.ui.tabs.get()

2. UI gedrag aanpassen

  • setVisible(true/false)
  • setDisabled(true/false)

3. Ondersteuning

  • Individuele controls
  • Arrays van velden
  • Secties en tabs
  • Volledig formulier

⚠️ Belangrijke aandachtspunten

  • Niet alle controls ondersteunen setDisabled
    Controle op typeof control.setDisabled === "function"
  • Bulk operaties gebruiken try/catch
    Voorkomt fouten bij unsupported controls
  • Sections en tabs moeten bestaan
    Anders gebeurt er niets (silent fail)
  • setAllFieldsDisabled
    Werkt op alle controls (inclusief subgrids, webresources, etc.)
⚠️ UI-logica moet altijd getest worden per form type (Main, Quick Create, etc.)

💡 Voorbeelden

Veld tonen/verbergen

core.UI.showField(formContext, "onited_name", true);

Sectie tonen/verbergen

core.UI.showSection(formContext, "detailsTab", "addressSection", true);

Tab tonen/verbergen

core.UI.showTab(formContext, "detailsTab", false);

Specifiek veld uitschakelen

core.UI.setFieldDisabled(formContext, "telephone1", true);

Meerdere velden uitschakelen

core.UI.setFieldsDisabled(formContext, ["name", "telephone1"], true);

Sectie velden uitschakelen

core.UI.setSectionFieldsDisabled(
  formContext,
  "detailsTab",
  "addressSection",
  true
);

Alle velden uitschakelen

core.UI.setAllFieldsDisabled(formContext, true);

📊 Samenvatting

✅ UI manipulatie via formContext
✅ Ondersteunt velden, secties en tabs
✅ Veilige uitvoering met checks
✅ Geschikt voor dynamische form logica