Поділитися через

Відображення розташувань як карток

  • Стаття

У цьому прикладі описано, як за допомогою маніфесту розширити функціонал веб-шаблона й відобразити на веб-сторінці розташування у форматі картки.

Компонент веб-шаблона як картка розташування.

Навчіться створювати компоненти шаблонів для відображення розташувань

Крок 1. Підготовка

  1. Створіть у своєму середовищі таблицю з відповідними стовпцями (ім'я, адреса та посилання).
  2. Скопіюйте логічне ім’я таблиці.
  3. Створіть кілька прикладів записів у новій таблиці.

Крок 2. Налаштування веб-шаблона

  1. Скопіюйте вихідний код до нового веб-шаблона в середовищі. Додаткові відомості: Процедура створення компонента веб-шаблона.

    
{% 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. Замініть усі входження cr50f на ім'я схеми нової таблиці. Це також повинно вирішити можливі проблеми із властивостями fetchXML, а також у HTML і {% manifest %}.

Крок 3. Застосуйте веб-шаблон

  1. Додайте новий веб-шаблон до копії сторінки, наприклад, додайте {% include 'Cards' %}, скориставшись веб-програмою Visual Studio Code.
  2. Відредагуйте та налаштуйте властивості веб-шаблону в студії дизайну.
  3. Якщо потрібно використати цей компонент на інших веб-сторінках, повторіть попередній крок для налаштування його відображення згідно з вимогами.
  4. Виберіть редагувати дані для оновлення записів у новій таблиці.

Див. також