Moderne SharePoint-Listenansichten und interaktive HTML-Seiten mit Copilot erstellen

SharePoint-Listen eignen sich hervorragend, um strukturierte Informationen zentral zu verwalten. Die standardmäßige Tabellendarstellung erfüllt zwar ihren Zweck, wird den Anforderungen an eine moderne und leicht bedienbare Oberfläche jedoch nicht immer gerecht. Besonders bei Kontaktverzeichnissen, Produktübersichten oder vergleichbaren Informationssammlungen sollen wichtige Angaben sofort erkennbar sein, während ergänzende Details erst bei Bedarf erscheinen. Copilot in SharePoint kann bei dieser Gestaltung unterstützen: Aus einer natürlichsprachigen Beschreibung entstehen formatierte Listenansichten oder sogar interaktive HTML-Seiten, ohne dass die vollständige Umsetzung von Hand programmiert werden muss. Die nachfolgenden Abschnitte beschreiben die Möglichkeiten und das Video Moderne SharePoint-Listenansichten und interaktive HTML-Seiten mit Copilot erstellen zeigt die Umsetzung anhand eines Beispiels in der Praxis.

Von der Standardliste zur übersichtlichen Kontaktansicht

Als Ausgangspunkt dient eine gewöhnliche SharePoint-Liste zur Verwaltung von Kontaktdaten. Sie enthält beispielsweise Profilbilder, Vor- und Nachnamen, Statusinformationen, E-Mail-Adressen, Telefonnummern und weitere Angaben. In der Standardansicht werden diese Werte zeilen- und spaltenweise angezeigt. Das ist funktional, wirkt bei vielen Feldern aber schnell unübersichtlich und stellt wichtige und weniger wichtige Informationen gleichwertig nebeneinander.

SharePoint bietet bereits integrierte Möglichkeiten zur Ansichtsformatierung. Ein visueller Designer erlaubt einfache Anpassungen, während sich anspruchsvollere Darstellungen über JSON-Formatierung realisieren lassen. Damit können Felder anders angeordnet, Symbole ergänzt, Farben abhängig von Werten gesetzt und vollständig eigene Karten- oder Zeilenlayouts aufgebaut werden. Die manuelle Erstellung des benötigten JSON-Codes ist allerdings vergleichsweise aufwendig. Zudem lassen sich nicht alle gewünschten Layouts allein mit dem eingebauten Designer umsetzen.

Hier setzt Copilot an. Statt die Formatierung von Grund auf selbst zu entwickeln, wird das gewünschte Ergebnis in einem Prompt beschrieben. Eine geeignete Anweisung kann beispielsweise festlegen, dass das Profilbild und die wichtigsten Kontaktdaten prominent erscheinen sollen, während weitere Details nur sekundär dargestellt werden. Zusätzlich können ein modernes Erscheinungsbild, eine saubere Gliederung und ein eindeutiger Name für die neue Ansicht verlangt werden.

Auf dieser Grundlage erzeugt Copilot eine neue formatierte Ansicht und fügt sie der Liste hinzu. Eine Kartenansicht kann das Profilbild, den Namen, den Status und die zentralen Kontaktmöglichkeiten in den Mittelpunkt stellen. Weitere Informationen werden im unteren Bereich der Karte oder in einer zurückhaltenderen Darstellung ergänzt. Besonders hilfreich ist eine auffällige Statuskennzeichnung: Anwender erkennen dadurch auf einen Blick, ob ein Kontakt aktiv oder inaktiv ist.

Alternative Layouts gezielt anfordern

KI-generierte Ansichten verwenden häufig ein Kartenlayout, weil sich dieses für Personen- und Produktdaten anbietet. Eine solche Darstellung ist jedoch nicht in jedem Szenario die beste Wahl. Bei einer großen Anzahl von Datensätzen kann etwa ein kompaktes einspaltiges Layout sinnvoller sein. Im Prompt sollte deshalb ausdrücklich erwähnt werden, wenn eine Alternative zur Kartenansicht gewünscht ist.

Copilot kann daraufhin eine weitere Ansicht erzeugen, die Kontakte platzsparend untereinander anordnet. Profilbild und Kerndaten bleiben sichtbar, während ergänzende Angaben beim Überfahren oder Auswählen eines Eintrags eingeblendet werden können. Auf diese Weise entsteht eine kompakte Übersicht, ohne den Zugriff auf Detailinformationen zu verlieren.

Das erste Ergebnis muss dabei nicht in allen Punkten perfekt sein. Komplexe Feldtypen können beispielsweise als technische Objekte erscheinen, Freitextfelder versehentlich wie Links formatiert werden oder einzelne Inhalte nicht optimal angeordnet sein. Die generierte JSON-Formatierung ist deshalb vor allem als sehr guter Ausgangspunkt zu verstehen. Sie kann anschließend im Formatierungseditor manuell verfeinert werden. Alternativ lässt sich der Dialog mit Copilot fortsetzen, um Farben, Abstände, Feldpositionen oder das Verhalten einzelner Elemente gezielt ändern zu lassen.

Ein interaktives Kontaktverzeichnis als HTML-Seite

Eine formatierte Listenansicht verbessert die Arbeit direkt innerhalb der Liste. Für ein Intranet kann jedoch eine eigenständige Suchoberfläche attraktiver sein. Anwender sollen dort Kontakte schnell nach Vorname, Nachname, E-Mail-Adresse oder Telefonnummer finden können, ohne sich mit den Funktionen und Bedienelementen einer vollständigen Liste beschäftigen zu müssen.

Eine SharePoint-Liste lässt sich zwar über das Listen-Webpart in eine moderne Seite integrieren. Je nach gewünschter Gestaltung und Suchlogik stößt dieser Ansatz aber an Grenzen. Copilot kann stattdessen aus einer entsprechenden Beschreibung eine interaktive HTML-Seite erzeugen. Der Prompt sollte das gewünschte Layout möglichst konkret beschreiben: einen Suchbereich am oberen Rand, eine übersichtliche Ergebnisdarstellung, Profilbilder und zentrale Kontaktdaten sowie aufklappbare Detailbereiche für zusätzliche Informationen.

Das Ergebnis ist eine eigenständige Seite mit Suchfeld und dynamischer Filterung. Bereits während der Eingabe wird die Trefferliste reduziert. Zu jedem Kontakt lassen sich weitere Angaben ein- und ausblenden. Damit entsteht in kurzer Zeit ein benutzerfreundliches Kontaktverzeichnis, das wesentlich stärker auf den konkreten Anwendungsfall zugeschnitten ist als eine klassische Tabellenansicht.

Statisch eingebettet oder daten­gebunden?

Bei der Erstellung einer HTML-Seite ist ein technischer Unterschied besonders wichtig. In einer ersten Variante kann Copilot sämtliche Kontaktinformationen direkt in den HTML-Code schreiben. Die Seite enthält dann eine Momentaufnahme der Daten zum Zeitpunkt ihrer Erstellung. Das ist praktisch, wenn das Verzeichnis als eigenständige Datei weitergegeben oder ohne Verbindung zur ursprünglichen Liste verwendet werden soll.

Für ein dauerhaft genutztes Intranet-Verzeichnis ist diese Variante jedoch meistens ungeeignet. Wird ein Kontakt in der SharePoint-Liste geändert, bleibt die zuvor erzeugte HTML-Datei unverändert. Die Darstellung und die Datenquelle entwickeln sich auseinander. Eine Aktualisierung der Liste wird erst sichtbar, wenn die Seite erneut generiert oder manuell angepasst wird.

Damit die Oberfläche beim Öffnen stets aktuelle Informationen verwendet, muss im Prompt ausdrücklich eine daten­gebundene HTML-Seite verlangt werden. Diese Formulierung ist entscheidend: Die Kontaktdaten werden dann nicht fest in das Dokument eingebettet. Stattdessen enthält die generierte Seite JavaScript-Funktionen, die beim Laden auf die SharePoint-Liste zugreifen, die aktuellen Datensätze abrufen und daraus die sichtbaren Elemente dynamisch aufbauen.

Der Unterschied lässt sich leicht prüfen. Wird ein Wert in der Liste geändert und die daten­gebundene Seite anschließend neu geladen, erscheint dort der aktualisierte Inhalt. Die SharePoint-Liste bleibt somit die führende Datenquelle, während die HTML-Seite lediglich eine spezialisierte Benutzeroberfläche bereitstellt. Welche Variante sinnvoll ist, hängt vom Einsatzzweck ab: Für eine portable Momentaufnahme kann eine statische Datei genügen; für laufend gepflegte Kontaktdaten ist die Datenbindung in der Regel unverzichtbar.

Einbindung in eine moderne SharePoint-Seite

Die generierte HTML-Seite kann anschließend in eine moderne SharePoint-Seite integriert werden. Dazu wird die Adresse der HTML-Datei kopiert und über das Einbetten-Webpart in die gewünschte Intranetseite aufgenommen. Technisch erfolgt die Darstellung innerhalb eines iframe. Breite und Höhe des eingebetteten Bereichs sollten so gewählt werden, dass Suchfeld, Treffer und Detailbereiche bequem bedienbar bleiben.

Nach der Einbindung steht das Kontaktverzeichnis direkt im Kontext der Intranetseite zur Verfügung. Anwender können nach Namen oder Telefonnummern suchen und weitere Informationen zu einem Kontakt aufklappen. Bei der daten­gebundenen Variante werden die Inhalte im Hintergrund aus der SharePoint-Liste geladen. Änderungen an der Datenquelle stehen deshalb nach dem erneuten Laden der Seite auch im eingebetteten Verzeichnis bereit.

Für den produktiven Einsatz sollte das Ergebnis dennoch geprüft werden. Dazu gehören die korrekte Darstellung aller Feldtypen, die Bedienbarkeit auf unterschiedlichen Bildschirmgrößen, die Ladezeit bei großen Listen und die Einhaltung der bestehenden SharePoint-Berechtigungen. Ebenso sollten generierter HTML- und JavaScript-Code vor der Veröffentlichung kontrolliert und nur in einer vertrauenswürdigen Umgebung eingesetzt werden. Copilot beschleunigt die Umsetzung erheblich, ersetzt aber nicht die fachliche und technische Qualitätssicherung.

Gute Prompts führen zu besseren Ergebnissen

Die Qualität der erzeugten Ansicht hängt wesentlich von der Anweisung ab. Ein guter Prompt beschreibt nicht nur, welche Daten angezeigt werden sollen, sondern auch deren Priorität, die gewünschte Darstellungsform und das Verhalten der Oberfläche. Hilfreich sind konkrete Angaben dazu, welche Felder prominent sichtbar sein müssen, welche Informationen sekundär erscheinen dürfen, ob Karten oder ein kompaktes Zeilenlayout erwartet werden und unter welchem Namen die Ansicht gespeichert werden soll.

Bei HTML-Seiten sollten zusätzlich Suchfelder, Filterkriterien, aufklappbare Bereiche und vor allem die gewünschte Art der Datenhaltung genannt werden. Der Zusatz „daten­gebunden“ verhindert, dass lediglich eine statische Kopie der aktuellen Listeneinträge entsteht. Auf diese Weise wird der Prompt zu einer kompakten funktionalen Spezifikation, die Copilot in eine erste technische Lösung überführt.

Fazit

Copilot senkt die Einstiegshürde für individuelle SharePoint-Oberflächen deutlich. Moderne Kartenansichten, kompakte Listenlayouts und interaktive HTML-Verzeichnisse lassen sich auf Basis einer natürlichsprachigen Beschreibung in kurzer Zeit erzeugen. Besonders wertvoll ist dabei, dass die Ergebnisse nicht als unveränderliche Endprodukte betrachtet werden müssen. Der generierte JSON-, HTML- und JavaScript-Code kann als Ausgangspunkt dienen, anschließend fachlich geprüft und bei Bedarf weiter angepasst werden.

Das Beispiel eines Kontaktverzeichnisses zeigt zugleich, worauf bei KI-generierten Lösungen zu achten ist. Eine optisch überzeugende Seite allein reicht nicht aus; entscheidend ist auch, ob die Daten statisch eingebettet oder live mit der SharePoint-Liste verbunden sind. Mit präzisen Prompts, einer bewussten Auswahl des Datenmodells und einer abschließenden Qualitätskontrolle entsteht aus einer einfachen Liste eine moderne, zielgerichtete Benutzeroberfläche für das Intranet.