List Filter Online 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 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.
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).
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,buttonofp. Andere waarden worden alsdivweergegeven, 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 functieif(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"enpath: inline vectorafbeeldingen;- de tokens
@rowIndex,@window,@thumbnail,@currentWeben andere hierboven niet genoemde tokens; - hierboven niet genoemde operatoren en functies, zoals
toLocaleString(),toLocaleDateString(),startsWith(),padStart(),replace(),split(),join(),getDate(),addDays(),getUserImage(),cos()ensin().
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:
{
"$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 getal met een waardeafhankelijke kleur, geschreven als operatorboom. Bedragen boven 1000 verschijnen rood en vet:
{
"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:
{
"elmType": "a",
"attributes": {
"href": "='mailto:' + @currentField.email",
"title": "=@currentField.title",
"iconName": "Mail",
"target": "_blank"
},
"txtContent": "@currentField.title",
"style": {
"color": "#0078d4",
"text-decoration": "none"
}
}
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.
