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.

  1. Vés a Power Apps.

  2. A la subfinestra esquerra, seleccioneu Aplicacions.

  3. Seleccioneu l'aplicació d'administració del portal.

    Inicia l'aplicació Gestió del portal.

  4. A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Configuració del lloc.

    Obriu la configuració del lloc a l'aplicació Administració del portal.

  5. Seleccioneu Crea.

  6. 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.

  7. A la llista de Llocs web, seleccioneu el registre del lloc web.

  8. Al quadre Valor, introduïu cert.

    Habilita la configuració del lloc de lectura del WebAPI.

  9. Seleccioneu Crea.

  10. Al quadre de Nom, introduïu Webapi/contacte/habilitat.

  11. A la llista de Llocs web, seleccioneu el registre del lloc web.

  12. Al quadre Valor, introduïu cert.

    Habilita la taula de contactes per a la configuració del lloc WebAPI.

  13. Seleccioneu Desa i tanca.

  14. Seleccioneu Crea.

  15. Al quadre de Nom, introduïu Webapi/contacte/camps.

  16. A la llista de Llocs web, seleccioneu el registre del lloc web.

  17. Al quadre Valor, introduïu
    nom, cognom, nomcomplet, adreçaelectrònica1, telèfon1

    Habilita la configuració del lloc dels camps de taula de contactes de l'API web.

  18. Seleccioneu Desa i tanca.

  19. Seleccioneu Crea.

  20. Al quadre de Nom, introduïu Webapi/error/errorintern.

    Habilita la configuració del lloc d'error intern de l'API web.

  21. A la llista de Llocs web, seleccioneu el registre del lloc web.

  22. Al quadre Valor, introduïu cert.

  23. Seleccioneu Desa i tanca.

  24. 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.

  1. A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Permisos de taula.

  2. Seleccioneu Crea.

  3. Al quadre Nom, introduïu Permís de taula de contacte.

  4. A la llista Nom de la taula, seleccioneu Contacte (contacte).

  5. A la llista de Llocs web, seleccioneu el registre del lloc web.

  6. A la llista Tipus d'accés, seleccioneu Global.

  7. Seleccioneu els privilegis Lectura, Escriptura, Creació i Supressió.

  8. Seleccioneu Desa i tanca.

    Permisos de la taula de contacte.

  9. A la subfinestra esquerra, seleccioneu Funcions web.

  10. Seleccioneu Crea.

  11. Al quadre Nom, introduïu l'usuari de l'API web.

  12. A la llista de Llocs web, seleccioneu el registre del lloc web.

  13. Per a la Funció d'usuaris autenticats, seleccioneu .

    Afegeix una funció web d'usuari de l'API web.

  14. Seleccioneu Desa.

  15. Seleccioneu · > Permisos de taula relacionats.

    Afegeix permisos de taula relacionats a la funció web.

  16. Seleccioneu Afegeix permís de taula existent.

  17. Seleccioneu Permís de taula de contacte, creat abans.

    Seleccioneu el permís de la taula de contactes.

  18. Seleccioneu Afegeix.

  19. Seleccioneu Desa i tanca.

    Visualització de permisos de la taula.

  20. A la subfinestra esquerra, seleccioneu Contactes.

  21. 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.

  22. Seleccioneu funcions web relacionades > ·.

    Selecció de funcions web relacionades.

  23. Seleccioneu Afegeix una funció web existent.

  24. Seleccioneu la funció d'Usuari de l'API web creada prèviament.

  25. Seleccioneu Afegeix.

    Visualització associada de funcions web.

  26. 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.

  1. A la subfinestra esquerra de l'aplicació Gestió del portal, seleccioneu Pàgines web.

  2. Seleccioneu Crea.

  3. Al quadre Nom, introduïu webapi.

  4. A la llista de Llocs web, seleccioneu el registre del lloc web.

  5. Per a la Pàgina principal, seleccioneu Inici.

  6. Per a l'Adreça URL parcial, introduïu webapi.

  7. Per a la Plantilla de pàgina, seleccioneu Inici.

  8. Per a l'Estat de publicació, seleccioneu Publicat.

  9. Seleccioneu Desa.

    Pàgina web

  10. Seleccioneu Relacionat > Pàgines web.

    Pàgines web relacionades

  11. A la Visualització associada de pàgines web, seleccioneu webapi.

    Visualització associada de pàgines web

  12. Desplaceu-vos cap avall fins a la secció Contingut i, a continuació, aneu a Copia (HTML) (dissenyador d'HTML).

    Copia el contingut HTML

  13. Seleccioneu la pestanya HTML.

    Seleccioneu la pestanya d'HTML

  14. 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>
    

    Enganxa el codi.

  15. 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:

  1. Inicieu la sessió al portal com a membre de la funció web Administradors.

  2. 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.

    Esborrar la memòria cau.

    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.

  3. 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:

  1. 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.

  2. Aneu a la pàgina web webapi creada abans. Per exemple, https://contoso.powerappsportals.com/webapi. El WebAPI recuperarà registres de Microsoft Dataverse.

    Pàgina web d'exemple webapi

  3. Seleccioneu Afegeix un registre d'exemple per afegir el registre d'exemple des de l'script.

  4. Seleccioneu un camp. En aquest exemple, hem seleccionat correu electrònic per canviar l'adreça electrònica d'un contacte.

    Edita el correu

  5. Seleccioneu Suprimeix el botó per suprimir un 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