Freigeben über

Zeigen Sie Standorte als Karten an

  • Artikel

Dieses Beispiel zeigt, wie Sie mit dem Manifest eine Webvorlage erweitern, um Standorte auf einer Webseite im Kartenformat anzuzeigen.

Webvorlagenkomponente als Standortkarte.

So erstellen Sie eine Webvorlagenkomponente, um Standorte anzuzeigen

Schrit 1: Vorbereitung

  1. Erstellen Sie in Ihrer Umgebung eine Tabelle mit den passenden Spalten (Name, Adresse und Verknüpfung).
  2. Den logischen Name der Tabelle kopieren.
  3. Erstellen Sie einige Beispieldatensätze für die neue Tabelle.

Schritt 2: Einrichten der Webvorlage

  1. Kopieren Sie den Quellcode in eine neue Webvorlage in Ihrer Umgebung. Weitere Einzelheiten finden Sie unter So erstellen Sie eine Webvorlagenkomponente .

    
{% fetchxml locationsQuery %}
  <fetch mapping='logical' output-format='xml-platform'>
    <entity name='cr50f_place'>
      <attribute name='cr50f_name' />
      <attribute name='cr50f_address' />
      <attribute name='cr50f_link' />
    </entity>
  </fetch>
{% endfetchxml %}

<h2>{{ name | default: 'Cards' }}</h2>

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

<ul style="list-style:none" class="grid">
  {% for loc in locationsQuery.results.entities limit: place_count %}
    <li class="col-md-{{ 12 | divided_by: column_count }}">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>{{ loc.cr50f_name }}</h3>
        </div>
        <div class="panel-body">
          <p>{{ loc.cr50f_address }}</p>
        </div>
        {% if footer == 'true' and loc.cr50f_link %}
          <div class="panel-footer">
            <a href="{{loc.cr50f_link}}">Learn more about {{ loc.cr50f_name }}</a>
          </div>
        {% endif %}
      </div>
    </li>
  {% endfor %}
</ul>
{% manifest %}
  {
  "type": "Functional",
              "displayName": "Cards",
              "description": "Custom card component using the table 'Place' as the data source",
              "tables": [
                "cr50f_place"
              ],
              "params": [
                {
                  "id": "name",
                  "displayName": "Title",
                  "description": "Let's give it a title"
                },
                {
                  "id": "count",
                  "displayName": "Count",
                  "description": "No. of items"
                },
                {
                  "id": "columns",
                  "displayName": "# of Columns",
                  "description": "less than 12"
                },
                {
                  "id": "footer",
                  "displayName": "Footer",
                  "description": "Show the footer of the cards"
                }
              ]
          }
{% endmanifest %}

  2. Ersetzen Sie alle Instanzen von cr50f durch den Schemanamen der neuen Tabelle. Dies sollte sich um die fetchXML-Eigenschaften sowie im gesamten HTML und {% manifest %} kümmern.

Schritt 3: Die Webvorlage verwenden

  1. Fügen Sie die neue Website-Vorlage der Seitenkopie einer Seite hinzu, beispielsweise fügen Sie {% include 'Cards' %} mithilfe von Visual Studio Code für das Web hinzu.
  2. Bearbeiten und konfigurieren Sie die Eigenschaften der Webvorlage im Design Studio.
  3. Verwenden Sie die Komponente nach Bedarf auf verschiedenen Webseiten wieder und wiederholen Sie den vorherigen Schritt, um die Anzeige entsprechend Ihren Anforderungen zu konfigurieren.
  4. Wählen Sie Daten bearbeiten, um Datensätze in der neu erstellten Tabelle zu aktualisieren.

Siehe auch