Seitenkomponenten

Abgeschlossen

Nachdem Sie eine Seite erstellt haben, fügen Sie Komponenten hinzu, um das Layout zu erstellen und statische und dynamische Inhalte einzuschließen. Dieser einfache Entwurfsansatz fügt der Seite den entsprechenden HTML-, CSS- oder Code hinzu, ohne dass Sie die Struktur oder Syntax dieser Sprachen kennen müssen.

Wenn Sie einen Abschnitt hinzufügen möchten, wählen Sie einen beliebigen vorhandenen Abschnitt auf der Seite aus, wählen Sie das Pluszeichen (+) oder einen Abschnitt hinzufügen und dann aus einem der verfügbaren Abschnittslayouts aus.

Tip

Sie können das Abschnittslayout später ändern.

Screenshot der Inhaltsbearbeitung von Power Pages.

Wählen Sie entweder einen leeren Abschnitt oder ein vorhandenes Element aus, in dem Sie die Komponente platzieren möchten, um eine Komponente hinzuzufügen. Verwenden Sie das Pluszeichen (+) oder die Überlauftaste (...), um alle verfügbaren Komponenten anzuzeigen, und wählen Sie dann Komponente zum Einfügen aus.

Screenshot der Schnittstelle

Es gibt zwei Arten von Komponenten:

  • Standardkomponenten erstellen das Seitenlayout und statische Inhalte.

  • In Verbindung mit Datenkomponenten werden dynamische und interaktive Inhalte basierend auf Dataverse-Daten angezeigt.

Alle Abschnitte und Komponenten unterstützen die Kontextbearbeitung. Sie können einen beliebigen Abschnitt oder jede Komponente direkt auf der Zeichenfläche bearbeiten. Wenn Sie einen Abschnitt oder eine Komponente auswählen, wird ein Kontextmenü angezeigt. Sie können die Eigenschaften des ausgewählten Elements anpassen, z. B. Ausrichtung, Formatvorlage, Farbe, Größe und mehr. Weitere Informationen finden Sie unter Anpassen von Webseiten , um weitere Details zu verfügbaren Komponenten und deren Eigenschaften zu erhalten.

Quellcode

Häufig benötigen Sie Elemente, die nicht als Designstudiokomponenten verfügbar sind. Eine Seite benötigt möglicherweise ein komplexeres Layout und eine komplexere Formatierung, oder sie benötigt möglicherweise mehr CSS oder JavaScript. Sie können diese Anforderungen in Visual Studio Code für das Web erstellen. Entwickler und Pro-Entwickler können diesen Editor verwenden, um den Quellcode der Seite und zugehöriges CSS und JavaScript anzuzeigen und zu ändern.

Um den Quellcode der Seite anzuzeigen, wählen Sie " Code bearbeiten" in der Befehlsleiste aus.

Screenshot des Visual Studio Code für den Web-Editor-Zugriff, der im Entwurfsstudio verfügbar ist.

Wenn Sie "Code bearbeiten" auswählen, werden Sie zu Visual Studio Code für das Web umgeleitet, um Ihre Änderungen an der Html-, CSS- oder JavaScript-Seite vorzunehmen. Nachdem Sie den Quellcode gespeichert haben, werden die Änderungen synchronisiert und auf der Canvas angezeigt.

Screenshot einer Aufforderung zum Synchronisieren von Seiteninhalten nach Abschluss der Bearbeitung in Visual Studio Code für das Web

Warnung

Sie können möglicherweise das Layout Ihrer Seite beschädigen, indem Sie eine falsche Syntax in den Quellcode eingeben. Erstellen Sie vor dem Durchführen wesentlicher Änderungen eine Kopie des Originalcodes.

Copilot im Arbeitsbereich „Pages“

Copilot ist im gesamten Arbeitsbereich "Seiten" integriert, damit Sie Inhalte schneller erstellen und auffüllen können.

KI-generierter Text

Wählen Sie eine beliebige Textkomponente auf dem Zeichenbereich aus, und wählen Sie dann die Schaltfläche Copilot auf der Symbolleiste aus. Beschreiben Sie den gewünschten Text, und Copilot eine Kopie für Sie generiert. Dieses Feature ist allgemein verfügbar.

KI-generiertes Formular

Wählen Sie beim Hinzufügen einer Komponente Form aus, und wählen Sie dann aus, das Formular mit Copilot zu erstellen. Beschreiben Sie das Formular in natürlicher Sprache, und Copilot erstellt automatisch die Dataverse-Tabelle, das Formular und die grundlegende Formularkomponente. Dieses Feature ist in allen Regionen mit Ausnahme von DoD allgemein verfügbar.

KI-generiertes mehrstufiges Formular (Vorschau)

Sie können auch Copilot verwenden, um ein mehrstufiges Formular zu erstellen. Beschreiben Sie im Copilot Sidecar die benötigte mehrstufige Form, und Copilot erstellt ein Formular mit einem oder mehreren Schritten basierend auf Ihrer Beschreibung. Eine Vorschau des Formulars wird auf der Arbeitsfläche angezeigt, damit Sie es überprüfen können, bevor Sie es zur Seite hinzufügen. Wenn relevante Tabellen bereits in Dataverse vorhanden sind, schlägt Copilot vor, sie zu verwenden. Andernfalls wird automatisch eine neue Tabelle erstellt.

KI-Formularausfüllhilfe (Vorschau)

Wenn Sie zu einer Seite eine Formularkomponente hinzufügen, können Sie die KI-Formularfüllhilfe aktivieren, um Benutzern Ihrer Website das Ausfüllen von Formularen zu erleichtern. Dieses Feature extrahiert relevante Informationen aus hochgeladenen Anlagen und füllt automatisch Formularfelder auf. Außerdem können Benutzer mehrzeilige Texteingaben mithilfe von KI-Entwurfsunterstützung neu schreiben. Aktivieren Sie diese Option in den Formularkomponenteneinstellungen.

Hinzufügen eines Abschnitts mit Copilot

Verwenden Sie den Copilot Sidecar, um einen Abschnitt zu beschreiben, und lassen Sie Copilot ihn der Seite hinzufügen.

KI-generierter Code (Vorschau)

Wenn Sie eine Seite in Visual Studio Code für das Web mit Edit-Code öffnen, können Sie Copilot verwenden, um HTML-, JavaScript- und CSS-Code mithilfe natürlicher Sprache zu generieren. Beschreiben Sie das gewünschte Verhalten im Copilot Chatpanel, und Copilot generiert einen Codeausschnitt, den Sie direkt kopieren oder einfügen können. Sie können auch vorhandenen Code auswählen und die Option "Erklären " verwenden, um eine einfache Erläuterung der Funktionsweise zu erhalten.

Note

Copilot für die Codegenerierung ist für Power Pages unterstützte Sprachen (HTML, JavaScript, CSS) und Frameworks wie Bootstrap und jQuery optimiert. Stellen Sie sicher, dass generierte Tabellen- und Spaltennamen korrekt sind, bevor Sie den Code auf Ihrer Website verwenden.

Suchkomponente mit generativer KI (Vorschau)

Sie können einer beliebigen Seite eine Suchkomponente hinzufügen, damit Websitebenutzer Ihre Website mithilfe von Abfragen in natürlicher Sprache durchsuchen können. Die Komponente enthält eine Suchleiste und eine KI-generierte Zusammenfassung der Ergebnisse. Um die KI-basierte Version zu verwenden, müssen Sie zuerst die generative KI-Suche für die Website aktivieren. Fügen Sie die Komponente aus dem Komponentenbereich im Arbeitsbereich "Seiten" hinzu.

KI-Features in einer Liste (Vorschau)

Datenlistenkomponenten unterstützen zwei KI-gestützte Verbesserungen für Websitebenutzer:

  • KI-Zusammenfassung – Generiert automatisch präzise Zusammenfassungen und Diagrammvisualisierungen der Daten in der Liste. Aktivieren Sie diese Option, wenn Sie eine neue Liste hinzufügen, oder schalten Sie sie für eine vorhandene Liste ein, indem Sie Liste bearbeiten auswählen und KI-Zusammenfassung für die Liste aktivieren.

  • Suche in natürlicher Sprache – Ermöglicht Benutzern das Filtern und Durchsuchen von Listendaten mithilfe von Unterhaltungsabfragen. Aktivieren Sie dies in den Listeneinstellungen unter Weitere Optionen>Suche in dieser Liste aktivieren>Suche mit natürlicher Sprache.

Weitere Informationen finden Sie unter Hinzufügen von KI-Features in einer Liste in der Power Pages-Dokumentation.