Partilhar via

Apresentar registos como um carrossel

Este exemplo demonstra como utilizar o manifesto para expandir um modelo Web para apresentar localizações numa página Web num formato de carrossel rotativo.

Componente de modelo Web como um carrossel de localização.

Como criar um componente de modelo Web para apresentar localizações

Passo 1: Preparação

  1. Criar uma tabela no seu ambiente com as colunas correspondentes (nome, endereço e imagem)
  2. Copie o nome lógico da tabela.
  3. Crie alguns registos de exemplo na nova tabela.

Passo 2: Configurar o modelo Web

  1. Copie o código de origem para um novo modelo Web no seu ambiente. Consulte Como criar um componente de modelo Web para obter mais detalhes.

    
{% 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. Substitua todas as instâncias de "cr50f" pelo nome de esquema da nova tabela. Isto deverá encarregar-se das propriedades fetchXML e de todo o HTML e {% manifest %}.

Passo 3: Utilizar o modelo Web

  1. Adicione o novo modelo Web à cópia de página de uma página, por exemplo, adicione {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} ou {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Edite e configure as propriedades do modelo Web no estúdio de design.
  3. Reutilize o componente em diferentes páginas Web conforme necessário e repita o passo anterior para configurar a apresentação com base nos seus requisitos.
  4. Selecione editar dados para atualizar os registos na tabela criada recentemente.

Consulte também