Κοινή χρήση μέσω

Εμφάνιση καρτελών ως carousel

  • Άρθρο

Αυτό το δείγμα δείχνει τον τρόπο χρήσης της δηλωτικού για την επέκταση ενός προτύπου Web ώστε να εμφανίζει τοποθεσίες σε μια ιστοσελίδα σε μορφή περιστρεφόμενου carousel.

Στοιχείο προτύπου Web ως περιστρεφόμενο carousel.

Οδηγίες δημιουργίας στοιχείου προτύπου Web για εμφάνιση θέσεων

Βήμα 1: Προετοιμασία

  1. Δημιουργήστε έναν πίνακα στο περιβάλλον σας με τις στήλες που αντιστοιχούν (όνομα, διεύθυνση και εικόνα).
  2. Αντιγράψτε το λογικό όνομα του πίνακα.
  3. Δημιουργήστε μερικά δείγματα καρτελών στο νέο πίνακα.

Βήμα 2: Ορίστε τις παραμέτρους του προτύπου web

  1. Αντιγράψτε τον κωδικό προέλευσης σε ένα νέο πρότυπο web στο περιβάλλον σας. Ανατρέξτε στο θέμα Τρόπος δημιουργίας ενός στοιχείου προτύπου web για περισσότερες λεπτομέρειες.

    
{% 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: Χρησιμοποιήστε το πρότυπο web

  1. Προσθέστε το νέο πρότυπο web στο αντίγραφο σελίδας μιας σελίδας, για παράδειγμα, προσθέστε {% include 'locations-slider' title:'Locations' interval:'6500' count:'4' height:'500' %} ή {% include 'locations-slider' title:'Locations' interval:'3500' count:'3' height:'750' %}.
  2. Επεξεργαστείτε και ρυθμίστε τις παραμέτρους των ιδιοτήτων του προτύπου Web στο στούντιο σχεδιασμού.
  3. Μπορείτε να χρησιμοποιήσετε ξανά το στοιχείο σε διαφορετικές ιστοσελίδες ανάλογα με τις ανάγκες και επαναλάβετε το προηγούμενο βήμα για να ρυθμίσετε τις παραμέτρους της εμφάνισης σύμφωνα με τις απαιτήσεις σας.
  4. Επιλέξτε επεξεργασία δεδομένων για να ενημερώσετε καρτέλες στον πίνακα που μόλις δημιουργήθηκε.

Δείτε επίσης