Õpetus: Portaali Web API kasutamine

Artikkel
03/14/2023

Märkus

Alates 12. oktoobrist 2022 on Power Appsi portaalid Power Pages. Lisateave: Microsoft Power Pages on nüüd üldiselt saadaval (ajaveebipostitus)
Peagi migreerime ja ühendame Power Appsi portaalide dokumentatsiooni Power Pagesi dokumentatsiooniga.

Selles õpetuses seadistate veebilehe ja kohandatud veebimalli, mis kasutab Web API-d kirjete lugemiseks, kirjutamiseks, värskendamiseks ja kustutamiseks kontaktitabelist.

Märkus

Selles näites toodud juhiseid järgides saate muuta veergude nimesid või kasutada teist tabelit.

1. etapp. Saidi sätete loomine

Enne veebi-API portaalide kasutamist peate lubama vajalikud saidi sätted portaali haldamise rakenduse kaudu. Saidi sätted sõltuvad tabelist, mida soovite veebiliidesega suhtlemisel kasutada.

Mine Power Apps.
Valige vasakpoolsel paanil Rakendused.
Valige rakendus Portaalihaldus .
Valige portaalihalduse rakenduse vasakul paanil Saidi sätted.
Valige Uus.
Sisestage väljale Nimi tekst Webapi/contact/enabled .
Valige loendist Veebisait oma veebisaidi kirje.
Sisestage väljale Väärtus tekst tõene.
Valige Salvesta ja sule.
Valige Uus.
Sisestage väljale Nimi tekst Webapi/kontakt/väljad .
Valige loendist Veebisait oma veebisaidi kirje.
Sisestage väljale Väärtus
eesnimi, perekonnanimi, täisnimi, emailaddress1, telephone1
Valige Salvesta ja sule.
Valige Uus.
Sisestage väljale Nimi tekst Webapi/error/innererror .
Valige loendist Veebisait oma veebisaidi kirje.
Sisestage väljale Väärtus tekst tõene.
Valige Salvesta ja sule.
Kontrollige Web API saidisätteid.

2. etapp Õiguste konfigureerimine

Teil tuleb konfigureerida õigused, et kasutajad saaksid kasutada veebi-API funktsiooni. Selles näites lubate tabeli Kontaktid tabeli lubade jaoks, loote veebirolli veebiliidese kasutamiseks, lisage tabeli Kontakt tabeli load sellele veebirollile ja lisage veebiroll kasutajatele, et nad saaksid kasutada Web API-d.

Tehke portaalihalduse rakenduse vasakpoolsel paanil valik Tabeli õigused .
Valige Uus.
Sisestage väljale Nimi tekst Kontaktitabeli õigus.
Valige loendis Tabeli nimi Kontakt (kontakt) ).
Valige loendist Veebisait oma veebisaidi kirje.
Valige loendis Juurdepääsu tüüp suvand Globaalne .
Valige õigused Lugemine, Kirjutamine, Loomine ja Kustutamine.
Valige Salvesta ja sule.

Looge veebiroll

Võite kasutada oma veebisaidil olemasolevat veebirolli või luua uus veebiroll.

Valige vasakpoolsel paanil Veebirollid .
Valige Uus.
Sisestage väljale Nimi tekst Web API kasutaja (või mis tahes nimi, mis kajastab kõige paremini selle kasutaja rolli, kes sellele funktsioonile juurde pääseb).
Valige loendist Veebisait oma veebisaidi kirje.
Valige Salvesta.

Lisage seotud tabeli õigused

Valige uue või olemasoleva veebirolli korral suvand Seostunud > tabeli õigused.
Valige luba Lisa olemasolev tabel.
Valige Kontaktitabeli õigus, mis on varem loodud.
Valige Lisa.
Valige Salvesta ja sule.

Kontaktide lisamine veebirolli

Valige vasakpoolsel paanil Kontaktid.
Valige vaatest see vaade, mida soovite diagrammi puhul kasutada.

Märkus

See kontakt on selles näites kasutajakonto, mida kasutatakse veebi-API testimiseks. Veenduge, et valite oma portaalis õige kontakti.
Valige Seostuvad > veebirollid.
Valige Lisa olemasolev veebiroll.
Valige Web API kasutaja roll , mis on varem loodud.
Valige Lisa.
Valige Salvesta ja sule.

3. etapp Veebilehe loomine

Nüüd, kui olete lubanud veebiapi-i ja konfigureeritud kasutajaõigused, looge kirjete vaatamiseks, redigeerimiseks, loomiseks ja kustutamiseks proovi koodi sisaldav veebileht.

Valige portaalihalduse rakenduse vasakul paanil suvand Veebilehed .
Tehke valik Uus.
Boksi nimi sisestage webAPI kasutaja.
Valige veebisaidi loendist oma veebisaidi kirje.
Peamine leht jaoks valige Avaleht.
Osalise URL-i korral sisestage webapi.
Lehe mall jaoks valige Avaleht.
Avaldamise olek: määrake olekuks Avaldatud.
Valige Salvesta.
Valige Seotud > Veebilehed.
Valige jaotisest Veebilehe seostatud vaade webapi.
Kerige alla jaotise Sisu juurde ja avage seejärel Kopeeri (HTML) (HTML-kujundaja).
Valige vahekaart HTML.

Valige

Kopeerige järgmine näidiskoodilõik ja kleepige see HTML-kujundajasse.

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

Koodi kleepimine.

Valige Salvesta ja sule.

4. etapp Portaalide vahemälu tühjendamine

Olete loonud webapi näidislehe Web API funktsioonide testimiseks. Enne alustamist veenduge, et portaalide vahemälu oleks kustutatud, et portaali Power Apps haldamise rakendusega tehtud muudatused kajastuksid teie portaalis.

TÄHTIS: Portaali serveripoolse vahemälu tühjendamine põhjustab andmete teenusest Microsoft Dataverse uuesti laadimise ajal ajutiselt portaali kehva jõudlust.

Vahemälu tühjendamiseks toimige järgmiselt.

Logige oma portaali sisse veebirolli Administraatorid liikmena.
URL-i /_ muutmiseks lisage lõppu teenused/teave . Näiteks kui portaali URL on https://contoso.powerappsportals.com, muutke see väärtuseks https://contoso.powerappsportals.com/_services/about.

MÄRKUS: Vahemälu tühjendamiseks peate olema administraatorite veebirolli liige . Kui näete tühja ekraani, kontrollige veebirolli määramisi.
Valige Tühjenda vahemälu.

Lisateave: Portaali serveripoolse vahemälu tühjendamine

5. etapp. Kasutage Web API-d, et lugeda, vaadata, redigeerida, luua ja kustutada

Varem loodud näidisveebileht URL-iga webapi on nüüd testimiseks valmis.

Veebi-API funktsionaalsuse testimine

Logige oma portaali sisse kasutajakontoga, mille olete varem loonud veebi-API kasutaja rolli.
Minge veebiAPI varem loodud veebilehele. Näiteks https://contoso.powerappsportals.com/webapi WebAPI toob kirjed Microsoft Dataverse-st.
Valige Lisa näidiskirje, et lisada skriptist näidiskirje.
Valige väli. Selles näites oleme valinud e-kirja muutmise, et muuta kontakti e-kirja aadressi.
Valige kirjete kustutamiseks.