SharePoint column formatting bij de opzoekkolom met speciale tekens

Elianne Burgers
8-jul-2021 10:00:00

De afgelopen periode heb ik me wat meer verdiept in de mogelijkheden die SharePoint biedt met betrekking tot column formatting (kolom opmaken) en view formatting (weergave opmaken). Ik ben erg enthousiast geworden over de mogelijkheden en toepassingen die je kunt bereiken zonder dat je een ontwikkelaar bent. Het voornaamste doel van het toepassen van de formatting is de gebruiksvriendelijkheid en overzichtelijkheid van SharePoint bibliotheken en lijsten vergroten.

In deze blog een korte introductie en een praktische toepassing bij een opzoekkolom (lookup).

Wat is column formatting en hoe voeg je het toe?

Column formatting maakt het mogelijk om in kolommen opmaak toe te voegen om de leesbaarheid te vergroten. Voorbeelden hiervan zijn statusindicatoren op basis van kleur en/of iconen of thumbnails tonen van afbeelden. Voor een keuze kolom is het zeer eenvoudig om een opmaak toe te voegen. Klap de kolom opties open (1), ga naar de kolominstellingen (2) en kies voor ‘deze kolom opmaken’ (3). Vervolgens opent het paneel (4) waarbij je opties krijgt om opmaak toe te voegen.

Picture1

Mocht je niet genoeg hebben aan de standaard keuzes, dan kun je kiezen voor de geavanceerde modus. Hierbij krijg je de mogelijkheid om met behulp van JSON de opmaak volledig naar eigen hand te zetten.

Picture2

In deze blog wil ik één concreet praktijk voorbeeld verder uitdiepen waarbij de geavanceerde modus wordt gebruikt.

De opzet

In mijn lijst heb ik een opzoekkolom gemaakt naar een documentbibliotheek, zodat er een verband gelegd kon worden tussen een lijstitem en een bijbehorende document. Dit zag er op het eerste oogopslag prima uit:

Picture3

Als ik echter op één van de bestanden klikte, kwam ik op het weergave formulier van het bibliotheekitem terecht in plaats van dat het document zelf werd geopend:

Picture4

Column formatting toepassen

Om het mogelijk te maken om het document zelf te openen heb ik gekozen om de kolom op te maken in de geavanceerde modus. Dit ziet er als volgt uit:

Picture5

Zie hieronder de gebruikte JSON (uiteraard zelf nog de juiste sitenaam en bibliotheeknaam invullen)

Schermafbeelding 2021-06-23 om 08.32.05

Stap voor stap

Als je een beetje bekend bent met HTML en CSS zul je de elementen hiervan herkennen. Het eerste stuk bepaalt dat er een link wordt gemaakt met een aantal attributen. De class bepaalt dat de link wordt opgemaakt op basis van de standaard aanwezige class binnen SharePoint en de thema kleur gebruikt. De target bepaalt in dit voorbeeld dat het document geopend wordt in een nieuw tabblad.

De link wordt opgebouwd, op basis van de site en de waarde van de kolom. De ‘@currentField.lookupValue’ haalt het titel veld op van het document. In mijn voorbeeld heb ik er voor gekozen om direct in het titel veld de bestandsnaam en bestandstype te plaatsen.

Door er ‘?web=1’ achter te zetten worden alle bestanden in de online weergave geopend, ook als deze nog de oude ‘doc’ als bestandsextensie hebben.

Schermafbeelding 2021-06-23 om 08.32.42

Het uiterlijk kun je volledig naar je eigen hand zetten door de style te bepalen op basis van de CSS, zo hoef je dus niet per se de kleuren van het site thema te gebruiken. In dit geval wilde ik dat het voor een gebruiker duidelijk is dat het een link is, vandaar dat de cursor een pointer (handje) is.

Schermafbeelding 2021-06-23 om 08.33.27

Het laatste gedeelte bestaat uit de tekst die wordt getoond, in dit geval het titelveld van het document, zodat direct duidelijk is welk document je opent.

Schermafbeelding 2021-06-23 om 08.33.54

Speciale tekens procentteken % en hashtag #

Het voorgaande gaat prima, zolang de lookup waarde geen speciale tekens als procentteken of een hashtag bevat.

Picture6

Als je dan het document wilt openen, verschijnt er een foutmelding: ‘Bad Request - Invalid URL’ of ‘The resource cannot be found’.

Picture7

Picture8

Om dit op te lossen moeten de speciale tekens worden vervangen, in het geval van het procentteken(%) is dat %25 en voor de hashtag(#) is dat %23. Gelukkig is het mogelijk om gebruik te maken van functies. In dit geval pas ik de replace functie in de opbouw van de link toe. De replace functie zorgt ervoor dat de tekens worden vervangen door de juiste tekens, waardoor de link op de correcte manier wordt opgebouwd.

De JSON column formatting ziet er nu als volgt uit:

Schermafbeelding 2021-06-23 om 08.35.11

Op deze manier kunnen ook documenten die een waarde hebben met een speciaal karakter zonder problemen geopend worden.

Aanvullende tooling

Met kennis van HTML, CSS en je eigen creativiteit kun je de column formatting helemaal naar je eigen hand zetten. Om je leven eenvoudiger te maken nog twee tools die hierbij helpen: