Chia sẻ qua

Hiển thị các bản ghi dưới dạng băng chuyền xoay vòng

  • Bài viết

Mẫu này trình bày cách sử dụng bảng kê khai để mở rộng mẫu web nhằm hiển thị các vị trí trên trang web ở định dạng băng chuyền xoay vòng.

Thành phần mẫu web dưới dạng băng chuyền xoay vòng vị trí.

Cách tạo thành phần mẫu web để hiển thị vị trí

Bước 1: Chuẩn bị

  1. Tạo bảng trong môi trường có các cột phù hợp (tên, địa chỉ và hình ảnh)
  2. Sao chép tên lô-gic của bảng
  3. Tạo một vài bản ghi mẫu trên bảng mới.

Bước 2: Thiết lập mẫu web

  1. Sao chép mã nguồn vào mẫu web mới trong môi trường của bạn. Xem Cách tạo thành phần mẫu web để biết thêm chi tiết.

    
{% 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. Thay tất cả phiên bản 'cr50f' bằng tên sơ đồ của bảng mới. Thao tác này sẽ xử lý các thuộc tính XML tìm nạp dữ liệu và xuyên suốt HTML và {% manifest %}.

Bước 3: Sử dụng mẫu web

  1. Thêm mẫu web mới vào bản sao của trang, chẳng hạn như thêm {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} or {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Chỉnh sửa và định cấu hình các thuộc tính của mẫu web trong studio thiết kế.
  3. Tái sử dụng thành phần trên các trang web khác nhau nếu cần và lặp lại bước trước đó để định cấu hình hiển thị dựa trên yêu cầu của bạn.
  4. Chọn chỉnh sửa dữ liệu để cập nhật các bản ghi trên bảng mới tạo.

Xem thêm