通过

操作方法：使用门户 Web API

  • 项目

在本指南中，您将设置一个网页和自定义 Web 模板，它们将使用 Web API 从联系人表读取、写入、更新和删除记录。

备注

执行本示例中的步骤时您可以更改列名称或使用不同表。

第 1 步。 创建网站设置

您必须先使用“门户管理”应用启用所需的站点设置，然后才能使用门户 Web API。 站点设置取决于与 Web API 交互时将使用的表。

  1. 启动门户管理应用。

  2. 在门户管理应用的左窗格中，选择站点设置。

    在门户管理应用中打开站点设置。

  3. 选择新建。

  4. 在名称框中，输入 Webapi/contact/enabled。

  5. 在网站列表中，选择您的网站记录。

  6. 在值框中输入 true。

    为 Web API 站点设置启用联系人表。

  7. 选择保存并关闭。

  8. 选择新建。

  9. 在名称框中，输入 Webapi/contact/fields。

  10. 在网站列表中，选择您的网站记录。

  11. 在值框中，输入
    firstname,lastname,fullname,emailaddress1,telephone1

    启用 Web API 联系人表字段站点设置。

  12. 选择保存并关闭。

  13. 选择新建。

  14. 在名称框中，输入 Webapi/error/innererror。

    启用 Web API 内部错误站点设置。

  15. 在网站列表中，选择您的网站记录。

  16. 在值框中输入 true。

  17. 选择保存并关闭。

  18. 验证 Web API 的站点设置。

步骤 2. 配置权限

您必须配置权限，以便用户能够使用 Web API 功能。 在此示例中，您将需要设置或新建将使用该 Web API 的 Web 角色，然后添加联系人表的表权限并将该表权限关联到此 Web 角色，最后将此 Web 角色分配给用户以允许他们使用 Web API。

备注

Web API 遵循来自经过身份验证的用户或匿名 Web 角色的 Web 角色上下文的表权限。 考虑您的用户是否已经具有 Web API 所需的可以访问网站中特定表的 Web 角色。 您不需要只为使用 Web API 而创建额外的 Web 角色。

创建 Web 角色

如果您当前没有对要通过 Web API 访问的表具有权限的 Web 角色，或者需要不同的数据访问上下文，请按照以下步骤创建新的 Web 角色并分配表权限。

  1. 启动门户管理应用。

  2. 在左窗格的安全性部分中，选择 Web 角色。

  3. 选择新建。

  4. 在名称框中，输入 Web API 用户（或最能反映访问此功能的用户角色的任何名称）。

  5. 在网站列表中，选择您的网站记录。

    添加 Web API 用户 Web 角色。

  6. 选择保存。

创建表权限

  1. 启动 Power Pages 设计工作室。

  2. 选择安全性工作区。

  3. 在保护部分下，选择表权限。

  4. 选择新建权限。

  5. 在名称框中，输入联系人表权限。

  6. 在表名称列表中，选择联系人（联系人）。

  7. 在访问类型列表中，选择全局。

  8. 选择读取、写入、创建和删除权限。

  9. 选择 + 添加角色，然后选择您之前选择或创建的 Web 角色。

  10. 选择保存并关闭。

    联系人表权限。

将联系人添加到 Web 角色

  1. 启动门户管理应用。

  2. 在左窗格的安全性部分中，选择联系人。

  3. 选择要在此示例中用于 Web API 的联系人。

    备注

    此联系人是在此示例中用于测试 Web API 的用户帐户。 请务必在您的门户中选择正确的联系人。

  4. 选择相关>Web 角色。

    选择相关 Web 角色。

  5. 选择添加现有 Web 角色。

  6. 选择之前创建的 Web API 用户角色。

  7. 选择添加。

    Web 角色关联视图。

  8. 选择保存并关闭。

步骤 3. 创建网页

现在，您已启用 Web API 并且配置了用户权限，请创建一个带有示例代码的网页以查看、编辑、创建和删除记录。

  1. 启动 Power Pages 设计工作室。

  2. 在页面工作区中，选择 + 页面。

  3. 在添加页面对话将中，

  4. 在名称框中，输入 WebAPI，然后选择从空白开始布局。

  5. 选择添加。

  6. 选择右上角的编辑代码选项。

  7. 选择打开 Visual Studio Code。

  8. 复制以下示例代码片段，然后将其粘贴到页面部分的 <div></div> 标记之间。

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

    粘贴代码。

  9. 选择 CTRL-S 以保存代码。

  10. 在设计工作室中，选择同步以使用代码编辑更新站点。

步骤 4. 使用 Web API 读取、查看、编辑、创建和删除

要测试 Web API 功能：

  1. 选择预览，然后选择桌面。

  2. 使用已分配有您先前创建的 Web API 用户角色的用户帐户登录站点。

  3. 转到先前创建的 WebApi 网页。

    示例 webapi 网页。

  4. 选择添加示例记录从脚本添加示例记录。

  5. 选择字段。 在此示例中，我们已选择电子邮件以更改联系人的电子邮件地址。

    编辑电子邮件

  6. 选择删除图标删除记录。

现在，您已经创建了一个包含读取、编辑、创建和删除记录示例的网页，您可以自定义窗体和布局了。

下一步

编写 HTTP 请求并处理错误

另请参见