Упутство: Коришћење Web API-ја за портале

У овом водичу, подесићете веб-страницу и прилагођени веб-предложак који ће користити Web API за читање, писање, ажурирање и брисање записа из табеле контаката.

Напомена

Можете променити имена колона или користити другу табелу следећи кораке у овом примеру.

Корак 1. Креирајте поставке локације

Да бисте могли да користите Web API за портале, морате да омогућите потребне поставке локације помоћу апликације Управљање порталима. Поставке локације зависе од табеле коју желите да користите приликом интеракције са Web API-јем.

1. Покрените апликацију Управљање порталима.

2. У левом окну апликације Управљање порталима изаберите Поставке локације.

   

3. Изаберите Ново.

4. У поље Назив унесите Webapi/contact/enabled.

5. На листи Веб-локација изаберите запис ваше веб-локације.

6. У поље Вредност унесите true.

   

7. Изаберите Саве & Цлосе.

8. Изаберите Ново.

9. У поље Назив унесите Webapi/contact/fields.

10. На листи Веб-локација изаберите запис ваше веб-локације.

11. У поље Вредност унесите
    Име, презиме, пуно име, е-mailadresa1, telefon1

    

12. Изаберите Саве & Цлосе.

13. Изаберите Ново.

14. У поље Назив унесите Webapi/error/innererror.

    

15. На листи Веб-локација изаберите запис ваше веб-локације.

16. У поље Вредност унесите true.

17. Изаберите Саве & Цлосе.

18. Верификујте поставке локације за Web API.

2. корак Конфигурисање дозвола

Морате да конфигуришете дозволе тако да корисници могу да користе функцију Web API. У овом примеру ћете морати да подесите или креирате нову веб-улогу која ће користити Web API, затим ћете додати дозволе табеле за табелу Контакти и повезати дозволу за табелу са веб-улогом, а најзад ћете доделити веб-улогу корисницима да бисте им дозволили да користе Web API.

Напомена

Web API следи дозволе за табелу које долазе из контекста веб-улоге овлашћеног корисника или анонимне веб-улоге. Размислите о томе да ли ваши корисници већ имају веб-улогу која има приступ одређеним табелама на вашој веб-локацији које су потребне Web API-ју. Није потребно да креирате додатне веб-улоге само да бисте користили Web API.

Креирање веб-улоге

Ако тренутно немате веб-улогу са дозволама за табелу којој приступате путем Web API-ја или захтевате другачији контекст приступа подацима, следите кораке тако да креирате нову веб-улогу и доделите дозволе за табелу.

1. Покрените апликацију Управљање порталима.

2. У левом окну, у одељку Безбедност изаберите Веб-улоге.

3. Изаберите Ново.

4. У поље Назив унесите Корисник Web API-ја (или било које име које најбоље одражава улогу корисника који приступа овој функционалности).

5. На листи Веб-локација изаберите запис ваше веб-локације.

   

6. Изаберите ставку Сачувај.

Креирање дозвола за табеле

1. Покрените Power Pages студио за дизајнирање.

2. Изаберите радни простор Безбедност .

3. У одељку Заштити, изаберите Дозволе за табелу.

4. Изаберите Нова дозвола.

5. У пољу Назив унесите Дозвола за табелу Контакт.

6. У листи Назив табеле изаберите Контакт (contact).

7. У листи Тип приступа, изаберите Глобално.

8. Изаберите привилегије Читање, Писање, Креирање и Брисање.

9. Изаберите + Додај улоге и изаберите веб-улогу коју сте раније изабрали или креирали.

10. Изаберите Саве & Цлосе.

    

Додавање контаката у веб-улогу

1. Покрените апликацију Управљање порталима.

2. У левом окну, у одељку Безбедност изаберите Контакти.

3. Изаберите контакт који желите да користите у овом примеру за Web API.

   Напомена

   Овај контакт је кориснички налог који се користи у овом примеру за тестирање Web API-ја. Обавезно изаберите тачан контакт на свом порталу.

4. Изаберите Повезано>Веб-улоге.

   

5. Изаберите Додај постојећу веб-улогу.

6. Изаберите улогу Корисник Web API-ја која је креирана раније.

7. Изаберите Додај.

   

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 који сте раније креирали.

   

4. Изаберите Додај пример записа да бисте додали пример записа из скрипте.

5. Изаберите поље. У овом примеру смо изабрали Е-пошта за промену адресе е-поште контакта.

   

6. Изаберите икону Избриши да бисте избрисали запис.

Сада када сте креирали веб-страницу са узорком у овом примеру за читање, уређивање, креирање и брисање записа, можете прилагодити обрасце и распоред.

Следећи корак

Саставите ХТТП захтеве и рукујте грешкама

Погледајте и

• Преглед веб АПИ-ја
• Операције писања, ажурирања и брисања помоћу Веб АПИ-ја
• Операције читања помоћу Веб АПИ-ја
• Конфигуришите дозволе колоне