View Formatting

Column formatting versus view formatting

Een tijdje terug hebben we de introductieblog gepubliceerd over de column formatter (LINK) waarmee je kolommen binnen een bibliotheek of lijst in een nieuw jasje kon steken. Het kon dan ook niet anders dan dat er op vlak van opmaak van rijen binnen een bibliotheek of lijst ook een oplossing zou aangeboden worden.

Deze blog gaat dieper in op dit SharePoint concept dat Microsoft introduceert als view formatting.

Het basisprincipe blijft hetzelfde zoals bij column formatting nl. een JSON-object dat je gaat aanpassen naar je eigen wensen. Indien je al gewerkt hebt met column formatting zal je hier veel gelijkenissen in terugvinden en er snel mee weg zijn. Ook mensen met een beperkte technische achtergrond zouden hier op een snelle en effectieve manier mee aan de slag moeten kunnen gaan.

Hoe werkt het?

Om van start te gaan is het voldoende om te navigeren naar een bibliotheek of lijst binnen je SharePoint omgeving.

Via het dropdown menu rechts bovenaan waar je kan wisselen tussen de weergaves klik je onderaan op huidige weergave opmaken. Je krijgt dan onderstaand scherm te zien waar je JSON code kan toevoegen.

Standaard zal je van start gaan met een referentie naar het JSON schema dat je achteraf gaat aanvullen met enkele andere parameters zoals hideListHeader, additionalRowClass, hideSelection, …

{
“$schema”: https://developver.microsoft.com/json-schemas/sp/view-formatting.schema.json
}

Heb je graag validatie en autocomplete ter beschikking dan kan je altijd via Visual Studio Code werken en eerst daarmee de JSON opbouwen alvorens deze toe te passen.

Als je dan daarna je schema gaat kopiëren naar je tekstvak en op de knop voorbeeld klikt dan krijg je meteen je wijzigingen te zien op je lijst of bibliotheek. Om je wijzigingen daadwerkelijk op te slaan kan je drukken op de knop opslaan.

Aan de slag!

Kan je na het lezen van deze blogpost niet meer wachten en wil je meteen aan de slag dan zijn hier alvast enkele voorbeelden die je online kan terugvinden en kan uitbreiden naar je eigen wensen.

Conditionele tekstopmaak

Dit is een voorbeeld als uitbreiding op het column formatter voorbeeld van de vorige post. Hier ga je op basis van een statusveld een bepaalde kleurcode meegeven aan de ganse rij in plaats van aan een kolom. Visueel komen geformatteerde items dan sterker naar voor dan via de column formatting.

Takenvenster geformatteerd per gebruiker

Je kan view formatting toepassen om in een takenlijst jouw taken duidelijk te onderscheiden van andere taken. Het is dus niet nodig om een afzonderlijke view te creëren met filter op het veld ‘assigned to’.

Hieronder kan je enkele complexere voorbeelden terugvinden die je kan gaan aanpassen of uitbreiden.

Mededelingenbord

Om mededelingen op een uitnodigende manier te gaan visualiseren zou je kunnen opteren voor onderstaande weergave. Hier is gebruik gemaakt van view formatting, maar zijn de achterliggende view settings ook aangepast zodat de nieuwste mededelingen bovenaan komen te staan.

Contact fiche

Dit is een overzichtsfiche voor contactpersonen waarbij er buiten de integratie van Google Maps ook de mogelijkheid is om items te bekijken, bewerken, verwijderen en delen via 1 simpele klikbeweging op 1 van de iconen achteraan op de fiche.

Besluit

Indien je geen al te complexe opmaak moet toepassen dan is view formatting zeker een manier om eindgebruikers wegwijs te maken met de opmaak van lijsten en/of een bibliotheken. De structurele manier van werken binnen het JSON object is snel aan te leren en de vlotte manier van implementatie zorgt ervoor dat je niet met de leercurve zit van bijvoorbeeld SharePoint Framework (SPFx). Een basiskennis van HTML en CSS is echter wel een must om van start te kunnen gaan, maar iemand met wat technisch inzicht kan perfect aan de slag met de voorbeelden op GitHub om deze aan te passen naar zijn noden.

Tip: neem ook zeker even een kijkje op LINK om de voorbeelden van Microsoft zelf te bekijken, je kan er namelijk veel uit leren als je van start gaat met view formatting.

Extra –  Technisch welke elementen kunnen we instellen in ons JSON schema?

rowFormatter

Dit optionele element bevat een JSON schema dat identiek is aan het schema van de column formatter. Er zijn echter een aantal verschillen in gedrag tussen de elementen binnen het rowFormatter element vergeleken met dezelfde elementen binnen het column formatter object.

• @currentField refereert steeds naar het title veld binnen een rowFormatter.

In onderstaand voorbeeld Kan je de start zien van een rowFormatter element.

“rowFormatter”: {

“elmType”: “div”,

“attributes”: {

“class”: “sp-row-card”

},

additionalRowClass

In dit optionele element kan je een CSS klasse definiëren. Deze klasse heeft impact op de ganse rij binnen de lijst of bibliotheek. De inhoud binnen deze CSS klasse kan typische CSS opmaak omvatten zoals:

• Lettertypes
• Lettertypegrootte
• Kleur
• …

Let op: additionalRowClass zal enkel effect hebben wanneer er geen rowFormatter element gespecifieerd is. Indien dit wel het geval is zal dit element genegeerd worden.

In onderstaand voorbeeld ga je via een voorgedefinieerde CSS klasse een bepaalde kleur geven aan een rij afhankelijk van de kolom status.

“additionalRowClass”: “=if([$Status] == ‘Done’, ‘sp-field-severity–good’, if([$Status] == ‘In progress’, ‘sp-field-severity–low’ ,if([$Status] == ‘In review’,’sp-field-severity–warning’, if([$Status] == ‘Blocked’,’sp-field-severity–blocked’, ”))”

hideSelection

Dit optionele element geeft de mogelijkheid om rijen wel of niet selecteerbaar te maken. Standaard staat dit element op false ingesteld wat impliceert dat het selecteren mogelijk is. Bij true kunnen we geen items selecteren.

Let op: hideSelection zal enkel effect hebben wanneer er een rowFormatter element gespecifieerd is. Indien dit niet het geval is zal dit element genegeerd worden.

In onderstaand voorbeeld kan je de implementatie zien van zowel hideSelection alsook hideListHeader. Buiten de parameter true of false valt hier weinig aan te configureren.

{

  “schema”: “https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json”,

  “hideSelection”: “true”,

  “hideColumnHeader”: “true”,

“rowFormatter”: {

  …

  }

}

hideListHeader

Dit optionele element geeft de mogelijkheid om kolomhoofdingen binnen de lijst of bibliotheek wel of niet te tonen. Standaard staat dit element op false ingesteld wat impliceert dat de kolomhoofdingen zichtbaar zijn. Bij true zijn de kolomhoofdingen niet zichtbaar.