Жолы: порталдың веб API интерфейсін пайдалану

Бұл нұсқаулықта контактілер кестесіндегі жазбаларды оқу, жазу, жаңарту және жою үшін веб-API интерфейсін қолданатын веб-бетті және реттелетін веб-үлгіні орнатасыз.

Ескертпе

Осы мысалда көрсетілген қадамдарды орындау кезінде баған аттарын өзгертуге немесе басқа кестені пайдалануға болады.

1-қадам. Торап параметрлерін жасау

Порталдардың веб-API интерфейсін пайдаланбас бұрын, порталды басқару бағдарламасымен қажетті сайт параметрлерін қосуыңыз керек. Сайт параметрлері веб‑API интерфейсімен өзара әрекеттесу кезінде пайдалану керек кестеге байланысты.

1. Порталды басқару бағдарламасын іске қосыңыз.

2. Порталды басқару бағдарламасының сол жақ тақтасынан Сайт параметрлері опциясын таңдаңыз.

   

3. Жаңа пәрменін таңдаңыз.

4. Аты өрісінде Webapi/contact/enabled мәтінін енгізіңіз.

5. Веб-сайт тізімінде веб-сайтыңыздың жазбасын таңдаңыз.

6. Мән өрісінде шын мәнін енгізіңіз.

   

7. Сақтау және жабу пәрменін таңдаңыз.

8. Жаңа пәрменін таңдаңыз.

9. Аты өрісінде Webapi/contact/fields мәтінін енгізіңіз.

10. Веб-сайт тізімінде веб-сайтыңыздың жазбасын таңдаңыз.

11. Мән өрісіне енгізіңіз
    firstname,lastname,fullname,emailaddress1,telephone1

    

12. Сақтау және жабу пәрменін таңдаңыз.

13. Жаңа пәрменін таңдаңыз.

14. Аты өрісінде Webapi/error/innererror мәтінін енгізіңіз.

    

15. Веб-сайт тізімінде веб-сайтыңыздың жазбасын таңдаңыз.

16. Мән өрісінде шын мәнін енгізіңіз.

17. Сақтау және жабу пәрменін таңдаңыз.

18. Веб API үшін сайт параметрлерін тексеріңіз.

2-қадам. Рұқсаттарды конфигурациялау

Пайдаланушылар веб-API мүмкіндігін қолдана алуы үшін рұқсаттарды конфигурациялау керек болады. Бұл мысалда веб-API интерфейсін пайдаланатын жаңа веб-рөл орнатуыңыз немесе жасауыңыз керек болады, одан кейін Контактілер кестесінің кесте рұқсаттарын қосасыз және кесте рұқсатын веб-рөлмен байланыстырасыз, ақырында пайдаланушыларға веб‑API интерфейсін пайдалануға рұқсат беру үшін веб‑рөлді тағайындайсыз.

Ескертпе

Веб API интерфейсі аутентификацияланған пайдаланушы веб-рөлі немесе анонимді веб-рөл мәтінмәнінен келетін кесте рұқсаттарын орындайды. Пайдаланушыларыңызда веб API керек ететін веб-сайтыңыздағы белгілі бір кестелерге қатынасы бар веб-рөлі бар-жоғын қарастырыңыз. Тек веб API интерфейсін пайдалану үшін қосымша веб-рөлдер жасаудың керегі жоқ.

Веб-рөл жасаңыз

Қазіргі уақытта веб API арқылы қатынасатын кестеге рұқсаттары бар веб-рөліңіз болмаса немесе деректерге қатынасудың басқа мәтінмәнін қажет етсеңіз, жаңа веб-рөл жасау және кесте рұқсаттарын тағайындау үшін келесі қадамдар орындалады.

1. Порталды басқару бағдарламасын іске қосыңыз.

2. Сол жақ тақтада Қауіпсіздік бөлімінде Веб-рөлдер параметрін таңдаңыз.

3. Жаңа пәрменін таңдаңыз.

4. Аты өрісіне Веб-API пайдаланушысы деп енгізіңіз (немесе осы функцияға қатынасатын пайдаланушының рөлін көрсететін кез келген атау).

5. Веб-сайт тізімінде веб-сайтыңыздың жазбасын таңдаңыз.

   

6. Сақтау опциясын таңдаңыз.

Кесте рұқсаттарын жасау

1. Power Pages дизайн студиясын іске қосыңыз.

2. Реттеу жұмыс кеңістігін таңдаңыз.

3. Қауіпсіздік бөлімінде Кесте рұқсаттары параметрін таңдаңыз.

4. Жаңа рұқсат опциясын таңдаңыз.

5. Атауы өрісіне Контакт кесте рұқсаты деп енгізіңіз.

6. Кесте атауы тізімінде Контакт (контакт) параметрін таңдаңыз.

7. Қатынасу түрі тізімінен Глобалдық параметрін таңдаңыз.

8. Артықшылықтарды Оқу, Жазу, Жасау және Жою опцияларын таңдаңыз.

9. + Рөлдер қосу параметрін таңдап, сіз таңдаған немесе жасаған веб-рөлді таңдаңыз.

10. Сақтау және жабу пәрменін таңдаңыз.

    

Веб-рөлге контактілерді қосу

1. Порталды басқару бағдарламасын іске қосыңыз.

2. Сол жақ тақтада Қауіпсіздік бөлімінде Контактілер параметрін таңдаңыз.

3. Осы мысалда веб-API үшін пайдалану керек контактіні таңдаңыз.

   Ескертпе

   Бұл контакт веб-API интерфейсін тексеру үшін осы мысалда пайдаланылған пайдаланушы тіркелгісі болып табылады. Порталда дұрыс контактіні таңдаңыз.

4. Байланысты>Веб рөлдер опциясын таңдаңыз.

   

5. Бұрыннан бар веб-рөлдерді қосу параметрін таңдаңыз.

6. Бұрын жасалған Веб API пайдаланушысы рөлін таңдаңыз.

7. Қосу параметрін таңдаңыз.

   

8. Сақтау және жабу пәрменін таңдаңыз.

3-қадам. Веб-бет жасау

Енді сіз веб-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-қадам. Оқу, көру, өңдеу, жасау және жою үшін веб-API интерфейсін пайдалану

Веб-API жұмысын тексеру үшін:

1. Алдын ала көру параметрін таңдап, Жұмыс үстелі параметрін таңдаңыз.

2. Бұрын жасаған Веб API пайдаланушысы рөлі тағайындалған пайдаланушысы тіркелгісімен сайтқа кіріңіз.

3. Бұрын жасалған WebApi веб-бетіне өтіңіз.

   

4. Сценарийден үлгі жазбасын қосу үшін Үлгі жазбасын қосу опциясын таңдаңыз.

5. Өрісті таңдаңыз. Бұл мысалда контактінің электрондық пошта мекенжайын өзгерту үшін біз Электрондық пошта қойыншасын таңдадық.

   

6. Жазбаны біржола жою үшін Жою белгішесін таңдаңыз.

Жазбаларды өңдеу, қарау, өңдеу, жасау және жою үшін үлгісі бар веб-бет жасағаннан кейін, енді сіз пішіндер мен орналасуды реттей аласыз.

Келесі қадам

HTTP сұрауларын құрастыру және қателерді өңдеу

Келесіні де қараңыз:

• Веб-API интерфейсіне шолу
• Веб-API арқылы жазу, жаңарту және жою операциялары
• Веб-API арқылы оқу операциялары
• Баған рұқсаттарын конфигурациялау