Kaip: portalo žiniatinklio API naudojimas

Straipsnis
09/20/2024

Šiame vadove 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.

Pradėkite Portalo valdymo programą.
Portalo valdymo programos kairiojoje srityje pasirinkite Svetainės parametrai.
Pasirinkite Nauja.
Pavadinimas laukelyje įveskite Žiniatinklioapi/kontaktas/įjungta.
Žiniatinklio svetainės sąraše pasirinkite savo žiniatinklio svetainės įrašą.
Vertė laukelyje įveskite teisinga.
Pasirinkite Išsaugoti ir uždaryti.
Pasirinkite Naujas.
Pavadinimas laukelyje įveskite Žiniatinklioapi/kontaktas/laukeliai.
Žiniatinklio svetainės sąraše pasirinkite savo žiniatinklio svetainės įrašą.
Vertė laukelyje įveskite
vardas,pavardė,vardas,vardas,el. pašto adresas1,telefonas1
Pasirinkite Išsaugoti ir uždaryti.
Pasirinkite Naujas.
Pavadinimas laukelyje įveskite Žiniatinklioapi/klaida/vidinėklaida.
Žiniatinklio svetainės sąraše pasirinkite savo žiniatinklio svetainės įrašą.
Vertė laukelyje įveskite teisinga.
Pasirinkite Išsaugoti ir uždaryti.
Patikrinkite svetainės nustatymus Žiniatinklio API.

2 veiksmas. Teisių konfigūravimas

Turite konfigūruoti leidimus tam, kad vartotojai galėtų naudoti žiniatinklio API funkciją. Šiame pavyzdyje turėsite nustatyti ar sukurti naują žiniatinklio vaidmenį, kuris naudos žiniatinklio API, tada į šį žiniatinklio vaidmenį įtrauksite Kontaktų lentelės teises, o tada įtrauksite žiniatinklio vaidmenį vartotojams, kad jie galėtų naudoti žiniatinklio API.

Pastaba.

Žiniatinklio API tolesnės lentelių teisės kylančios iš žiniatinklio vaidmens konteksto autentifikuoto arba anoniminio žiniatinklio vaidmens. Apsvarstykite, ar vartotojai jau turi žiniatinklio vaidmenį, turiį prieigą prie konkrečių lentelių jūsų svetainėje, kurių reikia žiniatinklio API. Norint naudoti žiniatinklio API, papildomų žiniatinklio vaidmenų kurti nereikia.

Žiniatinklio vaidmens kūrimas

Jei šiuo metu neturite žiniatinklio vaidmens, kuris turės teises į lentelę, prie kurios prieiite per žiniatinklio API, arba jums reikalingas kitoks prieigos prie duomenų kontekstas, atlikite toliau nurodytus veiksmus, kad turėtumėte kaip sukurti naują žiniatinklio vaidmenį ir priskirti lentelių teises.

Pradėkite Portalo valdymo programą.
Kairiosios srities dalyje, skyriuje Sauga pažymėkite Žiniatinklio vaidmenys.
Pasirinkite Naujas.
Lauke Pavadinimas įveskite Žiniatinklio API vartotojas (arba bet kurį pavadinimą, geriausiai atitinkantį šią funkciją naudojančio vartotojo vaidmenį).
Žiniatinklio svetainės sąraše pasirinkite savo žiniatinklio svetainės įrašą.
Pasirinkite Įrašyti.

Kurti lentelės teises

Paleiskite Power Pages dizaino studiją.
Pasirinkite darbo sritį Sauga .
Sekcijoje apsaugoti pasirinkite Lentelės teisės.
Pasirinkite Nauja teisė.
Lauke Pavadinimas įveskite Kontaktų lentelės teisė.
Sąraše Lentelės pavadinimas pasirinkite Kontaktas (kontaktas).
Sąraše Prieigos tipas pasirinkite Visuotinis.
Pasirinkite Skaityti, Rašyti, Kurti ir Naikinti teises.
Pasirinkite + Įtraukite vaidmenų ir pažymėkite žiniatinklio vaidmenį, kurį pažymite arba sukūrėte anksčiau.
Pasirinkite Išsaugoti ir uždaryti.

Kontaktų įtraukimas į žiniatinklio vaidmenį

Pradėkite Portalo valdymo programą.
Kairiosios srities dalyje, skyriuje Sauga pažymėkite 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.
Pasirinktie Įtraukti esamą žiniatinklio vaidmenį.
Pasirinkite Žiniatinklio API vartotojo vaidmuo, kuris buvo sukurtas anksčiau.
Pasirinkite Įtraukti.
Pasirinkite Išsaugoti 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.

Paleiskite Power Pages dizaino studiją.
Puslapių darbo srityje rinkitės + Puslapis.
Įtraukti puslapio dialogą,
Lauke Pavadinimas įveskite WebAPI ir pasirinkite Pradėti iš tuščio maketo .
Pasirinkite Įtraukti.
Viršutiniame dešiniajame kampe pažymėkite parinktį Redaguoti kodą.
Pasirinkite Atidaryti Visual Studio Code.

Nukopijuokite šį kodo pavyzdį "pavyzdį" ir įklijuokite jį į tarp <div></div> puslapio skyriaus žymių.

    <!-- 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 CTRL-S kad išsaugotume kodą.
Dizaino studijoje pasirinkite Sync ir atnaujinkite svetainę su kodo pakeitimais.

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

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

Pasirinkite Peržiūra, tada pasirinkite Ekranas.
Prisijunkite prie savo svetainės su vartotojo paskyra, kuri buvo priskirta Žiniatinklio API vartotojo vaidmeniui, kurį sukūrėte anksčiau.
Eikite į anksčiau sukurtą WebApi žiniatinklio puslapį.
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 Naikinti piktogramą tam, kad panaikintumėte įrašą.

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

Kitas veiksmas

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

Bendrinti naudojant