Поділитися через

Відображення записів у каруселі

  • Стаття

У цьому прикладі описано, як за допомогою маніфесту розширити функціонал веб-шаблона й відобразити на веб-сторінці розташування у вигляді каруселі, що обертається.

Компонент веб-шаблона як карусель розташувань.

Навчіться створювати компоненти шаблонів для відображення розташувань

Крок 1. Підготовка

  1. Створіть у своєму середовищі таблицю з відповідними стовпцями (ім'я, адреса та зображення).
  2. Скопіюйте логічне ім’я таблиці.
  3. Створіть кілька прикладів записів у новій таблиці.

Крок 2. Налаштування веб-шаблона

  1. Скопіюйте вихідний код до нового веб-шаблона в середовищі. Додаткові відомості: Процедура створення компонента веб-шаблона.

    
{% 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. Замініть усі входження «cr50f» на ім'я схеми нової таблиці. Це також повинно вирішити можливі проблеми із властивостями fetchXML, а також у HTML і {% manifest %}.

Крок 3. Застосуйте веб-шаблон

  1. Додайте новий веб-шаблон до копії сторінки, наприклад, додайте {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} або {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Відредагуйте та налаштуйте властивості веб-шаблону в студії дизайну.
  3. Якщо потрібно використати цей компонент на інших веб-сторінках, повторіть попередній крок для налаштування його відображення згідно з вимогами.
  4. Виберіть редагувати дані для оновлення записів у новій таблиці.

Див. також