Warum JSON Code in SharePoint verwenden?

JSON steht für JavaScript Object Notation und ist eine Möglichkeit, in SharePoint Anpassungen vorzunehmen, ohne Webparts oder PowerShell-Befehle verwenden zu müssen. Der Einsatz von JSON-Code in SharePoint-Listen bietet die Möglichkeit, Spalten individuell nach den eigenen Wünschen zu gestalten und zu formatieren.

Der Vorteil hierbei ist, dass

• alle Anpassungen direkt im Browser vorgenommen werden können.
• Der Code wird clientseitig von Microsoft unterstützt
• die Darstellung ist für alle Nutzer gleich.

Anpassung der Spalten

Um eine Spalte mit Hilfe eines JSON-Codes zu formatieren, wählt man in der SharePoint-Liste in der jeweiligen Spalte im Menü den Eintrag Spalteneinstellungen – Diese Spalte formatieren aus.

Es öffnet sich nun das Einstellungsmenü. Hier findet man nun in der erweiterten Ansicht die Möglichkeit, die Spalte mit Hilfe eines JSON Codes individuell anzupassen. Sobald man den gewünschten Code eingegeben und gespeichert hat, werden die Formatierungen übernommen. Wichtig hierbei ist, dass, sollte man von der erweiterten Ansicht wieder in die Entwurfsansicht wechseln, der Code gelöscht wird.

Rufnummer & E-Mail

Formatierung als Rufnummer

Microsoft bietet in den SharePoint Listen verschiedene Spaltentypen wie Text, Datum oder auch Währung an. Jedoch existiert aktuell kein Spaltentyp, mit dem eine Rufnummer oder E-Mail hinterlegt werden kann. 

Hierbei kommt nun die Möglichkeit zum Einsatz, dies mit JSON entsprechend anzupassen. Als Spaltentyp kommt hier der Typ „Text“ zum Einsatz, welcher mit Hilfe von JSON-Code so angepasst wird, dass beim Anklicken entweder eine Rufnummer gewählt oder eine E-Mail-Adresse erzeugt wird.

Formatierung als Rufnummer

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "tel:",
        "[$Rufnummer]"
      ]
    },
    "target": "_blank"
  },
  "style": {
    "color": "#0078d4",
    "text-decoration": "underline"
  },
  "txtContent": "[$Rufnummer]"
}

Formatierung als E-Mail

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "mailto:",
        "[$E_x002d_Mail]"
      ]
    },
    "target": "_blank"
  },
  "style": {
    "color": "#0078d4",
    "text-decoration": "underline"
  },
  "txtContent": "[$E_x002d_Mail]"
}

URL-Verlinkungen 

Ein weiterer Einsatzbereich für JSON Code kann der Einsatz bei der Verlinkung zu Internetadressen sein. SharePoint kennt hier zwar den Spaltentyp Link mit der URLs eingegeben werden können. Jedoch hat diese Spalte eine Beschränkung von 255 Zeichen. Möchte man nun den Link zu einer Seite mit mehr als 255 Zeichen erstellen, dies könnte z. B. für Microsoft Loop Adresse von Bedeutung sein, kann SharePoint diese Verknüpfung nicht erstellen. 

Als Lösung kommt hier wieder eine Spalte von Typ Text zum Einsatz. Mit Hilfe von JSON Code kann man nun entsprechend festlegen, wie die Adresse bezeichnet werden kann. Hier könnten beispielsweise folgende Beispiele verwendet werden.

Name der Verlinkung erfolgt gem. Eintrag aus der Titelspalte

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "style": {
    "color": "#0078d4",
    "text-decoration": "underline",
    "display": "=if(@currentField == '', 'none', 'flex')",
    "align-items": "center"
  },
  "txtContent": "[$Title]"
}

Name der Verlinkung erfolgt gem. fest definiertem Eintrag

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "style": {
    "color": "#0078d4",
    "text-decoration": "underline",
    "display": "=if(@currentField == '', 'none', 'flex')",
    "align-items": "center"
  },
  "txtContent": "Fixer URL Titel"
}

Name der Verlinkung erfolgt als kompletter URL Text

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "attributes": {
    "href": "@currentField",
    "target": "_blank"
  },
  "style": {
    "color": "#0078d4",
    "text-decoration": "underline",
    "display": "=if(@currentField == '', 'none', 'flex')",
    "align-items": "center"
  },
  "txtContent": "@currentField"
}

Fazit

Der Einsatz von JSON zur Formatierung von SharePoint-Spalten bietet den großen Vorteil, dass Inhalte individuell und übersichtlich dargestellt werden können, ganz ohne zusätzliche Tools. Darüber hinaus bieten KI-Tools wie ChatGPT oder auch Microsoft Copilot die Möglichkeit an, sich schnell und einfach einen JSON-Code generieren zu lassen um die Ansichten nach den entsprechenden wünschen anzupassen.