Smart Tiles: Lösungsübersicht

Einführung

Jede Intranetseite hat eine Handvoll Ziele, die weit häufiger geöffnet werden als alles andere: das HR-Portal, das Zeiterfassungssystem, die Dokumentbibliothek des Teams, der Helpdesk. Smart Tiles verwandelt diese Ziele in ein Panel aus großen, farbigen Kacheln mit Symbolen, die Besucher auf einen Blick erkennen und mit einem einzigen Klick erreichen.

Smart Tiles ist ein SharePoint Framework-Webpart für moderne SharePoint Online-Seiten. Ein Seitenautor fügt es einer Seite hinzu, gestaltet die Kacheln im Bearbeitungsmodus direkt auf der Seite – ohne Listen, ohne Konfigurationsdateien – und veröffentlicht. Dieser Artikel stellt das Webpart vor: wo es funktioniert, was eine Kachel sein kann und welche Einstellungen das Panel als Ganzes prägen.

Wo Smart Tiles funktioniert

Smart Tiles wird als einzelnes Paket aus dem App-Katalog in einem Microsoft-365-Mandanten bereitgestellt. Nach der Bereitstellung steht das Webpart ohne weitere Aktivierung auf jeder Website des Mandanten zur Verfügung. Es kann platziert werden:

• auf jeder modernen Seite – einer Websiteseite, einem Newsbeitrag oder einer Startseite;
• in einem regulären Abschnitt, in einem Abschnitt mit Spalten oder in einem Abschnitt mit voller Breite, in dem sich die Kacheln über den gesamten Bildschirm erstrecken;
• auf einer App-Seite mit einem einzelnen Webpart, auf der die Kacheln der einzige Inhalt der Seite sind.

Das Webpart folgt dem Design der Website, einschließlich dunkler Designs und der Farbvarianten eines Abschnitts, und seine Oberfläche ist in 44 Sprachen verfügbar, die automatisch anhand der Sprache des Benutzers ausgewählt werden.

Was eine Kachel sein kann

Jede Kachel ist ein Link mit einem eigenen Erscheinungsbild. Die Eigenschaften einer Kachel gliedern sich in vier Gruppen.

Texte. Eine Kachel hat einen Titel und eine optionale Beschreibung. Die Beschreibung wird in kleinerer Schrift unter dem Titel und in der QuickInfo der Kachel angezeigt; sie kann für das gesamte Panel ausgeschaltet werden, wenn ein kompaktes Erscheinungsbild gewünscht ist.

Link. Eine Kachel kann eine Seite, ein Dokument oder eine beliebige Webadresse öffnen – im selben Fenster oder in einer neuen Registerkarte. Über gewöhnliche Links hinaus kann eine Kachel eine E-Mail beginnen (mailto:), eine Nummer wählen (tel:), eine Textnachricht senden (sms:) oder einen Microsoft-Teams-Chat oder -Kanal öffnen (msteams:). Ein Link zu einem YouTube-Video wird automatisch erkannt: Die Kachel kann die Miniaturansicht des Videos als Hintergrund anzeigen und erhält anstelle eines Symbols eine Wiedergabeschaltfläche.

Erscheinungsbild. Jede Kachel hat eine Hintergrundfarbe und eine Schriftfarbe, ausgewählt aus den sechs Akzentfarben des Websitedesigns, einer Palette vordefinierter Farben, Schwarz und Weiß. Anstelle einer Farbe kann eine Kachel ein Hintergrundbild tragen – als URL eingegeben oder aus einer Dokumentbibliothek der Website ausgewählt. Das Symbol stammt aus einem von fünf Symbolsätzen – Standard (Fluent UI), Dateityp, App (Microsoft 365), Azure und Vitextra – oder wird durch ein eigenes Bild ersetzt, zum Beispiel ein Firmenlogo. Eine Kachel gibt es in sechs Größen, von Extra Kleine bis Volle Breite.

Zielgruppe. Eine Kachel kann nur Mitgliedern ausgewählter SharePoint-Gruppen der Website oder Microsoft Entra ID-Gruppen angezeigt werden. Kacheln ohne Zielgruppe sind für alle sichtbar.

Einstellungen, die das gesamte Panel prägen

Der Eigenschaftenbereich des Webparts enthält die Einstellungen, die für alle Kacheln gleichzeitig gelten:

• Schriftgrad und Symbolgröße – sieben bzw. sechs Stufen;
• Interner Einzug, Symbol Einzug und Externer Einzug – der Abstand innerhalb einer Kachel, unter dem Symbol und zwischen den Kacheln;
• Schatten – ein weicher Schlagschatten unter den Symbolen;
• Titel anzeigen und Beschreibungen anzeigen – die Texte auf den Kacheln;
• Hover-Effekt – einer von neun visuellen Effekten wie Helligkeit, Weichzeichnen oder Graustufen, der angewendet wird, wenn der Mauszeiger auf einer Kachel ruht oder die Kachel den Tastaturfokus erhält, mit einstellbarer Stärke und Dauer.

Bearbeiten auf der Seite

Die gesamte Bearbeitung erfolgt im Bearbeitungsmodus der Seite, direkt auf den Kacheln:

• Kachel hinzufügen fügt am Ende des Panels eine neue Kachel hinzu;
• das Kontextmenü einer Kachel öffnet ihre Eigenschaften, ändert ihre Größe, Farben und ihr Symbol oder entfernt sie;
• Kacheln werden durch Ziehen neu angeordnet;
• Exportieren speichert die Kacheln in einer JSON-Datei, und Importieren lädt sie auf einer anderen Seite oder Website – wobei die vorhandenen Kacheln ersetzt oder ergänzt werden.

Das Webpart speichert die Kacheln in den Eigenschaften der Seite selbst. Auf der Website werden keine Listen erstellt, und nichts verlässt den Mandanten: Die Kacheln werden zusammen mit der Seite veröffentlicht und folgen deren Versionen und Genehmigungsablauf.

Besucher

Ein Besucher sieht ein leichtgewichtiges Panel. Die Bearbeitungswerkzeuge werden nur im Bearbeitungsmodus geladen, sodass eine veröffentlichte Seite nur das herunterlädt, was zum Anzeigen der Kacheln nötig ist. Kacheln werden von Screenreadern als Links angekündigt, können mit der Tastatur erreicht und aktiviert werden, und der Hover-Effekt berücksichtigt die Einstellung „Bewegung reduzieren" des Betriebssystems. Links, die in einer neuen Registerkarte geöffnet werden, sind von der Seite isoliert, die sie geöffnet hat.

Lizenzierung

Smart Tiles wird mit einem Testzeitraum installiert. Die Gruppe Info des Eigenschaftenbereichs zeigt den Status der Lizenz, die Version des Webparts, das Anfangsdatum des Abonnements und den Mandanten, dem es zugewiesen ist. Wenn der Testzeitraum endet, zeigt das Webpart anstelle der Kacheln einen Hinweis an, bis ein Abonnement aktiviert wird.

Weitere Informationen zum Produkt: https://vitextra.com/de/products/smart-tiles