Partajați prin

Afișarea înregistrărilor drept carusel

  • Articol

Acest exemplu demonstrează cum să utilizați manifestul pentru a extinde un șablon web pentru a afișa locații pe o pagină web într-un format de carusel care se rotește.

Componentă șablon web drept carusel de locație.

Cum să creați o componentă de șablon web pentru a afișa locații

Pasul 1: Pregătirea

  1. Creați un tabel în mediul dvs., cu coloanele corespunzătoare (numele, adresa și imaginea).
  2. Copiați numele logic al tabelului.
  3. Creați câteva exemple de înregistrări în noul tabel.

Pasul 2: Configurați șablonul web

  1. Copiați codul sursă într-un șablon web nou în mediul dvs. Consultați Cum să: creați o componentă de șablon web pentru mai multe detalii.

    
{% 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. Înlocuiți toate instanțele 'cr50f' cu numele schemei noului tabel. Acest lucru ar trebui să rezolve și proprietățile fetchXML, precum și de întregul HTML și {% manifest %}.

Pasul 3: Utilizați șablonul web

  1. Adăugați noul șablon web la copia de pagină a unei pagini, de exemplu, adăugați {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} sau {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Editați și configurați proprietățile șablonului web în studioul de design.
  3. Reutilizați componenta pe diferite pagini web după cum este necesar și repetați pasul anterior pentru a configura afișarea în funcție de cerințele dvs.
  4. Selectați editați datele pentru a actualiza înregistrările din tabelul nou creat.

Vedeți și