Webvorlagen als Komponenten

Artikel
10/30/2024

Webvorlagen können erstellt und als Komponenten in Webseiten verwendet werden, damit Entwickler diese wiederverwendbaren Komponenten verwenden und Parameter bereitstellen können, um Anforderungen zu erfüllen.

Als Entwickler können Sie eine Webvorlage erstellen, um bestimmte Funktionen bereitzustellen, die Entwickler beim Entwerfen von Webseiten konfigurieren können.

Beispielsweise können Sie die folgenden Komponenten (und andere) als Webvorlagenkomponenten erstellen, die im Designstudio konfigurierbar sind:

Standortliste mit Karten
Karussellanzeige
Galerie mit Bildern oder Videos

Um einer Webseite eine Komponente hinzuzufügen, können Sie die Seite mit dem Visual Studio Code für das Web bearbeiten und der Seitenkopie ein Liquid-Include-Objekt hinzufügen:

{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}

Beispiel:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Erstellen einer Webvorlagenkomponente

Um eine Webvorlagenkomponente zu erstellen, an die Sie einem Ersteller erlauben können, Parameter zu übergeben, müssen Sie der Webvorlage ein {% manifest %}-Tag hinzufügen. Im Abschnitt „Manifest“ werden die Parameter beschrieben, die Sie für die Weitergabe und Verwendung durch den Webvorlagencode konfigurieren können.

Das Manifest ist ein JSON-Objekt, das die Eigenschaften der im Designstudio angezeigten Webvorlage definiert: Typ, Anzeigename, Beschreibung, Tabellen und Parameter. Diese Webvorlageneigenschaften können verwendet werden, um die Lücke zwischen professionellen Entwicklern und Low-Code-Bearbeitung zu schließen. Die Parameter beziehen sich auf Variablen, die Entwickler in ihrem Quellcode verwenden, und Low-Code-Hersteller können ihre Werte konfigurieren.

Manifestieren Sie unterstützte Eigenschaften

Manifesteigenschaft	Eigenschaft
typ	Muss auf Funktional festgelegt werden. Funktional: Fügen Sie die Webvorlagenkomponente über den Prozess Komponente hinzufügen im Designstudio hinzu.
displayName	Anzeigename für die Webvorlagenkomponente, die im Designstudio angezeigt werden soll.
Description	Beschreibung der Webvorlagenkomponente.
Tabellen	Ein Array von Dataverse-Tabellen, mit denen ein Entwickler direkt zum Datenarbeitsbereich navigieren kann, um die Tabellenkonfiguration oder Datensätze zu bearbeiten. Die Tabellen müssen mit ihrem logischen Namen aufgelistet werden.
Parameter	Parameter mit definierten Eigenschaften: id: stimmt mit der im Webvorlagencode verwendeten Variablen und dem Liquid-Include-Tag überein. displayName: Anzeigename im Designstudio. description: Kurzer Text wird über einen Tooltip angezeigt, um Entwicklern, die die Komponente verwenden, Kontext bereitzustellen.

Beispiel:

{% manifest %} 
    { 
    "type": "Functional", 
    "displayName": "Data Cards", 
    "description": "This component displays data using a cards layout", 
    "tables": ["cards"], 
    "params": [ 
        { 
        "id": "title", 
        "displayName": "Title", 
        "description": "Heading for this component" 
        }, 
        { 
        "id": "count", 
        "displayName": "Count", 
        "description": "No. of items to be displayed" 
        }] 
    } 
{% endmanifest %} 

<!--additional web template code to use parameters to specialized functionality-->

Code für Webvorlagen schreiben

Wenn Sie eine vorhandene, sofort einsatzbereite Webvorlage erweitern möchten, empfehlen wir Ihnen, eine Kopie der Webvorlage zu erstellen und die Kopie zu erweitern, um den Quellcode zu erhalten und Datenverlust zu verhindern.

Alle Parameter werden als Zeichenfolgen übergeben. Es wird empfohlen, in Ihrem Code die Parameterwerte nach Bedarf in die gewünschten Typen zu konvertieren. Die Konvertierung von Parametern kann mithilfe von Liquid-Filtern erreicht werden.

Beispiele:

{% assign posts_count = count | integer %}
{% assign column_count = columns | integer %}

Konfigurieren Sie eine Webvorlagenkomponente auf einer Webseite

Wenn die Webvorlagenkomponente (mit einem Manifestabschnitt) erstellt wird, können Sie eine entsprechende Liquid-Referenz zur Webseitenkopie hinzufügen (mit Visual Studio Code für das Web, Visual Studio Code, Portalverwaltungs-App oder andere Methoden) und übergibt die verschiedenen Parameter, wie in diesem Beispiel gezeigt:

{% include 'webTemplateName' name: 'Topics' count:'4' %}

Sie können die Parameter direkt im Designstudio konfigurieren. Auf diese Weise kann ein professioneller Entwickler mithilfe von Webvorlagen erweiterte Komponenten erstellen, die Low-Code-Entwickler mithilfe des Designstudios konfigurieren können.

Konfigurieren Sie Parameter im Designstudio.

Einschränkungen und bekannte Probleme

Das Verschachteln von Webvorlagenkomponenten in andere Webvorlagenkomponenten wird nicht unterstützt.

Nächster Schritt

So erstellen Sie eine Webvorlagenkomponente

Freigeben über