Partajați prin

Afișarea locațiilor sub formă de carduri

  • Articol

Acest exemplu demonstrează cum să utilizați manifestul pentru a extinde un șablon web pentru a afișa locații pe o pagină web într-un format de card.

Componentă șablon web drept card de locație.

Cum să creați o componentă de șablon web pentru a afișa locații

Pasul 1: Pregătirea

  1. Creați un tabel în mediul dvs., cu coloanele corespunzătoare (numele, adresa și linkul).
  2. Copiați numele logic al tabelului.
  3. Creați câteva exemple de înregistrări în noul tabel.

Pasul 2: Configurați șablonul web

  1. Copiați codul sursă într-un șablon web nou în mediul dvs. Consultați Cum să: creați o componentă de șablon web pentru mai multe detalii.

    
{% fetchxml locationsQuery %}
  <fetch mapping='logical' output-format='xml-platform'>
    <entity name='cr50f_place'>
      <attribute name='cr50f_name' />
      <attribute name='cr50f_address' />
      <attribute name='cr50f_link' />
    </entity>
  </fetch>
{% endfetchxml %}

<h2>{{ name | default: 'Cards' }}</h2>

{% assign place_count = count | integer %}
{% assign column_count = columns | integer %}

<ul style="list-style:none" class="grid">
  {% for loc in locationsQuery.results.entities limit: place_count %}
    <li class="col-md-{{ 12 | divided_by: column_count }}">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3>{{ loc.cr50f_name }}</h3>
        </div>
        <div class="panel-body">
          <p>{{ loc.cr50f_address }}</p>
        </div>
        {% if footer == 'true' and loc.cr50f_link %}
          <div class="panel-footer">
            <a href="{{loc.cr50f_link}}">Learn more about {{ loc.cr50f_name }}</a>
          </div>
        {% endif %}
      </div>
    </li>
  {% endfor %}
</ul>
{% manifest %}
  {
  "type": "Functional",
              "displayName": "Cards",
              "description": "Custom card component using the table 'Place' as the data source",
              "tables": [
                "cr50f_place"
              ],
              "params": [
                {
                  "id": "name",
                  "displayName": "Title",
                  "description": "Let's give it a title"
                },
                {
                  "id": "count",
                  "displayName": "Count",
                  "description": "No. of items"
                },
                {
                  "id": "columns",
                  "displayName": "# of Columns",
                  "description": "less than 12"
                },
                {
                  "id": "footer",
                  "displayName": "Footer",
                  "description": "Show the footer of the cards"
                }
              ]
          }
{% endmanifest %}

  2. Înlocuiți toate instanțele cr50f cu numele schemei noului tabel. Acest lucru ar trebui să rezolve și proprietățile fetchXML, precum și de întregul HTML și {% manifest %}.

Pasul 3: Utilizați șablonul web

  1. Adăugați noul șablon web la copia de pagină a unei pagini, de exemplu, adăugați {% include 'Cards' %} folosind Visual Studio Code pentru Web.
  2. Editați și configurați proprietățile șablonului web în studioul de design.
  3. Reutilizați componenta pe diferite pagini web după cum este necesar și repetați pasul anterior pentru a configura afișarea în funcție de cerințele dvs.
  4. Selectați editați datele pentru a actualiza înregistrările din tabelul nou creat.

Vedeți și