Vytvorte a nasadte jednostránkovú aplikáciu v Power Pages

Power Pages podporuje integráciu jednostránkového aplikačného kódu (SPA) vytvoreného pomocou nástrojov novej generácie podporovaných AI, ako je GitHub Copilot. Táto schopnosť umožňuje vývojárom priniesť moderné, komponentové front-end zážitky do Power Pages použitím prirodzeného jazyka ako kódovacieho rozhrania.

Prostredníctvom riadenia, testovania a zdokonaľovania kódu generovaného umelou inteligenciou môžu tvorcovia presunúť svoju pozornosť z opakujúcich sa implementačných úloh na orchestráciu na vyššej úrovni. Tento prístup umožňuje intuitívnejší a tvorivejší vývoj a zároveň zachovanie kvality a štandardov na podnikovej úrovni.

Tento článok vám ukáže, ako:

Vytvorte a nastavte SPA projekt pre Power Pages pomocou Power Platform CLI (PAC CLI).
Nahrávajte a sťahujte kódové materiály na a z vašej stránky Power Pages.
Vytvorte bezpečnú a udržiavateľnú štruktúru projektu.
Naučte sa kľúčové rozdiely medzi SPA založenými a tradičnými implementáciami Power Pages.

Poznámka

SPA stránka je Power Pages stránka, ktorá beží úplne v prehliadači používateľa (renderovanie na strane klienta). Na rozdiel od tradičných stránok Power Pages spravujete SPA stránky iba prostredníctvom zdrojového kódu a nástrojov príkazového riadku (CLI).
Power Platform Git integrácia nie je podporovaná na webových stránkach Single-Page Application (SPA) v Power Pages.

Požiadavky

Predtým, ako začnete, sa uistite, že máte:

Prostredie Power Pages s administrátorskými oprávneniami.
Power Platform Nainštalované a overené rozhranie CLI (PAC CLI) verzie 1.44.x alebo novšej.
Stránka Power Pages vo verzii 9.7.4.x alebo novšej.
Umožniť nahrávanie JavaScript súborov v prostrediach Dataverse.
Lokálny Git repozitár s vaším vlastným front-end projektom, ako sú React, Angular alebo Vue.

Povolenie nahrávania JavaScript súborov

Niektoré prostredia Dataverse predvolene blokujú nahrávanie.js JavaScript () súborov. Ak narazíte na chybu "Import neúspešný: Príloha buď nie je platný typ, alebo je príliš veľká. Nedá sa nahrať ani stiahnuť.", aktualizujte nastavenia prostredia, aby tento typ súboru povolili.

Ak chcete upraviť nastavenia v centre spravovania pre dané prostredie, postupujte podľa týchto krokov: Power Platform

Prihláste sa do centra spravovania Power Platform.
V navigačnej table vyberte položku Spravovať.
V table Spravovať vyberte možnosť Prostredia.
Vyberte prostredie.
Na paneli príkazov vyberte položku Nastavenia.
Rozbaľte položku Produkt a potom vyberte položku Súkromie a zabezpečenie.
V sekcii Blokované prílohy odstráňte js zo zoznamu prípon súboru.
Vyberte položku Uložiť.

Vytvorenie a nasadenie lokality SPA

Power Pages SPA miesta sa spravujú pomocou príkazov PAC CLI upload-code-site a download-code-site. Po nahraní stránky sa objaví v Power Pages v zozname Neaktívne stránky. Aktivujte stránku, aby bola dostupná pre používateľov.

Nahrajte stránku SPA

Použite príkaz pac pages upload-code-site na nahranie lokálneho zdrojového kódu a skompilovaných assetov do Power Pages prostredia.

Syntax

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

Parametre

Parameter	Alias	Required	Description
`--rootPath`	`-rp`	Áno	Lokálny priečinok, ktorý obsahuje zdrojové súbory vašej stránky
`--compiledPath`	`-cp`	Nie	Cesta ku kompilovaným assetom, ako napríklad React `build`
`--siteName`	`-sn`	Nie	Zobrazovací názov pre vašu stránku Power Pages

Príklad

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

Ak nemáte existujúci projekt, vyskúšajte vzorové implementácie stránok SPA pomocou React, Angular a Vue.

Definovanie parametrov nahrávania pomocou `powerpages.config.json`

Prispôsobte správanie príkazu upload-code-site pridaním súboru powerpages.config.json do koreňového priečinka vašej stránky. Keď je tento súbor prítomný, spustite upload-code-site sa iba s parametrom --rootPath . Príkaz načíta zostávajúce hodnoty z konfiguračného súboru. Ak zadáte príkazové argumenty aj konfiguračné hodnoty, príkazové argumenty majú prednosť.

Konfiguračné polia

Pole	Typ	Required	Description
`siteName`	reťazec	Áno	Zobrazovací názov pre stránku Power Pages.
`compiledPath`	reťazec	Áno	Cesta k kompilovanému výstupnému adresáru (napríklad do priečinka Vite `dist` alebo React `build` ), vzhľadom na `powerpages.config.json`.
`defaultLandingPage`	reťazec	Áno	HTML stránka sa slúži pri otvorení koreňového miesta vzhľadom na `compiledPath` (typicky `index.html`).
`bundleFilePatterns`	reťazec[]	Nie	Zoznam divokých vzorov identifikujúcich súbory na stránkach `web-files` , ktoré CLI odstráni pred nahraním novej verzie. Použite toto pole na vyčistenie zastaraných, obsahom hashovaných balíkov, aby sa na stránke nehromadili staré assety. Pozri rozdelenie kódu a čistenie balíkov.
`includeSource`	boolovský výraz	Nie	Keď `true`, príkaz nahraje váš zdrojový kód okrem skompilovaných assetov. Predvolene je nastavená na `false`hodnotu .
`sourceExcludePatterns`	reťazec[]	Nie	Divoké vzory pre zdrojové súbory, ktoré treba vylúčiť z nahrávania. Platí len vtedy, keď `includeSource` je ( `true` napríklad na preskakovanie `node_modules` alebo lokálne environmentálne súbory).

Pre najpresnejší a up-to-dátumový referenčný poľový odkaz pozri schémupowerpages.config.json. Pridajte vlastnosť matching $schema do svojho konfiguračného súboru, aby ste povolili validáciu a automatické dopĺňanie v editoroch, ktoré podporujú JSON schému.

Ukážka `powerpages.config.json`

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

Stiahnite si stránku SPA

Na stiahnutie kódu existujúcej stránky do lokálneho adresára na účely úpravy alebo zálohovania použite príkaz pac pages download-code-site .

Syntax

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

Parametre

Parameter	Alias	Required	Description
`--environment`	`-env`	Nie	Dataverse prostredie (GUID alebo úplná URL adresa). Predvolené nastavenie je váš aktívny autorizačný profil
`--path`	`-p`	Áno	Lokálny adresár na stiahnutie kódu stránky
`--webSiteId`	`-id`	Áno	GUID záznamu webovej stránky Power Pages SPA
`--overwrite`	`-o`	Nie	Prepísať existujúce súbory v cieľovom adresári, ak existujú

Príklad

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

Aktivujte a otestujte svoju stránku

Choď na Power Pages.
Vyberte možnosť Neaktívne stránky, vyhľadajte svoju stránku a vyberte možnosť Znova aktivovať.
Keď je stránka aktívna, prejdite na jej URL adresu a skontrolujte jej nasadenie.

Prepitné

Akýkoľvek neskorší príkaz automaticky aktualizuje aktívnu lokalitu. upload-code-site

Štruktúra a konfigurácia projektu

Konzistentné rozloženie projektu pomáha zabezpečiť správne správanie nahrávania.

/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

Na prispôsobenie fungovania príkazu použite voliteľný súbor powerpages.config.json . upload-code-site

Rozdelenie kódu a čistenie balíkov

Ako jednostránková aplikácia rastie, jeden JavaScript balík sa stáva veľkým a pomalým na načítavanie. Tento problém vyriešia moderné nástroje na vytváranie pomocou rozdelenia kódu. Táto technika rozdelí aplikáciu na menšie bloky , ktoré si prehliadač stiahne na požiadanie (napríklad len vtedy, keď používateľ prejde na konkrétnu trasu). Každý chunk je emitovaný s hashom obsahu v názve súboru, napríklad , Dashboard-BSbmIXoe.jstakže prehliadače ho môžu ukladať do vyrovnávacej pamäte na dlhé obdobia a znovu si ho stiahnuť len vtedy, keď sa jeho obsah zmení.

Rozdelenie kódu zavádza špecifickú úlohu nasadenia pre Power Pages SPA stránky: keďže každá zostava produkuje nové hashované názvy súborov, opakované spustenia upload-code-site nechávajú staré hashované súbory na stránke. Počas mnohých nasadení sa tieto osirelé časti hromadia v lokalite web-files. Pole bundleFilePatterns existuje powerpages.config.json na to, aby ich vyčistilo.

Povolenie rozdelenia kódu

Rozdelenie kódu rieši váš front-end build nástroj, nie Power Pages, takže prístup závisí od frameworku a bundlera, ktorý používate. Najbežnejšou technikou je načítanie častí aplikácie pomocou dynamických importov, často aplikovaných na úrovni trasy alebo zobrazenia, takže každá sekcia sa sťahuje len vtedy, keď k nej používateľ naviguje (lenivé načítavanie).

Bundlery ako Vite, webpack a esbuild môžu tiež explicitne zoskupovať moduly do pomenovaných chunkov. Pre presnú konfiguráciu si pozrite dokumentáciu k vášmu frameworku a bundleru.

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

Nech už zvolíte akýkoľvek prístup, výsledok je rovnaký a práve táto časť je dôležitá pre nasadenie: zostava generuje viacero výstupných súborov, z ktorých každý má v názve hash obsah. Keďže tieto hashy sa menia vždy, keď sa obsah súboru zmení, každá zostava vytvára inú sadu názvov súborov. Nasledujúce časti vysvetľujú, ako udržiavať vaše Dataverse prostredia čisté, keď sa tieto názvy menia.

Ako `upload-code-site` čistí staré zväzky

Pred nahraním skompilovaných assetov vymaže každý súbor na stránkeupload-code-site, web-files ktorý zodpovedá divokému vzoru v bundleFilePatterns, a potom nahraj aktuálnu verziu. Toto správanie "vymažte a potom nahrajte" udržiava nasadenú sadu súborov identickú s vaším najnovším kompilovaným výstupom, namiesto toho, aby sa každá zostava vrstvila na predchádzajúcu.

Aby čistenie fungovalo, vzory bundleFilePatterns divokých kart musia zodpovedať názvom súborov, ktoré vaša zostava generuje. Existujú dva spôsoby, ako ich udržať presné, v závislosti od toho, ako váš build tool pomenováva súbory.

Možnosť 1: Priamo uviesť vzory divokých kariet

Mnohé nástroje na zostavenie si zachovávajú stabilný prefix mena a menia iba hash obsahu, napríklad index-[hash].js. Keď názvy výstupných súborov nasledujú predvídateľný vzor ako tento, uveďte vzor žolíka pre každý z nich v .bundleFilePatterns Nie sú potrebné žiadne ďalšie nástroje:

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

Vzor divokej karty, ako je taký, sa zhoduje index-*.js s týmto súborom pri každej zostave, bez ohľadu na hash. Pridajte jeden záznam na výstupný súbor a pridajte nový vzor vždy, keď vaša zostava začne produkovať nový výstupný súbor.

Možnosť 2: Generovať vzory divokých kariet pomocou post-build skriptu

Tento prístup používajte, keď názvy výstupných súborov nesledujú predvídateľný vzor, alebo keď aplikácia vytvára veľa súborov, ktorých názvy sa menia pri pridávaní a odstraňovaní trás, čo robí ručne udržiavaný zoznam náchylným na chyby. Krátky skript, ktorý sa spustí po zostavení, prehľadá skompilovaný výstup a prepíše bundleFilePatterns s divokou kartou pre každý emitovaný súbor. Napríklad, keď nástroj na zostavovanie pomenuje súbory ako [name]-[hash].[ext], skript sa zredukuje Dashboard-BSbmIXoe.js na vzor 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)
}

Zapoj skript do svojho buildu, aby vždy bežal po bundleri:

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

Teraz má nasadenie dva príkazy a lokalita nikdy nezískava osirelé časti:

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

Po zostavení sa powerpages.config.json presne odrážajú aktuálne zväzky, napríklad:

{
  "$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"
  ]
}

Autentifikácia a autorizácia

Power Pages SPA stránky používajú rovnaký bezpečnostný model ako tradičné Power Pages stránky.

Konfigurácia poskytovateľov identity

Choď na Power Pages.
Nájdite svoju stránku a vyberte možnosť Upraviť.
Vyberte položkuPoskytovatelia identity>.
Pridajte alebo nastavte identity providers, ako Microsoft Entra ID.
Každá nová stránka má automaticky predvoleného poskytovateľa Microsoft Entra ID.

Prístup ku kontextu používateľa v kóde

Získanie autentifikačných metadát na klientovi:

URL adresa autority:

Oprávnená alebo prihlasovacia URL adresa pre Microsoft Entra ID je:
```
https://login.windows.net/<tenantId>
```
Nájdite Authority URL pre iných konfigurovaných poskytovateľov identity v nastaveniach Power Pages><your site>>Security>Identity providers> nastavenia.

Údaje o používateľovi:

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

Ukážkový tok Reactu

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>
    );
};

Používajte webové API Power Pages

Vývojári môžu používať webové API Power Pages na načítanie obsahu do používateľského rozhrania alebo na vytváranie, aktualizáciu a mazanie záznamov. Pred použitím týchto API sa uistite, že sú povolené požadované webové API a že sú správne nastavené oprávnenia na tabuľky a webové roly.


// 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;
};

Nastavte lokálny vývoj povolením volaní webových API z localhostu pomocou autentifikácie Microsoft Entra ID

Vývojári potrebujú rýchlejšie cykly iterácií, lokálne ladenie a možnosti opätovného načítania za chodu pri vytváraní aplikácií. SPA podporuje tieto pracovné postupy tým, že umožňuje bezpečné webové API volania z localhost pomocou autentifikácie Microsoft Entra ID (Azure AD) v1.

Toto nastavenie vám umožňuje:

Spúšťajte svoju aplikáciu lokálne s úplnou podporou overovania.
Použite moderné vývojové nástroje, ako je Vite, na opätovné načítanie za chodu a rýchlu spätnú väzbu.
Vyhnite sa CORS problémom pri volaní Power Pages webových API.
Urýchlite vývoj bez nasadenia zmien na portáli.

Táto konfigurácia umožňuje produktívny lokálny vývoj pre SPA, takže vývojári môžu rýchlo budovať, testovať a iterovať s plnou podporou prístupu k API a autentifikácii.

Dôležité

Na autentifikáciu používajte iba endpointy Microsoft Entra v1.
Overenie nosného je podporované iba vo verziách portálu 9.7.6.6 alebo novších.
Tieto nastavenia použite iba vo vývojových prostrediach.

Kroky konfigurácie

Povolenie overovania SPA
1. V Azure portáli otvorte aplikáciu Microsoft Entra registrovanú pre váš portál.
2. Povoľte overenie jednostránkovej aplikácie (SPA).
3. Pridajte localhost ako presmerovacie URI pomocou konfigurácie platformy Single-page. Viac informácií nájdete v článku Ako pridať URI presmerovania vo vašej žiadosti.
  - Identifikátor URI presmerovania: http://localhost:<port>/.

Pridanie nastavení lokality

Pridajte tieto site nastavenia do Power Pages:

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

Použite ADAL.js na autentifikáciu
- Implementujte autentifikáciu na strane klienta pomocou ADAL.js.
Poznámka

MSAL.js nie je kompatibilný, pretože Power Pages používa Microsoft Entra endpointy v1, zatiaľ čo MSAL používa v2. Formát vydavateľa sa v jednotlivých verziách líši.
Pridanie autorizačnej hlavičky
- Zahrňte túto hlavičku do všetkých požiadaviek webového rozhrania API:
```
Authorization: Bearer <id_token>
```
Nastavenie viditeľnosti lokality na verejnú
- Toto nastavenie umožňuje localhost prístup k lokalite na účely vývoja a testovania.

Konfigurácia vývojového servera proxy

Ak používate Vite, pridajte tento kód vite.config.js , aby ste predišli problémom s CORS:

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

Rozdiely oproti existujúcim stránkam Power Pages

Nasledujúca tabuľka zhrňuje kľúčové rozdiely medzi SPA stránkami vytvorenými touto funkciou a tradičnými Power Pages stránkami:

Funkcia	Správanie sa na mieste SPA
Obnovenie na strane servera	Vždy vracia koreňovú stránku stránky a klientský router renderuje pod-route.
Konflikty trás	Trasy na strane klienta majú prednosť a tvrdá aktualizácia sa vráti späť ku koreňu.
Pracovný priestor stránky	Pracovný priestor stránok nie je podporovaný. ... Používajte smerovanie klientov a stránky klientskej lokality. Pre zabezpečenie na úrovni stránky skontrolujte priradené webové role s globálnym objektom používateľa a podmienečne vykreslite používateľské rozhranie.
Štýl pracovného priestoru	Štýlovanie pomocou pracovného priestoru štýlov nie je podporované. Použite štýl svojho frameworku, napríklad CSS, CSS-in-JSalebo utility class.
Lokalizácia	Jednojazyčná podpora. Implementujte načítavanie zdrojov na strane klienta.
Tekuté šablóny	Kód Liquid a šablóny Liquid nie sú podporované. Prístup k dátam pomocou šablónového enginu vášho frameworku a webových API.

najčastejšie otázky

Aká podpora je k dispozícii pre jednotkové a integračné testovanie?

Momentálne neexistuje žiadna vstavaná podpora pre jednotkové a integračné testovanie. Výrobcovia by mali tieto testy písať a vykonávať lokálne alebo v rámci svojich CI/CD kanálov.

Existuje podpora pre integráciu pomocou WebAssembly? Power Fx

Táto funkcia momentálne nie je podporovaná.

Je zdrojový kód dostupný v Power Pages?

V súčasnosti môžu tvorcovia vytvárať webové stránky pomocou TypeScriptu alebo GitHub Copilot Agent. Skompilované súbory JavaScript a CSS sú prístupné a dajú sa upravovať vo Visual Studio Code. Priama a rozsiahla úprava súborov HTML však momentálne nie je podporovaná.

Môžem vytvoriť komponent externe pomocou tejto funkcie a preniesť ho na Power Pages stránku?

Nie, pomocou tejto funkcie nemôžete priniesť externe generovaný komponent na existujúci Power Pages web.

Môžem pridať predpripravené komponenty, ako sú zoznamy a formuláre?

Pridávanie predpripravených komponentov, ako sú zoznamy a formuláre, momentálne nie je podporované. Avšak môžete vytvárať vlastné formuláre a zoznamy pomocou frameworku React a webových API.

Môžem v pracovnom priestore Nastaviť pracovný priestor povoliť lokalitu SPA ako PWA?

Nie. Lokality SPA nepodporujú nastavenie progresívnej webovej aplikácie (PWA) pri nastavovaní pracovného priestoru. Toto obmedzenie znamená, že na povolenie lokality ako pwa nemôžete použiť sekciu Mobile . Ak chcete pridať funkcie PWA, napríklad možnosti inštalovateľnej aplikácie a offline stránky, implementujte ich do kódu architektúry. Môžete napríklad pridať manifest webovej aplikácie a pracovník služby.

Ako funguje správa zdrojového kódu?

Vývojári môžu na správu zdrojového kódu použiť integráciu Gitu. Power Platform Do repozitára sa však pridajú iba skompilované webové súbory, nie celý zdrojový kód.

Podporujú tieto stránky SEO?

Keďže SPA stránky sú vytvorené pomocou React frameworku a používajú vykresľovanie na strane klienta, SEO podpora je obmedzená.

Akú podporu bezpečnosti a správy Power Pages ponúkajú SPA stránky?

Power Pages vynucuje oprávnenia na tabuľky a bezpečnostné webové roly pri volaniach Web API, čím zabezpečuje, že prístup k dátam je v súlade s rolami používateľov. Objekt ** window["Microsoft"].Dynamic365.Portal.User ** použite na načítanie základných vlastností používateľa a prispôsobenie skúseností na základe person používateľa.

Okrem toho, SPA stránky podporujú:

Konfigurácie verejných a súkromných stránok
Nastavenia riadenia vrátane kontroly nad anonymným prístupom k údajom
Konfigurácie poskytovateľa overovania

Tieto funkcie pomáhajú zabezpečiť bezpečnú a súladnú integráciu vlastných komponentov v rámci Power Pages.

Pripomienky

Bola táto stránka užitočná?

Last updated on 2026-07-22

Vytvorte a nasadte jednostránkovú aplikáciu v Power Pages

Požiadavky

Povolenie nahrávania JavaScript súborov

Vytvorenie a nasadenie lokality SPA

Nahrajte stránku SPA

Syntax

Parametre

Príklad

Definovanie parametrov nahrávania pomocou powerpages.config.json

Konfiguračné polia

Ukážka powerpages.config.json

Stiahnite si stránku SPA

Syntax

Parametre

Príklad

Aktivujte a otestujte svoju stránku

Štruktúra a konfigurácia projektu

Rozdelenie kódu a čistenie balíkov

Povolenie rozdelenia kódu

Ako upload-code-site čistí staré zväzky

Možnosť 1: Priamo uviesť vzory divokých kariet

Možnosť 2: Generovať vzory divokých kariet pomocou post-build skriptu

Autentifikácia a autorizácia

Konfigurácia poskytovateľov identity

Prístup ku kontextu používateľa v kóde

Ukážkový tok Reactu

Používajte webové API Power Pages

Nastavte lokálny vývoj povolením volaní webových API z localhostu pomocou autentifikácie Microsoft Entra ID

Kroky konfigurácie

Rozdiely oproti existujúcim stránkam Power Pages

najčastejšie otázky

Aká podpora je k dispozícii pre jednotkové a integračné testovanie?

Existuje podpora pre integráciu pomocou WebAssembly? Power Fx

Je zdrojový kód dostupný v Power Pages?

Môžem vytvoriť komponent externe pomocou tejto funkcie a preniesť ho na Power Pages stránku?

Môžem pridať predpripravené komponenty, ako sú zoznamy a formuláre?

Môžem v pracovnom priestore Nastaviť pracovný priestor povoliť lokalitu SPA ako PWA?

Ako funguje správa zdrojového kódu?

Podporujú tieto stránky SEO?

Akú podporu bezpečnosti a správy Power Pages ponúkajú SPA stránky?

Súvisiace informácie

Pripomienky

Ďalšie zdroje informácií

Definovanie parametrov nahrávania pomocou `powerpages.config.json`

Ukážka `powerpages.config.json`

Ako `upload-code-site` čistí staré zväzky