Crea i desplega una aplicació d'una sola pàgina a Power Pages

Power Pages suporta la integració de codi d'aplicacions d'una sola pàgina (SPA) creat amb eines assistides per IA de nova generació, com GitHub Copilot. Aquesta capacitat permet als desenvolupadors portar experiències modernes de front-end basades en components a Power Pages utilitzant el llenguatge natural com a interfície de programació.

Guiant, provant i refinant el codi generat per IA, els creadors poden canviar el seu enfocament de tasques repetitives d'implementació a orquestració de nivell superior. Aquest enfocament afavoreix un desenvolupament més intuïtiu i creatiu, tot mantenint la qualitat i els estàndards de nivell empresarial.

En aquest article es mostra com:

  • Crea i configura un projecte SPA per a Power Pages utilitzant la CLI Power Platform (PAC CLI).
  • Puja i descarrega actius de codi des i des del teu lloc Power Pages.
  • Configureu una estructura de projecte segura i mantenible.
  • Aprèn les diferències clau entre les implementacions basades en SPA i les tradicionals de Power Pages.

Nota

  • Un lloc SPA és un lloc de Power Pages que s'executa íntegrament al navegador de l'usuari (renderitzat al costat del client). A diferència dels llocs tradicionals de Power Pages, gestiones els llocs SPA només mitjançant codi font i eines d'interfície de línia d'ordres (CLI).
  • La integració Power Platform amb Git no és compatible amb els llocs web Single-Page Application (SPA) a Power Pages.

Requisits previs

Abans de començar, assegureu-vos que teniu:

Permetre la pujada de fitxers JavaScript

Per defecte, alguns entorns Dataverse bloquegen la pujada de fitxers JavaScript(.js). Si et trobes amb l'error "Importació fallida: L'adjunt o bé no és un tipus vàlid o és massa gran. No es pot pujar ni descarregar.", actualitza la configuració de l'entorn per permetre aquest tipus de fitxer.

Per ajustar la configuració del centre d'administració d'un Power Platform entorn, seguiu aquests passos:

  1. Inicieu la sessió al Centre d'administració del Power Platform.
  2. A la subfinestra de navegació, seleccioneu Administra.
  3. A la subfinestra Administra , seleccioneu Entorns.
  4. Seleccioneu un entorn.
  5. A la barra d'ordres, seleccioneu Configuració.
  6. Expandiu Producte i, a continuació, seleccioneu Privadesa + Seguretat.
  7. A la secció Adjunts bloquejats , elimina'l js de la llista d'extensions de fitxer.
  8. Seleccioneu Desa.

Crear i implementar un lloc SPA

Power Pages llocs SPA es gestionen mitjançant les ordres PAC CLI upload-code-site i download-code-site. Després de pujar un lloc, apareix a Power Pages a la llista Llocs inactius. Activa el lloc per posar-lo a disposició dels usuaris.

Penjar un lloc de SPA

Utilitza la comanda pac pages-upload-code-site per pujar el teu codi font local i els actius compilats al teu entorn Power Pages.

Sintaxi

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

Paràmetres

Paràmetre Àlies Necessari Descripció
--rootPath -rp Sí Carpeta local que conté els fitxers font del teu lloc
--compiledPath -cp No Camí als recursos compilats, com ara React build
--siteName -sn No Nom de visualització del teu lloc Power Pages

Exemple

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

Si no teniu cap projecte existent, proveu les implementacions d'exemple de llocs SPA amb React, Angular i Vue.

Definició de paràmetres de càrrega amb powerpages.config.json

Personalitza el comportament de la upload-code-site comanda incloent-hi un powerpages.config.json fitxer a la carpeta arrel del teu lloc. Quan aquest fitxer sigui present, executa upload-code-site només amb el --rootPath paràmetre. L'ordre llegeix els valors restants del fitxer de configuració. Si proporciones tant arguments de línia de comandes com valors de configuració, els arguments de línia de comandes tenen prioritat.

Camps de configuració
Camp Tipus Necessari Descripció
siteName cadena Sí Nom d'exhibició del lloc Power Pages.
compiledPath cadena Sí Camí cap al directori de sortida compilat (per exemple, la carpeta Vite dist o React build ), respecte a powerpages.config.json.
defaultLandingPage cadena Sí La pàgina HTML servida quan s'obre l'arrel del lloc, respecte a compiledPath (típicament index.html).
bundleFilePatterns corda[modifica] No Una llista de patrons comodí que identifiquen fitxers als llocs web-files web que la CLI elimina abans de pujar la nova versió. Utilitza aquest camp per netejar paquets obsolets i amb hash de contingut perquè els recursos antics no s'acumulin al lloc. Vegeu divisió de codi i neteja de paquets.
includeSource boolean No Quan true, l'ordre puja el teu codi font a més dels recursos compilats. Per defecte és false.
sourceExcludePatterns corda[modifica] No Patrons comodins per als fitxers font per excloure de la pujada. Només s'aplica quan includeSource és true (per exemple, per saltar node_modules fitxers d'entorn o local).

Per a la referència de camp més precisa i up-todata -, vegeu l'esquemapowerpages.config.json. Afegeix la propietat corresponent $schema al teu fitxer de configuració per permetre la validació i l'autocompletat en editors que suporten l'esquema JSON.

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

Descarregar un lloc de SPA

Utilitzeu l'ordre pac pages download-code-site per descarregar el codi d'un lloc existent a un directori local amb finalitats d'edició o còpia de seguretat.

Sintaxi

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

Paràmetres

Paràmetre Àlies Necessari Descripció
--environment -env No Dataverse (GUID o URL complet). Per defecte és el perfil d'autenticació actiu
--path -p Sí Directori local per descarregar el codi del lloc
--webSiteId -id Sí Registre web GUID del lloc Power Pages SPA
--overwrite -o No Sobreescriu els fitxers existents al directori de destinació si existeixen

Exemple

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

Activar i provar el lloc web

  1. Ves a Power Pages.
  2. Seleccioneu Llocs inactius, cerqueu el lloc web i seleccioneu Reactiva.
  3. Quan el lloc web estigui actiu, aneu a l'URL del lloc web per comprovar la implementació.

Propina

Qualsevol ordre posterior upload-code-site actualitza automàticament el lloc actiu.

Estructura i configuració del projecte

Un disseny de projecte coherent ajuda a garantir un comportament de càrrega correcte.

/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

Utilitzeu el fitxer opcional powerpages.config.json per personalitzar el funcionament de l'ordre upload-code-site .

Divisió de codi i neteja de paquets

A mesura que una aplicació d'una sola pàgina creix, un únic paquet JavaScript es fa gran i es carrega lent a carregar. Les eines modernes de compilació resolen aquest problema amb la divisió de codi. Aquesta tècnica divideix l'aplicació en fragments més petits que el navegador descarrega a demanda (per exemple, només quan l'usuari navega per una ruta específica). Cada bloc s'emet amb un hash de contingut al nom del seu fitxer, com Dashboard-BSbmIXoe.jsara , de manera que els navegadors poden emmagatzemar-lo en memòria cau durant períodes llargs i tornar-lo a descarregar només quan el seu contingut canvia.

La divisió de codi introdueix una consideració de desplegament única en Power Pages llocs SPA: com que cada compilació produeix nous noms de fitxer amb hash, les execucions repetides de upload-code-site deixarien els fitxers hashats antics al lloc. Al llarg de molts desplegaments, aquests fragments orfes s'acumulen a la web-files. El bundleFilePatterns camp existeix powerpages.config.json per netejar-los.

Activar la divisió de codi

La divisió de codi la gestiona la teva eina de compilació front-end, no Power Pages, així que l'enfocament depèn del framework i del bundler que utilitzis. La tècnica més comuna és carregar parts de l'aplicació amb importacions dinàmiques, sovint aplicades a nivell de ruta o vista perquè cada secció es descarregui només quan l'usuari hi accedeix (càrrega mandrosa).

Bundlers com Vite, webpack i esbuild també poden agrupar mòduls en fragments amb nom explícit. Per a la configuració exacta, consulta la documentació del teu framework i del packer.

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

Sigui quin sigui l'enfocament que triïs, el resultat és el mateix, i és la part que importa per al desplegament: la compilació emet múltiples fitxers de sortida, cadascun amb un hash de contingut al seu nom. Com que aquests hashes canvien cada vegada que el contingut d'un fitxer canvia, cada compilació produeix un conjunt diferent de noms de fitxer. Les següents seccions expliquen com mantenir nets els teus entorns Dataverse a mesura que aquests noms canvien.

Com upload-code-site neteja els feixos rancis

Abans de pujar els teus recursos compilats, upload-code-site elimina tots els fitxers del lloc web-files que coincideixen amb un patró de comodí a bundleFilePatterns, i després puja la versió actual. Aquest comportament d'esborrar i després pujar manté el conjunt de fitxers desplegats idèntic a la darrera sortida compilada en lloc d'aplicar cada build sobre l'anterior.

Perquè la neteja funcioni, els patrons bundleFilePatterns comodins han de coincidir amb els noms dels fitxers que emet la teva compilació. Hi ha dues maneres de mantenir-los precisos, depenent de com anomeni els fitxers de la teva eina de construcció.

Opció 1: Llistar patrons comodins directament

Moltes eines de compilació mantenen un prefix de nom estable i només canvien el hash de contingut, com index-[hash].jsara . Quan els noms dels fitxers de sortida segueixen un patró previsible com aquest, llista un patró de comodí per a cadascun a bundleFilePatterns. No calen eines addicionals:

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

Un patró comodí com index-*.js coincidències en aquest fitxer a cada construcció, independentment del hash. Afegeix una entrada per fitxer de sortida i afegeix un nou patró cada vegada que la teva build comenci a produir un nou fitxer de sortida.

Opció 2: Generar patrons comodí amb un script post-build

Utilitza aquest enfocament quan els noms dels fitxers de sortida no segueixin un patró previsible, o quan l'aplicació produeixi molts fitxers els noms dels quals canvien a mesura que afegeixes i elimines rutes, cosa que fa que una llista mantinguda a mà sigui propensa a errors. Un script curt que s'executa després de la compilació escaneja la sortida compilada i es bundleFilePatterns reescriu amb un patró de comodí per a cada fitxer emès. Per exemple, quan una eina de construcció anomena fitxers com [name]-[hash].[ext], l'script es redueix Dashboard-BSbmIXoe.js al patró 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)
}

Connecta el script a la teva build perquè sempre s'executi després del bundler:

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

Ara un desplegament són dues ordres, i el lloc mai acumula fragments orfes:

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

Després de la construcció, powerpages.config.json reflecteix exactament els feixos de corrent, per exemple:

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

Autenticació i autorització

Power Pages llocs SPA utilitzen el mateix model seguretat que els llocs Power Pages tradicionals.

Configurar proveïdors d'identitat

  1. Ves a Power Pages.
  2. Cerqueu el vostre lloc web i seleccioneu Edita.
  3. SeleccioneuProveïdors d'identitat>.
  4. Afegeix o configura proveïdors d'identitat, com Microsoft Entra ID.
  5. Cada nou lloc té automàticament un proveïdor d'Microsoft Entra ID per defecte.

Accedir al context de l'usuari en el codi

Obteniu metadades d'autenticació al client:

  • URL d'autoritat:

    L'autoritat o URL d'inici de sessió per a Microsoft Entra ID és:

    https://login.windows.net/<tenantId>

  • Troba l'URL Authority per a altres proveïdors d'identitat configurats anant a Power Pages><your site>>Security>Identity providers> configuració de configuració.

  • Dades de l'usuari:

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

Flux de React de mostra

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

Utilitza les APIs web de Power Pages

Els desenvolupadors poden utilitzar les API web Power Pages per carregar contingut a la interfície o per crear, actualitzar i eliminar registres. Abans d'utilitzar aquestes APIs, assegura't que les APIs web necessàries estiguin activades i que els permisos i rols web adequats estiguin correctament configurats.


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

Configura el desenvolupament local activant les trucades a l'API web des de localhost mitjançant l'autenticació Microsoft Entra ID

Els desenvolupadors necessiten cicles d'iteració més ràpids, depuració local i capacitats de recàrrega en calent quan creen aplicacions. SPA suporta aquests fluxos de treball permetent trucades segures a l'API web des de localhost mitjançant l'autenticació Microsoft Entra ID (Azure AD) v1.

Aquesta configuració us permet:

  • Executeu l'aplicació localment amb suport complet per a l'autenticació.
  • Utilitzeu eines de desenvolupament modernes com Vite per a la recàrrega en calent i la retroalimentació ràpida.
  • Evita problemes de CORS quan crides APIs web de Power Pages.
  • Accelereu el desenvolupament sense implementar canvis al portal.

Aquesta configuració permet una experiència productiva de desenvolupament local per a SPA, de manera que els desenvolupadors poden construir, provar i iterar ràpidament amb accés complet a l'API i suport d'autenticació.

Important

  • Utilitza només els punts finals Microsoft Entra v1 per a l'autenticació.
  • L'autenticació de portador només s'admet a les versions 9.7.6.6 o posteriors del portal.
  • Apliqueu aquesta configuració només en entorns de desenvolupament.

Passos de configuració

  1. Habilita l'autenticació SPA

    1. Al portal Azure, obre l'aplicació Microsoft Entra registrada al teu portal.
    2. Habiliteu l'autenticació d'aplicació d'una sola pàgina (SPA).
    3. Afegeix localhost com a URI de redirecció utilitzant la configuració de plataforma d'aplicacions d'una sola pàgina . Per a més informació, vegeu Com afegir un URI de redirecció a la vostra sol·licitud.
      • URI de redirecció: http://localhost:<port>/.

  2. Afegir la configuració del lloc web

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

  3. Utilitza ADAL.js per a l'autenticació

    • Implementeu l'autenticació al costat del client utilitzant ADAL.js.

    Nota

    MSAL.js no és compatible perquè Power Pages utilitza Microsoft Entra punts finals v1, mentre que MSAL utilitza v2. El format de l'emissor difereix entre les versions.

  4. Afegeix la capçalera d'autorització

    • Incloeu aquesta capçalera a totes les sol·licituds de l'API web:
    Authorization: Bearer <id_token>

  5. Definir la visibilitat del lloc com a Públic

    • Aquesta configuració permet localhost accedir al lloc amb finalitats de desenvolupament i proves.

  6. Configurar el servidor intermediari de desenvolupament

    • Si utilitzes Vite, afegeix aquest codi per vite.config.js evitar problemes amb el CORS:
    export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Diferències respecte als llocs existents de Power Pages

La taula següent resumeix les diferències clau entre els llocs SPA creats amb aquesta característica i els llocs tradicionals de Power Pages:

Característica Comportament del lloc SPA
Actualització del servidor Sempre retorna la pàgina arrel del lloc, i el router del costat client renderitza les subrutes.
Conflictes de ruta Les rutes del costat del client tenen prioritat i una actualització dura torna a l'arrel.
Espai de treball de la pàgina L'espai de treball de pàgines no és compatible. Utilitzeu l'encaminament del client i les pàgines del lloc del client. Per a la seguretat a nivell de pàgina, comproveu les funcions web assignades amb l'objecte d'usuari global i representeu condicionalment la interfície d'usuari.
Espai de treball d'estil No s'admet l'estil amb l'àrea de treball d'estil . Utilitza l'estil del teu framework, com ara CSS, CSS-in-JSo classes d'utilitat.
Localització Suport en un sol idioma. Implementeu la càrrega de recursos del client.
Plantilles líquides El codi Liquid i les plantilles Liquid no són compatibles. Accedeix a les dades utilitzant el motor de plantilles i les API web del teu framework.

P+F

Quin suport hi ha disponible per a les proves unitàries i d'integració?

Actualment, no hi ha suport integrat per a proves unitàries i d'integració. Els creadors haurien d'escriure i executar aquestes proves localment o dins dels seus pipelines de CI/CD.

Hi ha suport per a la Power Fx integració mitjançant WebAssembly?

Aquesta capacitat no s'admet actualment.

El codi font està disponible a Power Pages?

Actualment, els creadors poden crear llocs web utilitzant TypeScript o GitHub Copilot Agent. Els fitxers JavaScript i CSS compilats són accessibles i es poden editar en Visual Studio Code. Tanmateix, actualment no s'admet l'edició directa i extensa de fitxers HTML.

Puc crear un component externament utilitzant aquesta funció i portar-lo a un lloc de Power Pages?

No, no pots portar un component generat externament a un lloc existent de Power Pages utilitzant aquesta funció.

Puc afegir components de fàbrica, com ara llistes i formularis?

Actualment no s'admet l'addició de components de fàbrica, com ara llistes i formularis. Tanmateix, pots crear formularis i llistes personalitzats utilitzant el framework React i les API web.

Puc activar un lloc SPA com a PWA des de l'espai de treball de configuració?

No. Els llocs SPA no admeten la configuració d'aplicació web progressiva (PWA) a l'espai de treball de configuració. Aquesta limitació significa que no pots utilitzar la secció mòbil per activar un lloc com a PWA. Per afegir funcionalitats de PWA, com experiències d'aplicacions instal·lables i pàgines offline, implementa-les al codi del teu framework. Per exemple, afegeix un manifest d'aplicació web i un treballador de servei.

Com funciona el control de codi font?

Els desenvolupadors poden utilitzar Power Platform la integració de Git per al control de codi font. Tanmateix, només s'afegeixen al repositori els fitxers web compilats, no el codi font complet.

Aquests llocs admeten SEO?

Com que els llocs SPA es construeixen amb el marc React i utilitzen la representació del costat del client, el suport SEO és limitat.

Quin suport de seguretat i governança de Power Pages ofereixen els llocs SPA?

Power Pages aplica permisos de taula i rols web de seguretat a les trucades a l'API web, assegurant que l'accés a les dades s'alineï amb els rols d'usuari. Utilitzeu l'objecte window["Microsoft"].Dynamic365.Portal.User per recuperar les propietats bàsiques de l'usuari i adaptar les experiències en funció dels perfils d'usuari.

A més, els llocs SPA admeten:

  • Configuracions de llocs públics i privats
  • Configuració de governança, inclòs el control sobre l'accés a dades anònimes
  • Configuracions del proveïdor d'autenticació

Aquestes funcions ajuden a garantir una integració segura i compatible amb components personalitzats dins de Power Pages.

  • Last updated on