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

Ескерім

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

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

Ескерім

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

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

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

  1. Бару Power Apps.

  2. Сол жақ тақтада Қолданбалар таңдаңыз.

  3.  Порталды басқару қолданбасын таңдаңыз.

    Порталды басқару бағдарламасын іске қосу.

  4.  Порталды басқару қолданбасының сол жақ тақтасында Сайт параметрлері тармағын таңдаңыз.

    Порталды басқару бағдарламасында сайт параметрлерін ашу.

  5.  Жаңа опциясын таңдаңыз.

  6.  Аты жолына Webapi/contact/enabled енгізіңіз.

  7.  Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.

  8.  Мән жолағына шын енгізіңіз.

    Веб-API сайт параметрі үшін контактілер кестесін қосу.

  9.  Сақтау & Жабу.

  10.  Жаңа таңдаңыз.

  11.  Аты жолағында Webapi/contact/fields енгізіңіз.

  12.  Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.

  13.  Мән жолағына енгізіңіз
    firstname,lastname,fullname,emailaddress1,telephone1

    Веб-API контактілер кестесі өрістерінің сайт параметрін қосу.

  14.  Сақтау & Жабу.

  15.  Жаңа таңдаңыз.

  16.  Аты жолына Webapi/error/innererror енгізіңіз.

    Веб-API ішкі қате сайтының параметрін қосу.

  17.  Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.

  18.  Мән жолағына шын енгізіңіз.

  19.  Сақтау & Жабу.

  20.  Web API үшін сайт параметрлерін тексеріңіз.

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

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

  1.  Порталды басқару қолданбасының сол жақ тақтасында Кесте рұқсаттары таңдаңыз.

  2.  Жаңа таңдаңыз.

  3.  Аты жолында Контакт кестесінің рұқсаты енгізіңіз.

  4.  Кесте атауы тізімінен Байланыс (контакт) таңдаңыз.

  5.  Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.

  6.  Қатынас түрі тізімде Жаһандық таңдаңыз.

  7. Артықшылықтарды Оқу, Жазу, Жасау және Жою опцияларын таңдаңыз.

  8.  Сақтау & Жабу.

    Контактілер кестесі рұқсаттары.

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

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

  1. Сол жақ тақтада Веб-рөлдер  таңдаңыз.

  2.  Жаңа таңдаңыз.

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

  4.  Веб-сайт тізімінде веб-сайт жазбаңызды таңдаңыз.

    Веб-API пайдаланушысы веб-рөлін қосу.

  5.  Сақтау таңдаңыз.

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

  1. Жаңа немесе бұрыннан бар веб-рөлмен Қатысты > Кесте рұқсаттары таңдаңыз.

    Веб-рөлге қатысты кесте рұқсаттарын қосу.

  2.  Бар кесте рұқсатын қосу таңдаңыз.

  3. Бұрын жасалған Контакт кестесінің рұқсаты таңдаңыз.

    Контактілер кестесі рұқсатын таңдау.

  4.  Қосу таңдаңыз.

  5.  Сақтау & Жабу.

    Кесте рұқсаттарын көру.

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

  1. Сол жақ тақтада Контактілер таңдаңыз.

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

    Ескерім

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

  3.  Қатысты > Веб-рөлдер таңдаңыз.

    Қатысты веб-рөлдерді таңдау.

  4.  Бар веб-рөлді қосу таңдаңыз.

  5. Бұрын жасалған Web API пайдаланушысы рөлін таңдаңыз.

  6.  Қосу таңдаңыз.

    Веб-рөлмен байланысты көрініс.

  7.  Сақтау & Жабу.

3-қадам. Веб-бет жасау

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

  1.  Порталды басқару қолданбасының сол жақ тақтасында Веб-беттер таңдаңыз.

  2. Жаңа пәрменін таңдаңыз.

  3. Аты өрісінде webapi мәтінін енгізіңіз.

  4. Веб-сайт тізімінде веб-сайтыңыздың жазбасын таңдаңыз.

  5. Негізгі бет үшін Басты мәтінін таңдаңыз.

  6. Ішінара URL үшін webapi мәтінін енгізіңіз.

  7. Бет үлгісі үшін Басты мәтінін таңдаңыз.

  8. Жариялау күйі үшін Жарияланған мәтінін таңдаңыз.

  9. Сақтау пәрменін таңдаңыз.

    Веб-бет.

  10. Байланысты > Веб беттер опциясын таңдаңыз.

    Байланысты веб-беттері

  11. Веб-бетке байланысты көрініс тармағынан webapi опциясын таңдаңыз.

    Веб-беттің байланысты көрінісі.

  12. Мазмұн бөліміне дейін төмен жылжытыңыз, содан кейін Көшіру (HTML) (HTML құрастырушысы) тармағына өтіңіз.

    HTML мазмұнын көшіру

  13. HTML қойыншасын таңдаңыз.

    HTML қойыншасын таңдау

  14. Келесі үлгі код үзіндісін көшіріп, 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>
    

    Кодты қою.

  15. Сақтау және жабу пәрменін таңдаңыз.

4-қадам. Порталдар кэшін тазарту

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

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

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

  1. Порталға Әкімшілер веб рөлінің мүшесі ретінде кіріңіз.

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

    Кэшті тазалау.

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

  3.  Кэшті тазалау опциясын таңдаңыз.

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

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

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

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

  1. Бұрын жасаған Веб API пайдаланушысы рөлі тағайындалған пайдаланушысы тіркелгісімен порталға кіріңіз.

  2. Бұрын жасалған webapi веб-бетіне өтіңіз. Мысалы, https://contoso.powerappsportals.com/webapi. Веб-API жазбаларды Microsoft Dataverse жүйесінен алады.

    Үлгі webapi веб-беті.

  3. Сценарийден үлгі жазбасын қосу үшін Үлгі жазбасын қосу опциясын таңдаңыз.

  4. Өрісті таңдаңыз. Бұл мысалда контактінің электрондық пошта мекенжайын өзгерту үшін біз Электрондық пошта қойыншасын таңдадық.

    Электрондық поштаны өзгерту

  5. Жазбаны жою үшін Жою түймешігін таңдаңыз.

Жазбаларды өңдеу, қарау, өңдеу, жасау және жою үшін үлгісі бар веб-бет жасағаннан кейін, енді сіз пішіндер мен орналасуды реттей аласыз.

Келесі қадам

HTTP сұрауларын құрастыру және қателерді өңдеу

Сонымен қатар қараңыз

Порталдар веб API шолуы
Порталдардағы веб-API арқылы жазу, жаңарту және жою операциялары
Порталдардағы веб-API арқылы оқу операциялары
Баған рұқсаттарын теңшеу

Ескерім

Сіз құжат тіліңіздің артықшылықтары туралы айта аласыз ба? Қысқа сауалнамаға қатысыңыз. (бұл сауалнама ағылшын тілінде екеніне назар аударыңыз)

Сауалнама шамамен жеті минут уақытыңызды алады. Жеке деректер жиналмайды (құпиялылық туралы мәлімдеме).