Τρόπος: χρήση API Web πύλης

Σε αυτόν τον οδηγό, θα ρυθμίσετε μια ιστοσελίδα και ένα προσαρμοσμένο πρότυπο web που θα χρησιμοποιεί το ΑΡΙ Web για την ανάγνωση, εγγραφή, ενημέρωση και διαγραφή καρτελών από τον πίνακα επαφών.

Σημείωμα

Μπορείτε να αλλάξετε τα ονόματα των στηλών ή να χρησιμοποιήσετε έναν διαφορετικό πίνακα, ακολουθώντας τα βήματα σε αυτό το παράδειγμα.

Βήμα 1. Ρυθμίσεις δημιουργίας τοποθεσίας

Για να μπορέσετε να χρησιμοποιήσετε τις πύλες Web API, πρέπει να ενεργοποιήσετε τις απαιτούμενες ρυθμίσεις τοποθεσίας με την εφαρμογή Διαχείριση πύλης. Οι ρυθμίσεις τοποθεσίας εξαρτώνται από τον πίνακα που θέλετε να χρησιμοποιήσετε κατά την αλληλεπίδραση με το ΑΡΙ Web.

1. Ξεκινήστε την εφαρμογή Διαχείριση πύλης.

2. Στο αριστερό τμήμα παραθύρου της εφαρμογής Διαχείριση πύλης, επιλέξτε Ρυθμίσεις τοποθεσίας.

   

3. Επιλέξτε Νέα.

4. Στο πλαίσιο Όνομα, πληκτρολογήστε Webapi/Contact/enabled.

5. Στη λίστα Τοποθεσίες Web, επιλέξτε την καρτέλα της τοποθεσίας web σας.

6. Στο πλαίσιο Τιμή, καταχωρίστε αληθές.

   

7. Επιλέξτε Αποθήκευση και κλείσιμο.

8. Επιλέξτε Νέα.

9. Στο πλαίσιο Όνομα, πληκτρολογήστε Webapi/contact/fields.

10. Στη λίστα Τοποθεσίες Web, επιλέξτε την καρτέλα της τοποθεσίας web σας.

11. Στο πλαίσιο Τιμή, καταχωρίστε
    firstname,lastname,fullname,emailaddress1,telephone1

    

12. Επιλέξτε Αποθήκευση και κλείσιμο.

13. Επιλέξτε Νέα.

14. Στο πλαίσιο Όνομα, πληκτρολογήστε Webapi/error/innererror.

    

15. Στη λίστα Τοποθεσίες Web, επιλέξτε την καρτέλα της τοποθεσίας web σας.

16. Στο πλαίσιο Τιμή, καταχωρίστε αληθές.

17. Επιλέξτε Αποθήκευση και κλείσιμο.

18. Επαληθεύστε τις ρυθμίσεις τοποθεσίας για το Web API.

Βήμα 2. Ρύθμιση παραμέτρων δικαιωμάτων

Θα πρέπει να ρυθμίσετε τις παραμέτρους των δικαιωμάτων έτσι, ώστε οι χρήστες να μπορούν να χρησιμοποιούν τη δυνατότητα Web API. Σε αυτό το παράδειγμα, θα πρέπει να ρυθμίσετε ή να δημιουργήσετε έναν νέο ρόλο web που θα χρησιμοποιήσει το API Web, έπειτα θα προσθέσετε τα δικαιώματα πίνακα για τον πίνακα Επαφή και θα συσχετίσετε το δικαίωμα πίνακα με τον ρόλο web και, τέλος, θα αναθέσετε τον ρόλο web σε χρήστες προκειμένου να μπορούν να χρησιμοποιούν το Web ΑΡΙ.

Σημείωμα

Το API Web ακολουθεί τα δικαιώματα πίνακα που προέρχονται από το περιβάλλον ρόλου web του χρήστη που έχει υποβληθεί σε έλεγχο ταυτότητας ή του ανώνυμου ρόλου web. Εξετάστε το ενδεχόμενο οι χρήστες σας να έχουν ήδη έναν ρόλο web που έχει πρόσβαση στους συγκεκριμένους πίνακες της τοποθεσίας Web που απαιτείται από το API Web. Δεν χρειάζεται να δημιουργήσετε πρόσθετους ρόλους web απλώς για να χρησιμοποιήσετε το ΑΡΙ Web.

Δημιουργία ρόλου web

Εάν προς το παρόν δεν έχετε ρόλο web με δικαιώματα για τον πίνακα που έχετε πρόσβαση μέσω του API Web ή απαιτείτε διαφορετικό περιβάλλον πρόσβασης στα δεδομένα, τα παρακάτω βήματα σας δείχνου πώς να δημιουργήσετε ένα νέο ρόλο web και να αναθέσετε δικαιώματα πίνακα.

1. Ξεκινήστε την εφαρμογή Διαχείριση πύλης.

2. Στο αριστερό τμήμα παραθύρου, στην ενότητα Ασφάλεια επιλέξτε Ρόλοι web.

3. Επιλέξτε Νέος.

4. Στο πλαίσιο Όνομα, πληκτρολογήστε Χρήστης API Web (ή οποιοδήποτε όνομα αντικατοπτρίζει καλύτερα το ρόλο του χρήστη που έχει πρόσβαση σε αυτήν τη λειτουργικότητα).

5. Στη λίστα Τοποθεσίες Web, επιλέξτε την καρτέλα της τοποθεσίας 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.

   

5. Επιλέξτε Προσθήκη υπάρχοντος ρόλου web.

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. Χρήση του API Web για ανάγνωση, προβολή, επεξεργασία, δημιουργία και διαγραφή

Για να δοκιμάσετε τη λειτουργικότητα Web API:

1. Επιλέξτε Προεπισκόπηση και, έπειτα επιλέξτε Επιφάνεια εργασίας.

2. Συνδεθείτε στην τοποθεσία με το λογαριασμό χρήστη στον οποίο έχει ανατεθεί ο ρόλος Χρήστης Web API που δημιουργήσατε νωρίτερα.

3. Μεταβείτε στην ιστοσελίδα WebApi που δημιουργήσατε νωρίτερα.

   

4. Επιλέξτε Προσθήκη δείγματος καρτέλας για να προσθέσετε το δείγμα καρτέλας από τη δέσμη ενεργειών.

5. Επιλέξτε ένα πεδίο. Σε αυτό το παράδειγμα, επιλέξαμε Ηλεκτρονικό ταχυδρομείο για να αλλάξουμε τη διεύθυνση ηλεκτρονικού ταχυδρομείου μιας επαφής.

   

6. Για να διαγράψετε μια καρτέλα επιλέξτε το εικονίδιο Διαγραφή.

Τώρα που δημιουργήσατε μια ιστοσελίδα με δείγμα για ανάγνωση, επεξεργασία, δημιουργία και διαγραφή καρτελών, μπορείτε να προσαρμόσετε τις φόρμες και τη διάταξη.

Επόμενο βήμα

Σύνταξη αιτήσεων HTTP και χειρισμός σφαλμάτων

Δείτε επίσης

• Επισκόπηση Web API
• Λειτουργίες εγγραφής, ενημέρωσης και διαγραφής χρησιμοποιώντας το API Web
• Ανάγνωση λειτουργιών χρησιμοποιώντας το API Web
• Ρύθμιση παραμέτρων δικαιωμάτων στηλών