Interacción con tablas de Dataverse mediante la lógica del servidor

En esta guía, configurará una página web y una plantilla web personalizada que usará la lógica del servidor para leer, escribir, actualizar y eliminar registros de la tabla de contactos.

Paso 1: Crear una lógica de servidor

  1. Inicie sesión en Power Pages.

  2. Seleccione sitio + Editar.

  3. Vaya al área de trabajo Configurar y, a continuación, seleccione Lógica del servidor (versión preliminar).

  4. Seleccione +Nueva lógica de servidor.

  5. Escriba el nombre de la lógica del servidor. Este nombre se usa en la API como identificador de recursos al construir la API lógica del servidor.

    Ejemplo: dataverse-crud-operations

  6. Seleccione +Agregar roles para asignar el rol web adecuado.

  7. Seleccione 3 puntos (...) junto al nombre y seleccione Editar código.

  8. Seleccione Abrir Visual Studio Code para crear la lógica personalizada. Encontrará métodos y scripts predefinidos en el archivo.

  9. Defina el método lógico de servidor para leer, editar, crear y eliminar los registros de contacto.

    Lea: Inserte el siguiente script dentro del método get

    const entitySetName = Server.Context.QueryParameters["entitySetName"];
    if (!Server.Context.QueryParameters["id"]) {
        return Server.Connector.Dataverse.RetrieveMultipleRecords(entitySetName);
    } else {
        const id = Server.Context.QueryParameters["id"]; // Context reference
        return Server.Connector.Dataverse.RetrieveRecord(entitySetName, id);
    }
    

    Crear: Agregar el siguiente script en el método POST

    const data = Server.Context.Body;
    const entitySetName = Server.Context.QueryParameters["entitySetName"];
    return Server.Connector.Dataverse.CreateRecord(entitySetName, data);
    

    Actualización: agregue el siguiente script en el método put.

    const id = Server.Context.QueryParameters["id"];
    const data = Server.Context.Body;
    return Server.Connector.Dataverse.UpdateRecord("accounts", id, data);
    

    Eliminar: Agregar dentro del método del

    const id = Server.Context.QueryParameters["id"];
    const entitySetName = Server.Context.QueryParameters["entitySetName"];
    Server.Logger.Log("Entity Set name:" + entitySetName);
    return Server.Connector.Dataverse.DeleteRecord(entitySetName, id);
    
  10. Guarde el archivo.

  11. Este es el código lógico de servidor completo que se puede pegar.

    function get() {
     try {
         Server.Logger.Log("GET called"); // Logger reference
         const entitySetName = Server.Context.QueryParameters["entitySetName"];
         const additionParameters = Server.Context.QueryParameters['additionalParameters'];
         if (!Server.Context.QueryParameters["id"]) {
             const response = Server.Connector.Dataverse.RetrieveMultipleRecords(entitySetName,additionParameters);
             return response;
         }
         else{            
             const id = Server.Context.QueryParameters["id"]; // Context reference
             const response = Server.Connector.Dataverse.RetrieveRecord(entitySetName, id,additionParameters);
             return response;
         }        
     } catch (err) {
         Server.Logger.Error("GET failed: " + err.message);
         return JSON.stringify({ status: "error", method: "GET", message: err.message });
     }
     }
     function post() {
     try {
         Server.Logger.Log("POST called");
         const data = Server.Context.Body;
         const entitySetName = Server.Context.QueryParameters["entitySetName"];
          return Server.Connector.Dataverse.CreateRecord(entitySetName, data);
      } catch (err) {
         Server.Logger.Error("POST failed: " + err.message);
         return JSON.stringify({ status: "error", method: "POST", message: err.message });
     }
     } 
     function put() {
     try {
         Server.Logger.Log("PUT called");
         const id = Server.Context.QueryParameters["id"];
         const data = Server.Context.Body;
         const entitySetName = Server.Context.QueryParameters["entitySetName"];
         return Server.Connector.Dataverse.UpdateRecord(entitySetName, id, data);
      } catch (err) {
         Server.Logger.Error("PUT failed: " + err.message);
         return JSON.stringify({ status: "error", method: "PUT", message: err.message });
     }
     }   
     function del() {
     try {
         // "delete" keyword should not be used in script file.
         Server.Logger.Log("DEL called");
         const id = Server.Context.QueryParameters["id"];
           const entitySetName = Server.Context.QueryParameters["entitySetName"];
         return Server.Connector.Dataverse.DeleteRecord(entitySetName, id);
      } catch (err) {
         Server.Logger.Error("Deletion failed: " + err.message);
         return JSON.stringify({ status: "error", method: "DEL", message: err.message });
     }
     }
    

Paso 2: Crear página web

  1. Inicie el estudio de diseño de Power Pages.

  2. En el área de trabajo Páginas , seleccione + Página.

  3. En el cuadro de diálogo Agregar una página , escriba Lógica del servidor en el cuadro Nombre y seleccione Iniciar desde el diseño en blanco .

  4. Selecciona Agregar.

  5. Seleccione la opción Editar código en la esquina superior derecha.

  6. Seleccione Abrir Visual Studio Code.

  7. Copie el siguiente fragmento de código de ejemplo y péguelo entre las <div></div> etiquetas de la sección de página.

    <style>
    #processingMsg {
        padding: 6px 12px; background: #eee; border-radius: 4px;
        position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
        display: none; z-index: 9999; text-align: center; font-weight: bold;
    }
    table { border-collapse: collapse; width: 100%; margin-top: 10px; font-family: Arial, sans-serif; }
    th, td { border: 1px solid #ccc; padding: 6px; text-align: left; }
    button { cursor: pointer; border: 1px solid #aaa; padding: 4px 8px; border-radius: 4px; background: #fff; font-size: 14px; margin-right: 2px; }
    button.add { color: green; }
    button.save { color: green; }
    button.cancel { color: orange; }
    button.delete { color: red; }
    input { width: 95%; box-sizing: border-box; }
    td.actions { white-space: nowrap; }
    </style>
    
    <div id="processingMsg">Processing...</div>
    <div id="dataTable"></div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(function() {
        // --- safeAjax wrapper ---
        (function(webapi, $) {
            function safeAjax(ajaxOptions) {
                var dfd = $.Deferred();
                shell.getTokenDeferred().done(function(token) {
                    ajaxOptions.headers = ajaxOptions.headers || {};
                    ajaxOptions.headers["__RequestVerificationToken"] = token;
                    $.ajax(ajaxOptions)
                        .done((data, ts, jq) => validateLoginSession(data, ts, jq, dfd.resolve))
                        .fail(dfd.reject);
                }).fail(() => dfd.rejectWith(this, arguments));
                return dfd.promise();
            }
            webapi.safeAjax = safeAjax;
        })(window.webapi = window.webapi || {}, jQuery);
    
        // --- notification banner ---
        const notify = (function() {
            const $m = $('#processingMsg'); let s = 0, t;
            return {
                show: (msg = 'Processing...') => { $m.text(msg); if (!s) clearTimeout(t), $m.show(); s++; },
                hide: () => { s = Math.max(0, s - 1); if (!s) clearTimeout(t), t = setTimeout(() => $m.hide(), 300); }
            };
        })();
    
        function ajaxCall(msg, opts) {
            notify.show(msg);
            return webapi.safeAjax(opts)
                .fail(r => alert(r.responseJSON?.error?.message || 'Server logic not available'))
                .always(notify.hide);
        }
    
        // --- Table config ---
        const cols = [
            { name: 'firstname', label: 'First Name' },
            { name: 'lastname', label: 'Last Name' },
            { name: 'emailaddress1', label: 'Email' },
            { name: 'telephone1', label: 'Telephone' }
        ];
        let data = [];
    
        function render() {
            const html = `<table>
                <thead>
                    <tr>
                        ${cols.map(c => `<th>${c.label}</th>`).join('')}
                        <th>Actions <button class="add">➕</button></th>
                    </tr>
                </thead>
                <tbody>
                    ${data.map(r => `<tr data-id="${r.id}" data-name="${r.fullname}">
                        ${cols.map(c => `<td data-attribute="${c.name}" data-value="${r[c.name] || ''}">${r[c.name] || ''}</td>`).join('')}
                        <td class="actions">
                            <button class="delete">🗑️</button>
                        </td>
                    </tr>`).join('')}
                </tbody>
            </table>`;
            $('#dataTable').html(html);
        }
    
        function addRecord(r) { data.unshift(r); render(); }
        function removeRecord(id) { data = data.filter(r => r.id !== id); render(); }
        function updateRecord(id, attr, val) { const r = data.find(r => r.id === id); if (r) { r[attr] = val; render(); } }
    
        // --- Events ---
        $('#dataTable').on('dblclick', 'tr', function() {
            const $tr = $(this);
            if ($tr.hasClass('editing')) return; // prevent double edit
            $tr.addClass('editing');
            $tr.data('original', $tr.find('td[data-attribute]').map(function() { return $(this).text(); }).get());
            $tr.find('td[data-attribute]').each(function() {
                const $td = $(this);
                const oldVal = $td.text();
                $td.html(`<input type="text" value="${oldVal}" data-attr="${$td.data('attribute')}" />`);
            });
            const $actions = $tr.find('td.actions');
            $actions.append('<button class="save">✅</button><button class="cancel">❌</button>');
        });
    
        $('#dataTable').on('click', '.save', function() {
            const $tr = $(this).closest('tr');
            const id = $tr.data('id');
            const updates = {};
            $tr.find('input').each(function() {
                updates[$(this).data('attr')] = $(this).val();
            });
            ajaxCall('Updating...', {
                type: 'PUT',
                url: `/_api/serverlogics/dataverse-crud-operations?entitySetName=contacts&id=${id}`,
                contentType: 'application/json',
                data: JSON.stringify(updates),
                success: () => { Object.assign(data.find(r => r.id === id), updates); render(); }
            });
        });
    
        $('#dataTable').on('click', '.cancel', function() {
            const $tr = $(this).closest('tr');
            const original = $tr.data('original');
            $tr.find('td[data-attribute]').each(function(i) {
                $(this).text(original[i]);
            });
            $tr.removeClass('editing');
            $tr.find('button.save, button.cancel').remove();
        });
    
        $('#dataTable').on('click', '.delete', function() {
            const $tr = $(this).closest('tr');
            if (confirm('Delete "' + $tr.data('name') + '"?')) {
                ajaxCall('Deleting...', {
                    type: 'DELETE',
                    url: `/_api/serverlogics/dataverse-crud-operations?entitySetName=contacts&id=${$tr.data('id')}`,
                    contentType: 'application/json',
                    success: () => removeRecord($tr.data('id'))
                });
            }
        });
    
        $('#dataTable').on('click', '.add', function() {
            const r = { firstname: 'Alton', lastname: 'Stott' + Math.floor(Math.random() * 900 + 100), emailaddress1: 'Alton.Stott@contoso.com', telephone1: '555-123-4567' };
            ajaxCall('Adding...', {
                type: 'POST',
                url: '/_api/serverlogics/dataverse-crud-operations?entitySetName=contacts',
                contentType: 'application/json',
                data: JSON.stringify(r),
                success: (res, s, xhr) => { r.id = xhr.getResponseHeader('entityid'); r.fullname = r.firstname + ' ' + r.lastname; addRecord(r); }
            });
        });
    
        ajaxCall('Loading...', {
            type: 'GET',
            url: '/_api/serverlogics/dataverse-crud-operations?entitySetName=contacts&additionalParameters=$select=fullname,firstname,lastname,emailaddress1,telephone1',
            contentType: 'application/json'
        }).done(res => {
            try {
                const p = JSON.parse(res.data); const b = JSON.parse(p.Body);
                data = (b.value || []).map(r => ({ ...r, id: r.contactid, fullname: r.fullname }));
                render();
            } catch (e) { console.error(e); }
        });
    });
    </script>
    

Paso 3: Configurar permisos

Creación de un rol web

Si actualmente no tiene un rol web con permisos para la tabla a la que accede a través de la lógica del servidor o requiere un contexto diferente de acceso a los datos, los pasos siguientes muestran cómo crear un nuevo rol web y asignar permisos de tabla.

  1. Inicie la aplicación Administración del portal.
  2. En el panel izquierdo, en la sección Seguridad , seleccione Roles web.
  3. Seleccione Nuevo.
  4. En el cuadro Nombre , escriba Usuario lógico del servidor (o cualquier nombre que mejor refleje el rol del usuario que accede a esta funcionalidad).
  5. En la lista de Sitios web, seleccione el registro de su sitio web.
  6. Haga clic en Guardar.

Crear permisos de tabla

  1. Inicie el estudio de diseño de Power Pages.
  2. Seleccione el área de trabajo Seguridad .
  3. En la sección Proteger , seleccione Permisos de tabla.
  4. Seleccione Nuevo permiso.
  5. En el cuadro Nombre , escriba Permiso de tabla de contacto.
  6. En la lista Nombre de la tabla, seleccione Contacto (contacto).
  7. En la lista Tipo de acceso , seleccione Global.
  8. Seleccione Leer, Escribir, Crear y Eliminar privilegios.
  9. Seleccione + Agregar roles y seleccione el rol web que seleccionó o creó anteriormente.
  10. Seleccione Guardar y cerrar.

Agregar contactos al rol web

  1. Inicie la aplicación Administración del portal.
  2. En el panel izquierdo, en la sección Seguridad , seleccione Contactos.
  3. Seleccione un contacto que quiera usar en este ejemplo para la lógica del servidor.

    Nota:

    Este contacto es la cuenta de usuario que se usa en este ejemplo para probar la lógica del servidor. Asegúrese de seleccionar el contacto correcto en el portal.

  4. Seleccione Relacionado>Roles web.
  5. Seleccione Agregar rol web existente.
  6. Seleccione el rol usuario de lógica del servidor, creado anteriormente.
  7. Selecciona Agregar.
  8. Seleccione Guardar y cerrar.

Paso 4: Usar la lógica del servidor para leer, ver, editar, crear y eliminar

Para probar la funcionalidad de la API web:

  1. Seleccione Vista previa y luego elija Escritorio.
  2. Inicie sesión en el sitio con la cuenta de usuario a la que se ha asignado el rol de usuario lógica de servidor que creó anteriormente.
  3. Vaya a la página web lógica del servidor creada anteriormente.

Introducción a la lógica del servidor
Lógica del servidor de autor
Objetos de servidor