Nola: erabili Web API ataria

Gida honetan, web-orri eta -txantiloi pertsonalizatua konfiguratuko duzu, kontaktuen taulako erregistroak irakurri, idatzi, eguneratu eta ezabatzeko Web-APIa erabiliko duena.

Oharra

Zutabeen izenak alda ditzakezu edo beste taula bat erabil dezakezu, adibide honetako urratsei jarraituz.

1. urratsa. Sprti gune-ezarpenak

Atarien Web APIa erabili aurretik, beharrezko gunearen ezarpenak gaitu behar dituzu Portal Management aplikazioarekin. Webaren ezarpenak Web APIarekin elkarreraginean erabili nahi duzun taularen araberakoak dira.

1. Hasi Ataria kudeaketa aplikazioa.

2. Portal Management aplikazioaren ezkerreko panelean, hautatu Gunearen ezarpenak.

   

3. Hautatu Berria.

4. Izena kutxa, sartu Webapi / kontaktua / gaituta.

5. Webgunea zerrenda, hautatu zure webgunearen erregistroa.

6. Hurrengoan Balioa koadroa, idatzi egia.

   

7. Gorde eta itxi.

8. Hautatu Berria.

9. Izena kutxa, sartu Webapi / kontaktua / eremuak.

10. Webgunea zerrenda, hautatu zure webgunearen erregistroa.

11. Hurrengoan Balioa koadroa, idatzi
    izen-abizenak, izen-abizenak, helbide elektronikoa1, telefonoa1

    

12. Gorde eta itxi.

13. Hautatu Berria.

14. Izena kutxa, sartu Webapi / errorea/innererror.

    

15. Webgunea zerrenda, hautatu zure webgunearen erregistroa.

16. Hurrengoan Balioa koadroa, idatzi egia.

17. Gorde eta itxi.

18. Egiaztatu webgunearen ezarpenak Web APIa.

2. urratsa. Konfiguratu baimenak

Baimenak konfiguratu beharko dituzu erabiltzaileek Web API funtzioa erabili ahal izateko. Adibide honetan, web rol berria konfiguratu edo sortu behar baduzu, Web APIa erabiliko duena, taula-baimenak gehituko dituzu hurrengorako Kontaktua taula eta lotu taula-baimenak web rola, eta azkenean esleitu web rola erabiltzaileei ahalbidetzeko Web API erabiltzea.

Oharra

Web APIak taularen baimenak taula-baimenak hurrengotik datorrena web-rola testuingurua autentifikatutako erabiltzaile edo web rol anonimoa. Kontuan izan zure erabiltzaileek Web APIak behar dituen zure webguneko taula espezifikoetarako sarbidea duen web-rol bat duten dagoeneko. Ez duzu web-rol gehigarririk sortu behar Web APIa erabiltzeko.

Sortu web-funtzioa

Une honetan ez baduzu Web APIaren bidez atzitzen ari zaren taularako baimenik duen web-rol bat edo datuetara sartzeko testuinguru desberdina behar baduzu, hurrengo urratsak web-rol berri bat sortu eta taula-baimenak nola esleitu dezazun.

1. Hasi Ataria kudeaketa aplikazioa.

2. Ezkerreko panelean Segurtasuna atalean, hautatu Web-funtzioak .

3. Hautatu Berria.

4. Izena koadroan, idatzi Web-API erabiltzailea (edo funtzionalitatea atzitzen duen erabiltzailearen funtzioari ondoen dagokion edozein izen).

5. Webgunea zerrenda, hautatu zure webgunearen erregistroa.

   

6. Hautatu Gorde.

Sortu taula-baimenak

1. Abiarazi Power Pages diseinatu-estudioa.

2. Hautatu Konfiguratu laneko-arean.

3. Azpian Segurtasuna sekzioan, hautatu Taula-baimenak.

4. Hautatu Baimen berria.

5. Urtean Izena kutxa, sartu Jarri harremanetan mahaiaren baimena.

6. Urtean Taularen izena zerrenda, hautatu Harremanetarako (kontaktua).

7. Sarbide mota zerrendan, hautatu Orokorra.

8. Hautatu Irakurri, Idatzi, Sortu, eta Ezabatu pribilegioak.

9. Hautatu + Gehitu rolak eta hautatu web rola lehenago hautatu edo sortu duzun.

10. Gorde eta itxi.

    

Gehitu kontaktuak web-funtzioan

1. Hasi Ataria kudeaketa aplikazioa.

2. Ezkerreko panelean Segurtasuna atalean, hautatu Kontaktuak.

3. Hautatu erabili nahi duzun kontaktu bat adibide honetan Web API-rako.

   Oharra

   Web APIa probatzeko adibide honetan erabiltzen den erabiltzaile kontua da kontaktu hau. Ziurtatu zure atarian kontaktu zuzena hautatzen duzula.

4. Hautatu Erlazionatutakoa>Web funtzioak.

   

5. Hautatu Gehitu lehendik dagoen web-funtzioa.

6. Aukeratu Web API erabiltzailea rola, lehenago sortua.

7. Hautatu Gehitu.

   

8. Gorde eta itxi.

3. urratsa. Sortu web-orria

Web APIa gaitu eta erabiltzaileen baimenak konfiguratu dituzunean, sortu web orri bat lagin kodearekin erregistroak ikusi, editatu, sortu eta ezabatzeko.

1. Abiarazi Power Pages diseinatu-estudioa.

2. Orriak laneko arean, hautatu + Orria.

3. Gehitu orria eztabaida,

4. Izena laukian, sartu WebAPI eta hautatu Hasi hutsetik diseinua.

5. Hautatu Gehitu.

6. Hautatu goiko eskuineko izkinan Editatu kodea aukera.

7. Hautatu Ireki Visual Studio Code.

8. Kopiatu lagin-kode zati hau eta itsatsi orriaren ataleko <div></div> etiketen artean.

       <!-- 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. Hautatu KTRL-S kodea gordetzeko.

10. Diseinu-estudioan, hautatu Sinkronizatu eguneratzeko gunea kode edizioekin.

4. urratsa. Erabili Web-APIa ikusi, editatu, sortu eta ezabatzeko

Web APIaren funtzionalitatea probatzeko:

1. Aukeratu Aurreargitalpena eta, ondoren, aukeratu Mahaigaina.

2. Sartu zure gunean esleitutako erabiltzaile kontua erabiliz Web API erabiltzailea lehenago sortu zenuen rola.

3. Joan WebApi lehenago sortutako web orria.

   

4. Aukeratu Gehitu lagin-erregistroa script-aren laginaren erregistroa gehitzeko.

5. Hautatu eremua. Adibide honetan, hautatu dugu Posta elektronikoa kontaktu baten helbide elektronikoa aldatzeko.

   

6. Hautatu Ezabatu ikonoa ezabatzeko erregistroa.

Erregistroak irakurri, editatu, sortu eta ezabatzeko lagin batekin web-orri bat sortu duzunean, inprimakiak eta diseinua pertsonaliza ditzakezu.

Hurrengo urratsa

Sortu HTTP eskaerak eta kudeatu erroreak

Ikusi ere

• Web API informazio orokorra
• Web-APIa erabiltzen du idatzi, eguneratu eta ezabatzeko eragiketak egiteko
• Irakurri eragiketak Web APIa erabiliz
• Konfiguratu zutabe-baimenak