Componenti della pagina

Completato

Dopo aver creato una pagina, aggiungere componenti per compilare il layout e includere contenuto statico e dinamico. Questo approccio di progettazione semplice aggiunge il codice HTML, CSS o corrispondente alla pagina senza che sia necessario conoscere la struttura o la sintassi di questi linguaggi.

Per aggiungere una sezione, selezionare una sezione esistente nella pagina, selezionare il segno più (+) o Aggiungi una sezione e quindi scegliere uno dei layout di sezione disponibili.

Suggerimento

È possibile modificare il layout di sezione in un secondo momento.

Schermata della modifica del contenuto di Power Pages.

Per aggiungere un componente, selezionare una sezione vuota o un elemento esistente in cui si desidera posizionare il componente. Usare il segno più (+) o il pulsante di overflow ( ...) per visualizzare tutti i componenti disponibili, quindi selezionare un componente da inserire.

Screenshot dell'interfaccia di inserimento di un componente.

Esistono due tipi di componenti:

  • I componenti standard creano il layout di pagina e il contenuto statico.

  • Connessi ai dati, i componenti visualizzano contenuti dinamici e interattivi basati sui dati di Dataverse.

Tutte le sezioni e i componenti supportano la modifica nel contesto. È possibile modificare qualsiasi sezione o componente direttamente dall'area di disegno. Quando si seleziona una sezione o un componente, viene visualizzato un menu di scelta rapida. È possibile modificare le proprietà dell'elemento selezionato, ad esempio allineamento, stile, colore, dimensioni e altro ancora. Per altre informazioni, vedere Personalizzare le pagine Web per altri dettagli sui componenti disponibili e sulle relative proprietà.

Codice sorgente

Spesso sono necessari elementi che non sono disponibili come componenti dello studio di progettazione. Una pagina potrebbe richiedere un layout e una formattazione più complessi oppure potrebbe essere necessario più CSS o JavaScript. È possibile creare questi requisiti in Visual Studio Code per il Web. I creatori e gli sviluppatori professionisti possono usare questo editor per visualizzare e modificare il codice sorgente della pagina e css e JavaScript associati.

Per visualizzare il codice sorgente della pagina, selezionare Modifica codice nella barra dei comandi.

Screenshot dell'accesso all'editor di Visual Studio Code per il Web disponibile nella finestra di progettazione.

Quando si seleziona Modifica codice, si viene reindirizzati a Visual Studio Code per il Web per apportare modifiche alla pagina HTML, CSS o JavaScript. Dopo aver salvato il codice sorgente, le modifiche vengono sincronizzate e visualizzate nell'area di disegno.

Screenshot di una richiesta di sincronizzazione del contenuto della pagina dopo il completamento della modifica in Visual Studio Code per il Web

Avvertimento

È potenzialmente possibile danneggiare il layout della pagina immettendo una sintassi errata nel codice sorgente. Creare una copia del codice originale prima di apportare modifiche significative.

Copilot nell'area di lavoro Pages

Copilot è integrato in tutto l'ambiente di lavoro Pages per aiutarti a creare e popolare i contenuti più rapidamente.

Testo generato dall'intelligenza artificiale

Selezionare un componente di testo nell'area di disegno e quindi selezionare il pulsante Copilot sulla barra degli strumenti. Descrivere il testo desiderato e Copilot genera automaticamente la copia. Questa funzionalità è disponibile a livello generale.

Modulo generato dall'intelligenza artificiale

Quando si aggiunge un componente, selezionare Form e quindi scegliere di creare il modulo con Copilot. Descrivi il modulo in linguaggio naturale e Copilot crea automaticamente la tabella Dataverse, il modulo e il componente del modulo di base. Questa funzionalità è disponibile a livello generale in tutte le aree ad eccezione di DoD.

Modulo a più passaggi generato dall'intelligenza artificiale (anteprima)

È anche possibile usare Copilot per creare un modulo a più passaggi. Nella Copilot sidecar descrivere il modulo a più passaggi necessari e Copilot crea un modulo con uno o più passaggi in base alla descrizione. Nell'area di lavoro viene visualizzata un'anteprima del modulo da esaminare prima di aggiungerlo alla pagina. Se le tabelle pertinenti esistono già in Dataverse, Copilot suggerisce di usarle. In caso contrario, viene creata automaticamente una nuova tabella.

Assistenza IA per la compilazione di moduli (anteprima)

Quando si aggiunge un componente modulo a una pagina, è possibile abilitare l'assistenza per il riempimento dei moduli di intelligenza artificiale per aiutare gli utenti del sito a compilare i moduli più facilmente. Questa funzionalità estrae le informazioni rilevanti dagli allegati caricati e popola automaticamente i campi modulo. Consente inoltre agli utenti di riscrivere campi di testo su più righe usando l'assistenza alla stesura tramite IA. Abilitare questa opzione nelle impostazioni del componente del modulo.

Aggiungere una sezione con Copilot

Usa il sidecar Copilot per descrivere una sezione e fare in modo che Copilot la aggiunga alla pagina.

Codice generato dall'intelligenza artificiale (anteprima)

Quando si apre una pagina in Visual Studio Code per il Web usando Edit codice, è possibile usare Copilot per generare codice HTML, JavaScript e CSS usando il linguaggio naturale. Descrivere il comportamento desiderato nel pannello di chat Copilot e Copilot genera un frammento di codice che è possibile copiare o inserire direttamente. È anche possibile selezionare il codice esistente e usare l'opzione Spiega per ottenere una spiegazione in linguaggio normale delle operazioni che esegue.

Annotazioni

Copilot per la generazione di codice è ottimizzato per i linguaggi supportati da Power Pages (HTML, JavaScript, CSS) e per framework come Bootstrap e jQuery. Verificare che i nomi di tabella e colonna generati siano corretti prima di usare il codice nel sito.

Componente di ricerca con intelligenza artificiale generativa (anteprima)

È possibile aggiungere un componente di ricerca a qualsiasi pagina per consentire agli utenti del sito di eseguire ricerche nel sito usando query in linguaggio naturale. Il componente include una barra di ricerca e un riepilogo generato dall'intelligenza artificiale dei risultati. Per usare la versione basata su intelligenza artificiale, è prima necessario abilitare Generative AI Search for the site (Ricerca di intelligenza artificiale generativa per il sito). Aggiungi il componente dal pannello Componenti nello spazio di lavoro Pagine.

Funzionalità di intelligenza artificiale in un elenco (anteprima)

I componenti dell'elenco dei dati supportano due miglioramenti basati sull'intelligenza artificiale per gli utenti del sito:

  • Riepilogo dell'intelligenza artificiale : genera automaticamente riepiloghi concisi e visualizzazioni grafico dei dati nell'elenco. Abilitare questa opzione quando si aggiunge un nuovo elenco o attivarla per un elenco esistente selezionando Modifica elenco e attivando il riepilogo dell'intelligenza artificiale per Elenco.

  • Ricerca in linguaggio naturale : consente agli utenti di filtrare e cercare i dati dell'elenco usando query conversazionali. Abilitare questa opzione nelle impostazioni dell'elenco in Altre opzioni>Abilitare la ricerca in questo elenco>Cerca con linguaggio naturale.

Per altre informazioni, vedere Aggiungi funzionalità di intelligenza artificiale in un elenco nella documentazione di Power Pages.