Tutorial: Utilitza l'API web del portal
En aquest tutorial, configurareu una pàgina web i una plantilla web personalitzada que utilitzaran l'API web per llegir, escriure, actualitzar i suprimir registres de la taula de contactes.
Nota
Podeu canviar els noms de les columnes o utilitzar una taula diferent mentre seguiu els passos d'aquest exemple.
Pas 1. Creeu la configuració de lloc
Per poder utilitzar l'API web de portals, heu d'habilitar la configuració del lloc necessari amb l'aplicació d'administració del portal. La configuració del lloc depèn de la taula que voleu utilitzar quan interactueu amb l'API web.
Vés a Power Apps.
A la subfinestra esquerra, seleccioneu Aplicacions.
Seleccioneu l'aplicació d'administració del portal.
A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Configuració del lloc.
Seleccioneu Crea.
Al quadre Nom, introduïu WebAPI/enableReadOperationPreview. Aquesta configuració del lloc només és necessària mentre l'operació de lectura de l'API web està en visualització prèvia.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Al quadre Valor, introduïu cert.
Seleccioneu Crea.
Al quadre de Nom, introduïu Webapi/contacte/habilitat.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Al quadre Valor, introduïu cert.
Seleccioneu Desa i tanca.
Seleccioneu Crea.
Al quadre de Nom, introduïu Webapi/contacte/camps.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Al quadre Valor, introduïu
nom, cognom, nomcomplet, adreçaelectrònica1, telèfon1
Seleccioneu Desa i tanca.
Seleccioneu Crea.
Al quadre de Nom, introduïu Webapi/error/errorintern.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Al quadre Valor, introduïu cert.
Seleccioneu Desa i tanca.
Verifiqueu la configuració del lloc de l'API web.
Pas 2. Configura els permisos
Haureu de configurar els permisos per tal que els usuaris puguin utilitzar la característica de l'API web. En aquest exemple, habilitareu la taula contacte per als permisos de la taula, creareu una funció web mitjançant l'API web, afegireu els permisos de taula de la taula de contacte a aquesta funció web i, a continuació, afegireu la funció web als usuaris per permetre'ls utilitzar l'API web.
A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Permisos de taula.
Seleccioneu Crea.
Al quadre Nom, introduïu Permís de taula de contacte.
A la llista Nom de la taula, seleccioneu Contacte (contacte).
A la llista de Llocs web, seleccioneu el registre del lloc web.
A la llista Tipus d'accés, seleccioneu Global.
Seleccioneu els privilegis Lectura, Escriptura, Creació i Supressió.
Seleccioneu Desa i tanca.
A la subfinestra esquerra, seleccioneu Funcions web.
Seleccioneu Crea.
Al quadre Nom, introduïu l'usuari de l'API web.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Per a la Funció d'usuaris autenticats, seleccioneu Sí.
Seleccioneu Desa.
Seleccioneu · > Permisos de taula relacionats.
Seleccioneu Afegeix permís de taula existent.
Seleccioneu Permís de taula de contacte, creat abans.
Seleccioneu Afegeix.
Seleccioneu Desa i tanca.
A la subfinestra esquerra, seleccioneu Contactes.
Seleccioneu un contacte que vulgueu veure en aquest exemple per a l'API web.
Nota
Aquest contacte és el compte d'usuari que s'utilitza en aquest exemple per provar l'API web. Assegureu-vos de seleccionar el contacte correcte al portal.
Seleccioneu funcions web relacionades > ·.
Seleccioneu Afegeix una funció web existent.
Seleccioneu la funció d'Usuari de l'API web creada prèviament.
Seleccioneu Afegeix.
Seleccioneu Desa i tanca.
Pas 3. Creeu una pàgina web
Ara que heu habilitat l'API web i heu configurat els permisos d'usuari, creeu una pàgina web amb el codi d'exemple per visualitzar, editar, crear i suprimir registres.
A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Pàgines web.
Seleccioneu Crea.
Al quadre Nom, introduïu webapi.
A la llista de Llocs web, seleccioneu el registre del lloc web.
Per a la Pàgina principal, seleccioneu Inici.
Per a l'Adreça URL parcial, introduïu webapi.
Per a la Plantilla de pàgina, seleccioneu Inici.
Per a l'Estat de publicació, seleccioneu Publicat.
Seleccioneu Desa.
Seleccioneu Relacionat > Pàgines web.
A la Visualització associada de pàgines web, seleccioneu webapi.
Desplaceu-vos cap avall fins a la secció Contingut i, a continuació, aneu a Copia (HTML) (dissenyador d'HTML).
Seleccioneu la pestanya HTML.
Copieu el fragment de codi d'exemple següent i enganxeu-lo al dissenyador d'HTML.
<!-- 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>
Seleccioneu Desa i tanca.
Pas 4. Esborra la memòria cau dels portals
Heu creat una pàgina d'exemple webapi per provar la funcionalitat de l'API web. Abans de començar, assegureu-vos que la memòria cau dels portals Power Apps s'hagi esborrat de manera que els canvis de l'aplicació Gestió del portal es reflecteixin al vostre portal.
IMPORTANT: Esborrar la memòria cau del servidor del portal provoca una degradació temporal del rendiment del portal mentre les dades es tornen a carregar des de Microsoft Dataverse.
Per esborrar la memòria cau:
Inicieu la sessió al portal com a membre de la funció web Administradors.
Canvieu l'adreça URL afegint /_ serveis/quant al final. Per exemple, si l'adreça URL del portal és https://contoso.powerappsportals.com, canvieu-la a https://contoso.powerappsportals.com/_services/about.
NOTA: Heu de ser membre de la funció web Administradors per esborrar la memòria cau. Si veieu una pantalla en blanc, comproveu les assignacions de funcions web.
Seleccioneu Esborra la memòria cau.
Més informació: Esborrar la memòria cau del servidor d'un portal
Pas 5. Utilitzeu l'API web per llegir, visualitzar, editar, crear i suprimir
La pàgina web d'exemple amb l'URL webapi creat anteriorment ja està preparada per a la prova.
Per provar la funcionalitat de l'API web:
Inicieu la sessió al portal amb el compte d'usuari a qui s'hagi assignat la funció d'usuari de l'API web que heu creat abans.
Aneu a la pàgina web webapi creada abans. Per exemple, https://contoso.powerappsportals.com/webapi. El WebAPI recuperarà registres de Microsoft Dataverse.
Seleccioneu Afegeix un registre d'exemple per afegir el registre d'exemple des de l'script.
Seleccioneu un camp. En aquest exemple, hem seleccionat correu electrònic per canviar l'adreça electrònica d'un contacte.
Seleccioneu
registre.
Ara que heu creat una pàgina web amb una mostra per llegir, editar, crear i suprimir registres, podeu personalitzar els formularis i la disposició.
Pas següent
Redactar sol·licituds HTTP i gestionar els errors
Consulteu també
Informació general sobre l’API web de portals Els portals escriuen, actualitzen i suprimeixen operacions mitjançant l'API web Portals llegeixen operacions utilitzant l'API web