Tutorial: Gunakan API Web portal

Nota

Berkuat kuasa pada 12 Oktober 2022, portal Power Apps ialah Power Pages. Maklumat lanjut: Microsoft Power Pages kini tersedia secara umum (blog)
Kami akan memindahkan dan menggabungkan dokumentasi portal Power Apps dengan dokumentasi Power Pages tidak lama lagi.

Dalam tutorial ini, anda akan menyediakan halaman web dan templat web tersuai yang akan menggunakan API Web untuk membaca, menulis, mengemas kini dan memadam rekod daripada jadual kenalan.

Nota

Anda boleh mengubah nama lajur atau menggunakan jadual yang berbeza, sambil mengikuti langkah dalam contoh ini.

Langkah 1. Cipta tetapan tapak

Sebelum anda boleh menggunakan API Web portal, anda perlu mendayakan tetapan tapak yang diperlukan dengan aplikasi Pengurusan Portal. Tetapan tapak bergantung pada jadual yang anda mahu gunakan semasa berinteraksi dengan API Web.

Pergi ke Power Apps.
Pada anak tetingkap kiri, pilih Apl.
Pilih aplikasi Pengurusan Portal.
Pada anak tetingkap kiri aplikasi Pengurusan Portal, pilih Seting Laman.
Pilih Baharu.
Dalam kotak Nama , masukkan Webapi/kenalan/didayakan.
Dalam senarai Laman Web , pilih rekod laman web anda.
Dalam kotak Nilai , masukkan true.
Pilih Simpan & Tutup.
Pilih Baharu.
Dalam kotak Nama , masukkan Webapi/kenalan/medan.
Dalam senarai Laman Web , pilih rekod laman web anda.
Dalam kotak Nilai , masukkan
namapertama,namaakhir,namapenuh,alamate-mel1,telefon1
Pilih Simpan & Tutup.
Pilih Baharu.
Dalam kotak Nama , masukkan Webapi/ralat/innererror.
Dalam senarai Laman Web , pilih rekod laman web anda.
Dalam kotak Nilai , masukkan true.
Pilih Simpan & Tutup.
Sahkan seting laman untuk API Web.

Langkah 2. Konfigurasikan keizinan

Anda akan perlu mengkonfigurasi keizinan supaya pengguna boleh menggunakan ciri API Web. Dalam contoh ini, anda akan mendayakan jadual Kenalan untuk keizinan jadual, mencipta peranan web untuk menggunakan API Web, menambah keizinan jadual untuk jadual Contact kepada peranan web ini dan kemudian menambah peranan web kepada pengguna untuk membenarkan mereka menggunakan API Web.

Pada anak tetingkap kiri aplikasi Pengurusan Portal, pilih Keizinan Jadual.
Pilih Baharu.
Dalam kotak Nama , masukkan Keizinan Jadual Kenalan.
Dalam senarai Nama Jadual, pilih Kenalan (kenalan).
Dalam senarai Laman Web , pilih rekod laman web anda.
Dalam senarai Jenis Akses, pilih Global.
Pilih kelayakan Baca, Tulis, Cipta dan Padam.
Pilih Simpan & Tutup.

Cipta peranan web

Anda boleh menggunakan peranan web yang sedia ada dalam tapak web anda atau mencipta peranan web baharu.

Pada anak tetingkap kiri, pilih Peranan Web.
Pilih Baharu.
Dalam kotak Nama , masukkan Pengguna API Web(atau sebarang nama yang paling mencerminkan peranan pengguna yang mengakses fungsi ini).
Dalam senarai Laman Web , pilih rekod laman web anda.
Pilih Simpan.

Tambah keizinan jadual berkaitan

Dengan peranan web baru atau sedia ada, pilih Keizinan > Jadual Berkaitan.
Pilih Tambah keizinan jadual sedia ada.
Pilih Keizinan Jadual Kenalan, dicipta sebelum ini.
Pilih Tambah.
Pilih Simpan & Tutup.

Tambah kenalan kepada peranan web

Pada anak tetingkap kiri, pilih Kenalan.
Pilih kenalan yang anda mahu gunakan dalam contoh ini untuk API web.

Nota

Kenalan ini adalah akaun pengguna yang digunakan dalam contoh ini untuk menguji API Web. Pastikan untuk memilih kenalan yang betul dalam portal anda.
Pilih Peranan > Web Berkaitan.
Pilih Tambah Peranan Web Sedia Ada.
Pilih peranan Pengguna API Web, dicipta sebelum ini.
Pilih Tambah.
Pilih Simpan & Tutup.

Langkah 3. Cipta halaman web

Sekarang anda telah mendayakan API web dan keizinan pengguna dikonfigurasikan, cipta halaman web dengan kod sampel untuk pandangan, edit, cipta dan padam rekod.

Pada anak tetingkap kiri aplikasi Pengurusan Portal, pilih Halaman Web.
Pilih Baharu.
Dalam kotak Nama, masukkan webapi.
Dalam senarai Tapak web, pilih rekod tapak web anda.
Untuk Halaman Induk, pilih Utama.
Untuk URL separa, masukkan webapi.
Untuk Templat Halaman, pilih Laman Utama.
Untuk Keadaan Penerbitan, pilih Diterbitkan.
Pilih Simpan.
Pilih Halaman Web > Berkaitan.
Daripada Pandangan Berkaitan Halaman Web, pilih webapi.
Tatal ke bawah hingga ke bahagian Kandungan, dan kemudian pergi ke Salin (HTML) (Pereka bentuk HTML).
Pilih tab HTML.

Salin cebisan kod sampel yang berikut dan tampal dalam pereka bentuk 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>

Tampal kod.

Pilih Simpan & Tutup.

Langkah 4. Kosongkan cache portal

Anda telah mencipta halaman sampel webapi untuk menguji kefungsian API Web. Sebelum anda mari bermula, pastikan bahawa Power Apps cache Portal telah dikosongkan supaya perubahan daripada aplikasi Pengurusan Portal ditunjukkan pada portal anda.

PENTING: Mengosongkan cache bahagian pelayan portal menyebabkan penurunan prestasi sementara bagi portal ketika data dimuatkan semula daripada Microsoft Dataverse.

Untuk mengosongkan cache:

Daftar masuk ke portal anda sebagai ahli peranan web Pentadbir.
Tukar URL /_ dengan menambah/tentang perkhidmatan pada akhir. Contohnya, jika URL https://contoso.powerappsportals.com portal, ubahnya https://contoso.powerappsportals.com/_services/about.

NOTA: Anda mesti menjadi ahli peranan web Pentadbir untuk mengosongkan cache. Jika anda melihat skrin kosong, semak tugasan peranan web.
Pilih Kosongkan cache.

Maklumat lanjut: Kosongkan cache bahagian pelayan untuk portal

Langkah 5. Gunakan API Web untuk baca, pandangan, edit, cipta dan padam

Laman web sampel dengan URL webapi dicipta lebih awal kini bersedia untuk percubaan.

Untuk menguji kefungsian API Web:

Log masuk ke Portal anda dengan akaun pengguna yang telah ditugaskan peranan Pengguna API Web anda cipta lebih awal.
Pergi ke halaman web webapi dicipta sebelum ini. Sebagai contoh, https://contoso.powerappsportals.com/webapi WebAPI akan mengambil rekod daripada Microsoft Dataverse.
Pilih Tambah Rekod Sampel untuk menambahkan rekod sampel daripada skrip.
Pilih medan. Dalam contoh ini, kami telah memilih E-mel untuk mengubah alamat e-mel kenalan.
Pilih untuk memadam rekod.

Kini anda telah mencipta halaman web dengan sampel dalam contoh ini untuk baca, edit, cipta dan padam rekod, anda boleh sesuaikan borang dan tataletak.

Langkah seterusnya

Tulis permintaan HTTP dan kendalikan ralat

Lihat juga

Gambaran keseluruhan API Web portal
Portal menulis, mengemas kini dan memadam operasi menggunakan API Web
Operasi baca portal menggunakan API Web
Konfigurasi keizinan lajur

Nota

Adakah anda boleh memberitahu kami tentang keutamaan bahasa dokumentasi anda? Jawab tinjauan pendek. (harap maklum bahawa tinjauan ini dalam bahasa Inggeris)

Tinjauan akan mengambil masa lebih kurang tujuh minit. Tiada data peribadi akan dikumpulkan (pernyataan privasi).

Last updated on 2023-03-14

Tutorial: Gunakan API Web portal

Langkah 1. Cipta tetapan tapak

Langkah 2. Konfigurasikan keizinan

Cipta peranan web

Tambah keizinan jadual berkaitan

Tambah kenalan kepada peranan web

Langkah 3. Cipta halaman web

Langkah 4. Kosongkan cache portal

Langkah 5. Gunakan API Web untuk baca, pandangan, edit, cipta dan padam

Langkah seterusnya

Lihat juga

Sumber tambahan