🎛️ Ribbon customization

Command bar uitbreiden met knoppen, flows en JavaScript acties.

← Terug naar Develop

Introductie

De command bar (ook wel ribbon genoemd) bepaalt welke acties beschikbaar zijn voor gebruikers binnen model-driven apps.

Deze pagina beschrijft:

  • wanneer en hoe de command bar wordt aangepast
  • hoe knoppen worden verborgen of toegevoegd
  • hoe acties worden gekoppeld (JavaScript / Power Automate)
  • wanneer gebruik wordt gemaakt van de standaard editor of Ribbon Workbench

1. Doel

Ribbon customization wordt gebruikt voor het aanpassen van gebruikersacties binnen de applicatie.

Toepassingen:

  • knoppen verbergen
  • knoppen toevoegen
  • acties automatiseren
  • gebruikerservaring verbeteren

👉 De command bar bepaalt wat gebruikers kunnen doen binnen een formulier, view of subgrid. https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/customize-commands-ribbon


2. Moderne aanpak vs Ribbon Workbench

Er zijn twee manieren om de command bar aan te passen:

Moderne Command Designer

  • beschikbaar in Power Apps
  • gebaseerd op Power Fx en configuratie
  • werkt binnen model-driven app designer

Gebruik wanneer:

  • eenvoudige knoppen nodig zijn
  • visibiliteit afhankelijk is van veldwaarden
  • beperkte logica nodig is

Ribbon Workbench

  • externe tool (XrmToolBox)
  • werkt met legacy ribbon XML
  • ondersteunt volledige controle over command bar

Gebruik wanneer:

  • complexe logica nodig is
  • standaard knoppen aangepast moeten worden
  • security checks nodig zijn
  • geavanceerde positioning of gedrag nodig is

👉 Ribbon Workbench wordt gebruikt voor geavanceerde scenario’s en volledige controle. https://dev.to/sapotacorp/model-driven-ribbon-command-designer-vs-ribbon-workbench-in-2026-3bnd


3. Standaard aanpassen (Command Designer)

Gebruik deze aanpak wanneer mogelijk (voorkeur).

Stap-voor-stap

  1. Ga naar Power Apps
  2. Open de betreffende solution
  3. Open de model-driven app
  4. Klik op “Edit command bar” bij een form of view
  5. Kies de locatie (Main form / Main grid / Subgrid)
  6. Klik op “New command”
  7. Configureer:
    • label
    • icoon
    • actie
    • zichtbaarheid
  8. Sla op en publiceer

👉 De command designer maakt het mogelijk om knoppen toe te voegen zonder externe tools. https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/use-command-designer


4. Knop toevoegen met actie

Bij het toevoegen van een knop definieer je niet alleen wat er gebeurt, maar ook wanneer en in welke context de actie wordt uitgevoerd.

Mogelijkheden

  • Power Fx actie
  • JavaScript functie
  • Power Automate (Flow)
  • navigatie (open form / page / custom page)

💡 Belangrijk: kies de juiste techniek op basis van complexiteit en onderhoudbaarheid.

Scenario Aanpak
Simpele logica / UI gedrag Power Fx
Complexe client-side logica JavaScript
Backend processen / integraties Power Automate
Navigatie / UX Open form / page

Context van de knop

Afhankelijk van de locatie krijg je andere context mee:

  • Form button → huidige record (formContext)
  • Grid button → één of meerdere geselecteerde records
  • Subgrid button → relatie + parent record

👉 Houd hier expliciet rekening mee bij je implementatie.


Selectie gedrag (Grid)

Bij grid knoppen moet je expliciet rekening houden met selectie:

  • Single select
  • Multi select
  • Geen selectie

👉 Configureer dit correct, anders werkt de knop niet zoals verwacht.

Voorbeelden:

  • knop alleen actief bij 1 record
  • knop werkt op meerdere records tegelijk

JavaScript actie

Gebruik JavaScript voor client-side logica of complexe interacties.

Best practices

  • gebruik executionContext
  • werk met formContext, niet Xrm.Page
  • houd functies klein en modulair
  • vermijd business logic

Voorbeeld

																	function activateRecord(executionContext) {
    var formContext = executionContext.getFormContext(); 
    var id = formContext.data.entity.getId();

    if (!id) {
        return;
    }

    Xrm.WebApi.updateRecord("account", id, {
        statecode: 0,
        statuscode: 1
    }).then(function () {
        formContext.data.refresh();
    });
}
																

Power Automate actie

Gebruik Power Automate wanneer:

  • externe systemen betrokken zijn
  • langdurige processen nodig zijn
  • server-side logica gewenst is

Aandachtspunten

  • gebruik Power Apps (v2) trigger
  • geef expliciet parameters mee (record ID, entity name)
  • houd rekening met async gedrag
  • geef feedback aan gebruiker

👉 Minder geschikt voor directe UI feedback.


Navigatie acties

Gebruik navigatie voor betere UX:

  • open een ander formulier
  • open een custom page
  • open een Power App pagina

💡 Krachtig voor guided user flows.


Architectuur richtlijn

Plaats logica op de juiste plek:

  • UI gedrag → JavaScript
  • business logic → plugin / Dataverse
  • integraties → Power Automate

👉 Voorkom dat business logica in de ribbon terecht komt.


5. Knop verbergen

Knoppen moeten contextbewust zichtbaar zijn om de UI overzichtelijk te houden.

Mogelijkheden

  • veldwaarden (bijv. statuscode)
  • security roles
  • gebruikerscontext
  • selectie
  • formuliermodus (Create / Update)

👉 Toon alleen wat relevant is.


Verschil: Visibility vs Enable Rules

Type Gedrag
Visibility knop volledig verborgen
Enable knop zichtbaar maar disabled

💡 Gebruik:

  • Visibility → actie niet van toepassing
  • Enable → actie tijdelijk niet uitvoerbaar

Wanneer Enable Rules gebruiken

Gebruik Enable Rules wanneer:

  • selectie vereist is
  • record nog niet voldoet aan voorwaarden
  • gebruiker feedback moet krijgen

Voorbeeld:

  • “Approve” knop zichtbaar maar disabled totdat status = Concept

In Command Designer (Power Fx)

Gebruik Power Fx voor eenvoudige visibility logica.

Voorbeelden

Self.Selected.Item.statuscode = 1 // grid context

User().Email = " admin@brenke.nl"

Best practices

  • houd expressies simpel
  • vermijd complexe logica
  • documenteer intentie
  • test scenario’s

In Ribbon Workbench (Display Rules)

Mogelijkheden:

  • Value Rules
  • Entity Rules
  • Selection Count Rules
  • Custom Rules (JavaScript)

Custom Rule (JavaScript)

Gebruik wanneer standaard regels niet voldoende zijn.

Let op

  • moet snel zijn
  • alleen sync logica
  • return true/false

UX richtlijnen

  • verberg irrelevante acties
  • toon alleen logische acties
  • voorkom “button overload”
  • groepeer acties

💡 Een goede command bar voelt vanzelfsprekend.


Troubleshooting

Veel voorkomende problemen:

  • knop verschijnt niet → visibility rule
  • knop disabled → enable rule
  • JavaScript werkt niet → verkeerde configuratie
  • context ontbreekt → verkeerde setup

Debug tips

  • gebruik browser dev tools
  • gebruik console.log
  • test zonder rules
  • publiceer solution opnieuw

6. Ribbon Workbench (geavanceerd)

Setup

  1. Installeer XrmToolBox
  2. Installeer Ribbon Workbench
  3. Maak een solution
  4. Voeg entiteit toe
  5. Open solution

Knop toevoegen

  1. Open Ribbon Workbench
  2. Selecteer entiteit
  3. Sleep button
  4. Configureer:
    • label
    • icoon
    • command
  5. Koppel actie
  6. Publish

Knop verbergen

  1. Selecteer knop
  2. Open command
  3. Voeg Display Rule toe
  4. Configureer
  5. Publish

7. Security role based visibility

Werking

  • lees rollen gebruiker
  • return true/false
  • gebruik in Display Rule

Aanpak

  1. Maak JavaScript functie
  2. Lees rollen
  3. Vergelijk
  4. return true/false
  5. gebruik als rule

8. Richtlijnen

Gebruik

  • gebruik Command Designer eerst
  • Workbench alleen indien nodig

Performance

  • houd scripts klein
  • verplaats logica naar backend
  • documenteer regels

Consistentie

  • consistente naming
  • duidelijke labels
  • herkenbare iconen

Governance

  • voorkom te veel knoppen
  • voorkom duplicatie
  • houd UI logisch

9. Veelgemaakte fouten

  • te veel knoppen
  • logica in JS
  • verkeerde tool keuze
  • gebruik van namen i.p.v. GUIDs
  • geen security checks

10. Positionering binnen de oplossing

Ribbon customization maakt onderdeel uit van:

  • UI
  • lichte business logic
  • configuratie

👉 Bepaalt hoe gebruikers werken met het systeem.


11. Samenvatting

Ribbon customization bepaalt welke acties beschikbaar zijn binnen Dataverse.

Door:

  • juiste tool keuze
  • consistente configuratie
  • duidelijke rules

ontstaat een oplossing die:

  • gebruiksvriendelijk
  • beheersbaar
  • logisch

is binnen het platform.