Посібник: використання API веб-служб порталу

Примітка

З 12 жовтня 2022 року портали Power Apps перейменовано на Power Pages. Додаткова інформація: Microsoft Power Pages тепер у загальному доступі (блоґ)
Незабаром документацію порталів Power Apps буде перенесено та об’єднано з документацією Power Pages.

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

Примітка

Ви можете змінити назви стовпців або використати іншу таблицю, дотримуючись кроків у цьому прикладі.

Крок 1. Створити настройки сайту

Перш ніж ви зможете скористатися API веб-служб порталів, потрібно ввімкнути потрібні параметри сайту за допомогою програми керування порталом. Параметри сайту залежать від таблиці, яку потрібно використовувати під час взаємодії з Web API.

Іти до Power Apps.
В області ліворуч виберіть елемент Застосунки.
Виберіть програму керування порталом **** .
В області ліворуч у програмі керування порталом **** виберіть елемент Параметри сайту.
Виберіть елемент Створити.
У полі Ім’я введіть Webapi/contact/enabled.
У списку веб-сайтів виберіть запис веб-сайту .
У полі Значення введіть true.
Виберіть елементи Зберегти та закрити.
Виберіть елемент Створити.
У полі Ім’я введіть Webapi/контакт/поля.
У списку веб-сайтів виберіть запис веб-сайту .
У полі Значення введіть
firstname,lastname,fullname,emailaddress1,telephone1
Виберіть елементи Зберегти та закрити.
Виберіть елемент Створити.
У полі Ім’я введіть Webapi/error/innererror.
У списку веб-сайтів виберіть запис веб-сайту .
У полі Значення введіть true.
Виберіть елементи Зберегти та закрити.
Перевірте налаштування сайту для веб-API.

Крок 2. Налаштування дозволів

Потрібно налаштувати дозволи, щоб користувачі могли використовувати функцію API веб-служб. У цьому прикладі слід увімкнути таблицю Контактна особа для отримання дозволів для таблиці, створити веб-роль для використання API веб-служб, додати дозволи для таблиці Контактна особа до цієї веб-ролі, а потім додати веб-роль користувачам, щоб дозволити їм використовувати API веб-служб.

В області ліворуч у програмі керування порталом **** виберіть елемент Дозволи для таблиць.
Виберіть елемент Створити.
У полі Ім’я введіть Дозвіл на доступ до таблиці контактів.
У списку Ім’я таблиці виберіть пункт Контакт (контакт).
У списку веб-сайтів виберіть запис веб-сайту .
У списку Тип Access виберіть елемент Глобальний.
Виберіть права Читання, Записування, Створення і Видалення.
Виберіть елементи Зберегти та закрити.

Створення веб-ролі

На веб-сайті можна використати наявну або створити нову веб-роль.

В області ліворуч виберіть елемент Веб-ролі .
Виберіть елемент Створити.
У полі Ім’я введіть Користувач веб-API (або будь-яке ім’я, яке найкраще відображає роль користувача, який отримує доступ до цієї функції).
У списку веб-сайтів виберіть запис веб-сайту .
Натисніть кнопку Зберегти.

Додавання дозволів для пов’язаної таблиці

У новій або наявній веб-ролі виберіть елемент Дозволи > на пов’язані таблиці.
Виберіть елемент Додати наявний дозвіл на доступ до таблиці.
Виберіть елемент Дозвіл на доступ до таблиці контактів, створений раніше.
Натисніть кнопку Додати.
Виберіть елементи Зберегти та закрити.

Додавання контактних осіб до веб-ролі

В області ліворуч виберіть елемент Контакти.
Виберіть контакт, який потрібно використовувати в цьому прикладі для API веб-служб.

Примітка

Цей контакт є обліковим записом користувача, використаним у цьому прикладі для тестування API веб-служб. Обов’язково виберіть правильний контакт у порталі.
Виберіть пов’язані > веб-ролі.
Виберіть елемент Додати наявну веб-роль.
Виберіть роль користувача веб-API, створену раніше.
Натисніть кнопку Додати.
Виберіть елементи Зберегти та закрити.

Крок 3. Створення веб-сторінки

Тепер, коли ввімкнено API веб-служб і налаштовано дозволи користувача, створіть веб-сторінку зі зразком коду для перегляду, редагування, створення та видалення записів.

В області ліворуч у програмі керування порталом **** виберіть елемент Веб-сторінки.
Виберіть Створити.
У полі Назва введіть webapi.
У списку Веб-сайт виберіть запис веб-сайту.
Для параметра Батьківська сторінка виберіть Головна.
Для параметра Часткова URL-адреса введіть webapi.
Для параметра Шаблон сторінки виберіть Головна.
Для параметра Стан публікації виберіть Опубліковано.
Виберіть Зберегти.
Виберіть Пов’язане > Веб-сторінки.
У розділі Зв’язане подання веб-сторінки виберіть webapi.
Прокрутіть униз до розділу Вміст, а потім перейдіть до пункту Копія (HTML) (конструктор HTML).
Перейдіть на вкладку HTML.

Скопіюйте зразок фрагмента коду нижче та вставте його в конструктор HTML.

    <!-- Sample code for Web API demonstration -->
<style>
    #processingMsg {
        width: 150px;
        text-align: center;
        padding: 6px 10px;
        z-index: 9999;
        top: 0;
        left: 40%;
        position: fixed;
        -webkit-border-radius: 0 0 2px 2px;
        border-radius: 0 0 2px 2px;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        display: none;
    }

    table td[data-attribute] .glyphicon-pencil {
        margin-left: 5px;
        opacity: 0;
    }

    table td[data-attribute]:hover .glyphicon-pencil {
        opacity: 0.7;
    }
</style>

<script>
  $(function() {
    //Web API ajax wrapper
    (function(webapi, $) {
      function safeAjax(ajaxOptions) {
        var deferredAjax = $.Deferred();
        shell.getTokenDeferred().done(function(token) {
          // Add headers for ajax
          if (!ajaxOptions.headers) {
            $.extend(ajaxOptions, {
              headers: {
                "__RequestVerificationToken": token
              }
            });
          } else {
            ajaxOptions.headers["__RequestVerificationToken"] = token;
          }
          $.ajax(ajaxOptions)
            .done(function(data, textStatus, jqXHR) {
              validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
            }).fail(deferredAjax.reject); //ajax
        }).fail(function() {
          deferredAjax.rejectWith(this, arguments); // On token failure pass the token ajax and args
        });
        return deferredAjax.promise();
      }
      webapi.safeAjax = safeAjax;
    })(window.webapi = window.webapi || {}, jQuery)
    // Notification component
    var notificationMsg = (function() {
      var $processingMsgEl = $('#processingMsg'),
        _msg = 'Processing...',
        _stack = 0,
        _endTimeout;
      return {
        show: function(msg) {
          $processingMsgEl.text(msg || _msg);
          if (_stack === 0) {
            clearTimeout(_endTimeout);
            $processingMsgEl.show();
          }
          _stack++;
        },
        hide: function() {
          _stack--;
          if (_stack <= 0) {
            _stack = 0;
            clearTimeout(_endTimeout);
            _endTimeout = setTimeout(function() {
              $processingMsgEl.hide();
            }, 500);
          }
        }
      }
    })();
    // Inline editable table component
    var webAPIExampleTable = (function() {
      var trTpl = '<% _.forEach(data, function(data){ %>' +
        '<tr data-id="<%=data.id%>" data-name="<%=data.fullname%>">' +
        '<% _.forEach(columns, function(col){ %>' +
        '<td data-attribute="<%=col.name%>" data-label="<%=col.label%>" data-value="<%=data[col.name]%>">' +
        '<%-data[col.name]%><i class="glyphicon glyphicon-pencil"></i>' +
        '</td>' +
        '<% }) %>' +
        '<td>' +
        '<button class="btn btn-default delete" type="submit"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>' +
        '</td>' +
        '</tr>' +
        '<% }) %>';
      var tableTpl = '<table class="table table-hover">' +
        '<thead>' +
        '<tr>' +
        '<% _.forEach(columns, function(col){ %>' +
        '<th><%=col.label%></th>' +
        '<% }) %>' +
        '<th>' +
        '<button class="btn btn-default add" type="submit">' +
        '<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add Sample Record' +
        '</button>' +
        '</th>' +
        '</tr>' +
        '</thead>' +
        '<tbody>' + trTpl + '</tbody>' +
        '</table>';
      function getDataObject(rowEl) {
        var $rowEl = $(rowEl),
          attrObj = {
            id: $rowEl.attr('data-id'),
            name: $rowEl.attr('data-name')
          };
        $rowEl.find('td').each(function(i, el) {
          var $el = $(el),
            key = $el.attr('data-attribute');
          if (key) {
            attrObj[key] = $el.attr('data-value');
          }
        })
        return attrObj;
      }
      function bindRowEvents(tr, config) {
        var $row = $(tr),
          $deleteButton = $row.find('button.delete'),
          dataObj = getDataObject($row);
        $.each(config.columns, function(i, col) {
          var $el = $row.find('td[data-attribute="' + col.name + '"]');
          $el.on('click', $.proxy(col.handler, $el, col, dataObj));
        });
        //User can delete record using this button
        $deleteButton.on('click', $.proxy(config.deleteHandler, $row, dataObj));
      }
      function bindTableEvents($table, config) {
        $table.find('tbody tr').each(function(i, tr) {
          bindRowEvents(tr, config);
        });
        $table.find('thead button.add').on('click', $.proxy(config.addHandler, $table));
      }
      return function(config) {
        var me = this,
          columns = config.columns,
          addHandler = config.addHandler,
          deleteHandler = config.deleteHandler,
          $table;
        me.render = function(el) {
          $table = $(el).html(_.template(tableTpl)({
            columns: columns,
            data: me.data
          })).find('table');
          bindTableEvents($table, {
            columns: columns,
            addHandler: addHandler,
            deleteHandler: deleteHandler
          });
        }
        me.addRecord = function(record) {
          $table.find('tbody tr:first').before(_.template(trTpl)({
            columns: columns,
            data: [record]
          }));
          bindRowEvents($table.find('tbody tr:first'), config);
        }
        me.updateRecord = function(attributeName, newValue, record) {
          $table.find('tr[data-id="' + record.id + '"] td[data-attribute="' + attributeName + '"]').text(newValue);
        }
        me.removeRecord = function(record) {
          $table.find('tr[data-id="' + record.id + '"]').fadeTo("slow", 0.7, function() {
            $(this).remove();
          });
        }
      };
    })();
    //Applicaton ajax wrapper 
    function appAjax(processingMsg, ajaxOptions) {
      notificationMsg.show(processingMsg);
      return webapi.safeAjax(ajaxOptions)
        .fail(function(response) {
          if (response.responseJSON) {
            alert("Error: " + response.responseJSON.error.message)
          } else {
            alert("Error: Web API is not available... ")
          }
        }).always(notificationMsg.hide);
    }
    function loadRecords() {
      return appAjax('Loading...', {
        type: "GET",
        url: "/_api/contacts?$select=fullname,firstname,lastname,emailaddress1,telephone1",
        contentType: "application/json"
      });
    }
    function addSampleRecord() {
      //Sample data to create a record - change as appropriate
      var recordObj = {
        firstname: "Willie",
        lastname: "Huff" + _.random(100, 999),
        emailaddress1: "Willie.Huff@contoso.com",
        telephone1: "555-123-4567"
      };
      appAjax('Adding...', {
        type: "POST",
        url: "/_api/contacts",
        contentType: "application/json",
        data: JSON.stringify(recordObj),
        success: function(res, status, xhr) {
          recordObj.id = xhr.getResponseHeader("entityid");
          recordObj.fullname = recordObj.firstname + " " + recordObj.lastname;
          table.addRecord(recordObj);
        }
      });
      return false;
    }
    function deleteRecord(recordObj) {
      var response = confirm("Are you sure, you want to delete \"" + recordObj.name + "\" ?");
      if (response == true) {
        appAjax('Deleting...', {
          type: "DELETE",
          url: "/_api/contacts(" + recordObj.id + ")",
          contentType: "application/json",
          success: function(res) {
            table.removeRecord(recordObj);
          }
        });
      }
      return false;
    }
    function updateRecordAttribute(col, recordObj) {
      var attributeName = col.name,
        value = recordObj[attributeName],
        newValue = prompt("Please enter \"" + col.label + "\"", value);
      if (newValue != null && newValue !== value) {
        appAjax('Updating...', {
          type: "PUT",
          url: "/_api/contacts(" + recordObj.id + ")/" + attributeName,
          contentType: "application/json",
          data: JSON.stringify({
            "value": newValue
          }),
          success: function(res) {
            table.updateRecord(attributeName, newValue, recordObj);
          }
        });
      }
      return false;
    }
    var table = new webAPIExampleTable({
      columns: [{
        name: 'firstname',
        label: 'First Name',
        handler: updateRecordAttribute
      }, {
        name: 'lastname',
        label: 'Last Name',
        handler: updateRecordAttribute
      }, {
        name: 'emailaddress1',
        label: 'Email',
        handler: updateRecordAttribute
      }, {
        name: 'telephone1',
        label: 'Telephone',
        handler: updateRecordAttribute
      }],
      data: [],
      addHandler: addSampleRecord,
      deleteHandler: deleteRecord
    });
    loadRecords().done(function(data) {
      table.data = _.map(data.value, function(record){
        record.id = record.contactid;
        return record;
      });
      table.render($('#dataTable'));
    });
  });
</script>
<div id="processingMsg" class="alert alert-warning" role="alert"></div>
<div id="dataTable"></div>

Вставлення коду.

Виберіть елемент Зберегти й закрити.

Крок 4. Очищення кешу порталу

Ви створили зразок сторінки webapi для тестування функціональності веб-API. Перш ніж почати роботу, переконайтеся, що кеш порталів Power Apps очищено, щоб зміни, внесені до програми керування порталом, відобразилися на порталі.

ВАЖЛИВО!. Очищення кешу порталу на стороні сервера викликає тимчасове зниження продуктивності порталу, поки дані перезавантажуються з Microsoft Dataverse.

Щоб очистити кеш:

Увійдіть у портал як учасник веб-ролі адміністраторів.
Змініть URL-адресу, додавши /_ служби/про в кінці. Наприклад, якщо URL-адреса порталу є https://contoso.powerappsportals.com, змініть його на https://contoso.powerappsportals.com/_services/about.

ПРИМІТКА: Ви повинні бути учасником веб-ролі адміністраторів , щоб очистити кеш. Якщо ви бачите чистий екран, перевірте призначення веб-ролі.
Виберіть Очистити кеш.

Додаткові відомості: очищення кешу на сервері порталу

Крок 5. Використання API веб-служб для зчитування, перегляду, редагування, створення та видалення

Зразок веб-сторінки з webapi URL-адреси, створений раніше, тепер готовий для тестування.

Для тестування функціональних можливостей API веб-служб виконайте зазначені нижче дії.

Увійдіть до порталу, використовуючи обліковий запис користувача, якому призначено роль Користувач API веб-служб, створену раніше.
Перейдіть на веб-сторінку webapi, створену раніше. Наприклад, https://contoso.powerappsportals.com/webapi. API веб-служб отримуватиме записи від Microsoft Dataverse.
Виберіть Додати зразок запису, щоб додати зразок запису, використовуючи сценарій.
Виберіть поле. У цьому прикладі ми вибрали параметр Електронна пошта, щоб змінити адресу електронної пошти контакту.
Натисніть кнопку , щоб видалити запис.

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

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

Створення HTTP-запитів і обробка помилок

Див. також

Огляд API веб-служб порталів
Операції записування, оновлення та видалення порталів за допомогою API веб-служб
Операції зчитування на порталах за допомогою API веб-служб
Налаштування дозволів для стовпців

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).

Last updated on 2023-03-16

Посібник: використання API веб-служб порталу

Крок 1. Створити настройки сайту

Крок 2. Налаштування дозволів

Створення веб-ролі

Додавання дозволів для пов’язаної таблиці

Додавання контактних осіб до веб-ролі

Крок 3. Створення веб-сторінки

Крок 4. Очищення кешу порталу

Крок 5. Використання API веб-служб для зчитування, перегляду, редагування, створення та видалення

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

Див. також

Додаткові ресурси