Как создать компонент веб-шаблона

Статья
09/27/2023

Создание компонента веб-шаблона позволяет создать настраиваемый повторяемый компонент, который можно настроить для каждого конкретного используемого экземпляра.

Из этого руководства вы узнаете, как выполнять следующие задачи:

Определять манифест и указывать параметры, которые необходимо передать компоненту веб-шаблона
Создание компонента веб-шаблона
Добавлять компонент веб-страницы на веб-страницу
Настраивать параметры с помощью студии дизайна

Предварительные условия

Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
Создание сайта Power Pages. Создайте сайт Power Pages.

Создание компонента веб-шаблона

В шагах ниже мы создаем компонент веб-шаблона, который отображает записи отзывов из таблицы Microsoft Dataverse в формате макета карточки с кнопкой для отправки отзыва. Вы можете определить количество карточек, которые можно настроить.

Создание таблицы Dataverse для использования в компоненте веб-шаблона

В нашем примере мы создадим таблицу Dataverse с именем Отзыв для нашего процесса. Дополнительные сведения о создании таблиц Dataverse см. в разделе Создание и изменение таблиц Dataverse с помощью рабочей области данных. Вы можете изменить эти шаги, чтобы они отражали ваши собственные бизнес-процессы.

Переход к Power Pages.
Выберите сайт, на который вы хотите добавить компонент веб-шаблона, и выберите Изменить.
В студии дизайна выберите рабочую область Данные.

Создайте таблицу Dataverse с именем Отзыв со следующими свойствами:

Совет

Следующая таблица является лишь примером. Вы можете создавать таблицы в соответствии с вашими бизнес-процессами.

Имя столбца	Тип данных столбца
Полное имя	Текст (существующий столбец имя)
Контент	Несколько строк текста
Rating	Целое число (минимальное значение: 1; максимальное значение: 5)

Создание таблицы для использования в инструкции.

И несколько примеров записей в таблицу.
В рабочей области Настройка, добавьте разрешение таблицы, чтобы разрешить доступ для чтения и назначить соответствующие веб-роли.

Создание веб-шаблона с манифестом

В приложении Управление порталом в разделе Содержимое выберите Веб-шаблоны, а затем Создать в главном меню, чтобы создать новый веб-шаблон.
Введите отзывы в качестве имени (или другое значение, соответствующее вашим требованиям).

Скопируйте и вставьте следующий код в поле Источник записи веб-шаблона, замените значения с префиксом cr54f, используемым в вашей собственной среде.

{% fetchxml postsQuery %}
<fetch mapping='logical'>   
   <entity name='cr54f_review'>  
        <attribute name='cr54f_name'/>   
        <attribute name='cr54f_content'/>   
        <attribute name='cr54f_rating'/>   
        <attribute name='createdon'/>  
        <order attribute='createdon' descending='false'/>   
   </entity>   
</fetch>
{% endfetchxml %}
{% assign posts_count = count | times: 1 %}
{% assign col_div = columns | integer %}
<h2>({{postsQuery.results.entities.size}}) {{name | default:"Feedback entries (default)"}} </h2>
{% if postsQuery.results.entities.size > 0 %}
    <div class="col-sm-12">
      <ul style="list-style: none;">
          {% for post in postsQuery.results.entities limit:count %}
              <li class="col-md-{{ 12 | divided_by: col_div }}">
                  <div class="panel panel-{% if post.cr54f_rating < cutoff %}danger{% else %}default{% endif %}">
                      <div class="panel-heading">{{post.cr54f_name}} <span class="badge" style="float:right">{{post.cr54f_rating}}</span></div>
                      <div class="panel-body">
                          <p>{{post.cr54f_content}}</p>
                      </div>
                      <div class="panel-footer">{{post.createdon}}</div>
                  </div>
            </li>
          {% endfor %}
      </ul>
    </div>
    {% if postsQuery.results.entities.size > count %}
      <hr/>
      <button onclick="alert('Not yet implemented :)')" class="button1" style="margin: 0 auto; display:block">{{load_more_label | default: "Load More"}}</button>
    {% endif %}
{% endif %}

{% manifest %} 
{
  "type": "Functional",
  "displayName": "Posts",
  "description": "Shows all posts",
  "tables": ["cr54f_review"],
  "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": "cutoff",
      "displayName": "Limit for review",
      "description": "Number between 1 and 5"
    },
    {
      "id": "load_more_label",
      "displayName": "Load more label",
      "description": ""
    }
  ]
}
{% endmanifest %}

Добавление компонента веб-страницы на веб-страницу

Создав компонент веб-шаблона, вы можете добавить его на веб-страницу.

В Power Pages, в студии дизайна выберите страницу, на которую вы хотите добавить компонент веб-шаблона.
Выберите Редактировать код, чтобы открыть веб-версию Visual Studio Code для веб-страницы.
Введите следующий оператор включения, который ссылается на созданный ранее веб-шаблон. Вы можете заменить имя именем своего собственного веб-шаблона:

{% include "reviews" %}
Выберите CTRL-S, чтобы сохранить код. Вернитесь в студию дизайна и выберите Синхронизировать. Отобразится предварительная версия компонента на вашей веб-странице.
Выберите Редактировать пользовательский компонент , и вы сможете настроить параметры, определенные в манифесте компонента веб-шаблона, который вы создали выше.
Предварительно просмотрите сайт, чтобы увидеть макет, вернитесь в студию дизайна и поэкспериментируйте с различными вариантами макета.

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