Hướng dẫn: Cách sử dụng API web cổng thông tin

Chia sẻ qua

Trong chỉ dẫn này, các bạn sẽ thiết lập một trang web và kiểu trang web tùy chỉnh, nhập tê liệt dùng API trang web nhằm gọi, ghi, update và xóa những phiên bản ghi ngoài bảng tương tác.

Lưu ý

Bạn rất có thể thay cho thay tên cột hoặc dùng một bảng không giống trong lúc tuân theo quá trình nhập ví dụ này.

Bước 1. Tạo thiết đặt điều site

Trước khi rất có thể dùng API Web cổng vấn đề, chúng ta cần nhảy thiết đặt điều trang web quan trọng với phần mềm Quản lý cổng vấn đề. Các mục thiết đặt điều trang web tùy theo bảng tuy nhiên bạn thích dùng khi tương tác với API trang web.

Đi đến Power Apps.
Ở ngăn phía bên trái, chọn Ứng dụng.
Chọn ứng dụng Quản lý cổng thông tin .
Trên ngăn phía bên trái của ứng dụng Quản lý cổng thông tin , hãy chọn Cài đặt điều trang.
Chọn Mới.
Trong hộp Tên , nhập Webapi/contact/enabled.
Trong danh sách Trang web , nên chọn phiên bản ghi trang web của công ty.
Trong hộp Giá trị , nhập true.
Chọn Lưu & Đóng.
Chọn Mới.
Trong hộp Tên , hãy nhập Webapi/contact/fields.
Trong danh sách Trang web , nên chọn phiên bản ghi trang web của công ty.
Trong hộp Giá trị , hãy nhập
firstname,lastname,fullname,emailaddress1,telephone1
Chọn Lưu & Đóng.
Chọn Mới.
Trong hộp Tên , hãy nhập Webapi/error/innererror.
Trong danh sách Trang web , nên chọn phiên bản ghi trang web của công ty.
Trong hộp Giá trị , nhập true.
Chọn Lưu & Đóng.
Xác minh setup trang web cho API Web.

Bước 2. Đặt cấu hình quyền

Bạn sẽ rất cần ấn định thông số kỹ thuật quyền nhằm người tiêu dùng rất có thể dùng công dụng API Web. Trong ví dụ này, các bạn sẽ kích hoạt bảng Người liên hệ cho tới quyền so với bảng, tạo nên tầm quan trọng trang web nhằm dùng API trang web, thêm thắt quyền so với bảng cho tới bảng Người liên hệ nhập tầm quan trọng trang web này, rồi thêm thắt tầm quan trọng trang web cho những người sử dụng làm cho quy tắc chúng ta dùng API trang web.

Trên ngăn phía bên trái của ứng dụng Quản lý cổng thông tin , chọn Quyền bảng.
Chọn Mới.
Trong hộp Tên , nhập Quyền bảng liên hệ.
Trong danh sách Tên bảng , hãy chọn Liên hệ (liên hệ).
Trong danh sách Trang web , nên chọn phiên bản ghi trang web của công ty.
Trong danh sách Loại truy cập , chọn Chung.
Chọn quyền Đọc, Ghi, Tạo và Xóa.
Chọn Lưu & Đóng.

Tạo tầm quan trọng web

Bạn rất có thể dùng một tầm quan trọng trang web hiện tại đem nhập trang web của tớ hoặc tạo nên một tầm quan trọng trang web mới nhất.

Ở ngăn phía bên trái, hãy chọn Vai trò web .
Chọn Mới.
Trong hộp Tên , hãy nhập Người sử dụng API Web (hoặc ngẫu nhiên thương hiệu này phản ánh trúng nhất tầm quan trọng của người tiêu dùng truy vấn tác dụng này).
Trong danh sách Trang web , nên chọn phiên bản ghi trang web của công ty.
Chọn Lưu.

Thêm quyền so với bảng liên quan

Với tầm quan trọng trang web mới nhất hoặc hiện tại đem, hãy chọn Liên quan > Quyền bảng.
Chọn Thêm quyền bảng hiện tại có.
Chọn Quyền bảng liên hệ, được tạo nên trước tê liệt.
Chọn Thêm.
Chọn Lưu & Đóng.

Thêm người tương tác nhập tầm quan trọng web

Ở ngăn phía bên trái, hãy chọn Danh bạ.
Chọn một địa điểm tương tác tuy nhiên bạn thích dùng nhập ví dụ này cho tới API Web.

Lưu ý

Địa chỉ tương tác này là thông tin tài khoản người tiêu dùng được dùng nhập ví dụ này nhằm đánh giá API Web. Đảm bảo lựa chọn trúng địa điểm tương tác nhập cổng vấn đề của công ty.
Chọn **** > Vai trò web đem tương quan.
Chọn Thêm tầm quan trọng trang web hiện tại có.
Chọn vai trò Người sử dụng API Web đã tạo nên trước tê liệt.
Chọn Thêm.
Chọn Lưu & Đóng.

Bước 3. Tạo trang web

Bây giờ chúng ta đang được nhảy API Web và ấn định thông số kỹ thuật quyền của người tiêu dùng, hãy tạo nên một trang web với mã kiểu nhằm coi, sửa đổi, tạo nên và xóa phiên bản ghi.

Trên ngăn phía bên trái của ứng dụng Quản lý cổng thông tin , lựa chọn Trang web.
Chọn Mới.
Trong vỏ hộp Tên, hãy nhập webapi.
Trong list Trang web, nên chọn phiên bản ghi trang web của công ty.
Đối với Trang chính, lựa chọn Trang chủ.
Đối với URL một phần, hãy nhập webapi.
Đối với Mẫu trang, lựa chọn Trang chủ.
Đối với Trạng thái trừng trị hành, lựa chọn Đã trừng trị hành.
Chọn Lưu.
Chọn Có liên quan > Trang web.
Trong mục Dạng coi links của trang web, nên chọn webapi.
Cuộn xuống phần Nội dung, tiếp sau đó gửi cho tới mục Sao chép (HTML) (Trình kiến thiết HTML).
Chọn tab HTML.

Sao chép và dán đoạn mã sau nhập trình kiến thiết 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 u = this,
          columns = config.columns,
          addHandler = config.addHandler,
          deleteHandler = config.deleteHandler,
          $table;
        u.render = function(el) {
          $table = $(el).html(_.template(tableTpl)({
            columns: columns,
            data: u.data
          })).find('table');
          bindTableEvents($table, {
            columns: columns,
            addHandler: addHandler,
            deleteHandler: deleteHandler
          });
        }
        u.addRecord = function(record) {
          $table.find('tbody tr:first').before(_.template(trTpl)({
            columns: columns,
            data: [record]
          }));
          bindRowEvents($table.find('tbody tr:first'), config);
        }
        u.updateRecord = function(attributeName, newValue, record) {
          $table.find('tr[data-id="' + record.id + '"] td[data-attribute="' + attributeName + '"]').text(newValue);
        }
        u.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 lớn create a record - change as appropriate
      var recordObj = {
        firstname: "Willie",
        lastname: "Huff" + _.random(100, 999),
        emailaddress1: "[email protected]",
        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 lớn 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>

Dán mã.

Chọn Lưu & Đóng.

Bước 4. Xóa bộ lưu trữ đệm cổng thông tin

Bạn đang được tạo nên một trang mẫu webapi để đánh giá tác dụng API Web. Trước khi chúng ta chính thức, hãy đảm nói rằng bộ lưu trữ đệm cổng vấn đề Power Apps và đã được xóa nhằm những thay cho thay đổi kể từ phần mềm Quản lý cổng vấn đề được phản ánh bên trên cổng vấn đề của công ty.

QUAN TRỌNG: Việc xóa cỗ đệm ẩn phía sever của cổng vấn đề tiếp tục trong thời điểm tạm thời thực hiện hiệu suất cổng vấn đề sụt tách trong lúc tài liệu đang rất được vận chuyển lại kể từ Microsoft Dataverse.

Để xóa cỗ đệm ẩn:

Đăng nhập nhập cổng vấn đề với tầm quan trọng member đem tầm quan trọng trang web Quản trị viên.
Thay thay đổi URL bằng phương pháp nối thêm /_ services/about ở cuối. Ví dụ: nếu như URL cổng vấn đề là https://contoso.powerappsportals.com, hãy thay đổi nó thành https://contoso.powerappsportals.com/_services/about.

LƯU Ý: Quý khách hàng cần là member của tầm quan trọng web Quản trị viên để xóa cỗ đệm. Nếu chúng ta thấy một màn hình hiển thị trống không, hãy đánh giá những đợt gán tầm quan trọng trang web.
Chọn Xóa bộ lưu trữ cache.

Thông tin yêu thêm: Xóa bộ lưu trữ đệm phía sever cho 1 cổng thông tin

Bước 5. Sử dụng API trang web nhằm ghi, coi, sửa đổi, tạo nên và xóa

Trang trang web kiểu đem URL webapi được tạo nên trước tê liệt giờ đang được sẵn sàng nhằm demo nghiệm.

Cách đánh giá tác dụng API Web:

Đăng nhập nhập cổng vấn đề của công ty vày thông tin tài khoản người tiêu dùng và đã được hướng đẫn tầm quan trọng Người sử dụng API Web tuy nhiên chúng ta đang được tạo nên trước tê liệt.
Đi cho tới trang web webapi được tạo nên trước tê liệt. Ví dụ, https://contoso.powerappsportals.com/webapi. WebAPI tiếp tục truy xuất những phiên bản ghi kể từ Microsoft Dataverse.
Chọn Thêm phiên bản ghi mẫu nhằm thêm thắt phiên bản ghi kiểu kể từ tập luyện mệnh lệnh.
Chọn một ngôi trường. Trong ví dụ này, công ty chúng tôi đang được lựa chọn Email để thay thế thay đổi địa điểm gmail của một tương tác.
Chọn nhằm xóa phiên bản ghi.

Bây giờ chúng ta đang được tạo nên một trang web với cùng 1 kiểu nhằm ghi, sửa đổi, tạo nên và xóa phiên bản ghi, chúng ta có thể tùy chỉnh những biểu kiểu và bố cục tổng quan.

Bước tiếp theo

Soạn những đòi hỏi HTTP và xử lý lỗi

Xem thêm

Tổng quan lại API trang web cổng thông tin
Thao tác ghi, update và xóa cổng vấn đề vày Web API
Các hoạt động và sinh hoạt gọi cổng dùng API Web
Đặt thông số kỹ thuật những quyền so với cột