Creare un componente per le app canvas

Importante

Questa funzionalità è ancora in anteprima pubblica. Per altre informazioni, vedi Funzionalità sperimentali e in anteprima.

I componenti sono blocchi predefiniti riutilizzabili per app canvas che consentono ai creatori di app di generare controlli personalizzati da utilizzare in un'app o nelle app utilizzando una libreria dei componenti. I componenti possono utilizzare le funzionalità avanzate come le proprietà personalizzate e abilitare le funzionalità complesse. Questo articolo introduce il concetto di componente e alcuni esempi.

I componenti sono utili nella creazione di app più grandi con schemi di controllo simili. Se aggiorni una definizione di componente all'interno dell'app, tutte le istanze nell'app riflettono le tue modifiche. I componenti riducono anche la duplicazione degli sforzi eliminando la necessità di copiare/incollare i controlli e migliorare le prestazioni. I componenti aiutano anche a creare uno sviluppo collaborativo e standardizzano l'aspetto di un'organizzazione quando si utilizza una libreria dei componenti.

Componenti nelle app canvas

È possibile creare un componente all'interno di un'app come spiegato in questo articolo o creare un nuovo componente all'interno di una libreria dei componenti. È necessario utilizzare una libreria di componenti per usare i componenti in più schermate dell'app. Puoi inoltre copiare i componenti esistenti in una libreria dei componenti esistente o nuova.

Per creare un componente all'interno di un'app, vai a Visualizzazione ad albero, seleziona la scheda Componenti, quindi seleziona Nuovo componente:

Creare un nuovo componente personalizzato usando la visualizzazione ad albero

Selezionando Nuovo componente viene visualizzato un canvas vuoto. Puoi aggiungere i controlli nella definizione del componente sul canvas. Se modifichi un componente nel canvas, aggiorni le istanze dello stesso componente in altre schermate dell'app. Le app che riutilizzano un componente già creato possono anche ricevere aggiornamenti del componente dopo aver pubblicato le modifiche al componente.

Puoi selezionare un componente dall'elenco dei componenti esistenti nella barra di spostamento a sinistra dopo aver selezionato una schermata. Quando selezioni un componente, inserisci un'istanza di quel componente sullo schermo, proprio come inserisci un controllo.

I componenti disponibili all'interno dell'app sono elencati sotto la categoria Personalizzato in un elenco di componenti nella visualizzazione ad albero. I componenti importati dalle librerie dei componenti sono elencati sotto la categoria Componenti della libreria:

Inserisci i componenti nell'app

Nota

I componenti discussi in questo articolo sono diversi da Power Apps component framework che consente a sviluppatori e creatori di creare componenti di codice per app basate su modelli e canvas. Per ulteriori informazioni, visita Panoramica di Power Apps component framework.

Scope

Pensa a un componente come una scatola nera incapsulata con proprietà di interfaccia. Non puoi accedere ai controlli nel componente dall'esterno del componente. E non puoi fare riferimento a nulla al di fuori del componente dall'interno del componente. L'eccezione sono le origini dati condivise tra un'app e i suoi componenti. Le limitazioni dell'ambito mantengono il contratto di dati di un componente semplice e coerente e consentono di abilitare gli aggiornamenti delle definizioni dei componenti, in particolare tra app con librerie dei componenti. Puoi aggiornare il contratto dati del componente creando una o più proprietà personalizzate.

Nota

Puoi inserire le istanze dei componenti in una schermata all'interno di una libreria dei componenti e visualizzarne l'anteprima a scopo di test. Inoltre, la libreria dei componenti non viene visualizzata durante l'utilizzo di Power Apps per dispositivi mobili.

Proprietà personalizzate

Un componente può ricevere valori di input ed emettere dati se si creano una o più proprietà personalizzate. Questi scenari sono avanzati e richiedono la conoscenza delle formule e dei contratti binding.

La proprietà di input è il modo in cui un componente riceve i dati da utilizzare nel componente. Le proprietà di input vengono visualizzate nella scheda Proprietà del riquadro di destra se è selezionata un'istanza del componente. Puoi configurare le proprietà di input con espressioni o formule, proprio come configuri le proprietà standard in altri controlli. Altri controlli hanno proprietà di input, come la proprietà Default di un controllo Input di testo.

La proprietà di output viene utilizzata per generare dati o lo stato dei componenti. Ad esempio, la proprietà Selected in un controllo Raccolta è una proprietà di output. Quando crei una proprietà di output, puoi determinare quali altri controlli possono fare riferimento allo stato del componente.

La seguente procedura dettagliata spiega ulteriormente questi concetti.

Creare un componente di esempio

In questo esempio, creerai un componente di menu simile alla seguente immagine. Puoi modificare il testo in un secondo momento per usarlo in più schermate, app o entrambi:

Raccolta finale

Nota

Ti consigliamo di utilizzare una libreria dei componenti per la creazione dei componenti per il riutilizzo. L'aggiornamento dei componenti all'interno di un'app rende disponibili gli aggiornamenti dei componenti solo all'interno dell'app. Quando importi componenti da un'app a un'altra, i nuovi aggiornamenti ai componenti nell'app originale non si propagano all'app che ha importato quei componenti in precedenza. Quando si utilizza una libreria dei componenti, viene richiesto di aggiornare i componenti se i componenti all'interno della libreria vengono aggiornati e pubblicati.

Creare un nuovo componente

  1. Accedi a make.powerapps.com.

  2. Seleziona App e seleziona App canvas da zero.

  3. Fornisci un nome per l'app, seleziona un layout, quindi seleziona Crea.

  4. Nella Visualizzazione ad albero, seleziona Componenti, quindi seleziona Nuovo componente per creare un nuovo componente.

    Creare un nuovo componente personalizzato usando la visualizzazione ad albero

  5. Seleziona il nuovo componente nella barra di spostamento a sinistra, seleziona i puntini di sospensione (...) quindi seleziona Rinomina. Digita o incolla il nome MenuComponent.

  6. Nel riquadro di destra, imposta la larghezza del componente su 150 e la sua altezza su 250, quindi seleziona Nuova proprietà personalizzata. Puoi inoltre impostare l'altezza e la larghezza su qualsiasi altro valore, a seconda dei casi.

    Nuova proprietà

  7. Nelle caselle Nome visualizzato, Nome proprietà e Descrizione, digita o incolla il testo Items.

    Caselle Nome visualizzato, Nome proprietà, Descrizione

    Non includere spazi nel nome della proprietà perché fai riferimento al componente tramite questo nome quando scrivi una formula. Ad esempio, ComponentName.PropertyName.

    Il nome visualizzato appare nella scheda Proprietà del riquadro a destra se selezioni il componente. Un nome visualizzato descrittivo aiuta te e altri creatori a comprendere lo scopo di questa proprietà. La Descrizione appare in una descrizione comandi se passi con il mouse sopra il nome visualizzato di questa proprietà nella scheda Proprietà.

  8. Nell'elenco Tipo di dati, seleziona Tabella e Crea.

    Tipo di dati della proprietà

    La proprietà Items è impostata su un valore predefinito in base al tipo di dati specificato. Puoi impostarlo su un valore adatto alle tue esigenze. Se hai specificato un tipo di dati Tabella o Record, potresti voler cambiare il valore della proprietà Items per corrispondere lo schema di dati che vuoi inserire nel componente. In questo caso, lo cambierai in un elenco di stringhe.

    Puoi impostare il valore della proprietà nella barra della formula se selezioni il nome della proprietà nella scheda Proprietà del riquadro di destra.

    Proprietà di input personalizzata nella scheda Proprietà

    Come mostra la prossima immagine, puoi anche modificare il valore della proprietà nella scheda Avanzate del riquadro di destra.

  9. Imposta la proprietà Items del componente su questa formula:

    Table({Item:"SampleText"})
    

    Formula

  10. Nel componente, inserisci un controllo verticale Raccolta vuoto e seleziona Layout nel riquadro delle proprietà come Titolo.

  11. Assicurati che l'elenco delle proprietà mostri la proprietà Items (come per impostazione predefinita). E quindi imposta il valore di quella proprietà su questa espressione:

    MenuComponent.Items
    

    In questo modo, la proprietà Items del controllo Raccolta legge e dipende dalla proprietà di input Items del componente.

  12. Facoltativo: imposta la proprietà BorderThickness del controllo Raccolta su 1 e la relativa proprietà TemplateSize su 50. Puoi inoltre aggiornare i valori per lo spessore del bordo e la dimensione del modello con qualsiasi altro valore, a seconda dei casi.

Aggiungere un componente a una schermata

A questo punto aggiungi il componente a una schermata e specifichi una tabella di stringhe da mostrare per il componente.

  1. Nella barra di spostamento a sinistra, seleziona l'elenco delle schermate, quindi seleziona la schermata predefinita.

    Schermata predefinita

  2. Nella scheda Inserisci, apri il menu Componenti, quindi seleziona MenuComponent.

    Inserisci

    Il nuovo componente viene denominato MenuComponent_1 per impostazione predefinita.

  3. Imposta la proprietà Items di MenuComponent_1 su questa formula:

    Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
    

    Questa istanza è simile a questa immagine, ma puoi personalizzare il testo e le altre proprietà di ciascuna istanza.

    Raccolta finale

Creare e usare la proprietà di output

Finora hai creato un componente e l'hai aggiunto a un'app. Ora, creerai una proprietà di output che riflette l'elemento che l'utente seleziona nel menu.

  1. Apri l'elenco dei componenti, quindi seleziona MenuComponent.

  2. Nel riquadro di destra, seleziona la scheda Proprietà, quindi seleziona Nuova proprietà personalizzata.

  3. Nelle caselle Nome visualizzato, Nome proprietà e Descrizione, digita o incolla Selected.

  4. Sotto Tipo di proprietà, seleziona Output, quindi seleziona Crea.

    Tipo di proprietà come output

  5. Nella scheda Avanzate, imposta il valore della proprietà Selected su questa espressione, modificando il numero nel nome della raccolta, se necessario:

    Gallery1.Selected.Item
    

    Riquadro avanzato

  6. Nella schermata predefinita dell'app, aggiungi un'etichetta e imposta la proprietà Text su questa espressione, modificando il numero nel nome del componente, se necessario:

    MenuComponent_1.Selected
    

    MenuComponent_1 è il nome predefinito di un'istanza, non il nome della definizione del componente. Puoi rinominare qualsiasi istanza.

  7. Tenendo premuto il tasto ALT, seleziona ciascuna voce nel menu.

    Il controllo Etichetta riflette la voce di menu selezionata più di recente.

Importare ed esportare i componenti

Nota

Questa funzionalità verrà deprecata. Le librerie dei componenti sono il modo consigliato per riutilizzare i componenti nelle app. Quando si utilizza una libreria di componenti, un'app mantiene le dipendenze sui componenti che utilizza. Il creatore dell'app verrà avvisato quando saranno disponibili gli aggiornamenti per i componenti dipendenti. Pertanto, tutti i nuovi componenti riutilizzabili devono essere creati all'interno delle librerie dei componenti.

Importare i componenti da un'altra app

Per importare uno o più componenti da un'app a un'altra, seleziona Importa componenti dal menu Inserisci e quindi utilizza il menu a discesa Personalizza. Oppure usa Componenti nella visualizzazione ad albero sulla barra di spostamento a sinistra.

Una finestra di dialogo elenca tutte le app che contengono componenti che sei autorizzato a modificare. Seleziona un'app, quindi seleziona Importa per importare la versione pubblicata più recente di tutti i componenti in quell'app. Dopo aver importato almeno un componente, puoi modificare la copia ed eliminare quello non necessario.

Finestra di dialogo Importa componenti

Puoi salvare un'app con componenti esistenti in un file locale e quindi riutilizzare il file importandolo. Puoi utilizzare il file per importare i componenti in un'altra app.

Se l'app contiene una versione modificata dello stesso componente, viene richiesto di decidere se sostituire la versione modificata o annullare l'importazione.

Dopo aver creato i componenti in un'app, altre app possono utilizzare i componenti da questa app importandoli.

Esportare i componenti dall'app

Puoi esportare i componenti in un file e scaricarli per importarli in un'altra app.

Seleziona l'opzione Esporta componenti dalla sezione Componenti nella visualizzazione ad albero della barra di spostamento a sinistra:

Visualizzazione ad albero Esporta componenti

Puoi anche usare il menu Inserisci e quindi selezionare il menu a discesa Personalizza.

Menu Inserisci con Esporta componenti

La selezione di Esporta componenti scarica i componenti in un file:

Download del componente

Il file del componente scaricato utilizza l'estensione di file .msapp.

Importare i componenti dal file dei componenti esportati

Per importare componenti da un file di componenti esportati, seleziona Importa componenti dal menu Inserisci e quindi utilizza il menu a discesa Personalizza oppure usa Componenti nella visualizzazione ad albero della barra di spostamento a sinistra. Dalla finestra di dialogo dei componenti, seleziona Carica file invece di selezionare altri componenti o app:

Importa un file di componenti

Dalla finestra di dialogo Apri, seleziona il percorso del file dei componenti e seleziona Apri per importare i componenti all'interno dell'app.

Importare i componenti da un'app esportata

Puoi salvare un'app localmente usando l'opzione File > Salva con nome:

Salva l'app

Dopo aver salvato l'app, puoi riutilizzare i componenti di questa app utilizzando lo stesso metodo di importazione dei componenti da un file. Segui i passaggi nella sezione precedente sull'importazione dei componenti dal file dei componenti esportati.

Limiti noti

  • Non è possibile salvare origini dati, moduli e tabelle di dati con i componenti.
  • Le raccolte nei componenti non sono supportate.
  • Non è possibile inserire un componente in una raccolta o in un modulo.
  • L'istanza master di un componente è un master locale e viene eseguita nell'ambito dell'app. Se modifichi un'istanza master, solo le copie del componente all'interno dell'app rifletteranno la modifica. Le copie in altre app rimarranno invariate se non importi di nuovo la libreria dei componenti. Tutte le istanze master in tali app verranno rilevate e aggiornate automaticamente.
  • Non è possibile comprimere i file multimediali in un pacchetto quando importi un componente.
  • I componenti non supportano la funzione UpdateContext, ma puoi creare e aggiornare le variabili in un componente usando la funzione Set. L'ambito di queste variabili è limitato al componente, ma puoi accedervi dall'esterno del componente tramite le proprietà di output personalizzate.

Passaggi successivi

Scopri come usare una libreria dei componenti per creare un repository di componenti riutilizzabili.