Εκπαιδευτικό βοήθημα: χρήση API Web πύλης

Άρθρο
03/16/2023

Σημείωση

Από τις 12 Οκτωβρίου 2022, οι πύλες του Power Apps είναι Power Pages. Περισσότερες πληροφορίες: Το Microsoft Power Pages είναι πλέον γενικά διαθέσιμο (ιστολόγιο)
Σύντομα θα μετεγκαταστήσουμε και θα συγχωνεύσουμε την τεκμηρίωση των πυλών Power Apps με την τεκμηρίωση Power Pages.

Σε αυτό το εκπαιδευτικό βοήθημα, θα ρυθμίσετε μια ιστοσελίδα και ένα προσαρμοσμένο πρότυπο web που θα χρησιμοποιεί το ΑΡΙ Web για την ανάγνωση, εγγραφή, ενημέρωση και διαγραφή καρτελών από τον πίνακα επαφών.

Σημείωση

Μπορείτε να αλλάξετε τα ονόματα των στηλών ή να χρησιμοποιήσετε έναν διαφορετικό πίνακα, ακολουθώντας τα βήματα σε αυτό το παράδειγμα.

Βήμα 1. Ρυθμίσεις δημιουργίας τοποθεσίας

Για να μπορέσετε να χρησιμοποιήσετε τις πύλες Web API, πρέπει να ενεργοποιήσετε τις απαιτούμενες ρυθμίσεις τοποθεσίας με την εφαρμογή Διαχείριση πύλης. Οι ρυθμίσεις τοποθεσίας εξαρτώνται από τον πίνακα που θέλετε να χρησιμοποιήσετε κατά την αλληλεπίδραση με το ΑΡΙ Web.

Μετάβαση σε Power Apps.
Στο αριστερό τμήμα παραθύρου, επιλέξτε Εφαρμογές.
Επιλέξτε την εφαρμογή Διαχείριση πύλης .
Στο αριστερό τμήμα παραθύρου της εφαρμογής Διαχείριση πύλης , επιλέξτε Ρυθμίσεις τοποθεσίας.
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα , πληκτρολογήστε Webapi/Contact/enabled.
Στη λίστα Τοποθεσίες Web , επιλέξτε την καρτέλα της τοποθεσίας web σας.
Στο πλαίσιο Τιμή , καταχωρίστε αληθές.
Επιλέξτε Αποθήκευση και κλείσιμο.
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα , πληκτρολογήστε Webapi/contact/fields.
Στη λίστα Τοποθεσίες Web , επιλέξτε την καρτέλα της τοποθεσίας web σας.
Στο πλαίσιο Τιμή , καταχωρίστε
firstname,lastname,fullname,emailaddress1,telephone1
Επιλέξτε Αποθήκευση και κλείσιμο.
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα , πληκτρολογήστε Webapi/error/innererror.
Στη λίστα Τοποθεσίες Web , επιλέξτε την καρτέλα της τοποθεσίας web σας.
Στο πλαίσιο Τιμή , καταχωρίστε αληθές.
Επιλέξτε Αποθήκευση και κλείσιμο.
Επαληθεύστε τις ρυθμίσεις τοποθεσίας για το Web API.

Βήμα 2. Ρύθμιση παραμέτρων δικαιωμάτων

Θα πρέπει να ρυθμίσετε τις παραμέτρους των δικαιωμάτων έτσι, ώστε οι χρήστες να μπορούν να χρησιμοποιούν τη δυνατότητα Web API. Σε αυτό το παράδειγμα, θα ενεργοποιήσετε τον πίνακα Επαφή για δικαιώματα πίνακα, θα δημιουργήσετε ένα ρόλο web χρησιμοποιώντας το API Web, θα προσθέσετε τα δικαιώματα πίνακα για τον πίνακα Επαφή σε αυτόν το ρόλο web και, στη συνέχεια, θα προσθέσετε το ρόλο web σε χρήστες προκειμένου να μπορούν να χρησιμοποιούν το Web ΑΡΙ.

Στο αριστερό τμήμα παραθύρου της εφαρμογής Διαχείριση πύλης , επιλέξτε Δικαιώματα τοποθεσίας.
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα , πληκτρολογήστε Δικαίωμα πίνακα επαφών.
Στη λίστα Όνομα πίνακα , επιλέξτε Επαφή (επαφή).
Στη λίστα Τοποθεσίες Web , επιλέξτε την καρτέλα της τοποθεσίας web σας.
Στη λίστα Τύπος πρόσβασης , επιλέξτε Καθολικός.
Επιλέξτε προνόμια Ανάγνωση, Γραφή, Δημιουργία και Διαγραφή.
Επιλέξτε Αποθήκευση και κλείσιμο.

Δημιουργία ρόλου web

Μπορείτε να χρησιμοποιήσετε έναν υπάρχοντα ρόλο web στην τοποθεσία Web σας ή να δημιουργήσετε ένα νέο ρόλο web.

Στο αριστερό τμήμα παραθύρου επιλέξτε Ρόλοι web :
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα , πληκτρολογήστε Χρήστης API Web (ή οποιοδήποτε όνομα αντικατοπτρίζει καλύτερα το ρόλο του χρήστη που έχει πρόσβαση σε αυτήν τη λειτουργικότητα).
Στη λίστα Τοποθεσίες Web , επιλέξτε την καρτέλα της τοποθεσίας web σας.
Επιλέξτε Αποθήκευση.

Προσθήκη δικαιωμάτων σχετικού πίνακα

Με τον νέο ή τον υπάρχοντα ρόλο web, επιλέξτε Σχετικά > Δικαιώματα πίνακα.
Επιλέξτε Προσθήκη δικαιώματος υπάρχοντος πίνακα.
Επιλέξτε Δικαίωμα πίνακα επαφών, που δημιουργήθηκε νωρίτερα.
Επιλέξτε Προσθήκη.
Επιλέξτε Αποθήκευση και κλείσιμο.

Προσθήκη επαφών σε ρόλο web

Στο αριστερό παράθυρο Επαφές.
Επιλέξτε μια επαφή που θέλετε να χρησιμοποιήσετε σε αυτό το παράδειγμα για το Web API.

Σημείωση

Αυτή η επαφή είναι ο λογαριασμός χρήστη που χρησιμοποιείται σε αυτό το παράδειγμα για τον έλεγχο του Web API. Βεβαιωθείτε ότι έχετε επιλέξει τη σωστή επαφή στην πύλη σας.
Επιλέξτε Σχετικά > Ρόλοι Web.
Επιλέξτε Προσθήκη υπάρχοντος ρόλου web.
Επιλέξτε τον ρόλο Χρήστης Web API που έχει δημιουργηθεί νωρίτερα.
Επιλέξτε Προσθήκη.
Επιλέξτε Αποθήκευση και κλείσιμο.

Βήμα 3. Δημιουργία μιας ιστοσελίδας

Τώρα που έχετε ενεργοποιήσει τα δικαιώματα Web API και τα διαμορφωμένα δικαιώματα χρήστη, δημιουργήστε μια ιστοσελίδα με δείγμα κώδικα για να προβάλετε, να επεξεργαστείτε, να δημιουργήσετε και να διαγράψετε καρτέλες.

Στο αριστερό τμήμα παραθύρου της εφαρμογής Διαχείριση πύλης , επιλέξτε Ιστοσελίδες.
Επιλέξτε Νέα.
Στο πλαίσιο Όνομα, πληκτρολογήστε webapi.
Στη λίστα Τοποθεσίες Web, επιλέξτε την καρτέλα της τοποθεσίας web σας.
Για τη Γονική σελίδα επιλέξτε Αρχική σελίδα.
Για την Τμηματική διεύθυνση URL, καταχωρίστε webapi.
Για το Πρότυπο σελίδας επιλέξτε Αρχική σελίδα.
Για την Κατάσταση δημοσίευσης επιλέξτε Δημοσιεύτηκε.
Επιλέξτε Αποθήκευση.
Επιλέξτε Σχετικά > Ιστοσελίδες.
Από τη συσχετισμένη προβολή ιστοσελίδας, επιλέξτε webapi.
Κάντε κύλιση προς τα κάτω στην ενότητα Περιεχόμενο και, στη συνέχεια, μεταβείτε στην επιλογή Αντιγραφή (HTML) (σχεδίαση HTML).
Επιλέξτε την καρτέλα HTML.

Αντιγράψτε το ακόλουθο δείγμα τμήματος κώδικα και επικολλήστε το στη σχεδίαση HTML.

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

Επικόλληση κώδικα.

Επιλέξτε Αποθήκευση και κλείσιμο.

Βήμα 4. Εκκαθάριση της cache πυλών

Δημιουργήσατε ένα δείγμα σελίδας webapi για να δοκιμάσετε τη λειτουργικότητα Web API. Πριν ξεκινήσετε, βεβαιωθείτε ότι έχετε καταργήσει τη μνήμη cache των πυλών Power Apps ώστε οι αλλαγές από την εφαρμογή Διαχείριση πύλης να αντικατοπτρίζονται στην πύλη σας.

ΣΗΜΑΝΤΙΚΟ: Η εκκαθάριση της cache από την πλευρά του διακομιστή προκαλεί προσωρινά κακές επιδόσεις της πύλης ενώ τα δεδομένα φορτώνονται εκ νέου από το Microsoft Dataverse.

Για εκκαθάριση της cache:

Πραγματοποιήστε είσοδο στην πύλη σας ως μέλος του ρόλου Web Διαχειριστές.
Αλλάξτε τη διεύθυνση URL προσαρτώντας το /_‑services/about στο τέλος. Για παράδειγμα, εάν η διεύθυνση URL της πύλης είναι https://contoso.powerappsportals.com, αλλάξτε την σε https://contoso.powerappsportals.com/_services/about.

ΣΗΜΕΙΩΣΗ: Π ρέπει να είστε μέλος του ρόλου Web Διαχειριστές για να εκκαθαρίσετε τη μνήμη cache. Εάν δείτε μια κενή οθόνη, ελέγξτε τις αναθέσεις του ρόλου Web.
Επιλέξτε Εκκαθάριση cache.

Περισσότερες πληροφορίες: Εκκαθάριση της μνήμης cache από την πλευρά του διακομιστή για μια πύλη

Βήμα 5. Χρήση του API Web για ανάγνωση, προβολή, επεξεργασία, δημιουργία και διαγραφή

Το δείγμα ιστοσελίδας με τη διεύθυνση URL webapi που δημιουργήσαμε προηγουμένως είναι πλέον έτοιμο για δοκιμή.

Για να δοκιμάσετε τη λειτουργικότητα Web API:

Συνδεθείτε στην πύλη με το λογαριασμό χρήστη στον οποίο έχει ανατεθεί ο ρόλος Χρήστης Web API που δημιουργήσατε νωρίτερα.
Μεταβείτε στην ιστοσελίδα webapi που δημιουργήσατε νωρίτερα. Για παράδειγμα, https://contoso.powerappsportals.com/webapi. Το WebAPI θα ανακτήσει καρτέλες από το Microsoft Dataverse.
Επιλέξτε Προσθήκη δείγματος καρτέλας για να προσθέσετε το δείγμα καρτέλας από τη δέσμη ενεργειών.
Επιλέξτε ένα πεδίο. Σε αυτό το παράδειγμα, επιλέξαμε Ηλεκτρονικό ταχυδρομείο για να αλλάξουμε τη διεύθυνση ηλεκτρονικού ταχυδρομείου μιας επαφής.
Επιλέξτε το κουμπί για να διαγράψετε μια καρτέλα.

Τώρα που δημιουργήσατε μια ιστοσελίδα με δείγμα για ανάγνωση, επεξεργασία, δημιουργία και διαγραφή καρτελών, μπορείτε να προσαρμόσετε τις φόρμες και τη διάταξη.

Επόμενο βήμα

Σύνταξη αιτήσεων HTTP και χειρισμός σφαλμάτων

Δείτε επίσης

Επισκόπηση πυλών Web API
Λειτουργίες εγγραφής, ενημέρωσης και διαγραφής πυλών χρησιμοποιώντας το API Web
Λειτουργίες ανάγνωσης πυλών χρησιμοποιώντας το API Web
Ρύθμιση παραμέτρων δικαιωμάτων στηλών

Σημείωση

Μπορείτε να μας πείτε ποια γλώσσα προτιμάτε για την τεκμηρίωση; Πάρτε μέρος σε μια σύντομη έρευνα. (σημειώνεται ότι αυτή η έρευνα είναι στα Αγγλικά)

Η έρευνα θα διαρκέσει περίπου επτά λεπτά. Δεν συλλέγονται προσωπικά δεδομένα (δήλωση προστασίας προσωπικών δεδομένων).

Εκπαιδευτικό βοήθημα: χρήση API Web πύλης

Βήμα 1. Ρυθμίσεις δημιουργίας τοποθεσίας

Βήμα 2. Ρύθμιση παραμέτρων δικαιωμάτων

Δημιουργία ρόλου web

Προσθήκη δικαιωμάτων σχετικού πίνακα

Προσθήκη επαφών σε ρόλο web

Βήμα 3. Δημιουργία μιας ιστοσελίδας

Βήμα 4. Εκκαθάριση της cache πυλών

Βήμα 5. Χρήση του API Web για ανάγνωση, προβολή, επεξεργασία, δημιουργία και διαγραφή

Επόμενο βήμα

Δείτε επίσης

Σχόλια

Πρόσθετοι πόροι