Vodič: Korišćenje Web API-ja za portale

2023-03-14

Napomena

Od 12. oktobra 2022. Power Apps portali postaju Power Pages. Više informacija: Usluga Microsoft Power Pages je sada opštedostupna (blog)
Uskoro ćemo migrirati i objediniti dokumentaciju o Power Apps portalima sa dokumentacijom o usluzi Power Pages.

U ovom uputstvu ćete podesiti veb-stranicu i prilagođeni veb-predložak koji će koristiti Web API za čitanje, pisanje, ažuriranje i brisanje zapisa iz tabele kontakata.

Napomena

Možete promeniti imena kolona ili koristiti drugu tabelu sledeći korake u ovom primeru.

Korak 1. Kreirajte postavke lokacije

Da biste mogli da koristite Web API za portale, morate da omogućite potrebna podešavanja lokacije pomoću aplikacije Upravljanje portalom. Postavke lokacije zavise od tabele koju želite da koristite prilikom interakcije sa Web API-jem.

Pođi do Power Apps.
U levom oknu izaberite stavku Aplikacije.
Izaberite aplikaciju "Upravljanje portalom ".
U levom oknu aplikacije "Upravljanje portalom " izaberite stavku Postavke lokacije.
Izaberite novo.
U polje Ime unesite Webapi/kontakt/omogućen.
Sa liste Web lokacija izaberite svoj zapis o Web lokaciji.
U polje Vrednost unesite tačno .
Izaberite Save & Close.
Izaberite novo.
U polje Ime unesite Webapi/kontakt/polja.
Sa liste Web lokacija izaberite svoj zapis o Web lokaciji.
U polje Vrednost unesite
firstname,lastname,fullname,emailaddress1,telephone1
Izaberite Save & Close.
Izaberite novo.
U polje Ime unesite Webapi/error/innererror.
Sa liste Web lokacija izaberite svoj zapis o Web lokaciji.
U polje Vrednost unesite tačno .
Izaberite Save & Close.
Proverite postavke lokacije za Web API.

2. korak Konfigurisanje dozvola

Morate da konfigurišete dozvole tako da korisnici mogu da koriste funkciju Web API. U ovom primeru ćete omogućiti tabelu kontakata za dozvole tabele, kreirati veb-ulogu za korišćenje Web API-ja, dodati dozvolu tabele za tabelu kontakta u ovu veb-ulogu, a zatim dodati veb-ulogu korisnicima koja im dozvoljava da koriste Web API.

U levom oknu aplikacije "Upravljanje portalom" izaberite stavku "Dozvole za tabelu".
Izaberite novo.
U polje Ime unesite dozvolu tabele kontakata.
Sa liste Ime tabele izaberite kontakt (kontakt) .
Sa liste Web lokacija izaberite svoj zapis o Web lokaciji.
Na listi Tip pristupa izaberite stavku Globalno.
Izaberite privilegije Čitanje, Pisanje, Kreiranje i Brisanje.
Izaberite Save & Close.

Kreiranje veb-uloge

Možete da koristite postojeću veb-ulogu na veb-lokaciji ili da kreirate novu veb-ulogu.

U levom oknu izaberite Web uloge .
Izaberite novo.
U polje Ime unesite Web API User (ili bilo koje ime koje najbolje odražava ulogu korisnika koji pristupa ovoj funkcionalnosti).
Sa liste Web lokacija izaberite svoj zapis o Web lokaciji.
Izaberite sačuvaj.

Dodavanje dozvola za povezane tabele

Sa novom ili postojećom Web ulogom izaberite dozvole za > srodnu tabelu.
Izaberite stavku Dodaj dozvolu postojeće tabele.
Izaberite dozvolu tabele kontakata, kreiranu ranije.
Izaberite dugme Dodaj.
Izaberite Save & Close.

Dodavanje kontakata u veb-ulogu

U levom oknu izaberite stavku Kontakti.
Izaberite kontakt koji želite da koristite u ovom primeru za Web API.

Napomena

Ovaj kontakt je korisnički nalog koji se koristi u ovom primeru za testiranje Web API-ja. Obavezno izaberite tačan kontakt na svom portalu.
Izaberite srodne > Web uloge.
Izaberite stavku Dodaj postojeću Web ulogu.
Izaberite ulogu Web API korisnika , kreiranu ranije.
Izaberite dugme Dodaj.
Izaberite Save & Close.

3. korak Kreiranje veb-stranice

Sada kada ste omogućili Web API i konfigurisali korisničke dozvole, napravite veb-stranicu sa uzorkom koda za pregled, uređivanje, kreiranje i brisanje zapisa.

U levom oknu aplikacije "Upravljanje portalom " izaberite Stavku " Web stranice".
Izaberite Novo.
U polje Ime unesite webapi.
Na listi Veb-lokacija izaberite zapis vaše veb-lokacije.
Za Nadređena stranica izaberite Početak.
Za Delimična URL adresa unesite webapi.
Za Predložak stranice izaberite Početak.
Za Status objavljivanja izaberite Objavljeno.
Izaberite Sačuvaj.
Izaberite Povezano > Veb-stranice.
U odeljku Vezani prikaz veb-stranice, izaberite webapi.
Pomerite se nadole do odeljka Sadržaj, a zatim idite na Kopiraj (HTML) (HTML dizajner).
Izaberite karticu HTML.

Kopirajte sledeći primer isečka koda i nalepite ga u HTML dizajner.

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

Nalepite kôd.

Izaberite stavku Sačuvaj i zatvori.

4. korak Brisanje keša portala

Kreirali ste webapi probnu stranicu da biste testirali funkcionalnost Web API-ja. Pre nego što započnete, uverite se da je keš memorija portala Power Apps obrisana tako da se promene u aplikaciji Upravljanje portalima odražavaju na vašem portalu.

VAŽNO: Brisanje keša portala na strani servera dovodi do privremenog slabljenja performansi portala dok se podaci ponovo učitavaju iz usluge Microsoft Dataverse.

Da biste obrisali keš:

Prijavite se na svoj portal kao član veb-uloge Administratori.
Promenite URL adresu dodavanjem /_ usluga/osnovni podaci na kraju. Na primer, ako je URL portala https://contoso.powerappsportals.com, promenite ga u https://contoso.powerappsportals.com/_services/about.

NAPOMENA:Morate biti član Veb uloge administratora da biste obrišu keš memoriju. Ako vidite prazan ekran, proverite zadatke veb-uloge.
Izaberite obriši keš memoriju.

Više informacija: Brisanje keša na strani servera za portal

Korak 5. Koristite Web API za čitanje, pregled, uređivanje, kreiranje i brisanje

Primer veb-stranice sa URL adresom webapi kreiranom ranije u ovom primeru, sada je spremna za testiranje.

Da biste testirali funkcionalnost Web API-ja:

Prijavite se na svoj portal pomoću korisničkog naloga kojem je dodeljena uloga Korisnik Web API-ja koju ste ranije kreirali.
Idite na veb-stranicu webapi kreiranu ranije. Na primer, https://contoso.powerappsportals.com/webapi. WebAPI će preuzeti zapise od iz usluge Microsoft Dataverse.
Izaberite Dodaj primer zapisa da biste dodali primer zapisa iz skripte.
Izaberite polje. U ovom primeru smo izabrali E-pošta za promenu adrese e-pošte kontakta.
da biste izbrisali zapis.

Sada kada ste kreirali veb-stranicu sa uzorkom u ovom primeru za čitanje, uređivanje, kreiranje i brisanje zapisa, možete prilagoditi obrasce i raspored.

Sledeći korak

Sastavljanje HTTP zahteva i obrada grešaka

Pogledajte i ovo

Pregled Web API-ja za portale
Operacije pisanja, ažuriranja i brisanja na portalima pomoću Web API-ja
Operacije čitanja portala pomoću Web API-ja
Konfigurisanje dozvola za kolone

Napomena

Možete li nam reći o svojim željenim postavkama jezika u dokumentaciji? Ispunite kratku anketu. (imajte na umu da je ova anketa na engleskom jeziku)

Anketa će trajati oko sedam minuta. Ne prikupljaju se lični podaci (izjava o privatnosti).

Deli putem

Vodič: Korišćenje Web API-ja za portale

Korak 1. Kreirajte postavke lokacije

2. korak Konfigurisanje dozvola

Kreiranje veb-uloge

Dodavanje dozvola za povezane tabele

Dodavanje kontakata u veb-ulogu

3. korak Kreiranje veb-stranice

4. korak Brisanje keša portala

Korak 5. Koristite Web API za čitanje, pregled, uređivanje, kreiranje i brisanje

Sledeći korak

Pogledajte i ovo

Dodatni resursi