Cara: Menggunakan API Web portal

Dalam panduan ini, Anda akan mengkonfigurasi halaman web dan template web kustom yang akan menggunakan API Web untuk membaca, menulis, memperbarui, dan menghapus rekaman dari tabel kontak.

Catatan

Anda dapat mengubah nama kolom, atau menggunakan tabel yang berbeda saat mengikuti langkah dalam contoh ini.

Langkah 1. Buat Pengaturan Situs

Agar dapat menggunakan web API portal, Anda harus mengaktifkan pengaturan situs yang diperlukan dengan aplikasi manajemen portal. Pengaturan situs tergantung pada tabel yang ingin Anda gunakan saat berinteraksi dengan API Web.

1. Mulai aplikasi Manajemen Portal.

2. Di panel kiri aplikasi manajemen portal di panel kiri, pilih pengaturan situs.

   

3. Pilih baru.

4. Di kotak nama, masukkan Webapi/contact/enabled.

5. Dalam Daftar situs web, pilih rekaman situs web Anda.

6. Di kotak nilai, masukkan true.

   

7. Pilih Simpan &; Tutup.

8. Pilih baru.

9. Di kotak nama, masukkan Webapi/contact/fields.

10. Dalam Daftar situs web, pilih rekaman situs web Anda.

11. Di kotak nilai, masukkan
    firstname,lastname,fullname,emailaddress1,telephone1

    

12. Pilih Simpan &; Tutup.

13. Pilih baru.

14. Di kotak nama, masukkan Webapi/error/innererror.

    

15. Dalam Daftar situs web, pilih rekaman situs web Anda.

16. Di kotak nilai, masukkan true.

17. Pilih Simpan &; Tutup.

18. Verifikasi Pengaturan situs untuk web API.

Langkah 2. Konfigurasikan izin

Anda harus mengkonfigurasi izin sehingga pengguna dapat menggunakan fitur web API. Dalam contoh ini, Anda harus mengonfigurasikan atau membuat peran web baru yang akan menggunakan API web, selanjutnya Anda akan menambahkan izin tabel untuk tabel Kontak dan mengaitkan izin tabel ke peran web tersebut, dan akhirnya menetapkan peran web ke pengguna agar dapat menggunakan API Web.

Catatan

API Web mengikuti izin tabel yang berasal dari konteks peran web pengguna terotentikasi atau peran web anonim. Pertimbangkan jika pengguna Anda telah memiliki peran web yang memiliki akses ke tabel tertentu di situs web yang diperlukan oleh API Web. Anda tidak perlu membuat peran web tambahan hanya untuk menggunakan API Web.

Membuat peran web

Jika Anda saat ini tidak memiliki peran web dengan izin ke tabel yang Anda akses melalui API Web atau memerlukan konteks yang berbeda untuk mengakses data, langkah-langkah berikut adalah cara membuat peran web baru dan menetapkan izin tabel.

1. Mulai aplikasi Manajemen Portal.

2. Di panel kiri, dalam bagian Keamanan, pilih Peran Web.

3. Pilih baru.

4. Di kotak Nama, masukkan Pengguna Web API (atau nama apa pun yang paling sesuai mencerminkan peran pengguna mengakses fungsi ini).

5. Dalam Daftar situs web, pilih rekaman situs web Anda.

   

6. Pilih Simpan.

Buat izin tabel

1. Buka studio desain Power Pages.

2. Pilih ruang kerja Konfigurasi.

3. Di bagian Keamanan, pilih Izin Tabel.

4. Pilih Izin baru.

5. Di kotak Nama, masukkan Izin Tabel Kontak.

6. Dalam daftar Nama Tabel, pilih Kontak (kontak).

7. Di daftar Jenis akses, pilih Global.

8. Pilih Hak istimewa Baca, Tulis, buat, dan Hapus.

9. Pilih + Tambah peran dan pilih peran web yang anda pilih atau buat sebelumnya.

10. Pilih Simpan &; Tutup.

    

Menambahkan kontak ke peran web

1. Mulai aplikasi Manajemen Portal.

2. Di panel kiri, dalam bagian Keamanan, pilih Kontak.

3. Pilih kontak yang akan digunakan dalam contoh ini untuk web API.

   Catatan

   Kontak ini adalah akun pengguna yang digunakan dalam contoh ini untuk menguji web API. Pastikan untuk memilih kontak yang benar di portal Anda.

4. Pilih Terkait>Peran Web.

   

5. Pilih Tambahkan peran web yang ada.

6. Pilih peran pengguna api web, yang dibuat sebelumnya.

7. Pilih Tambahkan.

   

8. Pilih Simpan &; Tutup.

Langkah 3. Buat halaman web

Setelah Anda mengaktifkan API web dan izin pengguna yang dikonfigurasi, buat halaman web dengan kode sampel untuk menampilkan, mengedit, membuat, dan menghapus rekaman.

1. Buka studio desain Power Pages.

2. Di ruang kerja halaman lalu pilih + Halaman.

3. Di dialog Tambahkan halaman,

4. Di kotak Nama , masukkan WebAPI, lalu pilih tata letak Mulai dari kosong.

5. Pilih Tambahkan.

6. Pilih pilihan Edit Kode di sudut kanan atas.

7. Pilih Buka Visual Studio Code.

8. Salin cuplikan kode contoh berikut dan rekatkan di antara tag <div></div> bagian halaman.

       <!-- 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. Pilih CTRL-S untuk menyimpan kode.

10. Dalam studio desain, pilih Sinkronisasi untuk memperbarui situs dengan editan kode.

Langkah 4. Menggunakan web API untuk membaca, menampilkan, mengedit, membuat, dan menghapus

Untuk menguji fungsi web API:

1. Pilih pratinjau, lalu pilih desktop.

2. Masuk ke situs Anda dengan akun pengguna yang telah ditetapkan peran pengguna api web yang Anda buat sebelumnya.

3. Buka halaman web webapi yang dibuat sebelumnya.

   

4. Pilih Tambah rekaman sampel untuk menambahkan rekaman sampel dari skrip.

5. Pilih bidang. Dalam contoh ini, kami telah memilih email untuk mengubah alamat email kontak.

   

6. Pilih ikon Hapus untuk menghapus rekaman.

Setelah membuat halaman web dengan sampel untuk membaca, mengedit, membuat, dan menghapus rekaman, Anda dapat menyesuaikan formulir dan tata letak.

Langkah selanjutnya

Menulis permintaan HTTP dan menangani kesalahan

Baca juga

• Ikhtisar Web API
• Operasi Menulis, Memperbarui dan menghapus dengan menggunakan Web API
• Operasi baca menggunakan API Web
• Mengonfigurasi izin kolom