Оқулық: порталдың веб-API интерфейсін пайдалану

Мақала
03/14/2023

Ескерім

2022 жылдың 12 қазанынан бастап күшіне енеді, Power Apps порталдары — Power Pages. Қосымша ақпарат: Microsoft Power Pages енді жалпыға қолжетімді (блог)
Жақында Power Apps порталдары құжаттамасын Power Pages құжаттамасымен көшіреміз және біріктіреміз.

Бұл оқулықта контактілер кестесіндегі жазбаларды оқу, жазу, жаңарту және жою үшін веб-API интерфейсін қолданатын веб-бетті және реттелетін веб-үлгіні орнатасыз.

Ескерім

Осы мысалда көрсетілген қадамдарды орындау кезінде баған аттарын өзгертуге немесе басқа кестені пайдалануға болады.

1-қадам. Торап параметрлерін жасау

Порталдардың веб-API интерфейсін пайдаланбас бұрын, порталды басқару бағдарламасымен қажетті сайт параметрлерін қосуыңыз керек. Сайт параметрлері веб‑API интерфейсімен өзара әрекеттесу кезінде пайдалану керек кестеге байланысты.

Бару Power Apps.
Сол жақ тақтада Қолданбалар таңдаңыз.
Порталды басқару қолданбасын таңдаңыз.
Порталды басқару қолданбасының сол жақ тақтасында Сайт параметрлері тармағын таңдаңыз.
Жаңа опциясын таңдаңыз.
Аты жолына Webapi/contact/enabled енгізіңіз.
Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.
Мән жолағына шын енгізіңіз.
Сақтау & Жабу.
Жаңа таңдаңыз.
Аты жолағында Webapi/contact/fields енгізіңіз.
Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.
Мән жолағына енгізіңіз
firstname,lastname,fullname,emailaddress1,telephone1
Сақтау & Жабу.
Жаңа таңдаңыз.
Аты жолына Webapi/error/innererror енгізіңіз.
Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.
Мән жолағына шын енгізіңіз.
Сақтау & Жабу.
Web API үшін сайт параметрлерін тексеріңіз.

2-қадам. Рұқсаттарды конфигурациялау

Пайдаланушылар веб-API мүмкіндігін қолдана алуы үшін рұқсаттарды конфигурациялау керек болады. Бұл мысалда сіз кесте рұқсаттары үшін Контактілер кестесін қосасыз, веб-API интерфейсін пайдалану үшін веб-рөл жасайсыз, Контактілер кестесінің кесте рұқсаттарын осы веб-рөлге қосасыз, содан кейін пайдаланушыларға веб‑API интерфейсін пайдалануға рұқсат беру үшін веб‑рөлді қосасыз.

Порталды басқару қолданбасының сол жақ тақтасында Кесте рұқсаттары таңдаңыз.
Жаңа таңдаңыз.
Аты жолында Контакт кестесінің рұқсаты енгізіңіз.
Кесте атауы тізімінен Байланыс (контакт) таңдаңыз.
Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.
Қатынас түрі тізімде Жаһандық таңдаңыз.
Артықшылықтарды Оқу, Жазу, Жасау және Жою опцияларын таңдаңыз.
Сақтау & Жабу.

Веб-рөл жасаңыз

Веб-сайтыңызда бар веб-рөлді пайдалана аласыз немесе жаңа веб-рөл жасай аласыз.

Сол жақ тақтада Веб-рөлдер таңдаңыз.
Жаңа таңдаңыз.
Аты жолағында Web API пайдаланушысы (немесе пайдаланушының қатынасатын рөлін жақсы көрсететін кез келген атау) енгізіңіз бұл функция).
Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.
Сақтау таңдаңыз.

Қатысты кесте рұқсаттарын қосу

Жаңа немесе бұрыннан бар веб-рөлмен Қатысты > Кесте рұқсаттары таңдаңыз.
Бар кесте рұқсатын қосу таңдаңыз.
Бұрын жасалған Контакт кестесінің рұқсаты таңдаңыз.
Қосу таңдаңыз.
Сақтау & Жабу.

Веб-рөлге контактілерді қосу

Сол жақ тақтада Контактілер таңдаңыз.
Осы мысалда веб-API үшін пайдалану керек контактіні таңдаңыз.

Ескерім

Бұл контакт веб-API интерфейсін тексеру үшін осы мысалда пайдаланылған пайдаланушы тіркелгісі болып табылады. Порталда дұрыс контактіні таңдаңыз.
Қатысты > Веб-рөлдер таңдаңыз.
Бар веб-рөлді қосу таңдаңыз.
Бұрын жасалған Web 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-қадам. Порталдар кэшін тазарту

Web API функционалдығын тексеру үшін webapi үлгі бетін жасадыңыз. Жұмысқа кіріспес бұрын, Power Apps порталдары кэші тазартылғанына көз жеткізіңіз, сонда порталды басқару бағдарламасындағы өзгерістер сіздің порталыңызда көрсетіледі.

МАҢЫЗДЫ: Портал сервері жағындағы кэшті тазалау деректер Microsoft Dataverse жүйесінен қайта жүктелгенде портал өнімділігінің уақытша нашарлауына алып келеді.

Кэшті тазалау үшін:

Порталға Әкімшілер веб рөлінің мүшесі ретінде кіріңіз.
Соңында /_ services/about қосу арқылы URL мекенжайын өзгертіңіз. Мысалы, портал URL мекенжайы https://contoso.powerappsportals.com болса, оны https://contoso.powerappsportals.com/_services/about етіп өзгертіңіз.

ЕСКЕРТПЕ: Кэшті тазалау үшін Әкімшілер веб рөлінің мүшесі болуыңыз керек. Егер сіз бос экранды көрсеңіз, веб-рөл тағайындауларын тексеріңіз.
Кэшті тазалау опциясын таңдаңыз.

Қосымша ақпарат: Портал үшін серверлік кэшті тазалау

5-қадам. Оқу, көру, өңдеу, жасау және жою үшін веб-API интерфейсін пайдалану

Бұрын жасалған URL webapi бар үлгі веб-беті сынақ жүргізу үшін дайын.

Веб-API жұмысын тексеру үшін:

Бұрын жасаған Веб API пайдаланушысы рөлі тағайындалған пайдаланушысы тіркелгісімен порталға кіріңіз.
Бұрын жасалған webapi веб-бетіне өтіңіз. Мысалы, https://contoso.powerappsportals.com/webapi. Веб-API жазбаларды Microsoft Dataverse жүйесінен алады.
Сценарийден үлгі жазбасын қосу үшін Үлгі жазбасын қосу опциясын таңдаңыз.
Өрісті таңдаңыз. Бұл мысалда контактінің электрондық пошта мекенжайын өзгерту үшін біз Электрондық пошта қойыншасын таңдадық.
Жазбаны жою үшін түймешігін таңдаңыз.