Partager via

Afficher des enregistrements sous forme de carrousel

  • Article

Cet exemple montre comment utiliser le manifeste pour étendre un modèle Web afin d’afficher des emplacements sur une page Web au format de carrousel rotatif.

Composant de modèle Web sous forme de carrousel d’emplacements.

Comment créer un composant de modèle Web pour afficher des emplacements

Étape 1 : Préparation

  1. Créez une table dans votre environnement avec les colonnes correspondantes (nom, adresse et image).
  2. Copiez le nom logique de la table.
  3. Créez quelques exemples d’enregistrements dans la nouvelle table.

Étape 2 : Configurer le modèle Web

  1. Copiez le code source dans un nouveau modèle Web dans votre environnement. Voir Comment créer un composant de modèle Web pour plus d’informations.

    
{% 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. Remplacez toutes les instances de « cr50f » par le nom de schéma de la nouvelle table. Cela devrait prendre en charge les propriétés fetchXML et tout le code HTML et {% manifest %}.

Étape 3 : Utiliser le modèle Web

  1. Ajoutez le nouveau modèle Web à la copie de page d’une page, par exemple, ajoutez {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} ou {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}
  2. Modifiez et configurez les propriétés du modèle Web dans le studio de conception.
  3. Réutilisez le composant dans différentes pages Web selon vos besoins et répétez l’étape précédente pour configurer l’affichage en fonction de vos exigences.
  4. Sélectionnez Modifier les données pour mettre à jour les enregistrements dans la table nouvellement créée.

Voir aussi