Mokymo priemonė: portalo žiniatinklio API naudojimas

Pastaba

Nuo 2022 m. spalio 12 d. „Power Apps“ portalai tampa „Power Pages“. Daugiau informacijos: „Microsoft Power Pages“ dabar yra visuotinai prieinama (tinklaraštis)
Greitai perkelsime ir suliesime „Power Apps“ portalų dokumentaciją su „Power Pages“ dokumentacija.

Šioje mokymo priemonėje galite sukonfigūruoti tinklalapį ir pasirinktinį žiniatinklio šabloną, kuris naudos žiniatinklio API kontaktų lentelės įrašams skaityti, rašyti, naujinti ir naikinti.

Pastaba

Galite pakeisti stulpelių pavadinimus arba naudoti kitą lentelę atlikdami veiksmus šiame pavyzdyje.

1 veiksmas. Sukurkite svetainės parametrus

Prieš jums naudojant portalus žiniatinklio API, turite įjungti būtinus svetainės nustatymus portalo tvarkymo programoje. Svetainės parametrai priklauso nuo lentelės, kurią norite naudoti sąveikaudami su Žiniatinklio API.

Eikite į Power Apps.
Kairiojoje srityje pasirinkite Programėlės.
Pasirinkite portalo valdymo programą.
Kairiojoje portalo valdymo programos srityje pasirinkite Svetainės parametrai.
Pasirinkite Naujas.
Lauke Pavadinimas įveskite Webapi/contact/enabled.
Sąraše Žiniatinklio svetainė pasirinkite žiniatinklio svetainės įrašą.
Lauke Reikšmė įveskite true.
Pasirinkite Įrašyti ir uždaryti.
Pasirinkite Naujas.
Lauke Pavadinimas įveskite Webapi/contact/fields.
Sąraše Žiniatinklio svetainė pasirinkite žiniatinklio svetainės įrašą.
Lauke Reikšmė įveskite
vardas,pavardė,vardasirpavardė,el.paštoadresas1,telefonas1
Pasirinkite Įrašyti ir uždaryti.
Pasirinkite Naujas.
Lauke Pavadinimas įveskite Webapi/error/innererror.
Sąraše Žiniatinklio svetainė pasirinkite žiniatinklio svetainės įrašą.
Lauke Reikšmė įveskite true.
Pasirinkite Įrašyti ir uždaryti.
Patikrinkite žiniatinklio API svetainės parametrus.

2 veiksmas. Teisių konfigūravimas

Turite konfigūruoti leidimus tam, kad vartotojai galėtų naudoti žiniatinklio API funkciją. Šiame pavyzdyje įgalinsite Kontaktų lentelei skirtas teises, sukursite žiniatinklio vaidmenį naudodami žiniatinklio API, į šį žiniatinklio vaidmenį įtrauksite Kontaktų lentelės teises, o tada įtrauksite žiniatinklio vaidmenį vartotojams, kad jie galėtų naudoti žiniatinklio API.

Kairiojoje portalo valdymo programos srityje pasirinkite Lentelės teisės.
Pasirinkite Naujas.
Lauke Pavadinimas įveskite Kontaktų lentelės teisės.
Sąraše Lentelės pavadinimas pasirinkite Kontaktas (kontaktas).
Sąraše Žiniatinklio svetainė pasirinkite žiniatinklio svetainės įrašą.
Sąraše Prieigos tipas pasirinkite Visuotinis.
Pasirinkite Skaityti, Rašyti, Kurti ir Naikinti teises.
Pasirinkite Įrašyti ir uždaryti.

Žiniatinklio vaidmens kūrimas

Galite naudoti esamą žiniatinklio vaidmenį savo svetainėje arba sukurti naują žiniatinklio vaidmenį.

Kairiojoje srityje pasirinkite Žiniatinklio vaidmenys .
Pasirinkite Naujas.
Lauke Vardas įveskite žiniatinklio API vartotojas (arba bet koks vardas, geriausiai atspindintis vartotojo, pasiekiančio šią funkciją, vaidmenį).
Sąraše Žiniatinklio svetainė pasirinkite žiniatinklio svetainės įrašą.
Pasirinkite Įrašyti.

Naudodami naują arba esamą žiniatinklio vaidmenį, pasirinkite Susijusios > lentelės teisės.
Pasirinkite Pridėti esamas lentelės teises.
Pasirinkite Kontaktų lentelės teises, sukurtas anksčiau.
Pasirinkite Pridėti.
Pasirinkite Įrašyti ir uždaryti.

Kontaktų įtraukimas į žiniatinklio vaidmenį

Kairiojoje srityje pasirinkite Kontaktai.
Pasirinkite kontaktą, kurį norite naudoti šiame pavyzdyje žiniatinklio API.

Pastaba

Šis kontaktas yra vartotojo paskyra, naudojama šiame pavyzdyje žiniatinklio API bandymui. Įsitikinkite, kad pasirinkote tinkamą kontaktą savo portale.
Pasirinkite Susiję > žiniatinklio vaidmenys.
Pasirinkite Įtraukti esamą žiniatinklio vaidmenį.
Pasirinkite anksčiau sukurtą žiniatinklio API vartotojo vaidmenį.
Pasirinkite Pridėti.
Pasirinkite Įrašyti ir uždaryti.

3 veiksmas. Sukurkite žiniatinklio puslapį

Dabar, kai įjungėte žiniatinklio API ir sukonfigūravote vartotojo leidimus, sukurkite žiniatinklio puslapį su pavyzdžio kodu, skirtą peržiūrėti, redaguoti, kurti ir naikinti įrašus.

Kairiojoje portalo valdymo programos srityje pasirinkite Tinklalapiai.
Pasirinkite Nauja.
Pavadinimas laukelyje įveskite Žiniatinklioapi.
Žiniatinklio svetainės sąraše pasirinkite savo žiniatinklio svetainės įrašą.
Vadovo puslapyje, pasirinkite Pagrindinis.
Dalinis URL įveskite žiniatinklio api.
Šablono puslapyje, pasirinkite Pagrindinis.
Publikavimo valstybė pasirinkite Publikuota.
Pasirinkite Įrašyti.
Pasirinkite Susiję > Tinklalapiai.
Iš Tinklalapio susietasis rodinys, pasirinkite webapi.
Eikite žemyn iki Turinys skyriaus ir tuomet eikite į Kopijuoti (HTML) (HTML kūrėjas).
Pažymėkite skirtuką HTML.

Nukopijuokite tolesnį pavyzdžio kodo nuokarpą ir įkelkite jį į HTML kūrėją.

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

Įklijuokite kodą.

Pasirinkite Įrašyti ir uždaryti.

4 veiksmas. Portalų talpyklos išvalymas

Sukūrėte webapi pavyzdinį puslapį, kad patikrintumėte žiniatinklio API funkcijas. Prieš pradėdami įsitikinkite, kad „Power Apps“ portalų talpykla buvo išvalyta tam, kad pakeitimai portalo tvarkymo programoje būtų įkelti į jūsų portalą.

SVARBU: dėl portalo serverio talpyklos valymo gali laikinai pablogėti portalo efektyvumas, kai duomenys iš naujo įkeliami iš „Microsoft Dataverse“.

Podėlio išvalymui:

Prisijunkite prie savo portalo kaip administratoriaus tinklo vaidmens narys.
Pakeiskite URL pabaigoje pridėdami /_ paslaugas / apie . Pavyzdžiui, jei portalo URL yra https://contoso.powerappsportals.com, pakeiskite jį į https://contoso.powerappsportals.com/_services/about.

PASTABA: Norėdami išvalyti talpyklą, turite būti žiniatinklio vaidmens administratorių narys . Jei matote tuščią langą, patikrinkite tinklo vaidmens priskyrimus.
Pasirinkite Išvalyti talpyklą.

Daugiau informacijos: Valyti serverio pusės talpyklą portalui

5 veiksmas. Žiniatinklio API naudojimas norint redaguoti, peržiūrėti, kurti ir naikinti

Anksčiau sukurtas pavyzdinis tinklalapis su URL webapi dabar yra paruoštas išbandyti.

Norėdami išbandyti žiniatinklio API funkciją:

Prisijunkite prie savo portalo su vartotojo paskyra, kuri buvo priskirta Žiniatinklio API vartotojo vaidmeniui, kurį sukūrėte anksčiau.
Eikite į anksčiau sukurtą žiniatinklio api žiniatinklio puslapį. Pavyzdžiui, https://contoso.powerappsportals.com/webapi. WebAPI nuskaitys įrašus iš „Microsoft Dataverse“.
Pasirinkite Įtraukti įrašo pavyzdį norėdami į scenarijų įtraukti įrašo pavyzdį.
Pasirinkite laukelį. Šiame pavyzdyje pasirinkome El.paštas tam, kad pakeistumėme kontaktinio el. pašto adresą.
Pasirinkite norėdami panaikinti įrašą.

Dabar, kai sukūrėte tinklalapį su pavyzdžiu norėdami skaityti, redaguoti, kurti ir naikinti įrašus, galite tinkinti formas ir maketą.

Tolesnis veiksmas

HTTP užklausų kūrimas ir klaidų taisymas

Taip pat žr.

Portalų žiniatinklio API apžvalga
Portalų rašymo, naujinimo ir naikinimo operacijos su žiniatinklio API
Portalų skaitymo operacijos naudojant žiniatinklio API
Stulpelių teisių konfigūravimas

Pastaba

Ar galite mums pranešti apie dokumentacijos kalbos nuostatas? Atlikite trumpą apklausą. (atkreipkite dėmesį, kad ši apklausa yra anglų kalba)

Apklausą atliksite per maždaug septynias minutes. Asmeniniai duomenys nėra renkami (privatumo nuostatos).

Last updated on 2023-01-04

Mokymo priemonė: portalo žiniatinklio API naudojimas

1 veiksmas. Sukurkite svetainės parametrus

2 veiksmas. Teisių konfigūravimas

Žiniatinklio vaidmens kūrimas

Susijusių lentelės teisių įtraukimas

Kontaktų įtraukimas į žiniatinklio vaidmenį

3 veiksmas. Sukurkite žiniatinklio puslapį

4 veiksmas. Portalų talpyklos išvalymas

5 veiksmas. Žiniatinklio API naudojimas norint redaguoti, peržiūrėti, kurti ir naikinti

Tolesnis veiksmas

Taip pat žr.

Papildomi ištekliai