Een toepassing met één pagina maken en implementeren in Power Pages

Power Pages ondersteunt het integreren van spa-code (single-page application) die is gemaakt met ai-hulpprogramma's van de volgende generatie, zoals GitHub Copilot. Met deze mogelijkheid kunnen ontwikkelaars moderne front-endervaringen op basis van onderdelen in Power Pages brengen met behulp van natuurlijke taal als coderingsinterface.

Door AI-gegenereerde code te begeleiden, testen en verfijnen, kunnen makers hun focus verleggen van repetitieve implementatietaken naar indeling op een hoger niveau. Deze aanpak biedt intuïtievere, creatievere ontwikkeling en behoudt tegelijkertijd kwaliteit en standaarden op ondernemingsniveau.

In dit artikel leest u hoe u het volgende kunt doen:

Maak en stel een SPA-project in voor Power Pages met behulp van de Power Platform CLI (PAC CLI).
Upload en download code van en naar uw Power Pages-site.
Zet een veilige en onderhoudbare projectstructuur op.
Leer belangrijke verschillen tussen op SPA gebaseerde en traditionele Power Pages implementaties.

Note

Een SPA-site is een Power Pages-site die volledig in de browser van de gebruiker draait (client-side rendering). In tegenstelling tot traditionele Power Pages-sites kunt u SPA-sites alleen beheren via broncode en opdrachtregelhulpprogramma's (CLI-tools).
Git-integratie van Power Platform wordt niet ondersteund voor Single-Page Application (SPA) websites in Power Pages.

Vereiste voorwaarden

Voordat u begint, moet u ervoor zorgen dat u het volgende hebt:

Een Power Pages-omgeving met admin-bevoegdheden.
Pac CLI (Power Platform CLI) versie 1.44.x of hoger geïnstalleerd en geverifieerd.
Een Power Pages-site op versie 9.7.4.x of hoger.
JavaScript-bestandsuploads toestaan in Dataverse-omgevingen.
Een lokale Git-opslagplaats met uw aangepaste front-endproject, zoals React, Angular of Vue.

JavaScript-bestandsuploads toestaan

Standaard blokkeren sommige Dataverse-omgevingen het uploaden van JavaScript-bestanden (.js). Als u de fout 'Importeren is mislukt: de bijlage is geen geldig type of te groot. Het kan niet worden geüpload of gedownload.", werk uw omgevingsinstellingen bij om dit bestandstype toe te staan.

Volg deze stappen om de instellingen in het Power Platform-beheercentrum voor een omgeving aan te passen:

Meld u aan bij het Power Platform-beheercentrum.
Selecteer in het navigatiedeelvenster de optie Beheren.
Selecteer in het deelvenster BeherenOmgevingen.
Selecteer een omgeving.
Selecteer instellingen in de opdrachtbalk.
Vouw Product uit en selecteer Beveiliging en privacy.
Verwijder in de sectie js uit de lijst met bestandsextensies.
Selecteer Opslaan.

Een SPA-site maken en implementeren

Power Pages SPA-sites worden beheerd met de PAC CLI-opdrachten upload-code-site en download-code-site. Nadat u een site hebt geüpload, wordt deze weergegeven in Power Pages in de lijst Inactive sites. Activeer de site om deze beschikbaar te maken voor gebruikers.

Een SPA-site uploaden

Gebruik de opdracht pac pages upload-code-site om uw lokale bron en gecompileerde assets te uploaden naar uw Power Pages-omgeving.

Syntax

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parameters

Kenmerk	Alias	Verplicht	Beschrijving
`--rootPath`	`-rp`	Yes	Lokale map met de bronbestanden van uw site
`--compiledPath`	`-cp`	No	Pad naar gecompileerde activa, zoals React `build`
`--siteName`	`-sn`	No	Weergavenaam voor uw Power Pages-site

Example

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

Als u geen bestaand project hebt, kunt u de voorbeeld-implementaties van SPA-sites proberen met React, Angular en Vue.

Uploadparameters definiëren met `powerpages.config.json`

Pas het gedrag van de upload-code-site opdracht aan door een powerpages.config.json bestand op te slaan in de hoofdmap van uw site. Wanneer dit bestand aanwezig is, voert u upload-code-site alleen uit met de parameter --rootPath. Met de opdracht worden de resterende waarden uit het configuratiebestand gelezen. Als u zowel opdrachtregelargumenten als configuratiewaarden opgeeft, hebben de opdrachtregelargumenten voorrang.

Configuratievelden

Veld	Typ	Verplicht	Beschrijving
`siteName`	tekenreeks	Yes	Weergavenaam voor de Power Pages-site.
`compiledPath`	tekenreeks	Yes	Pad naar de map met gecompileerde uitvoer (bijvoorbeeld de map Vite `dist` of React `build`), ten opzichte van `powerpages.config.json`.
`defaultLandingPage`	tekenreeks	Yes	De HTML-pagina die wordt weergegeven wanneer de hoofdmap van de site wordt geopend, relatief ten opzichte van `compiledPath` (meestal `index.html`).
`bundleFilePatterns`	string[]	No	Een lijst met jokertekenpatronen die bestanden in de site `web-files` identificeren die door de CLI worden verwijderd voordat de nieuwe build wordt geüpload. Gebruik dit veld om verouderde, inhoudshashbundels op te schonen, zodat oude assets niet op de site worden verzameld. Zie Codesplitsing en het opschonen van bundels.
`includeSource`	boolean	No	Wanneer `true`, de opdracht uploadt uw broncode naast de gecompileerde assets. Wordt standaard ingesteld op `false`.
`sourceExcludePatterns`	string[]	No	Jokerpatronen voor bronbestanden die niet mogen worden geüpload. Is alleen van toepassing als `includeSourcetrue` is (bijvoorbeeld om `node_modules` of lokale omgevingsbestanden over te slaan).

Raadpleeg de powerpages.config.json schema voor de meest nauwkeurige en actuele veldreferentie. Voeg de overeenkomende $schema eigenschap toe aan uw configuratiebestand om validatie en automatisch aanvullen in editors in te schakelen die ondersteuning bieden voor JSON-schema.

Voorbeeld van `powerpages.config.json`

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Een SPA-site downloaden

Gebruik de opdracht pac pages download-code-site om de code van een bestaande site te downloaden naar een lokale directory, zodat u deze kunt bewerken of als back-up kunt gebruiken.

Syntax

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parameters

Kenmerk	Alias	Verplicht	Beschrijving
`--environment`	`-env`	No	Dataverse-omgeving (GUID of volledige URL). Standaard wordt uw actieve autorisatieprofiel gebruikt
`--path`	`-p`	Yes	Lokale directory om de sitecode te downloaden
`--webSiteId`	`-id`	Yes	Websiterecord-GUID van de Power Pages SPA-site
`--overwrite`	`-o`	No	Overschrijf bestaande bestanden in de doelmap als deze bestaan

Example

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

Uw site activeren en testen

Ga naar Power Pages.
Selecteer Inactieve sites, zoek uw site en selecteer Opnieuw activeren.
Wanneer de site actief is, gaat u naar de URL van uw site om de implementatie te controleren.

Tip

Met elke latere upload-code-site-opdracht wordt de actieve site automatisch bijgewerkt.

Projectstructuur en configuratie

Een consistente projectindeling zorgt ervoor dat het uploaden correct verloopt.

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

Gebruik het optionele powerpages.config.json-bestand om aan te passen hoe de upload-code-site-opdracht werkt.

Code splitsen en bundel opschonen

Naarmate een toepassing met één pagina groeit, wordt één JavaScript-bundel groot en langzaam geladen. Moderne buildhulpprogramma's lossen dit probleem op met codesplitsing. Met deze techniek wordt de app opgesplitst in kleinere segmenten die de browser op aanvraag downloadt (bijvoorbeeld alleen wanneer de gebruiker naar een specifieke route navigeert). Elk segment wordt verzonden met een inhouds-hash in de bestandsnaam, zoals Dashboard-BSbmIXoe.js, zodat browsers deze gedurende lange perioden in de cache kunnen opslaan en deze alleen opnieuw kunnen downloaden wanneer de inhoud ervan wordt gewijzigd.

Codesplitsing brengt een implementatieoverweging met zich mee die uniek is voor Power Pages SPA-sites: omdat elke build nieuwe gehashte bestandsnamen produceert, zouden herhaalde upload-code-site-uitvoeringen de oude gehashte bestanden op de site achterlaten. Na verloop van vele implementaties hopen deze zwevenede segmenten zich op in de web-files van de site. Het bundleFilePatterns veld in powerpages.config.json bestaat om ze op te schonen.

Code splitsen inschakelen

Code splitsen wordt verwerkt door uw front-end-buildhulpprogramma, niet door Power Pages, dus de benadering is afhankelijk van het framework en de bundelaar die u gebruikt. De meest voorkomende techniek is het laden van delen van de app met dynamische importbewerkingen, die vaak op route- of weergaveniveau worden toegepast, zodat elke sectie alleen wordt gedownload wanneer een gebruiker ernaar navigeert (luie laadbewerking).

Bundelaars zoals Vite, webpack en esbuild kunnen ook modules expliciet groeperen in benoemde segmenten. Zie de documentatie voor uw framework en bundelaar voor de exacte configuratie.

dist/assets/
├─ index-BJltBIP-.js        ← app entry
├─ index-DMwMk7hv.css       ← styles
├─ Dashboard-BSbmIXoe.js    ← lazy route chunk
├─ InvoiceList-DwjrGrAI.js  ← lazy route chunk
└─ InvoiceDetail-D3DVGkeM.js← lazy route chunk

Welke benadering u ook kiest, het resultaat is hetzelfde en het is het onderdeel dat van belang is voor implementatie: de build verzendt meerdere uitvoerbestanden, elk met een inhouds-hash in de naam. Omdat deze hashes veranderen wanneer de inhoud van een bestand wordt gewijzigd, produceert elke build een andere set bestandsnamen. In de volgende secties wordt uitgelegd hoe u uw Dataverse-omgevingen schoon kunt houden wanneer deze namen veranderen.

Hoe `upload-code-site` verouderde bundels opschoont

Voordat u uw gecompileerde assets uploadt, upload-code-site verwijdert u elk bestand in de site web-files dat overeenkomt met een jokertekenpatroon in bundleFilePatternsen uploadt u vervolgens de huidige build. Met dit gedrag voor verwijderen en uploaden blijft de geïmplementeerde bestandsset identiek aan de meest recente gecompileerde uitvoer in plaats van elke build op de vorige laag te plaatsen.

Het opschonen werkt alleen als de jokertekenpatronen overeenkomen bundleFilePatterns met de bestandsnamen die uw build verzendt. Er zijn twee manieren om ze nauwkeurig te houden, afhankelijk van hoe bestanden van het buildhulpprogramma worden genoemd.

Optie 1: Jokertekenpatronen rechtstreeks weergeven

Veel buildhulpprogramma's behouden een stabiel naamvoorvoegsel en wijzigen alleen de inhoudshash, zoals index-[hash].js. Wanneer uw uitvoerbestandsnamen een voorspelbaar patroon als dit volgen, vermeldt u een jokertekenpatroon voor elk van deze bundleFilePatternsbestanden. Er is geen extra tooling nodig:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Een jokertekenpatroon zoals index-*.js komt bij elke build overeen met dat bestand, ongeacht de hash. Voeg één vermelding per uitvoerbestand toe en voeg een nieuw patroon toe wanneer uw build begint met het produceren van een nieuw uitvoerbestand.

Optie 2: Jokertekenpatronen genereren met een script na de build

Gebruik deze methode wanneer de namen van uitvoerbestanden geen voorspelbaar patroon volgen, of wanneer uw app veel bestanden produceert waarvan de namen veranderen terwijl u routes toevoegt en verwijdert, waardoor een lijst met handhandhaafde fouten maakt. Een kort script dat wordt uitgevoerd nadat de build de gecompileerde uitvoer scant en herschrijft met een jokertekenpatroon voor elk verzonden bundleFilePatterns bestand. Wanneer een build-hulpprogramma bestanden bijvoorbeeld de naam [name]-[hash].[ext] geeft, vereenvoudigt het script Dashboard-BSbmIXoe.js tot het patroon Dashboard-*.js.

scripts/postbuild.js:

#!/usr/bin/env node

/**
 * Post-build script: scans dist/assets/ and updates powerpages.config.json
 * with bundleFilePatterns that match all Vite-generated chunks.
 *
 * This ensures `pac pages upload-code-site` cleans up old hashed bundles
 * on each deploy instead of accumulating stale files.
 *
 * Usage: node scripts/postbuild.js
 * Or via npm: "postbuild": "node scripts/postbuild.js" in package.json
 */

import { readdirSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const ROOT = join(import.meta.dirname, '..')
const DIST_ASSETS = join(ROOT, 'dist', 'assets')
const CONFIG_PATH = join(ROOT, 'powerpages.config.json')

// Vite output format: [name]-[hash].[ext]
// We want to extract "name" and "ext" to produce "name-*.ext" patterns
const HASH_PATTERN = /^(.+)-[A-Za-z0-9_-]{6,12}\.(js|css)$/

try {
  const files = readdirSync(DIST_ASSETS)
  const patternSet = new Set()

  for (const file of files) {
    const match = file.match(HASH_PATTERN)
    if (match) {
      const [, baseName, ext] = match
      patternSet.add(`${baseName}-*.${ext}`)
    }
  }

  const patterns = [...patternSet].sort()

  if (patterns.length === 0) {
    console.log('No hashed bundles found in dist/assets/ — skipping config update.')
    process.exit(0)
  }

  // Read current config
  const config = JSON.parse(readFileSync(CONFIG_PATH, 'utf-8'))
  const oldPatterns = config.bundleFilePatterns || []

  // Check if update is needed
  const oldSet = new Set(oldPatterns)
  const newSet = new Set(patterns)
  const changed = oldSet.size !== newSet.size || [...newSet].some(p => !oldSet.has(p))

  if (!changed) {
    console.log(`bundleFilePatterns already up-to-date (${patterns.length} patterns).`)
    process.exit(0)
  }

  // Update config
  config.bundleFilePatterns = patterns
  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + '\n', 'utf-8')

  console.log(`Updated powerpages.config.json with ${patterns.length} bundle patterns:`)
  for (const p of patterns) {
    console.log(`  ${p}`)
  }
} catch (err) {
  console.error('postbuild error:', err.message)
  process.exit(1)
}

Verbind het script in uw build zodat het altijd wordt uitgevoerd na de bundelaar:

{
  "scripts": {
    "build": "tsc -b && vite build && node scripts/postbuild.js"
  }
}

Een implementatie bestaat nu uit twee opdrachten en de site verzamelt nooit zwevende segmenten:

npm run build
pac pages upload-code-site --rootPath .

Na de build weerspiegelt powerpages.config.json de exacte huidige bundels, bijvoorbeeld:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "Dashboard-*.js",
    "InvoiceDetail-*.js",
    "InvoiceList-*.js",
    "index-*.css",
    "index-*.js"
  ]
}

Verificatie en autorisatie

Power Pages SPA-sites gebruiken hetzelfde beveiligingsmodel als traditionele Power Pages-sites.

Identiteitsproviders configureren

Ga naar Power Pages.
Zoek uw site en selecteer Bewerken.
SelecteerId-providers voor beveiliging>.
identiteitsproviders toevoegen of instellen, zoals Microsoft Entra ID.
Elke nieuwe site heeft automatisch een standaard Microsoft Entra ID-provider.

Toegang krijgen tot gebruikerscontext in code

Metagegevens over verificatie ophalen op de client:

URL van autoriteit:

De autorisatie- of aanmeldings-URL voor Microsoft Entra ID is:
```
https://login.windows.net/<tenantId>
```
Zoek de Authority-URL voor andere geconfigureerde identiteitsproviders door naar de configuratie-instellingen van Power Pages><your site>>Security>Identity providers> te gaan.

Gebruikersdetails:

window["Microsoft"].Dynamic365.Portal.User

React-voorbeeldstroom

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Power Pages Web-API's gebruiken

Ontwikkelaars kunnen Power Pages Web-API's gebruiken om inhoud in de gebruikersinterface te laden of records te maken, bij te werken en te verwijderen. Voordat u deze API's gebruikt, moet u ervoor zorgen dat de vereiste web-API's zijn ingeschakeld en dat de juiste tabelmachtigingen en webrollen juist zijn geconfigureerd.


// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Lokale ontwikkeling instellen door web-API-aanroepen vanuit localhost in te schakelen met behulp van Microsoft Entra ID-verificatie

Ontwikkelaars hebben snellere iteratiecycli, lokale foutopsporing en dynamische herlaadmogelijkheden nodig bij het bouwen van toepassingen. SPA ondersteunt deze workflows door beveiligde web-API-aanroepen vanuit localhost mogelijk te maken met behulp van Microsoft Entra ID (Azure AD) v1-authenticatie.

Met deze instelling kunt u het volgende doen:

Voer uw app lokaal uit met volledige verificatieondersteuning.
Gebruik moderne ontwikkelhulpprogramma's zoals Vite voor het opnieuw laden en snelle feedback.
Vermijd CORS-problemen bij het aanroepen van Power Pages web-API's.
Versnel de ontwikkeling zonder wijzigingen in de portal te implementeren.

Deze configuratie maakt een productieve lokale ontwikkelervaring voor SPA mogelijk, zodat ontwikkelaars snel kunnen bouwen, testen en itereren met volledige API-toegang en ondersteuning voor verificatie.

Important

Gebruik alleen Microsoft Entra v1-eindpunten voor verificatie.
Bearer-verificatie wordt alleen ondersteund in portalversie 9.7.6.6 of hoger.
Pas deze instellingen alleen toe in ontwikkelomgevingen.

Configuratiestappen

SPA-authenticatie inschakelen
1. Open in Azure portal de Microsoft Entra-app die is geregistreerd voor uw portal.
2. Schakel SPA-verificatie (Single Page Application-authenticatie) in.
3. Voeg localhost toe als redirect-URI met behulp van de platformconfiguratie toepassing met één pagina. Zie Een omleidings-URI toevoegen in uw toepassing voor meer informatie.
  - Redirect-URI: http://localhost:<port>/.

Site-instellingen toevoegen

Voeg deze site-instellingen toe in Power Pages:

Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

ADAL.js gebruiken voor verificatie
- Implementeer verificatie aan de clientzijde met behulp van ADAL.js.
Note

MSAL.js is niet compatibel omdat Power Pages gebruikmaakt van Microsoft Entra v1-eindpunten, terwijl MSAL v2 gebruikt. De indeling van de verlener verschilt per versie.
Autorisatieheader toevoegen
- Neem deze header op in alle web-API-aanvragen:
```
Authorization: Bearer <id_token>
```
Zichtbaarheid van site instellen op Openbaar
- Met deze instelling heeft localhost u toegang tot de site voor ontwikkelings- en testdoeleinden.

Ontwikkelingsproxy configureren

Als u Vite gebruikt, voegt u deze code toe om CORS-problemen te vite.config.js voorkomen:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Verschillen met bestaande Power Pages sites

De volgende tabel bevat een overzicht van de belangrijkste verschillen tussen SPA-sites die zijn gemaakt met deze functie en traditionele Power Pages-sites.

Feature	Gedrag van SPA-site
Vernieuwen aan serverzijde	Retourneert altijd de hoofdpagina van de site en de router aan de clientzijde geeft subroutes weer.
Routeconflicten	Routes aan de clientzijde hebben voorrang en bij een harde vernieuwing wordt teruggegaan naar de hoofdmap.
Werkruimte Pagina's	De werkruimte Pagina´s wordt niet ondersteund. Gebruik clientroutering en clientsitepagina's. Voor beveiliging op paginaniveau controleert u toegewezen webrollen met het algemene gebruikersobject en geeft u de gebruikersinterface voorwaardelijk weer.
Werkruimte Stijl	Opmaak met de werkruimte Stijl wordt niet ondersteund. Gebruik de stijl van uw framework, zoals CSS, CSS-in-JSof hulpprogrammaklassen.
Lokalisatie	Ondersteuning voor één taal Implementeer het laden van resources aan de clientzijde.
Liquid-sjablonen	Liquid-code en Liquid-sjablonen worden niet ondersteund. Toegang tot gegevens met behulp van de sjabloonengine en web-API's van uw framework.

FAQ

Welke ondersteuning is beschikbaar voor unit- en integratietesten?

Momenteel is er geen ingebouwde ondersteuning voor unit- en integratietesten. Ontwikkelaars moeten deze tests lokaal of binnen hun CI/CD-pijplijnen schrijven en uitvoeren.

Is er ondersteuning voor Power Fx-integratie met WebAssembly?

Deze mogelijkheid wordt momenteel niet ondersteund.

Is broncode beschikbaar in Power Pages?

Op dit moment kunnen makers websites bouwen met Behulp van TypeScript of GitHub Copilot Agent. De gecompileerde JavaScript- en CSS-bestanden zijn toegankelijk en kunnen worden bewerkt in Visual Studio Code. Directe en uitgebreide bewerking van HTML-bestanden wordt momenteel echter niet ondersteund.

Kan ik extern een onderdeel maken met behulp van deze functie en deze naar een Power Pages site brengen?

Nee, u kunt met deze functie geen extern gegenereerd onderdeel naar een bestaande Power Pages-site brengen.

Kan ik kant-en-klare onderdelen, zoals lijsten en formulieren toevoegen?

Het toevoegen van kant-en-klare onderdelen, zoals lijsten en formulieren wordt momenteel niet ondersteund. U kunt echter aangepaste formulieren en lijsten maken met behulp van het React-framework en web-API's.

Kan ik een SPA-site als een PWA inschakelen vanuit de werkruimte Set up?

No. SPA-sites ondersteunen de instelling voor progressieve web-apps (PWA) niet in werkruimte instellen. Deze beperking betekent dat u de sectie Mobiel niet kunt gebruiken om een site in te schakelen als een PWA. Als u PWA-mogelijkheden wilt toevoegen, zoals installeerbare app-ervaringen en offlinepagina's, implementeert u deze in uw frameworkcode. Voeg bijvoorbeeld een web-app-manifest en servicemedewerker toe.

Hoe werkt broncodebeheer?

Ontwikkelaars kunnen Power Platform Git-integratie gebruiken voor broncodebeheer. Alleen de gecompileerde webbestanden worden aan de opslagplaats toegevoegd, niet de volledige broncode.

Wordt op deze sites SEO ondersteund?

Omdat SPA-sites zijn gebouwd met het React-framework en gebruikmaken van CSR (Client-Side Rendering), is SEO-ondersteuning beperkt.

Welke Power Pages beveiligingsondersteuning en governanceondersteuning bieden SPA-sites?

Power Pages dwingt tabelmachtigingen en beveiligingswebrollen af voor web-API-aanroepen, zodat de toegang tot gegevens overeenkomt met gebruikersrollen. Gebruik het window["Microsoft"].Dynamic365.Portal.User-object om basisgebruikerseigenschappen op te halen en ervaringen aan te passen op basis van gebruikerspersona's.

Bovendien ondersteunen SPA-sites:

Openbare en privé-siteconfiguraties
Governance-instellingen, inclusief controle over anonieme gegevenstoegang
Verificatieproviderconfiguraties

Deze functies zorgen voor een veilige en compatibele integratie van aangepaste onderdelen binnen Power Pages.

Feedback

Is deze pagina nuttig?

Last updated on 2026-07-21

Een toepassing met één pagina maken en implementeren in Power Pages

Vereiste voorwaarden

JavaScript-bestandsuploads toestaan

Een SPA-site maken en implementeren

Een SPA-site uploaden

Syntax

Parameters

Example

Uploadparameters definiëren met powerpages.config.json

Configuratievelden

Voorbeeld van powerpages.config.json

Een SPA-site downloaden

Syntax

Parameters

Example

Uw site activeren en testen

Projectstructuur en configuratie

Code splitsen en bundel opschonen

Code splitsen inschakelen

Hoe upload-code-site verouderde bundels opschoont

Optie 1: Jokertekenpatronen rechtstreeks weergeven

Optie 2: Jokertekenpatronen genereren met een script na de build

Verificatie en autorisatie

Identiteitsproviders configureren

Toegang krijgen tot gebruikerscontext in code

React-voorbeeldstroom

Power Pages Web-API's gebruiken

Lokale ontwikkeling instellen door web-API-aanroepen vanuit localhost in te schakelen met behulp van Microsoft Entra ID-verificatie

Configuratiestappen

Verschillen met bestaande Power Pages sites

FAQ

Welke ondersteuning is beschikbaar voor unit- en integratietesten?

Is er ondersteuning voor Power Fx-integratie met WebAssembly?

Is broncode beschikbaar in Power Pages?

Kan ik extern een onderdeel maken met behulp van deze functie en deze naar een Power Pages site brengen?

Kan ik kant-en-klare onderdelen, zoals lijsten en formulieren toevoegen?

Kan ik een SPA-site als een PWA inschakelen vanuit de werkruimte Set up?

Hoe werkt broncodebeheer?

Wordt op deze sites SEO ondersteund?

Welke Power Pages beveiligingsondersteuning en governanceondersteuning bieden SPA-sites?

Verwante informatie

Feedback

Aanvullende resources

Uploadparameters definiëren met `powerpages.config.json`

Voorbeeld van `powerpages.config.json`

Hoe `upload-code-site` verouderde bundels opschoont