Navodila: Uporaba spletnega API-ja portalov

Članek
10/07/2023

S tem vodnikom boste nastavili spletno stran in spletno predlogo po meri, ki uporabljata spletni API za branje, pisanje, posodabljanje in brisanje zapisov iz tabele stikov.

opomba,

Spremenite lahko imena stolpcev ali uporabite drugo tabelo, če upoštevate navodila v tem primeru.

1. korak: Ustvarjanje nastavitev mesta

Preden lahko uporabite spletni API portalov, morate z aplikacijo za upravljanje portala Portal Management omogočiti zahtevane nastavitve spletnega mesta. Nastavitve spletnega mesta so odvisne od tabele, ki jo želite uporabiti pri interakciji s spletnim API-jem.

Zaženite aplikacijo za upravljanje portala.
V levem podoknu aplikacije Upravljanje portala izberite Nastavitve mesta.
Izberite Novo.
V polje Ime vnesite Webapi/contact/enabled.
Na seznamu Spletna stran izberite svoj zapis spletnega mesta.
V polje Vrednost vnesite true.
Izberite Shrani in zapri.
Izberite Novo.
V polje Ime vnesite Webapi/contact/fields.
Na seznamu Spletna stran izberite svoj zapis spletnega mesta.
V polje Vrednost vnesite
firstname,lastname,fullname,emailaddress1,telephone1
Izberite Shrani in zapri.
Izberite Novo.
V polje Ime vnesite Webapi/error/innererror.
Na seznamu Spletna stran izberite svoj zapis spletnega mesta.
V polje Vrednost vnesite true.
Izberite Shrani in zapri.
Preverite nastavitve spletnega mesta za spletni API.

2. korak. Konfiguriranje dovoljenj

Dovoljenja boste morali konfigurirati tako, da bodo uporabniki lahko uporabljali funkcijo spletnega API-ja. V tem primeru morate namestiti ali ustvariti novo spletno vlogo, ki bo uporabljala spletni API, nato boste tabeli Stiki dodali dovoljenja za tabelo, povezali dovoljenje za tabelo s spletno vlogo in na koncu spletno vlogo dodali uporabnikom, da jim omogočite uporabo spletnega API-ja.

opomba,

Spletni API sledi dovoljenjem za tabele, ki izhajajo iz konteksta spletne vloge preverjenega uporabnika ali anonimne spletne vloge. Razmislite, ali vaši uporabniki že imajo spletno vlogo, ki ima dostop do določenih tabel na vašem spletnem mestu, ki jih potrebuje spletni API. Za uporabo spletnega API-ja vam ni treba ustvariti dodatnih spletnih vlog.

Ustvarjanje spletne vloge

Če trenutno nimate spletne vloge z dovoljenji za tabelo, do katere dostopate prek spletnega API-ja, ali potrebujete drugačen kontekst dostopa do podatkov, vam naslednji koraki prikazujejo, kako ustvariti novo spletno vlogo in dodeliti dovoljenja za tabelo.

Zaženite aplikacijo za upravljanje portala.
V levem podoknu v razdelku Varnost izberite Spletne vloge .
Izberite Novo.
V polje Ime vnesite Uporabnik spletnega API-ja (ali katero koli ime, ki najbolje odraža vlogo uporabnika, ki dostopa do te funkcionalnosti).
Na seznamu Spletna stran izberite svoj zapis spletnega mesta.
Izberite možnost Shrani.

Ustvarjanje dovoljenj za tabelo

Zaženite Power Pages oblikovalski studio.
Izberite delovni prostor za nastavitev.
V razdelku Varnost izberite Dovoljenja za tabelo.
Izberite Novo dovoljenje.
V polje Ime vnesite Dovoljenje za tabelo stikov.
Na seznamu Ime tabele izberite Stik (stik).
Na seznamu Vrsta dostopa izberite Globalno.
Izberite pravice Beri, Piši, Ustvari in Izbriši.
Izberite + Dodaj vloge in izberite spletno vlogo ki ste jo izbrali ali ustvarili prej.
Izberite Shrani in zapri.

Dodajanje stikov v spletno vlogo

Zaženite aplikacijo za upravljanje portala.
V levem podoknu v razdelku Varnost izberite Stiki .
Izberite stik, ki ga želite uporabiti v tem primeru za spletni API.

opomba,

Ta stik je uporabniški račun, uporabljen v tem primeru za testiranje spletnega API-ja. Prepričajte se, da ste v svojem portalu izbrali pravi stik.
Izberite Sorodno>Spletne vloge.
Izberite Dodaj obstoječo spletno vlogo.
Izberite vlogo Uporabnik spletnega API-ja, ki ste jo prej ustvarili.
Izberite Dodaj.
Izberite Shrani in zapri.

3. korak. Ustvarjanje spletne strani

Zdaj, ko ste omogočili spletni API in konfigurirali uporabniška dovoljenja, ustvarite spletno stran z vzorčno kodo za ogled, urejanje, ustvarjanje in brisanje zapisov.

Zaženite Power Pages oblikovalski studio.
V delovnem prostoru strani izberite + stran.
V dialogu Dodajanje strani
V polje Ime vnesite WebAPI in izberite postavitev Začni brez predloge.
Izberite Dodaj.
Izberite možnost Uredi kodo v zgornjem desnem kotu.
Izberite Odpri Visual Studio Code.

Kopirajte naslednji vzorčni izrezek kode in ga prilepite med oznake <div></div> razdelka strani.

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

Prilepite kodo.

Izberite CTRL-S, da shranite kodo.
V oblikovalskem studiu izberite Sinhroniziranje, da lokacije posodobite s spremembami kode.

4. korak. Uporaba spletnega API-ja za branje, ogled, urejanje, ustvarjanje in brisanje

Če želite preveriti funkcionalnost spletnega API-ja:

Izberite Predogledna različica in nato izberite Namizje.
Prijavite se v svojo lokacijo z uporabniškim računom, ki mu je bila dodeljena vloga Uporabnik spletnega API-ja, ki ste jo predhodno ustvarili.
Pojdite na spletno stran WebApi, ki ste jo ustvarili prej.
Če želite dodati vzorčni zapis iz skripta, izberite Dodaj vzorčni zapis.
Izberite polje. V tem primeru smo izbrali E-poštni naslov, da lahko spremenimo e-poštni naslov stika.
Če želite izbrisati zapis, izberite ikono Izbriši.