Kreirajte i implementirajte aplikaciju na jednoj stranici u Power Pages-u

Power Pages podržava integraciju single-page application (SPA) koda kreiranog pomoću alata nove generacije s AI-podrškom, poput GitHub Copilot. Ova mogućnost omogućuje programerima da donesu moderna, komponentno temeljena front-end iskustva u Power Pages koristeći prirodni jezik kao programsko sučelje.

Usmjeravanjem, testiranjem i usavršavanjem koda generiranog umjetnom inteligencijom, proizvođači mogu preusmjeriti svoj fokus s ponavljajućih implementacijskih zadataka na orkestraciju više razine. Taj pristup omogućuje intuitivniji, kreativni razvoj uz zadržavanje kvalitete i standarda poslovne razine.

U ovom se članku pokazuje kako:

Kreirajte i postavite SPA projekt za Power Pages koristeći Power Platform CLI (PAC CLI).
Učitavajte i preuzimajte kodne materijale na i s vaše Power Pages stranice.
Postavite sigurnu i održivu strukturu projekta.
Saznajte ključne razlike između SPA-baziranih i tradicionalnih Power Pages implementacija.

Napomena

SPA stranica je Power Pages stranica koja se u potpunosti pokreće u korisnikovom pregledniku (renderiranje na strani klijenta). Za razliku od tradicionalnih Power Pages stranica, SPA stranice upravljate samo putem izvornog koda i alata za sučelje naredbenog retka (CLI).
Power Platform Git integracija nije podržan za Single-Page Application (SPA) web stranice u Power Pages.

Preduvjeti

Prije nego što započnete, provjerite imate li sljedeće:

Power Pages okruženje s administratorskim privilegijama.
Power Platform CLI (PAC CLI) verzija 1.44.x ili novija instalirana i provjerena autentičnost.
Power Pages stranica u verziji 9.7.4.x ili novijoj.
Dopustite učitavanje JavaScript datoteka u Dataverse okruženjima.
Lokalni Git repozitorij s vašim prilagođenim front-end projektom, poput Reacta, Angulara ili Vuea.

Dopusti učitavanje JavaScript datoteka

Prema zadanim postavkama, neka Dataverse okruženja blokiraju prijenos JavaScript.js () datoteka. Ako naiđete na grešku "Uvoz nije uspio: Privitak ili nije valjan tip ili je prevelik. Ne može se učitati ili preuzeti.", ažurirajte postavke okruženja kako biste omogućili ovu vrstu datoteke.

Da biste prilagodili postavke u Power Platform centru za administratore za okruženje, slijedite ove korake:

Prijavite se u centar za administratore platforme Power Platform.
U navigacijskom oknu odaberite Upravljanje.
U oknu Upravljanje odaberite Okruženja.
Odaberite okruženje.
Na naredbenoj traci odaberite Postavke.
Proširite Proizvod, a zatim odaberite Privatnost + sigurnost.
U odjeljku Blokirani privici uklonite js ekstenzije datoteka s popisa.
Odaberite Spremi.

Stvaranje i implementacija SPA web-mjesta

Power Pages SPA lokacije upravljaju se pomoću PAC CLI naredbi upload-code-site i download-code-site. Nakon što učitate stranicu, ona se pojavljuje u Power Pages na popisu Neaktivne stranice. Aktivirajte stranicu kako biste je učinili dostupnom korisnicima.

Prenesite SPA stranicu

Koristite naredbu pac pages upload-code-site za učitavanje lokalnog izvornog koda i kompajliranih resursa u Power Pages okruženje.

Sintaksa

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

Parametri

Parametar	Pseudonim	Obavezno	Opis
`--rootPath`	`-rp`	Da	Lokalna mapa koja sadrži izvorne datoteke vaše stranice
`--compiledPath`	`-cp`	Ne	Put do kompiliranih resursa, kao što je React `build`
`--siteName`	`-sn`	Ne	Prikazni naziv za vašu Power Pages stranicu

Primjer

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

Ako nemate postojeći projekt, isprobajte primjere implementacija SPA stranica koristeći React, Angular i Vue.

Definiranje parametara prijenosa pomoću `powerpages.config.json`

Prilagodite ponašanje naredbe upload-code-site uključivanjem powerpages.config.json datoteke u korijensku mapu vaše stranice. Kada je ta datoteka prisutna, pokrenite upload-code-site se samo s parametrom --rootPath . Naredba čita preostale vrijednosti iz konfiguracijske datoteke. Ako unesete i argumente naredbenog retka i konfiguracijske vrijednosti, argumenti naredbenog retka imaju prednost.

Konfiguracijska polja

Polje	Vrsta	Obavezno	Opis
`siteName`	niz	Da	Prikazni naziv za Power Pages stranicu.
`compiledPath`	niz	Da	Put do kompajliranog direktorija izlaza (na primjer, Vite `dist` ili React `build` mapa), u odnosu na `powerpages.config.json`.
`defaultLandingPage`	niz	Da	HTML stranica se poslužuje kada se otvori korijen stranice, u odnosu na `compiledPath` (tipično `index.html`).
`bundleFilePatterns`	niz[]	Ne	Popis nepredvidivih obrazaca koji identificiraju datoteke na stranicama `web-files` koje CLI uklanja prije učitavanja nove verzije. Koristite ovo polje za čišćenje zastarjelih, sadržajem hashiranih paketa kako se stari resursi ne bi nakupljali na stranici. Vidi razdvajanje koda i čišćenje paketa.
`includeSource`	Booleova vrijednost	Ne	Kada `true`, naredba učitava vaš izvorni kod uz kompajlirane resurse. Zadano na `false`.
`sourceExcludePatterns`	niz[]	Ne	Wildcard obrasci za izvorne datoteke koje treba isključiti prilikom učitavanja. Primjenjuje se samo kada `includeSource` je ( `true` na primjer, za preskakanje `node_modules` ili lokalne datoteke okruženja).

Za najtočniju i up-to-datumsku referencu na polju, pogledajte shemupowerpages.config.json. Dodajte svojstvo podudaranja $schema u svoju konfiguracijsku datoteku kako biste omogućili validaciju i automatsko dovršavanje u uređivačima koji podržavaju JSON shemu.

Primjer `powerpages.config.json`

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

Preuzmite SPA stranicu

Upotrijebite naredbu pac pages download-code-site za preuzimanje koda postojeće stranice u lokalni direktorij za uređivanje ili sigurnosno kopiranje.

Sintaksa

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

Parametri

Parametar	Pseudonim	Obavezno	Opis
`--environment`	`-env`	Ne	Dataverse okruženje (GUID ili puni URL). Zadane postavke vašeg aktivnog profila za provjeru autentičnosti
`--path`	`-p`	Da	Lokalni imenik za preuzimanje koda stranice
`--webSiteId`	`-id`	Da	GUID zapisa web stranice Power Pages SPA
`--overwrite`	`-o`	Ne	Prebrišite postojeće datoteke u ciljnom direktoriju ako postoje

Primjer

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

Aktiviranje i testiranje web-lokacije

Idi na Power Pages.
Odaberite Neaktivna web-mjesta, pronađite svoje web-mjesto, a zatim odaberite Ponovno aktiviraj.
Kada je web-lokacija aktivna, idite na URL web-lokacije da biste provjerili implementaciju.

Savjet

Svaka kasnija upload-code-site naredba automatski ažurira aktivno web-mjesto.

Struktura i konfiguracija projekta

Dosljedan izgled projekta pomaže osigurati ispravno ponašanje prijenosa.

/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

Upotrijebite neobaveznu powerpages.config.json datoteku da biste prilagodili način rada naredbe upload-code-site .

Razdvajanje koda i čišćenje paketa

Kako aplikacija na jednoj stranici raste, jedan JavaScript paket postaje velik i spor za učitavanje. Alati za moderne međuverzije rješavaju problem dijeljenjem koda. Tom se tehnikom aplikacija rastavi na manje dijelove koje preglednik preuzima na zahtjev (na primjer, samo kada korisnik prijeđete na određeni put). Svaki segment se emitira s hashom sadržaja u nazivu datoteke, poput Dashboard-BSbmIXoe.js, tako da ga pregledači mogu keširati na dulje vrijeme i ponovno preuzeti tek kada se sadržaj promijeni.

Dijeljenje koda uvodi razmatranje implementacije jedinstveno za Power Pages SPA stranice: budući da svaka konfiguracija proizvodi nova hashirana imena datoteka, ponovljena upload-code-site izvođenja ostavljala bi stare hashirane datoteke na stranici. Tijekom mnogih implementacija, ti napušteni dijelovi akumuliraju se u .web-files Polje bundleFilePatterns postoji powerpages.config.json da ih očisti.

Omogućite razdvajanje koda

Dijeljenje koda rješava vaš front-end build alat, a ne Power Pages, pa pristup ovisi o frameworku i bundleru koji koristite. Najčešća tehnika je učitavanje dijelova aplikacije dinamičkim uvozima, koji se često primjenjuju na razini rute ili prikaza, tako da se svaki dio preuzima samo kada korisnik dođe do njega (lijeno učitavanje).

Bundleri poput Vitea, webpacka i esbuilda također mogu eksplicitno grupirati module u imenovane dijelove. Za točnu konfiguraciju, pogledajte dokumentaciju za vaš framework i bundler.

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

Koji god pristup odabrali, rezultat je isti, a to je dio koji je važan za implementaciju: build generira više izlaznih datoteka, svaka s hashom sadržaja u nazivu. Budući da se ti hashovi mijenjaju svaki put kad se sadržaj datoteke promijeni, svaka konfiguracija proizvodi drugačiji skup naziva datoteka. Sljedeći odjeljci objašnjavaju kako održavati svoja Dataverse okruženja čistima dok se ta imena mijenjaju.

Kako `upload-code-site` čisti ustajale snopove

Prije učitavanja kompajliranih resursa, upload-code-site briše svaku datoteku na stranici web-files koja odgovara nekom nepredvidivom obrascu u bundleFilePatterns, zatim učitava trenutnu verziju. Ovo ponašanje brisanja pa učitavanja održava deployirani skup datoteka identičnim vašem najnovijem kompajliranom rezultatu, umjesto da se svaka konfiguracija slaže preko prethodne.

Da bi čišćenje funkcioniralo, wildcard uzorci moraju bundleFilePatterns odgovarati imenima datoteka koje tvoj build emitira. Postoje dva načina da ih održite točnima, ovisno o tome kako vaš alat za izgradnju naziva datoteke.

Opcija 1: Izravno navedite obrasce džokera

Mnogi alati za izgradnju zadržavaju prefiks stabilnog imena i mijenjaju samo hash sadržaja, poput .index-[hash].js Kada nazivi izlaznih datoteka slijede predvidljiv obrazac poput ovog, navedite wildcard obrazac za svaku u bundleFilePatterns. Nisu potrebni dodatni alati:

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

Wildcard uzorak poput toga odgovara index-*.js toj datoteci na svakom buildu, bez obzira na hash. Dodaj jedan unos po izlaznoj datoteci i dodaj novi uzorak kad god tvoj build počne proizvoditi novu izlaznu datoteku.

Opcija 2: Generirajte wildcard obrasce pomoću post-build skripte

Koristite ovaj pristup kada nazivi izlaznih datoteka ne slijede predvidljiv obrazac ili kada vaša aplikacija proizvodi mnogo datoteka čija se imena mijenjaju kako dodajete i uklanjate rute, što čini ručno vođenu listu sklonom greškama. Kratka skripta koja se izvršava nakon izgradnje skenira kompajlirani izlaz i prepisuje bundleFilePatterns s wildcard uzorkom za svaku emitiranu datoteku. Na primjer, kada alat za izgradnju imenuje datoteke kao [name]-[hash].[ext], skripta se svodi Dashboard-BSbmIXoe.js na uzorak 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)
}

Poveži skriptu u svoj build tako da uvijek radi nakon bundlera:

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

Sada je deployment dvije naredbe, a stranica nikada ne skuplja napuštene dijelove:

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

Nakon izgradnje, powerpages.config.json odražava točne trenutne snopove, na primjer:

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

Provjera autentičnosti i autorizacija

Power Pages SPA stranice koriste isti sigurnosni model kao i tradicionalne Power Pages stranice.

Konfiguriranje davatelja identiteta

Idi na Power Pages.
Pronađite svoju web-lokaciju i odaberite Uredi.
Odaberite Davatelji sigurnosnih>identiteta.
Dodajte ili postavite identity providere, poput Microsoft Entra ID.
Svaka nova stranica automatski ima zadanog Microsoft Entra ID pružatelja.

Pristup korisničkom kontekstu u kodu

Dobivanje metapodataka za provjeru autentičnosti na klijentu:

URL tijela:

Ovlašteni ili prijavni URL za Microsoft Entra ID je:
```
https://login.windows.net/<tenantId>
```
Pronađite Authority URL za druge konfigurirane pružatelje identiteta odlaskom na Power Pages><your site>>Security>Identity providers> konfiguracijske postavke.

Podaci o korisniku:

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

Uzorak React tijek

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

Koristite Power Pages web API-je

Programeri mogu koristiti Power Pages Web API-je za učitavanje sadržaja u korisničko sučelje ili za stvaranje, ažuriranje i brisanje zapisa. Prije korištenja ovih API-ja, provjerite jesu li potrebni web API-ji omogućeni te da su odgovarajuće dozvole za tablice i web uloge pravilno konfigurirane.


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

Postavite lokalni razvoj omogućavanjem Web API poziva s localhosta koristeći Microsoft Entra ID autentifikaciju

Programerima su potrebni brži ciklusi iteracije, lokalno otklanjanje pogrešaka i mogućnosti ponovnog učitavanja tijekom izrade aplikacija. SPA podržava ove radne tokove omogućujući sigurne Web API pozive s localhost koristeći Microsoft Entra ID (Azure AD) v1 autentifikaciju.

Ova postavka vam omogućuje:

Pokrenite aplikaciju lokalno uz potpunu podršku za provjeru autentičnosti.
Koristite moderne razvojne alate kao što je Vite za vruće ponovno učitavanje i brze povratne informacije.
Izbjegnite CORS probleme prilikom pozivanja Power Pages web API-ja.
Ubrzajte razvoj bez uvođenja promjena na portal.

Ova konfiguracija omogućuje produktivno lokalno razvojno iskustvo za SPA, tako da programeri mogu brzo graditi, testirati i iterirati uz punu podršku za API pristup i autentifikaciju.

Važno

Koristite samo Microsoft Entra v1 endpointe za autentifikaciju.
Provjera autentičnosti nositelja podržana je samo u verzijama portala 9.7.6.6 ili novijima.
Primijenite ove postavke samo u razvojnim okruženjima.

Koraci konfiguracije

Omogućivanje provjere autentičnosti SPA
1. U Azure portalu otvorite Microsoft Entra aplikaciju registriranu za vaš portal.
2. Omogućite provjeru autentičnosti aplikacije na jednoj stranici (SPA).
3. Dodajte localhost kao URI za preusmjeravanje korištenjem konfiguracije platforme za aplikacije na jednoj stranici . Za više informacija, pogledajte Kako dodati URI za preusmjeravanje u vašu prijavu.
  - URI za preusmjeravanje: http://localhost:<port>/.

Dodavanje postavki web-mjesta

Dodajte ove site settings u Power Pages:

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

Koristite ADAL.js za autentifikaciju
- Implementirajte autentifikaciju na strani klijenta koristeći ADAL.js.
Napomena

MSAL.js nije kompatibilan jer Power Pages koristi Microsoft Entra v1 endpointe, dok MSAL koristi v2. Format izdavatelja razlikuje se od verzije do verzije.
Dodavanje zaglavlja autorizacije
- Uključite ovo zaglavlje u sve zahtjeve web-API-ja:
```
Authorization: Bearer <id_token>
```
Postavljanje vidljivosti web-mjesta na Javno
- Ova postavka omogućuje localhost pristup web-mjestu u svrhu razvoja i testiranja.

Konfiguriranje razvojnog proxyja

Ako koristite Vite, dodajte ovaj kod da vite.config.js izbjegnete CORS probleme:

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

Razlike u odnosu na postojeće Power Pages stranice

Sljedeća tablica sažima ključne razlike između SPA stranica izrađenih ovom značajkom i tradicionalnih Power Pages stranica:

Značajka	Ponašanje SPA lokacije
Osvježavanje na strani poslužitelja	Uvijek vraća korijensku stranicu stranice, a usmjerivač na strani klijenta prikazuje podrute.
Sukobi ruta	Rute na strani klijenta imaju prednost, a teško osvježavanje vraća se u korijen.
Radni prostor stranice	Radni prostor stranica nije podržan. Koristite usmjeravanje klijenta i stranice klijentskog web-mjesta. Za sigurnost na razini stranice provjerite dodijeljene web-uloge s globalnim korisničkim objektom i uvjetno prikažite korisničko sučelje.
Stil radnog prostora	Stiliziranje s radnim prostorom stila nije podržano. Koristite stil svog frameworka, poput CSS-a, CSS-in-JSili utility klasa.
Lokalizacija	Podrška na jednom jeziku. Implementirajte učitavanje resursa na strani klijenta.
Tekuće šabloniranje	Liquid kod i Liquid predlošci nisu podržani. Pristupite podacima koristeći predložak vašeg okvira i web API-je.

ČPP

Koja je podrška dostupna za jedinično i integracijsko testiranje?

Trenutno nema ugrađene podrške za testiranje jedinica i integracije. Proizvođači bi trebali pisati i izvršavati ove testove lokalno ili unutar svojih CI/CD cjevovoda.

Postoji li podrška za Power Fx integraciju pomoću WebAssemblya?

Ta mogućnost trenutno nije podržana.

Je li izvorni kod dostupan u Power Pages-u?

Trenutno proizvođači mogu izrađivati web stranice koristeći TypeScript ili GitHub Copilot Agent. Kompajlirane JavaScript i CSS datoteke su dostupne i mogu se uređivati u Visual Studio Code-u. Međutim, izravno i opsežno uređivanje HTML datoteka trenutno nije podržano.

Mogu li eksterno kreirati komponentu koristeći ovu funkciju i prenijeti je na Power Pages stranicu?

Ne, ne možete donijeti vanjsku komponentu na postojeću Power Pages stranicu koristeći ovu značajku.

Mogu li dodati gotove komponente kao što su popisi i obrasci?

Dodavanje gotovih komponenti kao što su popisi i obrasci trenutačno nije podržano. Međutim, možete izrađivati prilagođene obrasce i liste koristeći React framework i Web API-je.

Mogu li omogućiti web-mjesto sa spa-mjestom kao PWA iz radnog prostora Postavljanje?

Ne. WEB-mjesta SPA ne podržavaju postavljanje napredne web-aplikacije (PWA) u postavljenom radnom prostoru. To ograničenje znači da web-mjesto ne možete omogućiti kao PWA pomoću odjeljka Mobilni uređaji. Da biste dodali mogućnosti PWA-a, kao što su okruženja aplikacija koja se mogu instalirati i izvanmrežne stranice, implementirati ih u svoj okvirni kod. Dodajte, primjerice, manifest web-aplikacije i servisnog radnika.

Kako funkcionira kontrola izvora?

Razvojni inženjeri mogu koristiti Power Platform Git integraciju za kontrolu izvornog koda. Međutim, u spremište se dodaju samo kompajlirane web datoteke, a ne cijeli izvorni kod.

Podržavaju li ove stranice SEO?

Budući da su SPA stranice izgrađene s React frameworkom i koriste renderiranje na strani klijenta, SEO podrška je ograničena.

Koju Power Pages sigurnosnu i upravljačku podršku nude SPA stranice?

Power Pages provodi dozvole za tablice i sigurnosne web uloge na pozivima Web API-ja, osiguravajući da pristup podacima bude usklađen s korisničkim ulogama. Upotrijebite window["Microsoft"].Dynamic365.Portal.User objekt za dohvaćanje osnovnih korisničkih svojstava i prilagođavanje iskustava na temelju korisničkih osoba.

Osim toga, SPA stranice podržavaju:

Konfiguracije javnih i privatnih web-mjesta
Postavke upravljanja, uključujući kontrolu nad anonimnim pristupom podacima
Konfiguracije davatelja usluga provjere autentičnosti

Ove značajke pomažu osigurati sigurnu i usklađenu integraciju prilagođenih komponenti unutar Power Pages-a.

Povratne informacije

Je li vam stranica bila korisna?

Last updated on 2026-07-21

Kreirajte i implementirajte aplikaciju na jednoj stranici u Power Pages-u

Preduvjeti

Dopusti učitavanje JavaScript datoteka

Stvaranje i implementacija SPA web-mjesta

Prenesite SPA stranicu

Sintaksa

Parametri

Primjer

Definiranje parametara prijenosa pomoću powerpages.config.json

Konfiguracijska polja

Primjer powerpages.config.json

Preuzmite SPA stranicu

Sintaksa

Parametri

Primjer

Aktiviranje i testiranje web-lokacije

Struktura i konfiguracija projekta

Razdvajanje koda i čišćenje paketa

Omogućite razdvajanje koda

Kako upload-code-site čisti ustajale snopove

Opcija 1: Izravno navedite obrasce džokera

Opcija 2: Generirajte wildcard obrasce pomoću post-build skripte

Provjera autentičnosti i autorizacija

Konfiguriranje davatelja identiteta

Pristup korisničkom kontekstu u kodu

Uzorak React tijek

Koristite Power Pages web API-je

Postavite lokalni razvoj omogućavanjem Web API poziva s localhosta koristeći Microsoft Entra ID autentifikaciju

Koraci konfiguracije

Razlike u odnosu na postojeće Power Pages stranice

ČPP

Koja je podrška dostupna za jedinično i integracijsko testiranje?

Postoji li podrška za Power Fx integraciju pomoću WebAssemblya?

Je li izvorni kod dostupan u Power Pages-u?

Mogu li eksterno kreirati komponentu koristeći ovu funkciju i prenijeti je na Power Pages stranicu?

Mogu li dodati gotove komponente kao što su popisi i obrasci?

Mogu li omogućiti web-mjesto sa spa-mjestom kao PWA iz radnog prostora Postavljanje?

Kako funkcionira kontrola izvora?

Podržavaju li ove stranice SEO?

Koju Power Pages sigurnosnu i upravljačku podršku nude SPA stranice?

Povezane informacije

Povratne informacije

Dodatni resursi

Definiranje parametara prijenosa pomoću `powerpages.config.json`

Primjer `powerpages.config.json`

Kako `upload-code-site` čisti ustajale snopove