Водич: Коришћење Web API-ја за портале

Чланак
03/14/2023

Напомена

Од 12. октобра 2022. Power Apps портали постају Power Pages. Више информација: Услуга Microsoft Power Pages је сада општедоступна (блог)
Ускоро ћемо мигрирати и објединити документацију о Power Apps порталима са документацијом о услузи Power Pages.

У овом упутству ћете подесити веб-страницу и прилагођени веб-предложак који ће користити Web API за читање, писање, ажурирање и брисање записа из табеле контаката.

Напомена

Можете променити имена колона или користити другу табелу следећи кораке у овом примеру.

Корак 1. Креирајте поставке локације

Да бисте могли да користите Web API за портале, морате да омогућите потребна подешавања локације помоћу апликације Управљање порталом. Подешавања локације зависе од табеле коју желите да користите приликом интеракције са Web API-јем.

Пођи до Power Apps.
У левом окну изаберите ставку Апликације.
Изаберите апликацију "Управљање порталом ".
У левом окну апликације "Управљање порталом " изаберите ставку Поставке локације.
Изаберите ново.
У поље Име унесите Wебапи/контакт/омогућен.
Са листе Wеб локација изаберите свој запис о Wеб локацији.
У поље Вредност унесите тачно .
Изаберите Саве & Цлосе.
Изаберите ново.
У поље Име унесите Wебапи/контакт/поља.
Са листе Wеб локација изаберите свој запис о Wеб локацији.
У поље Вредност унесите
firstname,lastname,fullname,emailaddress1,telephone1
Изаберите Саве & Цлосе.
Изаберите ново.
У поље Име унесите Wебапи/еррор/иннереррор.
Са листе Wеб локација изаберите свој запис о Wеб локацији.
У поље Вредност унесите тачно .
Изаберите Саве & Цлосе.
Проверите поставке локације за Wеб АПИ.

2. корак Конфигурисање дозвола

Морате да конфигуришете дозволе тако да корисници могу да користе функцију Web API. У овом примеру ћете омогућити табелу контаката за дозволе табеле, креирати веб-улогу за коришћење Web API-ја, додати дозволу табеле за табелу контакта у ову веб-улогу, а затим додати веб-улогу корисницима која им дозвољава да користе Web API.

У левом окну апликације "Управљање порталом" изаберите ставку"Дозволе за табелу".
Изаберите ново.
У поље Име унесите дозволу табеле контаката.
Са листе Име табеле изаберите контакт (контакт) .
Са листе Wеб локација изаберите свој запис о Wеб локацији.
На листи Тип приступа изаберите ставку Глобално.
Изаберите привилегије Читање, Писање, Креирање и Брисање.
Изаберите Саве & Цлосе.

Креирање веб-улоге

Можете да користите постојећу веб-улогу на веб-локацији или да креирате нову веб-улогу.

У левом окну изаберите Wеб улоге .
Изаберите ново.
У поље Име унесите Wеб АПИ Усер (или било које име које најбоље одражава улогу корисника који приступа овој функционалности).
Са листе Wеб локација изаберите свој запис о Wеб локацији.
Изаберите сачувај.

Додавање дозвола за повезане табеле

Са новом или постојећом Wеб улогом изаберите дозволе за > сродну табелу.
Изаберите ставку Додај дозволу постојеће табеле.
Изаберите дозволу табеле контаката, креирану раније.
Изаберите дугме Додај.
Изаберите Саве & Цлосе.

Додавање контаката у веб-улогу

У левом окну изаберите ставку Контакти.
Изаберите контакт који желите да користите у овом примеру за Web API.

Напомена

Овај контакт је кориснички налог који се користи у овом примеру за тестирање Web API-ја. Обавезно изаберите тачан контакт на свом порталу.
Изаберите сродне > Wеб улоге.
Изаберите ставку Додај постојећу Wеб улогу.
Изаберите улогу Wеб АПИ корисника , креирану раније.
Изаберите дугме Додај.
Изаберите Саве & Цлосе.

3. корак Креирање веб-странице

Сада када сте омогућили Web API и конфигурисали корисничке дозволе, направите веб-страницу са узорком кода за преглед, уређивање, креирање и брисање записа.

У левом окну апликације"Управљање порталом " изаберите Ставку " Wеб странице".
Изаберите Ново.
У поље Име унесите 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. корак Брисање кеша портала

Креирали сте wебапи пробну страницу да бисте тестирали функционалност Wеб АПИ-ја. Пре него што започнете, уверите се да је кеш меморија портала Power Apps обрисана тако да се промене у апликацији Управљање порталима одражавају на вашем порталу.

ВАЖНО: Брисање кеша портала на страни сервера доводи до привременог слабљења перформанси портала док се подаци поново учитавају из услуге Microsoft Dataverse.

Да бисте обрисали кеш:

Пријавите се на свој портал као члан веб-улоге Администратори.
Промените УРЛ адресу додавањем /_ услуга/основни подаци на крају. На пример, ако је УРЛ портала https://contoso.powerappsportals.com, промените га https://contoso.powerappsportals.com/_services/about у.

НАПОМЕНА :Морате бити члан Веб улоге администратора да бисте обришу кеш меморију. Ако видите празан екран, проверите задатке веб-улоге.
Изаберите обриши кеш меморију.

Више информација: Брисање кеша на страни сервера за портал

Корак 5. Користите Web API за читање, преглед, уређивање, креирање и брисање

Пример веб-странице са URL адресом webapi креираном раније у овом примеру, сада је спремна за тестирање.

Да бисте тестирали функционалност Web API-ја:

Пријавите се на свој портал помоћу корисничког налога којем је додељена улога Корисник Web API-ја коју сте раније креирали.
Идите на веб-страницу webapi креирану раније. На пример, https://contoso.powerappsportals.com/webapi. WebAPI ће преузети записе од из услуге Microsoft Dataverse.
Изаберите Додај пример записа да бисте додали пример записа из скрипте.
Изаберите поље. У овом примеру смо изабрали Е-пошта за промену адресе е-поште контакта.
да бисте избрисали запис.