Creează și implementează o aplicație de o singură pagină în Power Pages

Power Pages suportă integrarea codului aplicației single-page (SPA) creat cu instrumente asistate de AI de generație următoare, precum GitHub Copilot. Această capacitate permite dezvoltatorilor să aducă experiențe moderne, bazate pe componente, în Power Pages, folosind limbajul natural ca interfață de programare.

Prin ghidarea, testarea și rafinarea codului generat de inteligența artificială, producătorii își pot muta atenția de la sarcinile de implementare repetitive la orchestrarea la nivel superior. Această abordare oferă o dezvoltare mai intuitivă și mai creativă, menținând în același timp calitatea și standardele la nivel de întreprindere.

Acest articol vă arată cum să:

Creează și configurează un proiect SPA pentru Power Pages folosind CLI Power Platform (PAC CLI).
Încarcă și descarcă resurse de cod către și dinspre site-ul tău Power Pages.
Configurați o structură de proiect sigură și ușor de întreținut.
Aflați diferențele cheie dintre implementările Power Pages bazate pe SPA și cele tradiționale.

Notă

Un site SPA este un site Power Pages care rulează în întregime în browserul utilizatorului (randare pe partea clientului). Spre deosebire de site-urile tradiționale Power Pages, gestionezi site-urile SPA doar prin cod sursă și instrumente de interfață de linie de comandă (CLI).
Power Platform Git integrat nu este suportat pentru site-urile Single-Page Application (SPA) în Power Pages.

Cerințe preliminare

Înainte de a începe, asigurați-vă că aveți:

Un mediu Power Pages cu privilegii admin.
Power Platform CLI (PAC CLI) versiunea 1.44.x sau o versiune ulterioară instalată și autentificată.
Un site Power Pages pe versiunea 9.7.4.x sau ulterioară.
Permiteți încărcarea fișierelor JavaScript în mediile Dataverse.
Un depozit Git local cu proiectul tău front-end personalizat, cum ar fi React, Angular sau Vue.

Permiteți încărcarea fișierelor JavaScript

În mod implicit, unele medii Dataverse blochează încărcarea fișierelor JavaScript (.js). Dacă întâlnești eroarea "Import eșuat: Atașamentul fie nu este un tip valid, fie este prea mare. Nu poate fi încărcat sau descărcat.", actualizează setările de mediu pentru a permite acest tip de fișier.

Pentru a ajusta setările din centrul de administrare pentru un mediu, urmați acești pași: Power Platform

Conectați-vă la Centrul de administrare Power Platform.
În panoul de navigare, selectați Gestionare.
În panoul Gestionare , selectați Medii.
Selectați un mediu.
În bara de comenzi, selectați Setări.
Extindeți Produs, apoi selectați Confidențialitate + Securitate.
În secțiunea Atașamente Blocate , eliminați js din lista extensiilor de fișier.
Selectați Salvați.

Crearea și implementarea unui site SPA

Power Pages site-urile SPA sunt gestionate folosind comenzile PAC CLI upload-code-site și download-code-site. După ce încarci un site, acesta apare în Power Pages în lista Inactive sites. Activați site-ul pentru a-l face disponibil utilizatorilor.

Încărcați un site SPA

Folosește comanda pac pages upload-code-site pentru a încărca sursa locală și resursele compilate în mediul tău Power Pages.

Sintaxă

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

Parametri

Parametru	Alias	Obligatoriu	Descriere
`--rootPath`	`-rp`	Da	Folder local care conține fișierele sursă ale site-ului tău
`--compiledPath`	`-cp`	Nu	Calea către resursele compilate, cum ar fi React `build`
`--siteName`	`-sn`	Nu	Numele afișat pentru site-ul tău Power Pages

Exemplu

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

Dacă nu aveți un proiect existent, încercați exemplele de implementări ale site-urilor SPA folosind React, Angular și Vue.

Definirea parametrilor de încărcare cu `powerpages.config.json`

Personalizează comportamentul comenzii upload-code-site incluzând un powerpages.config.json fișier în folderul rădăcină al site-ului tău. Când acest fișier este prezent, rulează upload-code-site doar parametrul --rootPath . Comanda citește valorile rămase din fișierul de configurare. Dacă furnizezi atât argumentele din linia de comandă, cât și valorile de configurare, argumentele din linia de comandă au prioritate.

Câmpuri de configurație

Câmp	Tip	Obligatoriu	Descriere
`siteName`	șir	Da	Nume afișat pentru site-ul Power Pages.
`compiledPath`	șir	Da	Drumul către directorul de ieșire compilat (de exemplu, folderul Vite `dist` sau React `build` ), relativ la `powerpages.config.json`.
`defaultLandingPage`	șir	Da	Pagina HTML servită atunci când rădăcina site-ului este deschisă, relativ la `compiledPath` (de obicei `index.html`).
`bundleFilePatterns`	șir[]	Nu	O listă de tipare wildcard care identifică fișierele din site-uri `web-files` pe care CLI le elimină înainte de a încărca noua versiune. Folosește acest câmp pentru a curăța pachetele învechite, cu conținut hash, astfel încât activele vechi să nu se acumuleze pe site. Vezi divizarea codului și curățarea pachetelor.
`includeSource`	Boolean	Nu	Când `true`, comanda încarcă codul sursă pe lângă asset-urile compilate. Implicit este .`false`
`sourceExcludePatterns`	șir[]	Nu	Tipare wildcard pentru fișierele sursă de exclus din upload. Se aplică doar când `includeSource` este `true` (de exemplu, pentru a sări `node_modules` peste fișiere de mediu local).

Pentru cea mai precisă și up-toreferință de câmp cu dată, vezi powerpages.config.json schema. Adaugă proprietatea de potrivire $schema în fișierul tău de configurare pentru a permite validarea și autocompletarea în editorii care suportă JSON Schema.

Exemplu `powerpages.config.json`

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

Descărcați un site SPA

Folosește comanda pac pages download-code-site pentru a descărca codul unui site existent într-un director local în scopuri de editare sau copiere de rezervă.

Sintaxă

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

Parametri

Parametru	Alias	Obligatoriu	Descriere
`--environment`	`-env`	Nu	Dataverse mediu (GUID sau URL complet). Implicit se folosește profilul dvs. de autentificare activ
`--path`	`-p`	Da	Director local pentru descărcarea codului site-ului
`--webSiteId`	`-id`	Da	Înregistrarea site-ului GUID a site-ului Power Pages SPA
`--overwrite`	`-o`	Nu	Suprascrie fișierele existente în directorul țintă, dacă există

Exemplu

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

Activați și testați site-ul dvs.

Mergi la Power Pages.
Selectați Site-uri inactive, găsiți site-ul dvs. și selectați Reactivare.
Când site-ul este activ, accesați adresa URL a site-ului dvs. pentru a verifica implementarea.

Sfat

Orice comandă ulterioară actualizează automat site-ul activ. upload-code-site

Structura și configurația proiectului

O structură consistentă a proiectului ajută la asigurarea unui comportament corect la încărcare.

/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

Folosește fișierul opțional powerpages.config.json pentru a personaliza modul în care funcționează comanda upload-code-site .

Divizarea codului și curățarea pachetelor

Pe măsură ce o aplicație de o singură pagină crește, un singur pachet JavaScript devine mare și lent la încărcare. Instrumentele de compilare moderne rezolvă această problemă cu scindarea codului. Această tehnică împarte aplicația în porțiuni mai mici pe care le descarcă browserul la cerere (de exemplu, doar atunci când utilizatorul navighează la o anumită rută). Fiecare bucată este emisă cu un hash de conținut în numele fișierului, cum ar Dashboard-BSbmIXoe.jsfi , astfel încât browserele să o poată stoca în cache pentru perioade lungi și să o poată descărca din nou doar când conținutul său se modifică.

Divizarea codului introduce o considerație de implementare unică pentru Power Pages site-uri SPA: deoarece fiecare build produce nume noi de fișiere hashate, rulările repetate upload-code-site ar lăsa fișierele vechi hashate pe site. De-a lungul multor implementări, aceste bucăți orfane se acumulează în web-filessite-ul . Câmpul bundleFilePatterns există powerpages.config.json pentru a le curăța.

Activează divizarea codului

Divizarea codului este gestionată de unealta ta de construcție front-end, nu de Power Pages, deci abordarea depinde de framework-ul și pachetul pe care îl folosești. Cea mai comună tehnică este încărcarea unor părți ale aplicației cu importuri dinamice, adesea aplicate la nivel de rută sau vizualizare, astfel încât fiecare secțiune să se descarce doar atunci când utilizatorul navighează către ea (încărcare leneșă).

Bundleri precum Vite, webpack și esbuild pot, de asemenea, să grupeze modulele în bucăți denumite explicit. Pentru configurația exactă, consultă documentația pentru framework-ul și bundler-ul tău.

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

Oricare ar fi abordarea alegi, rezultatul este același, iar partea contează pentru implementare: build-ul emite mai multe fișiere de ieșire, fiecare cu un hash de conținut în nume. Pentru că aceste hash-uri se schimbă ori de câte ori conținutul unui fișier se modifică, fiecare build produce un set diferit de nume de fișiere. Următoarele secțiuni explică cum să menții mediile Dataverse curate pe măsură ce aceste denumiri.

Cum `upload-code-site` curăță pachetele învechite

Înainte de a încărca asset-urile compilate, upload-code-site șterge fiecare fișier din site-urile web-files care corespund unui tipar wildcard din bundleFilePatterns, apoi încarcă versiunea curentă. Acest comportament de ștergere și încărcare menține setul de fișiere implementate identic cu cel mai recent rezultat compilat, în loc să suprapună fiecare build peste cea anterioară.

Pentru ca curățarea să funcționeze, tiparele wildcard trebuie bundleFilePatterns să corespundă cu numele fișierelor pe care le emite build-ul tău. Există două moduri de a le menține exacte, în funcție de cum denumește unealta ta de construcție fișierele.

Opțiunea 1: Listează direct tiparele wildcard

Multe instrumente de build păstrează un prefix stabil de nume și schimbă doar hash-ul conținutului, cum ar fi index-[hash].js. Când numele fișierelor tale de ieșire urmează un tipar previzibil ca acesta, listează un tipar wildcard pentru fiecare în bundleFilePatterns. Nu este nevoie de unelte suplimentare:

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

Un tipar wildcard, cum ar fi index-*.js , se potrivește cu acel fișier la fiecare construcție, indiferent de hash. Adaugă o intrare pentru fiecare fișier de ieșire și adaugă un model nou ori de câte ori build-ul tău începe să producă un fișier de ieșire nou.

Opțiunea 2: Generează tipare wildcard cu un script post-build

Folosește această abordare atunci când numele fișierelor de ieșire nu urmează un tipar previzibil sau când aplicația ta produce multe fișiere ale căror nume se schimbă pe măsură ce adaugi și elimini rute, ceea ce face ca o listă menținută manual să fie predispusă la erori. Un script scurt care rulează după compilare scanează ieșirea compilată și rescrie bundleFilePatterns cu un model wildcard pentru fiecare fișier emis. De exemplu, când un instrument de build denumește fișierele ca [name]-[hash].[ext], scriptul se reduce Dashboard-BSbmIXoe.js la modelul 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)
}

Conectează scriptul în build-ul tău astfel încât să ruleze întotdeauna după bundler:

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

Acum, o implementare constă în două comenzi, iar site-ul nu acumulează niciodată bucăți orfane:

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

După construcție, powerpages.config.json reflectă pachetele exacte de curent, de exemplu:

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

Autentificare și autorizare

Power Pages site-urile SPA folosesc același model security ca site-urile tradiționale Power Pages.

Configurați furnizorii de identitate

Mergi la Power Pages.
Găsiți site-ul dvs. și selectați Editare.
SelectațiFurnizori de identitate>.
Adaugă sau configurează furnizori de identitate, cum ar fi Microsoft Entra ID.
Fiecare site nou are automat un furnizor implicit de Microsoft Entra ID.

Accesarea contextului utilizatorului în cod

Obțineți metadatele de autentificare de pe client:

URL-ul autorității:

Autoritatea sau URL-ul de autentificare pentru Microsoft Entra ID este:
```
https://login.windows.net/<tenantId>
```
Găsiți URL-ul Authority pentru alți furnizori de identitate configurați accesând Power Pages><your site>>Security>Furnizori de identitate> setări de configurare.

Detalii utilizator:

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

Flux de reacție al probei

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

Folosește API-urile web Power Pages

Dezvoltatorii pot folosi API-urile web Power Pages pentru a încărca conținut în interfață sau pentru a crea, actualiza și șterge înregistrări. Înainte de a folosi aceste API-uri, asigurați-vă că API-urile web necesare sunt activate și că permisiunile corespunzătoare ale tabelelor și rolurile web sunt configurate corect.


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

Configurează dezvoltarea locală prin activarea apelurilor Web API de la localhost folosind autentificarea Microsoft Entra ID

Dezvoltatorii au nevoie de cicluri de iterație mai rapide, depanare locală și capabilități de reîncărcare la cald atunci când construiesc aplicații. SPA suportă aceste fluxuri de lucru prin permițând apeluri Web API securizate de la localhost folosind autentificarea Microsoft Entra ID (Azure AD) v1.

Această configurare vă permite:

Rulați aplicația local cu suport complet pentru autentificare.
Utilizați instrumente moderne de dezvoltare, cum ar fi Vite , pentru reîncărcare la cald și feedback rapid.
Evitați problemele CORS când apelați API-uri web Power Pages.
Accelerați dezvoltarea fără a implementa modificări în portal.

Această configurație permite o experiență productivă de dezvoltare locală pentru SPA, astfel încât dezvoltatorii să poată construi, testa și itera rapid, cu acces complet la API și suport pentru autentificare.

Important

Folosiți doar punctele finale Microsoft Entra v1 pentru autentificare.
Autentificarea purtătorului este acceptată numai în versiunile portalului 9.7.6.6 sau ulterioare.
Aplicați aceste setări numai în mediile de dezvoltare.

Pași de configurare

Activarea autentificării SPA
1. În portalul Azure, deschide aplicația Microsoft Entra înregistrată pentru portalul tău.
2. Activați autentificarea aplicației cu o singură pagină (SPA).
3. Adaugă localhost ca URI de redirecționare folosind configurația platformei de aplicație pe o singură pagină . Pentru mai multe informații, vezi Cum să adaugi un URI de redirecționare în aplicația ta.
  - URI de redirecționare: http://localhost:<port>/.

Adăugarea setărilor site-ului

Adaugă aceste setări site în Power Pages:

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

Folosirea ADAL.js pentru autentificare
- Implementează autentificarea pe partea clientului folosind ADAL.js.
Notă

MSAL.js nu este compatibil pentru că Power Pages folosește endpoint-uri Microsoft Entra v1, în timp ce MSAL folosește v2. Formatul emitentului diferă de la o versiune la alta.
Adăugați antet de autorizare
- Includeți acest antet în toate solicitările API web:
```
Authorization: Bearer <id_token>
```
Setați vizibilitatea site-ului la Public
- Această setare permite localhost accesarea site-ului în scopuri de dezvoltare și testare.

Configurați proxy-ul de dezvoltare

Dacă folosești Vite, adaugă acest cod vite.config.js pentru a evita problemele CORS:

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

Diferențe față de site-urile existente Power Pages

Tabelul următor rezumă diferențele cheie dintre site-urile SPA create cu această caracteristică și site-urile tradiționale Power Pages:

Caracteristică	Comportamentul site-ului SPA
Reîmprospătare pe partea de server	Returnează întotdeauna pagina rădăcină a site-ului, iar routerul client-side redă sub-rutele.
Conflicte de rută	Rutele pe partea de client au prioritate, iar o reîmprospătare completă revine la rădăcină.
Spațiul de lucru al paginii	Spațiul de lucru Pages nu este acceptat. ... Folosește rutarea clientului și paginile site-ului clientului. Pentru securitatea la nivel de pagină, verificați rolurile web atribuite cu obiectul utilizator global și randați condiționat interfața cu utilizatorul.
Spațiul de lucru cu stiluri	Stilizarea cu ajutorul spațiului de lucru pentru stiluri nu este acceptată. Folosește stilul framework-ului tău, cum ar fi CSS, CSS-in-JSsau clasele utilitare.
Localizare	Suport pentru o singură limbă. Implementați încărcarea resurselor pe partea clientului.
Șabloane lichide	Codul Liquid și șabloanele Liquid nu sunt acceptate. Accesează datele folosind motorul de șabloane al framework-ului tău și API-urile web.

Întrebări frecvente

Ce suport este disponibil pentru testarea unitară și de integrare?

În prezent, nu există suport încorporat pentru testarea unitară și de integrare. Producătorii ar trebui să scrie și să execute aceste teste local sau în cadrul pipelinelor lor CI/CD.

Există suport pentru Power Fx integrare folosind WebAssembly?

Această funcționalitate nu este acceptată în prezent.

Este disponibil codul sursă în Power Pages?

În prezent, producătorii pot crea site-uri folosind TypeScript sau GitHub Copilot Agent. Fișierele compilate JavaScript și CSS sunt accesibile și pot fi editate în Visual Studio Code. Totuși, editarea directă și extinsă a fișierelor HTML nu este acceptată în prezent.

Pot crea un component extern folosind această funcție și să-l aduc pe un site Power Pages?

Nu, nu poți aduce o componentă generată extern pe un site Power Pages existent folosind această funcție.

Pot adăuga componente predefinite, cum ar fi liste și formulare?

Adăugarea de componente predefinite, cum ar fi liste și formulare, nu este acceptată în prezent. Totuși, poți construi formulare și liste personalizate folosind framework-ul React și API-urile Web.

Pot activa un site SPA ca PWA din spațiul de lucru Configurare?

Nu. Site-urile SPA nu acceptă configurarea aplicației web progresive (PWA) în configurarea spațiului de lucru. Această limitare înseamnă că nu puteți utiliza secțiunea Mobil pentru a activa un site ca PWA. Pentru a adăuga capacități PWA, cum ar fi experiențe de aplicații instalabile și pagini offline, implementați-le în codul cadru. De exemplu, adăugați un manifest de aplicație web și un lucrător de serviciu.

Cum funcționează controlul sursei?

Dezvoltatorii pot folosi integrarea cu Git pentru controlul sursei. Power Platform Totuși, doar fișierele web compilate sunt adăugate în depozit, nu și codul sursă complet.

Aceste site-uri acceptă SEO?

Deoarece site-urile SPA sunt construite cu framework-ul React și utilizează randare pe partea de client, suportul SEO este limitat.

Ce suport de securitate și guvernanță Power Pages oferă site-urile SPA?

Power Pages aplică permisiuni de tabel și roluri web de securitate în apelurile API web, asigurând că accesul la date se aliniază cu rolurile utilizatorilor. Folosește obiectul window["Microsoft"].Dynamic365.Portal.User pentru a prelua proprietățile de bază ale utilizatorilor și a personaliza experiențele în funcție de personajele utilizatorilor.

În plus, site-urile SPA acceptă:

Configurații de site-uri publice și private
Setări de guvernanță, inclusiv controlul asupra accesului anonim la date
Configurații furnizor de autentificare

Aceste caracteristici ajută la asigurarea integrării sigure și conforme a componentelor personalizate în Power Pages.

Feedback

Această pagină a fost utilă?

Last updated on 2026-07-21

Creează și implementează o aplicație de o singură pagină în Power Pages

Cerințe preliminare

Permiteți încărcarea fișierelor JavaScript

Crearea și implementarea unui site SPA

Încărcați un site SPA

Sintaxă

Parametri

Exemplu

Definirea parametrilor de încărcare cu powerpages.config.json

Câmpuri de configurație

Exemplu powerpages.config.json

Descărcați un site SPA

Sintaxă

Parametri

Exemplu

Activați și testați site-ul dvs.

Structura și configurația proiectului

Divizarea codului și curățarea pachetelor

Activează divizarea codului

Cum upload-code-site curăță pachetele învechite

Opțiunea 1: Listează direct tiparele wildcard

Opțiunea 2: Generează tipare wildcard cu un script post-build

Autentificare și autorizare

Configurați furnizorii de identitate

Accesarea contextului utilizatorului în cod

Flux de reacție al probei

Folosește API-urile web Power Pages

Configurează dezvoltarea locală prin activarea apelurilor Web API de la localhost folosind autentificarea Microsoft Entra ID

Pași de configurare

Diferențe față de site-urile existente Power Pages

Întrebări frecvente

Ce suport este disponibil pentru testarea unitară și de integrare?

Există suport pentru Power Fx integrare folosind WebAssembly?

Este disponibil codul sursă în Power Pages?

Pot crea un component extern folosind această funcție și să-l aduc pe un site Power Pages?

Pot adăuga componente predefinite, cum ar fi liste și formulare?

Pot activa un site SPA ca PWA din spațiul de lucru Configurare?

Cum funcționează controlul sursei?

Aceste site-uri acceptă SEO?

Ce suport de securitate și guvernanță Power Pages oferă site-urile SPA?

Informații corelate

Feedback

Resurse suplimentare

Definirea parametrilor de încărcare cu `powerpages.config.json`

Exemplu `powerpages.config.json`

Cum `upload-code-site` curăță pachetele învechite