Позначка шаблону Liquid для компонентів коду

Стаття
10/07/2023

Power Apps component framework дозволяє професійним розробникам і розробникам програм створювати компоненти коду для компонованих ы модельних програм. Ці компоненти коду дають змогу користувачам вдосконалити роботу з даними у формах, поданнях і приладних дошках. Додаткова інформація: Використання компонентів коду в Power Pages

Важливо

Позначка шаблону Liquid для компонентів коду потребує використання порталів версії 9.3.10.х або пізніших версій.

У цьому випуску ми запровадили можливість додавання компонентів коду на вебсторінки за допомогою позначки шаблону Liquid і ввімкнутих компонентів за допомогою API вебслужб, включених для компонентів на рівні полів на формах у Power Pages.

Компоненти коду можна додавати за допомогою позначки шаблону codecomponent Liquid. Ключ для визначення компонента коду, який необхідно завантажити, передається за допомогою атрибута name. Ключом може бути GUID (ідентифікатор компонента коду) або ім'я компонента коду, імпортованого в Microsoft Dataverse.

Значення властивостей, які очікує компонент коду, мають передаватися як пара ключів/значень, розділених знаком : (дві крапки), де ключом є ім'я властивості, а значенням — значення рядка JSON.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

Наприклад, щоб додати компонент коду для параметра вводу з іменем controlValue, використовуйте позначки шаблону Liquid.

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

Порада

У цьому прикладі використовуються параметри, які називаються controlvalue та controlApiKey, проте для використання компонента можуть знадобитися різні імена параметрів.

Можна використати елемент керування прикладами зіставлення та упакувати компонент коду як рішення для використання з Power Pages.

Нотатка

Ресурси, створені спільнотою, не підтримуються Microsoft. У разі запитань і проблем із ресурсами спільноти зверніться до видавця ресурсу. Перед використанням цих ресурсів необхідно переконатися, що вони відповідають принципам роботи з Power Apps component framework, і їх слід використовувати лише з метою довідки.

Посібник: використання компонентів коду на сторінках із позначкою шаблону Liquid

У цьому посібнику ви настроюватимете Power Pages, щоб додати компонент на вебсторінку. Після цього ви відвідаєте вебсторінку сайту й будете взаємодіяти з компонентом.

Перед початком

Якщо використовується приклад компонента коду, що наведено в цьому посібнику, перш ніж почати слід імпортувати зразки рішень до середовища. Для отримання відомостей про імпортування рішень, перейдіть до розділу Імпорт рішень.

вимоги

Щоб дізнатися про підтримувані та непідтримувані компоненти коду в Power Pages, перейдіть до розділу Використання компонентів коду в Power Pages.

Нотатка

У цьому посібнику використовується зразок компонента коду, створеного за допомогою Power Apps component framework для демонстрації елемента керування картою на вебсторінці. Можна використати наявний або новий компонент самостійно, а також будь-яку іншу вебсторінку для цього посібника. У цьому разі під час виконання кроків, описаних у цьому посібнику, слід використовувати компонент і вебсторінку. Щоб отримати додаткові відомості про створення компонентів коду, перейдіть до розділу Створення першого компонента.

Крок 1. Додавання компонента коду на вебсторінку з Studio

Відкрийте сайт у студії дизайну Power Pages.
Виберіть робочу область Сторінки й натисніть + Сторінка.
Введіть ім'я сторінки. Наприклад, Перегляд карти.
Виберіть макет сторінки Почати з пустого.
Натисніть кнопку Редагувати код, щоб відкрити Visual Studio Code для вебсайту.
Додайте елемент керування між <div></div> з позначкою шаблону Liquid, використовуючи наведений нижче синтаксис.
```
{% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:'<API Key Value>' %}
```
Порада

Докладні відомості про всі імпортовані компоненти та пошук імені компонента див. у CustomControl Web API.

Наприклад:
- Пошук компонентів.
  
  https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName
- Отримання параметрів вводу для компонента.
  
  https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest
Щоб зберегти код оновлення, натисніть клавішу CTRL-S на клавіатурі.
Поверніться до студії дизайну та виберіть Синхронізація, щоб доповнити вебсторінку змінами з Visual Studio Code.
У верхньому правому куті натисніть кнопку Попередній перегляд і Робочий стіл для попереднього перегляду сайту.
Тепер на веб-сторінці відображатиметься елемент керування, доданий до неї.

Наступні кроки

Огляд: використання компонентів коду на порталах

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