Praktični vodič: Korištenje web-API-ja portala
U ovom ćete vodiču postaviti web-stranicu i prilagođeni web-predložak koji će koristiti web-API za čitanje, pisanje, ažuriranje i brisanje zapisa iz tablice kontakata.
Napomena
Možete promijeniti nazive stupaca ili koristiti drugu tablicu dok slijedite korake u ovom primjeru.
1. korak Stvaranje postavki web-mjesta
Prije nego što možete koristiti portale Web API-ja, morate omogućiti obvezne postavke web-mjesta s pomoću aplikacije Portal Management. Postavke web-mjesta ovise o tablici koju želite koristiti kada stupate u interakciju s web-API-jem.
Idite na Power Apps.
U lijevom oknu odaberite Aplikacije.
Odaberite aplikaciju Upravljanje portalom.
U lijevom oknu aplikacije Upravljanje portalima odaberite Postavke web-mjesta.
Odaberite Novo.
U okvir Naziv unesite WebAPI/enableReadOperationPreview. Ova postavka web-mjesta potrebna je samo dok je operacija čitanja web-API-ja u pretpregledu.
Na popisu Web-mjesto odaberite zapis web-mjesta.
U okviru Vrijednost unesite točno.
Odaberite Novo.
U okviru Naziv unesite Webapi/contact/enabled.
Na popisu Web-mjesto odaberite zapis web-mjesta.
U okviru Vrijednost unesite točno.
Odaberite Spremi i zatvori.
Odaberite Novo.
U okviru Naziv unesite Webapi/contact/fields.
Na popisu Web-mjesto odaberite zapis web-mjesta.
U okviru Vrijednost unesite
firstname,lastname,fullname,emailaddress1,telephone1
Odaberite Spremi i zatvori.
Odaberite Novo.
U okviru Naziv unesite Webapi/error/innererror.
Na popisu Web-mjesto odaberite zapis web-mjesta.
U okviru Vrijednost unesite točno.
Odaberite Spremi i zatvori.
Provjerite postavke web-mjesta za Web API.
2. korak Konfiguriranje dozvola
Morat ćete konfigurirati dozvole tako da korisnici mogu koristiti značajku Web API. U ovom primjeru omogućit ćete tablici Kontakt dozvole za tablice, stvoriti web-ulogu pomoću web-API-ja, dodati dozvole tablice za tablicu Kontakt ovoj web-ulozi, a zatim dodati web-ulogu korisnicima kako biste im omogućili korištenje web-API-ja.
U lijevom oknu aplikacije Upravljanje portalima odaberite Dozvole tablice.
Odaberite Novo.
U okviru Naziv unesite Dozvole tablice Kontakti.
Na popisu Naziv tablice odaberite Kontakt (kontakt).
Na popisu Web-mjesto odaberite zapis web-mjesta.
U popisu Vrsta pristupa odaberite mogućnost Globalno.
Odaberite privilegije za Čitanje, Pisanje, Stvaranje i Brisanje.
Odaberite Spremi i zatvori.
Odaberite Web-uloge u lijevom oknu.
Odaberite Novo.
U okviru Naziv unesite Korisnik Web API-ja.
Na popisu Web-mjesto odaberite zapis web-mjesta.
Za Uloga korisnika čija je autentičnost provjerena odaberite Da.
Odaberite Spremi.
Odaberite · > Dozvole povezane tablice.
Odaberite Dodaj postojeću dozvolu tablice.
Odaberite Dozvola tablice Kontakt, koju ste ranije stvorili.
Odaberite Dodaj.
Odaberite Spremi i zatvori.
Odaberite Kontakti u lijevom oknu.
Odaberite kontakt koji želite koristiti u ovom primjeru za Web API.
Napomena
Ovaj je kontakt korisnički račun koji se koristi u ovom primjeru za testiranje Web API-ja. Obavezno odaberite točan kontakt na svom portalu.
Odaberite · > Srodne web-uloge.
Odaberite Dodaj postojeću web-ulogu.
Odaberite prethodno stvorenu ulogu Korisnik Web API-ja.
Odaberite Dodaj.
Odaberite Spremi i zatvori.
3. korak Stvaranje web-stranice
Sad kad ste omogućili Web API i konfigurirali korisničke dozvole, stvorite web-stranicu s uzorkom koda za prikaz, uređivanje, stvaranje i brisanje zapisa.
U lijevom oknu aplikacije Upravljanje portalima odaberite Web-stranice.
Odaberite Novo.
U okviru Naziv unesite webapi.
Na popisu Web-mjesto odaberite zapis web-mjesta.
Za opciju Nadređena stranica odaberite Početna.
Za Djelomični URL unesite webapi.
Za opciju Predložak stranice odaberite Početna.
Za Stanje objavljivanja odaberite Objavljeno.
Odaberite Spremi.
Odaberite Povezano > Web-stranice.
U odjeljku Pridruženi prikaz web-stranice odaberite webapi.
Pomaknite se prema dolje do odjeljka Sadržaj, a zatim otvorite Kopiraj (HTML) (alat za dizajniranje HTML-a).
Odaberite karticu HTML.
Sljedeći uzorak isječka koda kopirajte i zalijepite u HTML alat za dizajniranje HTML-a.
<!-- 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>
Odaberite Spremi i zatvori.
4. korak Čišćenje predmemorije portala
Stvorili ste uzorak stranice webapi za testiranje funkcionalnosti API-ja na webu. Prije nego što započnete, provjerite je li predmemorija Power Apps portala očišćena tako da se promjene iz aplikacije Upravljanje portalima odražavaju na vašem portalu.
VAŽNO: Čišćenje predmemorije na strani poslužitelja portala uzrokuje privremenu degradaciju performansi portala dok se podaci ponovno učitavaju iz Microsoft Dataverse.
Za brisanje predmemorije:
Prijavite se na svoj portal kao član u web-ulozi Administratori.
Promijenite URL dodavanjem /_ servisa/otprilike na kraju. Na primer, ako je URL portala https://contoso.powerappsportals.com, promenite ga u https://contoso.powerappsportals.com/_services/about.
NAPOMENA: Da biste očistili predmemoriju, morate biti član administratorske web-uloge. Ako vidite prazan zaslon, provjerite dodjelu web-uloge.
Odaberite opciju Očisti predmemoriju.
Dodatne informacije: Čišćenje predmemorije portala na strani poslužitelja
5. korak Čitanje, prikaz, uređivanje, stvaranje i brisanje pomoću web-API-ja
Ogledna web-stranica s ranije stvorenim URL webapijem sada je spremna za testiranje.
Da biste testirali funkcionalnost API-ja na webu:
Prijavite se na portal s korisničkim računom kojem je dodijeljena uloga Korisnik Web API-ja koju ste prethodno stvorili.
Idite na prethodno stvorenu web-stranicu webapi. Na primjer, https://contoso.powerappsportals.com/webapi. WebAPI će dohvatiti zapise iz Microsoft Dataverse.
Odaberite Dodaj uzorak zapisa da biste dodali uzorak zapisa iz skripte.
Odaberite polje. U ovom smo primjeru odabrali E-pošta za promjenu adrese e-pošte kontakta.
Odaberite
izbrisali zapis.
Sada kada ste stvorili web-stranicu s uzorkom za čitanje, uređivanje, stvaranje i brisanje zapisa, možete prilagoditi obrasce i izgled.
Sljedeći korak
Sastavljanje HTTP zahtjeva i rješavanje pogrešaka
Pogledajte
Pregled Web API-ja za portale Portali pišu, ažuriraju i brišu operacije pomoću web-API-ja Portali čitaju operacije pomoću web-API-ja