Opplæring: Bruke nett-API-en for portal

Artikkel
09/20/2024

I denne veiledningen skal du konfigurere en webside og egendefinert webmal som skal bruke web-APIen til å lese, skrive, oppdatere og slette poster fra kontakttabellen.

Merk

Du kan endre kolonnenavnene eller bruke en annen tabell mens du følger trinnene i dette eksemplet.

Trinn 1. Opprette webområdeinnstillinger

Før du kan bruke Web-API-en for portaler, må du aktivere de nødvendige nettstedsinnstillingene med Portalbehandling-appen. Områdeinnstillingene avhenger av tabellen du vil bruke når du samhandler med web-API-en.

Start Portalbehandling-appen.
Velg Nettstedinnstillinger til venstre i Portalbehandling-appen.
Velg Ny.
I Navn-feltet skriver du inn Webapi/contact/enabled.
I Nettsted-listen over velger du nettstedsoppføringen.
Angi sann i boksen Verdi.
Velg Lagre og lukk.
Velg Ny.
I Navn-feltet skriver du inn Webapi/contact/fields.
I Nettsted-listen over velger du nettstedsoppføringen.
I Verdi-boksen angir du
firstname,lastname,fullname,emailaddress1,telephone1
Velg Lagre og lukk.
Velg Ny.
I Navn-feltet skriver du inn Webapi/error/innererror.
I Nettsted-listen over velger du nettstedsoppføringen.
Angi sann i boksen Verdi.
Velg Lagre og lukk.
Kontroller nettstedsinnstillingene for Web-API.

Trinn 2. Konfigurere tillatelser

Du må konfigurere tillatelser slik at brukere kan bruke funksjonen Web-API. I dette eksemplet skal du konfigurere og opprette en ny webrolle som skal bruke web-APIen, og deretter skal du legge til tabelltillatelsene for Kontakt-tabellen og knytte tabelltillatelsene til webrollen og til slutt tilordne webrollen til brukere for å tillate dem å bruke web-APIen.

Merk

Web-API-en følger tabelltillatelser som kommer fra webrolle-konteksten for den godkjente brukeren eller den anonyme webrollen. Vurder om brukerne allerede har en webrolle som har tilgang til de spesifikke tabellene på webområdet som web-API-en trenger. Du trenger ikke opprette flere webroller bare for å bruke web-API-en.

Opprette en nettrolle

Hvis du for øyeblikket ikke har en webrolle med tillatelser til tabellen du skal ha tilgang til via web-API-en eller krever annen kontekst for tilgang til dataene, kan du bruke fremgangsmåten nedenfor til å opprette en ny webrolle og tilordne tabelltillatelser.

Start Portalbehandling-appen.
I venstre rute, i delen Sikkerhet velger du Webroller.
Velg Nytt.
I Navn-boksen angir du Nett-API-bruker (eller et navn som best gjenspeiler rollen til brukeren som får tilgang til denne funksjonaliteten).
I Nettsted-listen over velger du nettstedsoppføringen.
Velg Lagre.

Opprett tabelltillatelser

Start Power Pages-utformingsstudioet.
Velg arbeidsområdet Sikkerhet.
Velg Tabelltillatelser under Beskytt-delen.
Velg Ny tillatelse.
I Navn-boksen skriver du inn Tillatelse for Kontakt-tabell.
I Tabellnavn-listen velger du Kontakt (contact).
I Tilgangstype-listen velger du Global.
Velg rettighetene Lese, Skrive, Opprette og Slette.
Velg + Legg til roller , og velg webrollen du valgte eller opprettet tidligere.
Velg Lagre og lukk.

Legge til kontakter i nettrollen

Start Portalbehandling-appen.
I venstre rute, i delen Sikkerhet velger du Kontakter.
Velg en kontakt som du vil bruke i dette eksemplet for Web-API-en.

Merk

Denne kontakten er brukerkontoen som brukes i dette eksemplet til testing av Web-API-en. Pass på at du velger riktig kontakt i portalen.
Velg Relatert>Nettroller.
Velg Legg til eksisterende nettrolle.
Velg rollen Web-API-bruker du opprettet tidligere.
Velg Legg til.
Velg Lagre og lukk.

Trinn 3. Opprett en nettside

Nå som du har aktivert Web-API-en og de konfigurerte brukertillatelsene, oppretter du en nettside med eksempelkode for å vise, redigere, opprette og slette oppføringer.

Start Power Pages-utformingsstudioet.
Velg + Sider i Sider-arbeidsområdet.
I Legg til en side-dialogboksen,
I boksen Navn angir du WebAPI og velger oppsettet Start fra bunnen av.
Velg Legg til.
Velg Rediger kode øverst til høyre.
Velg Åpne Visual Studio Code.

Kopier eksempelkodebiten nedenfor, og lim den inn mellom <div></div>-merkene for sidedelen.

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

Lim inn kode.

Velg CTRL-S for å lagre koden.
Velg Synkroniser i utformingsstudioet for å oppdatere nettstedet med kodeendringene.

Trinn 4. Bruke web-APIen til å lese, vise, redigere, opprette og slette

Slik tester du Web API-funksjonaliteten:

Velg Forhåndsversjon, og velg Skrivebord.
Logg på nettstedet med brukerkontoen som er tilordnet rollen Web-API-bruker du opprettet tidligere.
Gå til WebApi-nettsiden som ble opprettet tidligere.
Velg Legg til eksempeloppføring for å legge til eksempeloppføringen fra skriptet.
Velg et felt. I dette eksemplet har vi valgt E-post for å endre e-postadressen til en kontakt.
Velg Slett for å slette oppføringen.

Nå som du har opprettet en webside med et eksempel for å lese, redigere, opprette og slette poster, kan du tilpasse skjemaene og oppsettet.

Neste trinn

Opprett HTTP-forespørsler og håndter feil

Del via