Öğretici: Portal Web API'sini kullanma

Makale
03/15/2023

Not

12 Ekim 2022 tarihi itibarıyla Power Apps portalları, Power Pages olarak adlandırılmıştır. Daha fazla bilgi: Microsoft Power Pages genel kullanıma sunuldu (blog)
Yakında Power Apps portalları belgelerini taşıyıp Power Pages belgeleri ile birleştireceğiz.

Bu öğreticide, ilgili kişi tablosundaki kayıtları okumak, yazmak, güncelleştirmek ve silmek için Web API'sini kullanacak bir web sayfası ve özel web şablonu oluşturacaksınız.

Not

Bu örnekteki adımları izleyerek sütun adlarını değiştirebilir veya farklı bir tablo kullanabilirsiniz.

Adım 1. Site ayarları oluştur

Portallar Web API'sini kullanabilmeniz için, önce gerekli site ayarlarını portalı yönetim uygulamasında etkinleştirmeniz gerekir. Site ayarları, Web API'si ile etkileşim kurarken kullanmak istediğiniz tabloya bağlıdır.

Şuraya git: Power Apps.
Sol bölmeden, Uygulamalar'ı seçin.
Portal Yönetimi uygulamasını seçin.
Sol bölmeden Portal Yönetimi uygulamasında, Site Ayarları'nı seçin.
Yeni'yi seçin.
Ad kutusuna, Webapi/contact/enabled yazın.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Değer kutusuna true yazın.
Kaydet ve Kapat'ı seçin.
Yeni'yi seçin.
Ad kutusuna, Webapi/contact/fields yazın.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Değer kutusuna şunu yazın
firstname,lastname,fullname,emailaddress1,telephone1
Kaydet ve Kapat'ı seçin.
Yeni'yi seçin.
Ad kutusuna, Webapi/error/innererror yazın.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Değer kutusuna true yazın.
Kaydet ve Kapat'ı seçin.
Web API'si için site ayarlarını doğrulayın.

2. Adım. İzinleri yapılandırın

Kullanıcıların Web API'si özelliğini kullanabilmesi için izinleri yapılandırmanız gerekir. Bu örnekte, tablo izinleri için İlgili kişi tablosunu etkinleştireceksiniz, Web API kullanarak bir web rolü oluşturacaksınız, İlgili kişi tablosunun tablo izinlerini Bu web rolüne ekleyecek ve web rolünü kullanıcıların Web API'sini kullanmalarına izin verecek şekilde kullanıcılara eklersiniz.

Sol bölmeden Portal Yönetimi uygulamasında, Tablo İzinleri'ni seçin.
Yeni'yi seçin.
Ad kutusuna, İlgili Kişi Tablosu İzni yazın.
Tablo Adı listesinde, İlgili kişi (ilgili kişi)'yi seçin.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Erişim Türü listesinde, Global'i seçin.
Ayrıcalıklar: Oku, Yaz, Oluştur ve Sil ayrıcalıkları.
Kaydet ve Kapat'ı seçin.

Web rolü oluşturma

Web sitenizde varolan bir Web rolünü kullanabilir veya yeni bir Web rolü oluşturabilirsiniz.

Sol bölmeden Web Rolleri öğesini seçin.
Yeni'yi seçin.
Ad kutusuna, Web API Kullanıcısı (veya bu işleve erişen kullanıcının rolünü en iyi yansıtan herhangi bir ad) girin.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Kaydet'i seçin.

İlgili tablo izinleri ekleme

Yeni veya mevcut web rolüyle, İlişkili > Tablo İzinleri'ni seçin.
Mevcut Tablo İzni Ekle'yi seçin.
Daha önce oluşturulan İlgili Kişi Tablo İzni'ni seçin.
Ekle'yi seçin.
Kaydet ve Kapat'ı seçin.

Web rolüne ilgili kişiler ekleme

Sol bölmeden İlgili Kişiler'i seçin.
Bu örnekte Web API'si için kullanmak istediğiniz bir ilgili kişiyi seçin.

Not

Bu ilgili kişi, Web API'sini sınamak için bu örnekte kullanılan kullanıcı hesabıdır. Portalınızda doğru ilgili kişiyi seçtiğinizden emin olun.
İlgili > Web Rolleri'ni seçin.
Varolan Web Rolü Ekle'yi seçin.
Daha önce oluşturulan Web API Kullanıcısı rolünü seçin.
Ekle'yi seçin.
Kaydet ve Kapat'ı seçin.

3. Adım. Web sayfası oluşturma

Artık Web API'sini etkinleştirdiğinize ve Kullanıcı izinlerini yapılandırdığınıza göre, kayıtları görüntülemek, düzenlemek, oluşturmak ve silmek için örnek kodla bir Web sayfası oluşturun.

Sol bölmeden Portal Yönetimi uygulamasında, Web Sayfaları'nı seçin.
Yeni'yi seçin.
Ad kutusuna, Webapi'yi girin.
Web sitesi listesinde, Web sitesi kaydınızı seçin.
Üst Sayfa için Giriş'i seçin.
Kısmı URL için, webapi girin.
Sayfa Şablonu için Giriş'i seçin.
Yayın Durumu için Yayınlandı'yı seçin.
Kaydet'i seçin.
İlgili > Web Sayfaları'nı seçin.
Web sayfası İlişkilendirilmiş görünümü'nden WebApi öğesini seçin.
İçerik bölümüne gidin ve kopyaya (HTML) (HTML Tasarımcısı) gidin.
HTML sekmesini seçin.

Aşağıdaki örnek kod parçacığını kopyalayıp HTML Tasarımcısına yapıştırın.

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

Kodu yapıştırın.

Kaydet ve Kapat'ı seçin.

4. Adım. Portallar önbelleğini temizleme

Web API işlevini test etmek için bir webapi örnek sayfası oluşturdunuz. Başlamadan önce Portal yönetimi uygulamasından yapılan değişikliklerin portala yansıtılması için Power Apps portalları önbelleğinin temizlenmiş olduğundan emin olun.

ÖNEMLİ: Portal sunucu tarafı önbelleğini temizlemek, Microsoft Dataverse üzerinden veriler yeniden yüklenirken portalda geçici performans düşüşüne neden olur.

Önbelleği temizlemek için:

Portalınızdaki Yöneticiler web rolünün bir üyesi olarak oturum açın.
URL'yi sonuna /_services/about ekleyerek değiştirin. Örneğin, Portal URL'si https://contoso.powerappsportals.com ise https://contoso.powerappsportals.com/_services/about olarak değiştirin.

NOT: Önbelleği temizlemek için Yöneticiler web rolünün üyesi olmanız gerekiyor. Boş bir ekran görürseniz, Web rolü atamalarını kontrol edin.
Önbelleği temizle'yi seçin.

Daha fazla bilgi: Portalın sunucu tarafı önbelleğini temizleme

Adım 5. Web API'sini okumak, görüntülemek, düzenlemek, oluşturmak ve silmek için kullanın

Önceden oluşturulmuş URL'yi içeren örnek webapi şimdi sınamaya hazır durumdadır.

Web API işlevini test etmek için:

Daha önce oluşturduğunuz Web API kullanıcısı rolü atanmış olan kullanıcı hesabıyla portalınıza oturum açın.
Daha önce oluşturulan webapi Web sayfasına gidin. Örneğin, https://contoso.powerappsportals.com/webapi. WebAPI Microsoft Dataverse'den kayıtları alır.
Komut dosyasından örnek kayıt eklemek için örnek kayıt Ekle öğesini seçin.
Bir alan seçin. Bu örnekte, bir kişinin e-posta adresini değiştirmek için e-posta'yı seçtik.
Kayıt silmek için düğmesini seçin.

Artık kayıtları okumak, düzenlemek, oluşturmak ve silmek için bir örnek içeren bir Web sayfası oluşturdunuz, formlarını ve düzenini özelleştirebilirsiniz.

Sonraki adım

HTTP isteklerini oluşturma ve hataları işleme

Ayrıca bkz.

Portallar Web API'sına genel bakış
Web API kullanarak portalları yazma, güncelleştirme ve silme işlemleri
Web API kullanan portal okuma işlemleri
Sütun izinleri yapılandırma

Not

Belge dili tercihlerinizi bizimle paylaşabilir misiniz? Kısa bir ankete katılın. (lütfen bu anketin İngilizce olduğunu unutmayın)

Anket yaklaşık yedi dakika sürecektir. Kişisel veri toplanmaz (gizlilik bildirimi).

Aracılığıyla paylaş