Unseren Auszubildenden und Studenten stellen wir Lerninhalte in einer kleinen Lern-APP zur Verfügung, welche auf einer SharePoint-Liste basiert.

In diesem Artikel will ich aufzeigen wie ich meine „normale Liste“ in eine ansprechende Lern-APP umgewandelt habe.

Die Lernthemen werden dabei als Kachel und gruppiert nach Themengebiet dargestellt.

Diese Tile-Ansicht gibt es so grundlegend auch direkt in SharePoint und zwar in Form der Ansichtsfunktion Galerie

Diese lässt sich mit Bordmitteln anpassen, aber deckte noch nicht meine Erwartungen und Anforderungen – Ich wollte gerne Sterne, Banner, Raketen und Konfetti 🙂

Ok, die Raketen und Konfetti behalte ich mir für die nächste Version vor, aber das mit den Sternen und Bannern klappt schon mal sehr gut 😉

Tipp: Wenn ihr eine SharePoint Liste in Teams mit einem SharePoint-Register einbaut, wird dies ins besondere auf dem Smartphone ebenfalls reibungslos angezeigt!

Wie habe ich dies nun realisiert…

Das entscheidende Mittel ist die Funktion

„Aktuelle Ansicht formatieren“

Wobei ihr euch hier am besten zuerst eine neue Ansicht erstellt/speichert und diese auf „Kacheln“ umstellt und dann weiterentwickelt…

Die Formatierung habe ich per JSON-Datei und wie folgt, erstellt…

Wenn ihr nun tief einsteigen wollt, sind grundsätzliche HTML/CSS-Kenntnisse sehr hilfreich und ich würde euch folgende Microsoft-Artikel zum Start empfehlen:

Use column formatting to customize SharePoint | Microsoft Learn

Hier findet ihr die von Microsoft, bzw. in SharePoint-Formatierungen unterstützten HTML und CSS Styles

Formatting syntax reference | Microsoft Learn

Der direkte Weg

Ich stelle euch hier mein JSON zur Verfügung, welches ihr euch dann an eure Bedürfnisse anpassen könnt.

Ich erläutere auch, welche Felder ich zuvor erstellt und dann verwendet habe…

spo-learnapp/spo-learnapp.json at main · thinformatics/spo-learnapp (github.com)

1. Richtige Größe und Auswahl der Kachel

Zuerst habe ich die Größe je Kachel auf 130×120 Pixel eingestellt und mit hideSelection die Mehrfachauswahl von Listenelementen unterbunden (Letzteres fördert das APP-Feeling, meiner Ansicht)

2. Dynamische Hintergrundfarbe abhängig vom Lernbereich

Ich wollte danach gerne die Hintergrundfarbe abhängig vom Auswahlfeld CloudPlattform gestallten.

Wenn eine Lerneinheit zum Bereich EMS oder Office365 gehört, soll die entsprechende Farbe der Kachel eine einheitliche Hintergrundfarbe erhalten.

Ebenfalls habe ich die Textfarbe mit color angepasst, so wie einen Inhaltabstand mit padding eingestellt.

Max-width habe ich definiert, um die Darstellung auf dem Mobilegerät zu verbessern.

3. Sterne für die optische Darstellung des aktuellen Lernstands

Im letzten Bild sieht man gut den grundsätzlichen Aufbau eines Elementes in unserer JSON-Datei, hier am Beispiel eines Bildes – im Detail das Bild der Sterne, welches denn aktuellen Lernstand darstellt.

Die Elemente werden zu sogenannten children verkettet, die einen Elementtyp aufweisen.

Bei der Angabe der Quelle unseres Bildes (src, bzw. source) habe ich mit dem Feld Level eine dynamische Anzeige der Sterne bewerkstelligt – Die URL des Bildes verweist immer auf ein SVG je nach Auswahl (das Auswahlfeld enthält einen Level von 1 bis 5, bzw. keinen Wert) also z.B. stars-1.svg oder stars-5.svg

Die Bilder der Sterne und Banner findet ihr ebenfalls im Github-Repository, diese habe ich in meinem Fall in einem Azure-StorageAccount bereitgestellt. Ihr könnt die Bilder aber auch in jedem anderen Webstore bereitstellen, der euch zur Verfügung steht. Der Store sollte, aus nahe liegenden Gründen, dem späteren Nutzer zugänglich sein.

4. Erlauben von Externen Bildern (HTML-Feldsicherheit)

Damit ich nun meine extern gehosteten Bilder einbinden konnte, musste ich die URL zu meinem Web-Speicherort in die obenstehende Liste aufnehmen. Startet in eurer SharePoint-Liste und folgt dem „Weg“, (siehe Bild) die Anpassung wirkt sich auf die gesamte SharePoint-Site aus, fragt daher im Zweifel bei eurem SharePoint-Admin/Verantwortlichen um Unterstützung.

Fazit

Es gibt natürlich viele Alternativen um Inhalte aus einer SharePoint-Liste in eine APP zu verwandeln – Eine prominente Möglichkeit wäre hier natürlich PowerApps.

Da aber auch eine PowerApp einen nicht zu verachtenden Erstellungsaufwand voraussetzt, hat diese Lösung hier m.E. ihr absolute Daseinsberechtigung und enormes Potential.

Gerade in der direkten Zusammenarbeit und in Projekten kann dies den Mehrwert von Listen noch einmal auf ein völlig neues Niveau heben.

Ich hoffe ihr könnt das Gezeigte adaptieren und für eure Zwecke verwenden.

Grüße an alle Pragmaten und Citizen Developer 😉