Freigeben über

Zeigen Sie Datensätze als Karussell an

  • Artikel

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

Webvorlagenkomponente als Standortkarussell.

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 Bild).
  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'>
    <entity name='cr50f_place'>
        <attribute name='cr50f_name' />
        <attribute name='cr50f_address' />
        <attribute name='cr50f_image' />
    </entity>
    </fetch>
{% endfetchxml %}

<h2>{{ title | default: "Locations" }}</h2>

{% assign interval = interval | integer %}
{% assign count = count | integer %}
{% assign height = height | integer %}

<span>Showing {{ count }} out of {{ locationsQuery.results.entities.size }}</span>
{% if locationsQuery.results.entities.size > 0 %}
    <div id="carousel-example-generic"
    class="carousel slide"
    data-ride="carousel"
    data-interval="{{interval}}">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        {% for location in locationsQuery.results.entities limit: count %}
        <li
            data-target="#carousel-example-generic"
            data-slide-to="{{forloop.index0}}"
            class="{% if forloop.first %}active{% endif %}"></li>
        {% endfor %}
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        {% for loc in locationsQuery.results.entities limit: count %}
        <div class="item {% if forloop.first %}active{% endif %}" style="background-image:url('{{loc.cr50f_image.Url}}&Full=true'); height: {{height | default:500}}px">
            <div class="carousel-caption" style="background:white">
            <h3>{{ loc.cr50f_name }}</h3>
            <p>{{ loc.cr50f_address }}</p>
            </div>
        </div>
        {% endfor %}
    </div>
    <!-- Controls -->
    <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
{% endif %}

<style>
    .carousel .item {
    background-size: cover;
    background-repeat: no-repeat;
    }
</style>

{% manifest %}
    {
    "type": "Functional",
        "displayName": "Locations Slider",
        "description": "Locations slider using the table 'Place' as the data source",
        "tables": ["cr50f_place"],
        "params": [
            {
            "id": "title",
            "displayName": "Title",
            "description": ""
        },{
            "id": "interval",
            "displayName": "Interval",
            "description": "The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. Default: 5000ms"
        },{
            "id": "count",
            "displayName": "Count",
            "description": "The number of locations to display"
        },{
            "id": "height",
            "displayName": "Slide's height",
            "description": "In px, default: 500px"
        }
      ]
    }
{% endmanifest %}

  2. Ersetzen Sie alle Instanzen von cr50f durch den Schemanamen der neuen Tabelle. Dies sollte sich um die fetchXML-Eigenschaften und die gesamte 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 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} oder {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %} 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