Norādījumi: portālu tīmekļa API lietošana

Raksts
10/16/2024

Šajā rokasgrāmatā jūs iestatīsit tīmekļa lapu un pielāgotu tīmekļa veidni, kas izmantos šo tīmekļa API, lai no kontaktpersonu tabulas lasītu, rakstītu, atjauninātu un dzēstu ierakstus.

Piezīmes

Veicot šajā piemērā norādītās darbības, varat mainīt kolonnu nosaukumus vai lietot citu tabulu.

1. darbība. Vietnes iestatījumu izveide

Lai varētu izmantot portālu tīmekļa API, jums ir jāiespējo nepieciešamie vietnes iestatījumi, izmantojot Portāla pārvaldības programmu. Vietnes iestatījumi ir atkarīgi no entītijas, kuru vēlaties izmantot, mijiedarbojoties ar tīmekļa API.

Startējiet Portālu pārvaldības programmu.
Kreisajā rūtī esošajā Portāla pārvaldības programmā atlasiet Vietnes iestatījumi.
Atlasiet Jauns.
Lodziņā Nosaukums ievadiet Webapi/contact/enabled.
Vietņu sarakstā atlasiet jūsu vietnes ierakstu.
Lodziņā Vērtība ievadiet patiess.
Atlasiet Saglabāt un aizvērt.
Atlasiet Jauns.
Lodziņā Nosaukums ievadiet Webapi/contact/fields.
Vietņu sarakstā atlasiet jūsu vietnes ierakstu.
Lodziņā Vērtība ievadiet
vārds,uzvārds,pilns vārds,emailaddress1,tālrunis1
Atlasiet Saglabāt un aizvērt.
Atlasiet Jauns.
Lodziņā Nosaukums ievadiet Webapi/error/innererror.
Vietņu sarakstā atlasiet jūsu vietnes ierakstu.
Lodziņā Vērtība ievadiet patiess.
Atlasiet Saglabāt un aizvērt.
Pārbaudiet Tīmekļa API vietnes iestatījumus.

2. darbība. Atļauju konfigurēšana

Jums ir jākonfigurē atļaujas, lai lietotāji varētu izmantot tīmekļa API līdzekli. Šajā piemērā jūs iestatīsit vai izveidosit jaunu tīmekļa lomu, kas izmantos tīmekļa API, pēc tam pievienosit tabulas atļaujas attiecībā uz tabulu Kontaktpersonas, pēc tam saistīsit tabulas atļauju ar tīmekļa lomu un visbeidzot piešķirsit tīmekļa lomu lietotājiem, lai atļautu viņiem izmantot šo tīmekļa API.

Piezīmes

Tīmekļa API izmanto tabulas atļaujas, kas atbilst autentificētā lietotāja tīmekļa lomas kontekstam vai anonīmai tīmekļa lomai. Apsveriet, vai jūsu lietotājiem jau ir tīmekļa loma, kam ir piekļuve noteiktām jūsu vietnes tabulām, kuras ir nepieciešamas, izmantojot tīmekļa API. Papildu tīmekļa lomas nav jāizveido, tikai lai izmantotu tīmekļa API.

Tīmekļa lomas izveide

Ja pašlaik jums nav tīmekļa lomas ar tabulas atļaujām, kam piekļūstat, izmantojot tīmekļa API, vai jums ir nepieciešams atšķirīgs konteksts, kādā piekļūt datiem, veiciet tālāk norādītās darbības, lai jūs varētu izveidot jaunu tīmekļa lomu un piešķirt tabulu atļaujas.

Startējiet Portālu pārvaldības programmu.
Kreisās rūts sadaļā Drošība atlasiet Tīmekļa lomas.
Atlasiet Jauns.
Lodziņā Nosaukums ievadiet Tīmekļa API lietotājs (vai jebkādu nosaukumu, kas vislabāk atbilst tā lietotāja lomai, kurš izmanto šo funkcionalitāti).
Vietņu sarakstā atlasiet jūsu vietnes ierakstu.
Atlasiet vienumu Saglabāt.

Tabulas atļauju izveidošana

Palaidiet Power Pages noformējuma studiju.
Atlasiet darbvietu Drošība .
Sadaļā aizsargāt atlasiet Tabulas atļaujas.
Atlasiet Jauna atļauja.
Lodziņā Nosaukums ievadiet Kontaktpersonu entītijas atļauja.
Sarakstā Entītijas nosaukums atlasiet Kontaktpersona (kontaktpersona).
Sarakstā Piekļuves tips atlasiet vienumu Globās.
Atlasiet atļaujas Lasīt, Rakstīt, Izveidot, un Dzēst .
Atlasiet + Pievienot lomas un atlasiet iepriekš atlasītu vai izveidotu tīmekļa lomu.
Atlasiet Saglabāt un aizvērt.

Kontaktpersonu pievienošana tīmekļa lomai

Startējiet Portālu pārvaldības programmu.
Kreisās rūts sadaļā Drošība atlasiet Kontaktpersonas.
Atlasiet kontaktpersonu, ko vēlaties izmantot šajā piemērā tīmekļa API.

Piezīmes

Šī kontaktpersona ir šajā piemērā izmantotais lietotāja konts, lai testētu tīmekļa API. Pārliecinieties, vai esat atlasījis pareizo kontaktpersonu jūsu portālā.
Atlasiet Saistītais>Tīmekļa lomas.
Atlasiet Esošas tīmekļa lomas pievienošana.
Atlasiet iepriekš izveidotu Tīmekļa API lietotāja lomu.
Atlasiet Pievienot.
Atlasiet Saglabāt un aizvērt.

3. darbība. Izveidot tīmekļa vietni

Tagad, kad esat iespējojis tīmekļa API un konfigurētās lietotāja atļaujas, izveidojiet tīmekļa lapu ar koda paraugu, lai skatītu, rediģētu, izveidotu un dzēstu ierakstus.

Palaidiet Power Pages noformējuma studiju.
Darbvietā Lapas atlasiet + Lapa.
Dialoglodziņā Lapas pievienošana
Lodziņā Nosaukums ievadiet WebAPI un atlasiet izkārtojumu Sākt no tukša.
Atlasīt Pievienot.
Augšējā labajā stūrī atlasiet opciju Rediģēt kodu.
Atlasiet Atvērt Visual Studio Code.

Nokopējiet tālāk norādīto koda fragmentu un ielīmējiet to starp lapas sadaļas <div></div> tagiem.

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

Ielīmējiet kodu.

Lai saglabātu kodu, atlasiet CTRL-S.
Atlasiet sinhronizēt noformējuma studijā, lai atjauninātu vietni ar koda izmaiņām.

4. darbība. Tīmekļa API lietošana, lai lašītu, skatītu, rediģētu, izveidotu un dzēstu

Lai pārbaudītu Web API funkcionalitāti:

Atlasiet Priekšskatījums un pēc tam izvēlieties Darbvirsma.
Piesakieties savā vietnē, izmantojot lietotāja kontu, kuram ir iepriekš piešķirta Tīmekļa API lietotāja loma.
Dodieties uz iepriekš izveidotu WebApi tīmekļa lapu.
Atlasiet Pievienot parauga ierakstu , lai pievienotu parauga ierakstu no skripta.
Atlasiet lauku. Šajā piemērā esam atlasījuši E-pastu, lai mainītu kontaktpersonas e-pasta adresi.
Lai dzēstu ierakstu, atlasiet ikonu Dzēst.

Tagad, kad esat izveidojis tīmekļa lapu ar paraugu, lai lasītu, skatītu, rediģētu, izveidotu un dzēstu ierakstus, varat pielāgot formas un izkārtojumu.

Nākamā darbība

HTTP pieprasījumu sastādīšana un kļūdu apstrāde

Kopīgot, izmantojot