방법: 포털 웹 API 사용

아티클
09/20/2024

이 가이드에서는 웹 API를 사용하여 연락처 테이블에서 레코드를 읽고, 쓰고, 업데이트하고, 삭제할 웹 페이지 및 사용자 지정 웹 템플릿을 설정합니다.

노트

이 예의 단계를 수행하는 동안 열 이름을 변경하거나 다른 테이블을 사용할 수 있습니다.

1단계 사이트 설정 만들기

포털 웹 API를 사용하기 전에 포털 관리 앱에서 필요한 사이트 설정을 활성화해야 합니다. 사이트 설정은 웹 API와 상호 작용할 때 사용하려는 테이블에 따라 다릅니다.

포털 관리 앱을 시작합니다.
포털 관리 앱의 왼쪽 창에서 사이트 설정을 선택합니다.
새로 만들기를 선택합니다.
이름 상자에 Webapi/contact/enabled를 입력합니다.
웹 사이트 목록에서 웹 사이트 레코드를 선택합니다.
값 상자에 true를 입력합니다.
저장 및 닫기를 선택합니다.
새로 만들기를 선택합니다.
이름 상자에 Webapi/contact/fields를 입력합니다.
웹 사이트 목록에서 웹 사이트 레코드를 선택합니다.
값 상자에
firstname,lastname,fullname,emailaddress1,telephone1을 입력합니다.
저장 및 닫기를 선택합니다.
새로 만들기를 선택합니다.
이름 상자에 Webapi/error/innererror를 입력합니다.
웹 사이트 목록에서 웹 사이트 레코드를 선택합니다.
값 상자에 true를 입력합니다.
저장 및 닫기를 선택합니다.
웹 API의 사이트 설정을 확인합니다.

2단계. 권한 구성

사용자가 웹 API 기능을 사용할 수 있도록 권한을 구성해야 합니다. 이 예에서는 Web API를 사용할 새 웹 역할을 설정하거나 생성한 다음 연락처 테이블에 대한 테이블 권한을 추가하고 테이블 권한을 웹 역할에 연결하고 마지막으로 웹 API를 사용할 수 있도록 사용자에게 웹 역할을 할당해야 합니다.

노트

웹 API는 인증된 사용자 또는 익명 웹 역할의 웹 역할 컨텍스트에서 오는 테이블 권한을 따릅니다. 사용자에게 웹 API에 필요한 웹 사이트의 특정 테이블에 대한 액세스 권한이 있는 웹 역할이 이미 있는지 고려하십시오. Web API를 사용하기 위해 추가 웹 역할을 만들 필요는 없습니다.

웹 역할 만들기

현재 웹 API를 통해 액세스하는 테이블에 대한 권한이 있는 웹 역할이 없거나 데이터에 액세스하는 다른 컨텍스트가 필요한 경우 다음 단계를 통해 새 웹 역할을 만들고 테이블 권한을 할당하는 방법을 알 수 있습니다.

포털 관리 앱을 시작합니다.
왼쪽 창의 보안 섹션에서 웹 역할을 선택합니다.
새로 만들기를 선택합니다.
이름 상자에 웹 API 사용자(또는 이 기능에 액세스하는 사용자의 역할을 가장 잘 반영하는 이름)를 입력합니다.
웹 사이트 목록에서 웹 사이트 레코드를 선택합니다.
저장을 선택합니다.

테이블 권한 만들기

Power Pages 디자인 스튜디오를 시작합니다.
보안 작업 영역을 선택합니다.
보호 섹션에서 테이블 권한을 선택합니다.
새 권한을 선택합니다.
이름 상자에서 연락처 테이블 권한을 입력합니다.
테이블 이름 목록에서 연락처(연락처)를 선택합니다.
액세스 형식 목록에서 전역을 선택합니다.
읽기, 쓰기, 만들기 및 삭제 권한을 선택합니다.
+ 역할 추가를 선택하고 이전에 선택하거나 생성한 웹 역할을 선택합니다.
저장하고 닫기를 선택합니다.

웹 역할에 연락처 추가

포털 관리 앱을 시작합니다.
왼쪽 창의 보안 섹션에서 연락처를 선택합니다.
웹 API 예제에서 사용할 연락처를 선택합니다.

노트

이 연락처는 웹 API를 테스트하기 위해 이 예제에서 사용되는 사용자 계정입니다. 포털에서 올바른 연락처를 선택해야 합니다.
관련 항목>웹 역할을 선택합니다.
기존 웹 역할 추가를 선택합니다.
앞에서 만든 웹 API 사용자 역할을 선택합니다.
추가를 선택합니다.
저장 및 닫기를 선택합니다.

3단계. 웹 페이지 만들기

이제 웹 API를 활성화하고 사용자 권한을 구성했으므로 레코드를 보고 편집하고 만들고 삭제할 수 있는 샘플 코드가 포함된 웹 페이지를 만듭니다.

Power Pages 디자인 스튜디오를 시작합니다.
페이지 작업 영역에서 + 페이지를 선택합니다.
페이지 추가 대화 상자에서,
이름 상자에 WebAPI를 입력하고 공백에서 시작 레이아웃을 선택합니다.
추가를 선택합니다.
오른쪽 상단 모서리에서 코드 편집 옵션을 선택합니다.
Visual Studio Code 열기를 선택합니다.

다음 샘플 코드 조각을 복사하여 페이지 섹션의 <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>

코드를 붙여넣습니다.

CTRL-S를 선택하여 코드를 저장합니다.
디자인 스튜디오에서 동기화를 선택하여 코드 편집으로 사이트를 업데이트합니다.

4단계. 웹 API를 사용하여 읽기, 보기, 편집, 생성 및 삭제

웹 API 기능을 테스트하려면 다음을 수행하십시오.

미리 보기를 선택하고 데스크톱을 선택합니다.
앞에서 만든 웹 API 사용자 역할이 할당된 사용자 계정으로 사이트에 로그인합니다.
앞에서 만든 WebApi 웹 페이지로 이동합니다.
샘플 레코드 추가를 선택하고 스크립트에서 샘플 레코드를 추가합니다.
필드를 선택합니다. 이 예에서는 이메일을 선택하여 연락처의 이메일 주소를 변경합니다.
삭제 아이콘을 선택하여 레코드를 삭제합니다.

레코드를 읽고, 편집하고, 만들고, 삭제할 수 있는 샘플이 포함된 웹 페이지를 만들었으므로 이제 양식과 레이아웃을 사용자 지정할 수 있습니다.

다음 단계

HTTP 요청 작성 및 오류 처리

다음을 통해 공유