KPIs unter SharePoint Online mit jQuery und Font Awesome visualisieren

Unter den neueren SharePoint Versionen und natürlich auch unter SharePoint Online gibt es die Möglichkeit Felder auf Basis von JSon Code mit einer bedingten Formatierung zu formatieren. Das ist z.B. dann ganz nett, wenn man eine SharePoint Liste hat und in dieser SharePoint Liste unter anderem KPI Felder sind. Diese kann man dann mittels bedingter Formatierung mit JSon optisch hervorheben. Ein Beispiel hierfür kann man in der folgenden Abbildung sehen.

Diesen Effekt kann man durch die folgende JSon Datei erzielen:

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "debugMode": true,
  "elmType": "div",
  "attributes": {
    "class": {
      "operator": "?",
      "operands": [
        {
          "operator": "==",
          "operands": [
            {
              "operator": "toString()",
              "operands": [
                "@currentField.lookupValue"
              ]
            },
            "green"
          ]
        },
        "sp-field-severity--good",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                {
                  "operator": "toString()",
                  "operands": [
                    "@currentField.lookupValue"
                  ]
                },
                "Gray"
              ]
            },
            "sp-field-severity--low",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "toString()",
                      "operands": [
                        "@currentField.lookupValue"
                      ]
                    },
                    "amber"
                  ]
                },
                "sp-field-severity--warning",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "toString()",
                          "operands": [
                            "@currentField.lookupValue"
                          ]
                        },
                        "red"
                      ]
                    },
                    "sp-field-severity--severeWarning",
                    "sp-field-severity--blocked"
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                {
                  "operator": "toString()",
                  "operands": [
                    "@currentField.lookupValue"
                  ]
                },
                "green"
              ]
            },
            "CheckMark",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    {
                      "operator": "toString()",
                      "operands": [
                        "@currentField.lookupValue"
                      ]
                    },
                    "amber"
                  ]
                },
                "Forward",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        {
                          "operator": "toString()",
                          "operands": [
                            "@currentField.lookupValue"
                          ]
                        },
                        "Gray"
                      ]
                    },
                    "Error",
                    {
                      "operator": "?",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            {
                              "operator": "toString()",
                              "operands": [
                                "@currentField.lookupValue"
                              ]
                            },
                            "Red"
                          ]
                        },
                        "Warning",
                        "ErrorBadge"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField.lookupValue"
    }
  ]
}

Die Datei macht im Prinzip Folgendes: Sie schaut wo die Texte green, amber und red vorkommen, färbt die Hintergrundfarbe über die CSS Klassen sp-field-severity–low usw. Dann werden noch die entsprechenden Symbole vor den Text gesetzt. Wen dieses Thema näher interessiert, der findet unter Anpassen von SharePoint mithilfe von Spaltenformatierungen einen gelungenen Artikel der viel mehr in die Tiefe geht als ich das an dieser Stelle machen kann.

Soweit so gut. Wenn man nun aber eine Ansicht dieser Liste über ein Listen Webpart z.B. auf der Homepage einbinden möchte erhält man das folgende Ergebnis.

Leider wird die Formatierung, die eigentlich an dem Feld Overall Status hängt nicht mit übernommen, d.h. hier sehen wir nur die hässlichen Links die auf unsere  KPI-Wert Mastertabelle.

Ich habe mir gedacht dass muss doch auch irgendwie schöner zu realisieren sein. Da wir es hier mit einem SharePoint Online zu tun haben und wir somit keinen serverseitigen Code einbringen können war relativ schnell klar, dass die ganze Aktion clientseitig mit jQuery erledigt werden muss.

Und natürlich hatte ich mir überlegt dass ich nicht nur die Texte in unterschiedlichen Farben setzen möchte sondern dass die Texte durch leicht zu erkennende Symbole ersetzt werden sollten. Durch WordPress-Projekte in letzter Zeit habe ich Font Awesome kennen gelernt, eine Bibliothek von vielen Symbolen die man leicht in Websites einbinden kann. Diese Icons kann man dann wiederum einfach färben. Der folgende HTML-Code

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous">
</head>
<body>
        <i style = "color:green" class="fa fa-check-circle"></i>
        <i style = "color:orange" class="fa fa-exclamation-triangle"></i>
        <i style = "color:red" class="fa fa-times-circle"></i> 
</body>

erzeugt das folgende Ergebnis

Was wir jetzt noch mit jQuery erreichen müssen ist, dass die entsprechenden Texte in der SharePoint Website durch diese Symbole ersetzt werden müssen. Dazu fügen wir einfach auf der Seite auf der das Listenwebpart eingefügt wurde (s.o.) ein Skript-Editor Webpart hinzu.

In dieses Script-Editor Webpart kommt der folgende Code

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG" crossorigin="anonymous"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<style type="text/css">
  div.kpi-div
  {
    margin: 0 auto;
    width: 50px; 
    text-align: center;
  }
</style>

<script>
 function listFormat() {
    // Format for status green
    $Text = $("td .ms-vb2:contains('green')");
    $.each($Text, function (index, item) {
      item.innerHTML = '<div class="kpi-div"><i style = "color:green" class="fa fa-check-circle"></i></div>';});

    // Format for status red
    $Text = $("td .ms-vb2:contains('red')");
    $.each($Text, function (index, item) {
      item.innerHTML = '<div class="kpi-div"><i style = "color:red" class="fa fa-times-circle"></i></div>';});

    // Format for status amber
    $Text = $("td .ms-vb2:contains('amber')");
    $.each($Text, function (index, item) {
      item.innerHTML = '<div class="kpi-div"><i style = "color:orange" class="fa fa-exclamation-triangle"></i></div>';});

);    

  $(document).ready(function() {
    listFormat()
  });

</script>

Was passiert in diesem Code? Zeile 1 lädt das jQuery-UI CSS, Zeile 2 und 3 laden Font Awesome und Zeilen 4 und 5 laden JQuery. Kleiner Tipp – Wenn man wissen möchte ob auf der Seite jQuery funktioniert oder nicht kann man das wie folgt ausprobieren

<script language="javascript" type="text/javascript" src="/Scripts/jquery-1.5.min.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.SPServices-0.6.1.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
    alert("jQuery ist aktiv!");
});

</script>

Wenn es ein Popup-Fenster gibt in dem „jQuery ist aktiv!“ steht weiß man dass jQuery auf der entsprechenden Seite funktioniert. Nun aber zum eigentlichen Script zurück. Das hier

<style type="text/css">
  div.kpi-div
  {
    margin: 0 auto;
    width: 50px; 
    text-align: center;
  }
</style>

ist ein kleines Inline Style Sheet das nichts anderes macht als den Inhalt <div>-Elemente die die Klasse kpi-div besitzen zu zentrieren, damit unsere Symbole auch schön zentral sind und nicht am linken Rand der Spalte rumhängen. Der folgende Code ist exemplarisch für den Status green, gilt aber für alle anderen Stati ganz genau so.

    // Format for status green
    $Text = $("td .ms-vb2:contains('green')");
    $.each($Text, function (index, item) {
      item.innerHTML = '<div class="kpi-div"><i style = "color:green" class="fa fa-check-circle"></i></div>';});

Zunächst werden alle td-Elemente der Klasse .ms-vb2 (das sind die Spalten der Tabelle) die den Text green enthalten in die Variable bzw. das Array $Text geladen (sicherlich kann man hier die Elemente noch spezifischer auswählen, das ist aber für den vorliegenden Fall nicht notwendig). Danach wird dann über die Schleife $.each für jedes Element im Array das innere HTML (also der Link auf die Elemente in der Lookup-Liste) durch <div class=“kpi-div“><i style = „color:green“ class=“fa fa-check-circle“></i></div> ersetzt. Über die div-Elemente setze ich einfach die Klasse kpi-div, die dann vom Style Sheet oben formatiert wird. Im div ist dann das Font Awesome Icon (in den <i> Tags), das auch noch mal direkt mit der entsprechenden Farbe formatiert wird.

Das Ergebnis der Aktion sieht dann wie folgt aus:

Dafür dass das ein bisschen clientseitiges jQuery Gebastel ist finde ich, dass das recht gut aussieht :).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

%d Bloggern gefällt das: