Aracılığıyla paylaş


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

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.

  1. Portal Yönetimi uygulamasını başlatın.

  2. Portal Yönetimi uygulamasının sol bölmesinde, Site Ayarları'nı seçin.

    Portal Yönetimi uygulamasındaki site ayarlarını açın.

  3. Yeni'yi seçin.

  4. Ad kutusuna, Webapi/contact/enabled yazın.

  5. Web sitesi listesinde, Web sitesi kaydınızı seçin.

  6. Değer kutusuna true yazın.

    WebAPI site ayarı için kişi tablosunu etkinleştirin.

  7. Kaydet ve Kapat'ı seçin.

  8. Yeni'yi seçin.

  9. Ad kutusuna, Webapi/contact/fields yazın.

  10. Web sitesi listesinde, Web sitesi kaydınızı seçin.

  11. Değer kutusuna şunu yazın
    firstname,lastname,fullname,emailaddress1,telephone1

    Alanlar site ayarı için Web API tablosunu etkinleştirin.

  12. Kaydet ve Kapat'ı seçin.

  13. Yeni'yi seçin.

  14. Ad kutusuna, Webapi/error/innererror yazın.

    Web API iç hata sitesi ayarını etkinleştirin.

  15. Web sitesi listesinde, Web sitesi kaydınızı seçin.

  16. Değer kutusuna true yazın.

  17. Kaydet ve Kapat'ı seçin.

  18. 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.

  1. Portal Yönetimi uygulamasını başlatın.

  2. Sol bölmedeki Güvenlik bölümünde, Web Rolleri'ni seçin.

  3. Yeni'yi seçin.

  4. 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.

  5. Web sitesi listesinde, Web sitesi kaydınızı seçin.

    Web API kullanıcısı web rolü ekleyin.

  6. Kaydet'i seçin.

Tablo izinleri oluşturma

  1. Power Pages tasarım stüdyosunu başlatın.

  2. Güvenlik çalışma alanını seçin.

  3. Koru bölümü altında Tablo izinleri'ni seçin.

  4. Yeni izin'i seçin.

  5. Ad kutusuna, İlgili Kişi Tablosu İzni'ni girin.

  6. Tablo Adı listesinde, İlgili Kişi (ilgili kişi)'yi seçin.

  7. Erişim Türü listesinde, Genel'i seçin.

  8. Ayrıcalıklar: Oku, Yaz, Oluştur ve Sil ayrıcalıkları.

  9. + Rol ekle'yi, ardından seçtiğiniz ya da daha önce oluşturduğunuz web rolünü seçin.

  10. Kaydet ve Kapat'ı seçin.

    İlgili kişi tablo izinleri.

Web rolüne ilgili kişiler ekleme

  1. Portal Yönetimi uygulamasını başlatın.

  2. Sol bölmedeki Güvenlik bölümünde, İlgili kişiler'i seçin.

  3. 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.

  4. İlgili>Web Rolleri'ni seçin.

    İlgili web rollerini seçin.

  5. Varolan Web rolü Ekle'yi seçin.

  6. Daha önce oluşturulan Web API'si Kullanıcı rolünü seçin.

  7. Ekle'yi seçin.

    Web rolü ilişkili görünümü.

  8. 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.

  1. Power Pages tasarım stüdyosunu başlatın.

  2. Sayfalar çalışma alanında + Sayfa'yı seçin.

  3. Sayfa ekle iletişim kutusunda,

  4. Ad kutusunda, WebAPI yazın ve Sıfırdan başla düzenini seçin.

  5. Ekle'yi seçin.

  6. Sağ üst köşedeki Kodu Düzenle seçeneğini belirleyin.

  7. Visual Studio Code'u Aç'ı seçin.

  8. 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.

  9. Kodu kaydetmek için CTRL-S tuşlarını seçin.

  10. 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:

  1. Önizleme'yi ve ardından Masaüstü'nü seçin.

  2. Daha önce oluşturduğunuz Web API'si kullanıcısı rolü atanmış olan kullanıcı hesabıyla sitenizde oturum açın.

  3. Daha önce oluşturulan WebApi Web sayfasına gidin.

    Örnek webapi Web sayfası.

  4. Komut dosyasından örnek kayıt eklemek için örnek kayıt Ekle öğesini seçin.

  5. Bir alan seçin. Bu örnekte, bir kişinin e-posta adresini değiştirmek için e-posta'yı seçtik.

    E-postayı düzenle

  6. 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

Ayrıca bkz.