--- title: "SharePoint-kolomopmaak met JSON gebruiken in List Filter Online" description: "Hoe List Filter Online de JSON-kolomopmaak uit SharePoint-lijsten toepast: inschakelen, ondersteunde elementen, stijlen, attributen, veldtokens en expressies, beperkingen en terugval op de standaardweergave, met direct bruikbare voorbeelden." url: https://vitextra.com/nl/support/kb/10259 language: nl published: 2026-11-05 modified: 2026-11-07 products: - "List Filter Online" author: "Lidija Reising" tags: ["SharePoint kolomopmaak", "JSON kolomopmaak", "List Filter Online", "kolom opmaken", "elmType", "txtContent", "@currentField", "voorwaardelijke opmaak", "statuslabel", "CustomFormatter", "SharePoint Online webonderdeel", "Vitextra"] --- # SharePoint-kolomopmaak met JSON gebruiken in List Filter Online Hoe List Filter Online de JSON-kolomopmaak uit SharePoint-lijsten toepast: inschakelen, ondersteunde elementen, stijlen, attributen, veldtokens en expressies, beperkingen en terugval op de standaardweergave, met direct bruikbare voorbeelden. ## Inleiding ::Kolomopmaak:: is een ::functie:: van ::SharePoint Online:: waarmee u via een JSON-beschrijving de ::weergave:: van een kolom wijzigt: een status als gekleurd label met afgeronde hoeken, een getal met een waardeafhankelijke kleur of een persoon als koppeling waarmee een e-mail wordt gestart. De beschrijving wordt op de kolom zelf opgeslagen en ::SharePoint:: past deze toe in elke weergave van de ::lijst::. [List Filter Online](https://vitextra.com/nl/products/list-filter-online) kan deze beschrijvingen gebruiken. Als de optie is ingeschakeld, leest het ::webonderdeel:: de JSON-kolomopmaak van elke kolom waarvoor die beschikbaar is en bouwt het daarmee de tabelcellen op. De tabel op uw pagina ziet er dan uit als de bronlijst. Het webonderdeel ondersteunt een veelgebruikte subset van de kolomopmaaktaal. Dit artikel beschrijft precies wat wordt ondersteund, wat niet en wat er gebeurt als een opmaak meer mogelijkheden gebruikt. 📝 **Opmerking** Het webonderdeel past alleen kolomopmaak toe. Weergaveopmaak, de ::JSON:: die rijen of de volledige weergave opmaakt, wordt niet gelezen omdat het webonderdeel geen lijstweergaven gebruikt. ## Kolomopmaak inschakelen Bewerk de pagina, open het eigenschappenvenster van het webonderdeel en vouw **Uiterlijk** uit. Schakel **Kolomopmaak van de lijst gebruiken** in. De optie staat standaard uit. ![De optie voor kolomopmaak uit de lijst](https://static.vitextra.com/articles/10259/use-column-formatting-toggle-nl.png) *De optie voor kolomopmaak uit de lijst* U voert de JSON niet in het webonderdeel in. Deze komt uit de kolomdefinitie in de bronlijst: dezelfde definitie die SharePoint bijwerkt wanneer u in de lijst **Kolominstellingen** → **Deze kolom opmaken** opent en een opmaak opslaat. Het webonderdeel laadt deze samen met de overige kolomeigenschappen. Ook opmaak van een lijst op een andere ::site:: wordt dus toegepast. Opmaak geldt per kolom: elke kolom met opmaak wordt daarmee weergegeven; kolommen zonder opmaak behouden het formaat uit de kolomconfiguratie (zie [KB10258. Kolommen configureren in List Filter Online: bijschriften, formaten en weergaveopties](https://vitextra.com/nl/support/kb/10258)). ![Kolomopmaak uit de lijst toegepast in het webonderdeel](https://static.vitextra.com/articles/10259/format-in-list-and-web-part-nl.png) *Kolomopmaak uit de lijst toegepast in het webonderdeel* Als opmaak op een kolom wordt toegepast, vervangt deze de volledige cel, inclusief de optie **Gekoppeld aan item**. Neem een koppeling op in de opmaak zelf als de waarde aanklikbaar moet blijven. ## Wat wordt ondersteund ### Elementen Een opmaak is een boom van elementen. Elk element is een object met de volgende sleutels: - `elmType`: `div`, `span`, `a`, `img`, `button` of `p`. Andere waarden worden als `div` weergegeven, behalve de hieronder genoemde niet-ondersteunde waarden. - `txtContent`: de tekst van het element; een letterlijke tekenreeks, een veldtoken of een expressie. - `style`: CSS-eigenschappen van het element (zie hieronder). - `attributes`: HTML-attributen van het element (zie hieronder). - `children`: een array van onderliggende elementen, weergegeven in de opgegeven volgorde. Sleutels die het webonderdeel niet kent, zoals `$schema` of `debugMode`, worden genegeerd. ### Stijlen Het object `style` kan de volgende CSS-eigenschappen instellen. Elke waarde kan een letterlijke waarde of expressie zijn: `background`, `background-color`, `border`, `border-top`, `border-right`, `border-bottom`, `border-left`, `border-color`, `border-style`, `border-width`, `border-radius`, `box-shadow`, `color`, `cursor`, `direction`, `display`, `fill`, `flex-direction`, `flex-wrap`, `align-items`, `justify-content`, `font-family`, `font-size`, `font-style`, `font-weight`, `letter-spacing`, `line-height`, `text-align`, `text-decoration`, `text-overflow`, `text-transform`, `white-space`, `word-break`, `overflow`, `opacity`, `visibility`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `width`, `min-width`, `max-width`, `height`, `min-height`, `max-height`. Eigenschappen buiten deze lijst, zoals `position` of `z-index`, die de tabelindeling zouden kunnen verstoren, worden zonder melding overgeslagen. Ook waarden met `url(` worden overgeslagen; achtergrondafbeeldingen kunnen dus niet via stijlen worden geladen. ### Attributen | Attribuut | Elementen | Werking | |:---|:---|:---| | `class` | alle | Stelt de CSS-klasse in. SharePoint-klassen zoals `sp-field-severity--good` worden geaccepteerd, maar hebben op de pagina geen opmaak; gebruik `style` voor kleuren. | | `title` | alle | Stelt de knopinfo in. | | `href` | `a` | Het koppelingsadres. Toegestaan zijn `http:`, `https:`, `mailto:`, `tel:` en relatieve adressen. Andere schema's worden verwijderd en het element verschijnt zonder koppeling. Koppelingen krijgen `rel="noreferrer"`. | | `target` | `a` | Het doelvenster van de koppeling; standaard `_blank` (nieuw tabblad). | | `src`, `alt` | `img` | Het adres en de alternatieve tekst van de afbeelding. Dezelfde adresregels als bij `href` gelden; een afbeelding zonder geldige `src` wordt niet weergegeven. | | `iconName` | alle | De naam van een Fluent UI-pictogram, zoals `Mail` of `CheckMark`, dat vóór de elementtekst wordt geplaatst. | Andere attributen, waaronder `role`, `aria-*`, `d` en `data-interception`, worden genegeerd. ### Veldtokens | Token | Waarde | |:---|:---| | `@currentField` | De waarde van de opgemaakte kolom. | | `@currentField.prop` | Een eigenschap van de waarde: voor personen `title`, `email`, `id`, `jobTitle`, `department` of `picture`; voor opzoekwaarden `lookupValue` of `lookupId`; voor hyperlinks `Url` of `Description`. | | `[$Field]` | De waarde van een andere kolom van hetzelfde item, op basis van de interne naam. | | `[$Field.prop]` | Een eigenschap van die waarde, met dezelfde eigenschapsnamen. | | `@me` | Het e-mailadres van de huidige gebruiker. | | `@now` | De huidige datum en tijd. | Tokens kunnen zelfstandig voorkomen (`"txtContent": "@currentField"`) of binnen een langere tekenreeks (`"txtContent": "Eigenaar: [$Owner.title]"`). Een kolom met meerdere waarden (personen, opzoekwaarden of termen) verschijnt als een door komma’s gescheiden lijst. Eigenschapstoegang zoals `[$Owner.email]` geeft bij zo’n kolom de eigenschap van de eerste waarde terug. Personen en opzoekwaarden tonen hun naam; datums worden in de lokale datumnotatie weergegeven. ### Expressies Expressies kunnen worden geschreven als operatorbomen, objecten met `operator` en `operands`, of als tekenreeksen die met `=` beginnen en de Excel-achtige SharePoint-syntaxis gebruiken. Beide vormen ondersteunen dezelfde bewerkingen: - rekenen: `+` (ook voor het samenvoegen van tekenreeksen), `-`, `*`, `/`, `%`; - vergelijken: `==`, `!=`, `>`, `<`, `>=`, `<=`; datums worden op tijdstempel vergeleken; - logica: `&&`, `||`, `!`, de voorwaardelijke `? :` (in een boom: operator `?` of `:` met drie operanden) en de functie `if(condition, whenTrue, whenFalse)`; - conversie: `toString()`, `Number()`, `Date()`; - getallen: `abs()`, `floor()`, `ceiling()`; - tekenreeksen: `toLowerCase()`, `toUpperCase()`, `indexOf()`, `substring()`, `length()`. In `=`-tekenreeksen staan letterlijke tekenreeksen tussen enkele of dubbele aanhalingstekens, getallen als cijfers en booleaanse waarden als `true` en `false`. Haakjes groeperen deelexpressies; veldtokens worden direct gebruikt: `=if([$Priority] == 'High', '#a4262c', '#323130')`. ## Wat niet wordt ondersteund Het webonderdeel ondersteunt de volgende onderdelen van de kolomopmaaktaal niet: - `forEach`: een element herhalen voor elke waarde in een kolom met meerdere waarden; - `customRowAction`: knoppen die een stroom starten, een paneel openen of een veldwaarde instellen; - `elmType: "filepreview"`: documentvoorbeelden; - `elmType: "svg"` en `path`: inline vectorafbeeldingen; - de tokens `@rowIndex`, `@window`, `@thumbnail`, `@currentWeb` en andere hierboven niet genoemde tokens; - hierboven niet genoemde operatoren en functies, zoals `toLocaleString()`, `toLocaleDateString()`, `startsWith()`, `padStart()`, `replace()`, `split()`, `join()`, `getDate()`, `addDays()`, `getUserImage()`, `cos()` en `sin()`. Een opmaak met `forEach`, `customRowAction`, `filepreview`, `svg`, een onbekende operator of functie, een onbekend `@`-token in een `=`-expressie of een syntaxisfout in een `=`-expressie kan niet worden weergegeven. Het webonderdeel laat die opmaak dan los en gebruikt de standaardweergave van de kolom, het formaat uit de kolomconfiguratie, alsof de optie voor die kolom uitstaat. Andere kolommen blijven onaangetast. Onbekende attributen en stijleigenschappen worden daarentegen alleen overgeslagen; de rest van de opmaak wordt toegepast. ❗ **Belangrijk** Opmaak uit de SharePoint-ontwerper en Microsoft-voorbeelden gebruikt vaak niet-ondersteunde constructies, zoals `forEach`, `customRowAction`, `getUserImage()` of `toLocaleDateString()`. Een opmaak die in de lijst werkt, kan in het webonderdeel dus terugvallen op de standaardweergave. Controleer na het inschakelen altijd het resultaat op de pagina en vereenvoudig de opmaak als een kolom niet naar verwachting verschijnt. 📝 **Opmerking** Waarden kunnen binnenkomen als tekst volgens de landinstellingen van de lijst. Gebruik `Number()` of `Date()` alleen voor notaties die deze functies herkennen: lokale decimaaltekens, scheidingstekens voor duizendtallen en datumnotaties worden mogelijk niet goed geconverteerd. Een verwijzing naar een andere kolom garandeert geen onbewerkte getal- of datumwaarde. Controleer de werkelijke waarden en vereenvoudig de opmaak als conversie onbetrouwbaar is. Binnen langere tekenreeksen worden `@currentField`, de eigenschappen ervan en `[$Field]`-verwijzingen vervangen. Gebruik `@me` en `@now` afzonderlijk of in `=`-expressies. Een onbekend `@`-token veroorzaakt terugval in een `=`-expressie; in gewone tekst blijft het letterlijk staan. ## Voorbeelden De volgende opmaken blijven binnen de ondersteunde subset. **Een statuslabel met afgeronde hoeken.** De keuzewaarde verschijnt op een afgeronde achtergrond waarvan de kleur afhangt van de waarde: ```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "style": { "display": "inline-block", "padding": "2px 10px", "border-radius": "12px", "font-weight": "600", "color": "#ffffff", "background-color": "=if(@currentField == 'Approved', '#107c10', if(@currentField == 'Rejected', '#a4262c', '#8a8886'))" } } ``` ![Een statuskolom met gekleurde afgeronde labels](https://static.vitextra.com/articles/10259/status-pill-column-nl.png) *Een statuskolom met gekleurde afgeronde labels* **Een getal met een waardeafhankelijke kleur**, geschreven als operatorboom. Bedragen boven 1000 verschijnen rood en vet: ```json { "elmType": "span", "txtContent": "@currentField", "style": { "color": { "operator": "?", "operands": [ { "operator": ">", "operands": [ { "operator": "Number()", "operands": [ "@currentField" ] }, 1000 ] }, "#a4262c", "#107c10" ] }, "font-weight": "=if(Number(@currentField) > 1000, '700', '400')" } } ``` **Een koppeling met pictogram.** De persoon in de kolom Toegewezen aan verschijnt als e-mailkoppeling met een enveloppictogram. De opmaak staat op de kolom Toegewezen aan zelf en gebruikt de eigenschappen van de persoonswaarde: ```json { "elmType": "a", "attributes": { "href": "='mailto:' + @currentField.email", "title": "=@currentField.title", "iconName": "Mail", "target": "_blank" }, "txtContent": "@currentField.title", "style": { "color": "#0078d4", "text-decoration": "none" } } ``` ![Een persoonskolom als e-mailkoppeling met pictogram](https://static.vitextra.com/articles/10259/mail-link-column-nl.png) *Een persoonskolom als e-mailkoppeling met pictogram* ## Prestaties De JSON van een kolom wordt één keer geparseerd, wanneer de eerste cel van die kolom wordt weergegeven. De resulterende boom wordt hergebruikt voor alle andere cellen en volgende pagina’s met items. Alleen tokens en expressies worden per cel geëvalueerd. De optie voegt daardoor nauwelijks tijd toe aan het weergeven van de tabel, ook op lange pagina’s.