Tag modello Liquid per componenti di codice

Nota

A partire dal 12 ottobre 2022, i portali Power Apps sono denominati Power Pages. Altre informazioni: Microsoft Power Pages è ora generalmente disponibile (blog)
A breve verrà eseguita la migrazione e l'unione della documentazione dei portali Power Apps con la documentazione di Power Pages.

Power Apps component framework consente agli sviluppatori professionisti e ai produttori di app di creare componenti di codice per app basate su modello e canvas. Questi componenti di codice possono fornire un'esperienza migliorata per gli utenti che lavorano con i dati su moduli, visualizzazioni e dashboard. Altre informazioni: utilizzare componenti di codice nei portali

Importante

Il tag modello Liquid per i componenti del codice richiede la versione dei portali 9.3.10.x o successiva.

Con questa versione, abbiamo introdotto la possibilità di aggiungere componenti di codice usando un Tag modello Liquid nelle pagine Web e nei componenti abilitati tramite l'API Web per i componenti a livello di campo sui moduli nei portali.

I componenti del codice possono essere aggiunti utilizzando il tag modello Liquid codecomponent. La chiave per denotare il componente di codice che deve essere caricato viene passata usando l'attributo name. La chiave può essere il GUID (che è l'ID del componente di codice) o il nome del componente di codice importato in Microsoft Dataverse.

I valori delle proprietà che il componente di codice si aspetta devono essere passati come coppia chiave/valore separati da ":" (due punti), dove la chiave è il nome della proprietà e il valore è il valore della stringa JSON.

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

Ad esempio, per aggiungere un componente di codice che prevede un parametro di input denominato controlValue, usa il seguente tag modello Liquid:

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

Suggerimento

Questo esempio usa i parametri chiamati controlvalue e controlApiKey, il componente utilizzato potrebbe richiedere nomi di parametro diversi.

Puoi usare il Controllo mappa di esempio e impacchettare il componente di codice come soluzione da utilizzare con i portali.

Nota

Le risorse create dalla community non sono supportate da Microsoft. In caso di domande o problemi con le risorse della community, contatta l'autore della risorsa. Prima di utilizzare queste risorse, è necessario assicurarsi che soddisfino le linee guida di Power Apps component framework e devono essere utilizzate solo a scopo di riferimento.

Esercitazione: utilizzare i componenti del codice nelle pagine con il tag modello Liquid

In questo tutorial, configurerai i portali Power Apps per aggiungere il componente a una pagina web. E poi, visiterai la pagina web dei portali e interagirai con il componente.

Operazioni preliminari

Se stai usando il componente del codice di esempio usato in questa esercitazione, assicurati di importare le soluzioni di esempio nell'ambiente prima di iniziare. Per informazioni sull'importazione della soluzione, vedi Importare soluzioni.

Prerequisiti

Per i prerequisiti e per conoscere i componenti di codice supportati/non supportati nei portali, vedi Utilizzare i componenti del codice nei portali.

Nota

Questo tutorial utilizza un componente di codice di esempio creato utilizzando Power Apps component framework per dimostrare un controllo mappa su una pagina web. Puoi anche utilizzare qualsiasi componente nuovo o esistente e qualsiasi altra pagina Web per questa esercitazione. In questo caso, assicurati di utilizzare il tuo componente e la tua pagina web quando segui i passaggi di questa esercitazione. Per ulteriori informazioni su come creare componenti di codice, vedi Creare il primo componente.

Passaggio 1: Aggiungi il componente di codice a una pagina web da Studio

1. Apri il tuo portale in  Studio dei portali Power Apps.

2. Seleziona  Nuova pagina nell'angolo in alto a sinistra.

3. Seleziona  Vuota.

4. Nel riquadro delle proprietà a destra, aggiorna il nome della pagina Web. Ad esempio, "Visualizzatore mappe".

5. Aggiorna l'URL parziale. Ad esempio, "mapviewer".

6. Espandi Autorizzazioni.

7. Disabilita Pagina disponibile per tutti.

8. Seleziona i ruoli web a cui deve essere consentito l'accesso a questa pagina.

9. Seleziona l'area modificabile sulla pagina per modificare il codice sorgente di Liquid.

10. Apri l'editor di codice di studio.

11. Aggiungi il controllo con il tag modello Liquid utilizzando la seguente sintassi:

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
    

    Suggerimento

    Per recuperare i dettagli di tutti i componenti importati e per cercare il nome di un componente, fai riferimento a CustomControl API Web.

    Ad esempio:

    • Per cercare un componente:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName

    • Per recuperare i parametri di input per un componente:

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest

12. Salva e chiudi l'editor di codice.

13. Nell'angolo in alto a destra, seleziona  Esplora sito Web.

14. La pagina web ora mostra il controllo aggiunto.

Passaggi successivi

Panoramica: utilizzare i componenti del codice nei portali

Vedi anche

Tag di entità Dataverse Codecomponent
Tag modello Codecomponent
Panoramica di Power Apps component framework
Crea il tuo primo componente
Aggiungere componenti di codice a una colonna o una tabella nelle app basate su modello
Implementare un componente API Web dei portali di esempio

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).