Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
In deze handleiding stelt u een webpagina en aangepaste websjabloon in die de serverlogica gebruiken om records uit de tabel met contactpersonen te lezen, schrijven, bijwerken en verwijderen.
Stap 1: Een serverlogica maken
Meld u aan bij Power Pages.
Selecteer site + Bewerken.
Navigeer naar de werkruimte Instellen en selecteer vervolgens Serverlogica (preview).
Selecteer +Nieuwe serverlogica.
Voer de naam in voor de serverlogica. Deze naam wordt gebruikt in de API als resource-id tijdens het samenstellen van de logische API van de server.
Voorbeeld: dataverse-crud-bewerkingen
Selecteer +Rollen toevoegen om de juiste webrol toe te wijzen.
Selecteer 3 puntjes (...) naast de naam en selecteer Code bewerken.
Selecteer Visual Studio Code openen om de aangepaste logica te ontwerpen. U vindt vooraf gedefinieerde methoden en scripts in het bestand.
Definieer de serverlogicamethode voor het lezen, bewerken, maken en verwijderen van de records van contactpersonen.
Lezen: Onderstaand script toevoegen binnen de get-methode
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); }Maken: Onderstaand script toevoegen in berichtmethode
const data = Server.Context.Body; const entitySetName = Server.Context.QueryParameters["entitySetName"]; return Server.Connector.Dataverse.CreateRecord(entitySetName, data);Update: Voeg het onderstaande script toe in de put-methode
const id = Server.Context.QueryParameters["id"]; const data = Server.Context.Body; return Server.Connector.Dataverse.UpdateRecord("accounts", id, data);Verwijderen: Toevoegen in verwijderingsmethode
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);Sla het bestand op.
Hier volgt de volledige serverlogicacode die kan worden geplakt
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 }); } }
Stap 2: Webpagina maken
Start de Power Pages-ontwerpstudio.
Selecteer + Page in de werkruimte Pagina's.
Voer in het dialoogvenster Een pagina toevoegenserverlogica in het vak Naam in en selecteer Starten in een lege indeling.
Selecteer Toevoegen.
Selecteer de optie Code bewerken in de rechterbovenhoek.
Selecteer Visual Studio Code openen.
Kopieer het volgende voorbeeldcodefragment en plak het tussen de
<div></div>tags van de paginasectie.<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>
Stap 3: Machtigingen configureren
Een webrol maken
Als u momenteel geen webrol hebt met machtigingen voor de tabel die u opent via de serverlogica of een andere context nodig hebt voor toegang tot de gegevens, ziet u in de volgende stappen hoe u een nieuwe webrol maakt en tabelmachtigingen toewijst.
- Start de app Portalbeheer.
- Selecteer webrollen in het linkerdeelvenster in de sectie Beveiliging.
- Klik op Nieuw.
- Voer in het vak Naamserverlogica gebruiker in (of een naam die het beste overeenkomt met de rol van de gebruiker die toegang heeft tot deze functionaliteit).
- In de lijst Website selecteert u uw website-record.
- Selecteer Opslaan.
Tabelmachtigingen maken
- Lanceer de Power Pages-ontwerpstudio.
- Selecteer de beveiligingswerkruimte .
- Selecteer onder de sectie Beveiligende optie Tabelmachtigingen.
- Selecteer Nieuwe machtiging.
- Voer in het vak NaamContacttabelmachtiging in.
- In de Tabelnaam lijst, selecteer Contact (contact).
- Selecteer Globaal in de lijst Toegangstype.
- Selecteer lees, schrijf, maak en verwijderrechten.
- Selecteer + Rollen toevoegen en selecteer de webrol die u eerder hebt geselecteerd of gemaakt.
- Kies Opslaan en sluiten.
Contactpersonen toevoegen aan de webrol
- Start de app Portalbeheer.
- Selecteer contactpersonen in het linkerdeelvenster in de sectie Beveiliging.
- Selecteer een contactpersoon die u in dit voorbeeld wilt gebruiken voor de serverlogica.
Opmerking
Deze contactpersoon is het gebruikersaccount dat in dit voorbeeld wordt gebruikt voor het testen van de serverlogica. Zorg ervoor dat u de juiste contactpersoon selecteert in uw portal.
- Selecteer Verwante>webrollen.
- Selecteer Bestaande webrol toevoegen.
- Selecteer de rol Serverlogica gebruiker, die u eerder hebt gemaakt.
- Selecteer Toevoegen.
- Kies Opslaan en sluiten.
Stap 4: Gebruik de serverlogica om informatie te lezen, weer te geven, te bewerken, te maken en te verwijderen.
De web-API-functionaliteit testen:
- Selecteer Voorbeeld en kies Bureaublad.
- Meld u aan bij uw site met het gebruikersaccount waaraan de serverlogicagebruikersrol is toegewezen die u eerder hebt gemaakt.
- Ga naar de serverlogica-webpagina die eerder is gemaakt.
Verwante informatie
Overzicht van serverlogica
Serverlogica ontwerpen
Server-objecten