Nasıl yapılır: Portal Web API'sini kullanma

Makale
09/20/2024

Bu kılavuzda, 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.

Portal Yönetimi uygulamasını başlatın.
Portal Yönetimi uygulamasının sol bölmesinde, 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, Web API'si kullanacak yeni bir web rolü ayarlayacak veya oluşturacaksınız, ardından İlgili kişi tablosunun tablo izinlerini ekleyecek ve tablo izinlerini web rolüyle ilişkilendireceksiniz. Son olarak da Web API'sini kullanmalarına izin vermek üzere bu web rolünü kullanıcılara atayacaksınız.

Not

Web API'si, kimliği doğrulanmış kullanıcı veya anonim web rolünün web rolü bağlamından gelen tablo izinlerini izler. Kullanıcılarınızın, Web API'sinin ihtiyaç duyduğu web sitenizdeki belirli tablolara erişimi olan bir web rolünün olup olmadığını göz önünde bulundurun. Web API'sini kullanmak için ek web rolleri oluşturmanız gerekmez.

Web rolü oluşturma

Şu anda Web API'si üzerinden eriştiğiniz tablo için izinleri olan bir web rolüne sahip değilseniz veya verilere erişmek için farklı bağlam gerekiyorsa aşağıdaki adımlarda yeni web rolü oluşturmayı ve tablo izinlerini atamayı öğrenebilirsiniz.

Portal Yönetimi uygulamasını başlatın.
Sol bölmedeki Güvenlik bölümünde, Web Rolleri'ni seçin.
Yeni'yi seçin.
Ad kutusuna, Web API kullanıcısı (veya bu işlevselliğe 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.

Tablo izinleri oluşturma

Power Pages tasarım stüdyosunu başlatın.
Güvenlik çalışma alanını seçin.
Koru bölümü altında Tablo izinleri'ni seçin.
Yeni izin'i seçin.
Ad kutusuna, İlgili Kişi Tablosu İzni'ni girin.
Tablo Adı listesinde, İlgili Kişi (ilgili kişi)'yi seçin.
Erişim Türü listesinde, Genel'i seçin.
Ayrıcalıklar: Oku, Yaz, Oluştur ve Sil ayrıcalıkları.
+ Rol ekle'yi, ardından seçtiğiniz ya da daha önce oluşturduğunuz web rolünü seçin.
Kaydet ve Kapat'ı seçin.

Web rolüne ilgili kişiler ekleme

Portal Yönetimi uygulamasını başlatın.
Sol bölmedeki Güvenlik bölümünde, İ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'si Kullanıcı 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.

Power Pages tasarım stüdyosunu başlatın.
Sayfalar çalışma alanında + Sayfa'yı seçin.
Sayfa ekle iletişim kutusunda,
Ad kutusunda, WebAPI yazın ve Sıfırdan başla düzenini seçin.
Ekle'yi seçin.
Sağ üst köşedeki Kodu Düzenle seçeneğini belirleyin.
Visual Studio Code'u Aç'ı seçin.

Aşağıdaki örnek kod parçacığını kopyalayın ve sayfa bölümünün <div></div> etiketleri arası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.

Kodu kaydetmek için CTRL-S tuşlarını seçin.
Siteyi kod düzenlemeleriyle güncelleştirmek için tasarım stüdyosunda, Eşitle'yi seçin.

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

Web API işlevini test etmek için:

Önizleme'yi ve ardından Masaüstü'nü seçin.
Daha önce oluşturduğunuz Web API'si kullanıcısı rolü atanmış olan kullanıcı hesabıyla sitenizde oturum açın.
Daha önce oluşturulan WebApi Web sayfasına gidin.
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.
Kaydı silmek için Sil simgesini 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

Aracılığıyla paylaş