Praktični vodič: Korištenje web-API-ja portala

U ovom ćete vodiču postaviti web-stranicu i prilagođeni web-predložak koji će koristiti web-API za čitanje, pisanje, ažuriranje i brisanje zapisa iz tablice kontakata.

Napomena

Možete promijeniti nazive stupaca ili koristiti drugu tablicu dok slijedite korake u ovom primjeru.

1. korak Stvaranje postavki web-mjesta

Prije nego što možete koristiti portale Web API-ja, morate omogućiti obvezne postavke web-mjesta s pomoću aplikacije Portal Management. Postavke web-mjesta ovise o tablici koju želite koristiti kada stupate u interakciju s web-API-jem.

  1. Idite na Power Apps.

  2. U lijevom oknu odaberite Aplikacije.

  3. Odaberite aplikaciju Upravljanje portalom.

    Pokrenite aplikaciju Upravljanje portalima.

  4. U lijevom oknu aplikacije Upravljanje portalima odaberite Postavke web-mjesta.

    Otvorite postavke web-mjesta u aplikaciji Upravljanje portalima.

  5. Odaberite Novo.

  6. U okvir Naziv unesite WebAPI/enableReadOperationPreview. Ova postavka web-mjesta potrebna je samo dok je operacija čitanja web-API-ja u pretpregledu.

  7. Na popisu Web-mjesto odaberite zapis web-mjesta.

  8. U okviru Vrijednost unesite točno.

    Omogućite postavku web-mjesta web-mjesta za čitanje.

  9. Odaberite Novo.

  10. U okviru Naziv unesite Webapi/contact/enabled.

  11. Na popisu Web-mjesto odaberite zapis web-mjesta.

  12. U okviru Vrijednost unesite točno.

    Omogućite tablicu kontakata za postavku WebAPI web-mjesta.

  13. Odaberite Spremi i zatvori.

  14. Odaberite Novo.

  15. U okviru Naziv unesite Webapi/contact/fields.

  16. Na popisu Web-mjesto odaberite zapis web-mjesta.

  17. U okviru Vrijednost unesite
    firstname,lastname,fullname,emailaddress1,telephone1

    Omogućite postavku web-api polja tablice kontakata.

  18. Odaberite Spremi i zatvori.

  19. Odaberite Novo.

  20. U okviru Naziv unesite Webapi/error/innererror.

    Omogućite postavku web-API-ja na web-mjestu za unutarnju pogrešku.

  21. Na popisu Web-mjesto odaberite zapis web-mjesta.

  22. U okviru Vrijednost unesite točno.

  23. Odaberite Spremi i zatvori.

  24. Provjerite postavke web-mjesta za Web API.

2. korak Konfiguriranje dozvola

Morat ćete konfigurirati dozvole tako da korisnici mogu koristiti značajku Web API. U ovom primjeru omogućit ćete tablici Kontakt dozvole za tablice, stvoriti web-ulogu pomoću web-API-ja, dodati dozvole tablice za tablicu Kontakt ovoj web-ulozi, a zatim dodati web-ulogu korisnicima kako biste im omogućili korištenje web-API-ja.

  1. U lijevom oknu aplikacije Upravljanje portalima odaberite Dozvole tablice.

  2. Odaberite Novo.

  3. U okviru Naziv unesite Dozvole tablice Kontakti.

  4. Na popisu Naziv tablice odaberite Kontakt (kontakt).

  5. Na popisu Web-mjesto odaberite zapis web-mjesta.

  6. U popisu Vrsta pristupa odaberite mogućnost Globalno.

  7. Odaberite privilegije za Čitanje, Pisanje, Stvaranje i Brisanje.

  8. Odaberite Spremi i zatvori.

    Dozvole za tablicu kontakata.

  9. Odaberite Web-uloge u lijevom oknu.

  10. Odaberite Novo.

  11. U okviru Naziv unesite Korisnik Web API-ja.

  12. Na popisu Web-mjesto odaberite zapis web-mjesta.

  13. Za Uloga korisnika čija je autentičnost provjerena odaberite Da.

    Dodajte web-ulogu korisnika web-API-ja.

  14. Odaberite Spremi.

  15. Odaberite · > Dozvole povezane tablice.

    Dodajte dozvole povezane tablice u web-ulogu.

  16. Odaberite Dodaj postojeću dozvolu tablice.

  17. Odaberite Dozvola tablice Kontakt, koju ste ranije stvorili.

    Odaberite dozvolu tablice kontakata.

  18. Odaberite Dodaj.

  19. Odaberite Spremi i zatvori.

    Prikaz dozvola tablice.

  20. Odaberite Kontakti u lijevom oknu.

  21. Odaberite kontakt koji želite koristiti u ovom primjeru za Web API.

    Napomena

    Ovaj je kontakt korisnički račun koji se koristi u ovom primjeru za testiranje Web API-ja. Obavezno odaberite točan kontakt na svom portalu.

  22. Odaberite · > Srodne web-uloge.

    Odabir povezanih web-uloga.

  23. Odaberite Dodaj postojeću web-ulogu.

  24. Odaberite prethodno stvorenu ulogu Korisnik Web API-ja.

  25. Odaberite Dodaj.

    Pridruženi prikaz web-uloge.

  26. Odaberite Spremi i zatvori.

3. korak Stvaranje web-stranice

Sad kad ste omogućili Web API i konfigurirali korisničke dozvole, stvorite web-stranicu s uzorkom koda za prikaz, uređivanje, stvaranje i brisanje zapisa.

  1. U lijevom oknu aplikacije Upravljanje portalima odaberite Web-stranice.

  2. Odaberite Novo.

  3. U okviru Naziv unesite webapi.

  4. Na popisu Web-mjesto odaberite zapis web-mjesta.

  5. Za opciju Nadređena stranica odaberite Početna.

  6. Za Djelomični URL unesite webapi.

  7. Za opciju Predložak stranice odaberite Početna.

  8. Za Stanje objavljivanja odaberite Objavljeno.

  9. Odaberite Spremi.

    Web-stranica.

  10. Odaberite Povezano > Web-stranice.

    Povezane web-stranice

  11. U odjeljku Pridruženi prikaz web-stranice odaberite webapi.

    Pridruženi prikaz web-stranice.

  12. Pomaknite se prema dolje do odjeljka Sadržaj, a zatim otvorite Kopiraj (HTML) (alat za dizajniranje HTML-a).

    Kopiranje HTML sadržaja

  13. Odaberite karticu HTML.

    Odaberite karticu HTML

  14. Sljedeći uzorak isječka koda kopirajte i zalijepite u HTML alat za dizajniranje HTML-a.

        <!-- 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>
    

    Lijepljenje koda.

  15. Odaberite Spremi i zatvori.

4. korak Čišćenje predmemorije portala

Stvorili ste uzorak stranice webapi za testiranje funkcionalnosti API-ja na webu. Prije nego što započnete, provjerite je li predmemorija Power Apps portala očišćena tako da se promjene iz aplikacije Upravljanje portalima odražavaju na vašem portalu.

VAŽNO: Čišćenje predmemorije na strani poslužitelja portala uzrokuje privremenu degradaciju performansi portala dok se podaci ponovno učitavaju iz Microsoft Dataverse.

Za brisanje predmemorije:

  1. Prijavite se na svoj portal kao član u web-ulozi Administratori.

  2. Promijenite URL dodavanjem /_ servisa/otprilike na kraju. Na primer, ako je URL portala https://contoso.powerappsportals.com, promenite ga u https://contoso.powerappsportals.com/_services/about.

    Očistite predmemoriju.

    NAPOMENA: Da biste očistili predmemoriju, morate biti član administratorske web-uloge. Ako vidite prazan zaslon, provjerite dodjelu web-uloge.

  3. Odaberite opciju Očisti predmemoriju.

Dodatne informacije: Čišćenje predmemorije portala na strani poslužitelja

5. korak Čitanje, prikaz, uređivanje, stvaranje i brisanje pomoću web-API-ja

Ogledna web-stranica s ranije stvorenim URL webapijem sada je spremna za testiranje.

Da biste testirali funkcionalnost API-ja na webu:

  1. Prijavite se na portal s korisničkim računom kojem je dodijeljena uloga Korisnik Web API-ja koju ste prethodno stvorili.

  2. Idite na prethodno stvorenu web-stranicu webapi. Na primjer, https://contoso.powerappsportals.com/webapi. WebAPI će dohvatiti zapise iz Microsoft Dataverse.

    Uzorak web-stranice webapi.

  3. Odaberite Dodaj uzorak zapisa da biste dodali uzorak zapisa iz skripte.

  4. Odaberite polje. U ovom smo primjeru odabrali E-pošta za promjenu adrese e-pošte kontakta.

    Uređivanje e-pošte

  5. Odaberite gumb Izbriši da biste izbrisali zapis.

Sada kada ste stvorili web-stranicu s uzorkom za čitanje, uređivanje, stvaranje i brisanje zapisa, možete prilagoditi obrasce i izgled.

Sljedeći korak

Sastavljanje HTTP zahtjeva i rješavanje pogrešaka

Pogledajte

Pregled Web API-ja za portale
Portali pišu, ažuriraju i brišu operacije pomoću web-API-ja
Portali čitaju operacije pomoću web-API-ja