Webvorlagen erstellen

Abgeschlossen

Die Webvorlage ist eine einfache Tabelle, die die folgenden Attribute aufweist:

  • Name – Wenn eine Vorlage in anderen Inhalten enthalten ist oder durch andere Vorlagen erweitert wird, gilt für sie dieser Name.
  • Quelle – Der Quellinhalt der Vorlage Dabei kann es sich um statischen Text, ein HTML-Fragment oder, was am häufigsten der Fall ist, um ein Liquid-Layout handeln.
  • MIME-Typ – Definiert, welchen MIME-Typ der Server beim Rendern der Vorlage an den Client sendet. Wenn kein Wert angegeben ist, wird angenommen, das der Wert text/html ist, ein Standardtyp für HTML-Seiten. Es ist möglich, eine Webvorlage zu erstellen, mit der spezielle Inhalte gerendert werden. Beispielsweise können Sie eine Webvorlage erstellen, die einige Microsoft Dataverse-Daten im json-Format zurückgibt. In diesem Fall wird der MIME-Typ auf application/json festgelegt.

Webvorlagenverwaltung

Die Liquid-Implementierung in Power Apps-Portalen enthält eine Reihe von Vorlagen-Tags, die die Verwaltungen der Vorlagen erleichtern und die Wiederverwendbarkeit fördern.

FetchXML-Tag

Der fetchxml-Tag ermöglicht Benutzern, Daten von Dataverse abzufragen und rendert die Ergebnisse auf einer Seite.

{% fetchxml varResults %}
<!— Fetchxml query -->
<fetch>
  <table name="account">
    <attribute name="name" />
  </table>
</fetch>
{% endfetchxml %}

Die varResults-Variable enthält die Ergebnisse der Abfrage.

{% for account in varResults.results.entities %} 
  {{ account.name }}<br />
{% endfor %}

Wichtig

Tabellenberechtigungen werden immer automatisch auf den fetchxml-Tag angewendet.

Tag „comment“

Mit dem Tag comment werden Inhalte innerhalb des Blocks nicht gerendert, und der Liquid-Code darin wird nicht ausgeführt. Dieser Tag ist nützlich, um erweiterte Kommentare in komplexe Vorlagen aufzunehmen und um Codeblöcke bei der Problembehandlung vorübergehend auszukommentieren.

This is a {% comment %}very useful {% endcomment %}comment.

Die vorhergehende Logik erzeugt das folgende Ergebnis:

Dies ist ein Kommentar.

Raw-Tag

Der raw-Tag ermöglicht die Ausgabe von Liquid-Code auf einer Seite, ohne dass diese analysiert und implementiert wird. Dieser Tag ist nützlich, um Inhalte zu generieren, die eine widersprüchliche clientseitige Syntax verwenden, z. B. Handlebars.

Hello, {% raw %}{{ user.fullname }}.{% endraw %} Nice to meet you.

Die vorhergehende Logik erzeugt das folgende Ergebnis:

Hallo {{ user.fullname }}. Schön, Sie kennenzulernen.

Beachten Sie, dass user.fullname explizit ausgegeben wird, statt als Liquid-Anweisung verarbeitet und in den tatsächlichen Benutzernamen konvertiert zu werden.

Include-Tag

Der include-Tag schließt den Inhalt einer Vorlage in eine andere ein, nach Name. Dieser Tag ermöglicht die Wiederverwendung gemeinsamer Vorlagenfragmente an mehreren Stellen, z. B. beim Rendern von Links zu sozialen Medien. Die enthaltene Vorlage hat Zugriff auf alle Variablen, die in der übergeordneten Vorlage definiert sind, und es ist möglich, Parameter zu übergeben.

{% include 'Breadcrumbs', separator: '>' %}

Diese Logik schließt die von der Vorlage Brotkrümel generierte Ausgabe ein, bei der die Variable separator auf das Symbol > festgelegt ist.

Block-Tag

Mit dem block-Tag können Sie einen Block innerhalb einer Vorlage definieren. Dies definiert einen Bereich, der optional durch die Vorlagen überschrieben werden kann, die die aktuelle Vorlage erweitern.

Extend-Tag

In Verbindung mit dem block-Tag stellt der extend-Tag die Vorlagenvererbung bereit. Dieser Tag ermöglicht es mehreren Vorlagen ein gemeinsames Layout zu verwenden und bestimmte Bereiche des übergeordneten Layouts zu überschreiben. Wenn extends verwendet wird, muss es der erste Inhalt in der Vorlage sein und kann nur von einem oder mehreren block-Tags gefolgt werden.

Basisvorlage

Die Basisvorlagenlogik lautet wie folgt:

<div>
Hello
{% block content %}default content{% endblock %}
</div>

Untergeordnete Vorlage

Die untergeordnete Vorlagenlogik lautet wie folgt:

{% extends 'Base Template' %}
{% block content %}Power Apps portals{% endblock%}

Die untergeordnete Vorlage generiert die folgende Ausgabe:

<div>
  Hello
  Power Apps portals
</div>

Die Tags extend und block dienen typischerweise zum Trennen von Layout- und Inhaltsvorlagen. Übergeordnete Vorlagen bzw. Basisvorlagen definieren normalerweise ein breites Seitenlayout, z. B. wenn es sich um eine einspaltige oder zweispaltige Seite handelt. Untergeordnete Vorlagen, die die Basisvorlage erweitern, können nur den Inhalt der Blöcke definieren, wie von der übergeordneten Vorlage angegeben.

Ein umfassendes Liquid-Codebeispiel, das die Vorlagenvererbung mit den Tags block/extend und include zeigt, finden Sie unter Eine benutzerdefinierte Seitenvorlage erstellen.

Best Practices für Webvorlagen

Die folgenden Schritte helfen Ihnen dabei, die Vorlagenstruktur zu verbessern und die Verwaltung der Webvorlagen zu vereinfachen:

  • Wählen Sie beschreibende Namen für Ihre Vorlagen, da diese referenziert oder als Teil anderer Vorlagen enthalten sind.

  • Teilen Sie das Seitenlayout auf: Trennen Sie das Layout vom Inhalt. Diese Layouts sind gute Ausgangspunkte für erweiterbare Vorlagen.

  • Achten Sie auf wiederholbare und wiederverwendbare Fragmente – diese können als Untervorlagen definiert werden und verwenden den Tag include.

  • Mit dem Tag include können Sie nicht nur das Layout, sondern auch häufig verwendete JavaScript-Fragmente wiederverwenden. Mit Parametern im Tag include können Sie Ihre JavaScript-Vorlagen intelligent gestalten. Diese Fragmente werden inline eingefügt.

  • Verschieben Sie größere wiederverwendbare JavaScript-Blöcke zu separaten Dateien, und fügen Sie sie stattdessen als Verweis ein. Der Client-Browser lädt sie separat, und sie können zwischengespeichert werden. Darüber hinaus können extern geladene Skripte minimiert werden, was zu einer besseren Leistung führt.

  • Ermitteln Sie die Teile der Seite, die für die mehrsprachige Implementierung übersetzt werden müssen. Definieren Sie diese Seiten entweder als Seiteninhalt oder als Inhaltsausschnitte.

  • Identifizieren Sie bearbeitbare Fragmente. Bestimmen Sie, in welchen Teilen der Webseite Benutzer für die Verwaltung und Wartung von Inhalten verantwortlich sein sollen.

  • Seien Sie beim Schreiben einer Vorlage großzügig, was das Layout betrifft, vermeiden Sie jedoch übermäßig viele Leerzeilen, indem Sie beispielsweise Bindestriche in Ihren Tags verwenden:

    {%- if username -%}
      Hello, {{ user.firstname}}
    {%- endif -%}
    
  • Verwenden Sie den Tag comments, um komplexe Teile der Vorlage zu beschreiben.

  • Sehen Sie sich Vorlagen an, die bereits mit dem Starterportal bereitgestellt wurden, und suchen Sie unter Erweiterte Vorlagen für Portale erstellen nach Liquid-Methoden.

Beim Bereitstellen eines Starterportals stehen Ihnen eine Reihe installierter gebrauchsfertiger Liquid-Vorlagen zur Verfügung: Integrierte Webvorlagen. Ihre Namen sind fest, und die Vorlagen können nicht bearbeitet werden.

Weitere Informationen finden Sie unter Mit Liquid-Vorlagen arbeiten.