Del via

Vise poster som en karrusel

  • Artikel

I dette eksempel vises, hvordan du kan bruge manifestet til at udvide en webskabelon, så der vises placeringer på en webside i roterende karruselformat.

Webskabelonkomponent som lokationskarrusel.

Oprette en webskabelonkomponent for at vise placeringer

Trin 1: Forberedelse

  1. Opret en tabel i miljøet med de tilsvarende kolonner (navn, adresse og billede)
  2. Kopier tabellens logiske navn.
  3. Opret et par eksempelposter i den nye tabel.

Trin 2: Konfigurere webskabelonen

  1. Kopiér kildekoden til en ny webskabelon i dit miljø. Se Hvordan kan du oprette en webskabelonkomponent for at få flere oplysninger.

    
{% 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. Erstat alle forekomster af 'cr50f' med skemanavnet i den nye tabel. Dette skal tage sig af fetchXML-egenskaberne og i hele HTML-koden og {% manifest %}.

Trin 3: Brug webskabelonen

  1. Føj den nye webskabelon til sidekopien af en side, f.eks. tilføjelse af {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} eller {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Rediger og konfigurer egenskaberne for webskabelonen i design studio.
  3. Genbrug komponenten på tværs af forskellige websider efter behov, og gentag det forrige trin for at konfigurere visningen ud fra dine behov.
  4. Vælg rediger data for at opdatere poster i den tabel, du netop har oprettet.

Se også