Get started with Power Apps component framework / Create components with Power Apps Component Framework

Question 1

Introduction to Power Apps component framework

Cosa è power app Component Framework?

Answer 1

Power Apps component framework

Il component framework di Microsoft Power Apps consente di creare componenti di codice riutilizzabili che possono essere usati nelle applicazioni di Power Apps.

• Il component framework consente agli sviluppatori di creare componenti di codice quando i componenti predefiniti non soddisfano le esigenze di un produttore di app.
• I componenti del codice sono controlli visivi che consentono di creare un’esperienza utente personalizzata.
• Questi componenti possono anche includere business logic che completa la visualizzazione per applicare regole univoche per lo scenario implementato.

Question 2

Introduction to Power Apps component framework

Vantaggi nell’utilizzare il component framework?

Answer 2

Power Apps component framework advantages

I componenti di Power Apps sono basati su un framework robusto che supporta le pratiche Web moderne. Di conseguenza, alcuni dei vantaggi sono:

• Accesso a un ricco set di API del framework che espongono funzionalità come la gestione del ciclo di vita dei componenti, dati contestuali e metadati.
• Supporto di framework client come React e AngularJS.
• Accesso senza interruzioni al server tramite API Web, utilità e metodi di formattazione dei dati, funzionalità del dispositivo come fotocamera, posizione e microfono.
• Ottimizzazione per le prestazioni.
• Riusabilità
• Utilizzo dei principi del responsive web design per fornire un’esperienza di visualizzazione e interazione ottimale per schermi di qualsiasi dimensione, dispositivo o orientamento.
• Possibilità di raggruppare tutti i file in un unico file di soluzione con altre risorse dell’app.

Question 3

Introduction to Power Apps component framework

Tipi di componenti che si possono aggiungere?

Answer 3

Types of components that you can add

• Field - Un controllo personalizzato per un campo in un form.
  
  • Ad esempio, invece di una semplice casella di testo per inserire un numero, è possibile utilizzare un componente di codice personalizzato per eseguire il rendering di un dispositivo di scorrimento.
  • Il dispositivo di scorrimento potrebbe avere una logica aziendale personalizzata che limita le fermate sul dispositivo di scorrimento in base ad altri dati disponibili e associati al componente.
• Dataset - Un controllo personalizzato per visualizzare righe di dati. Ad esempio, invece di una griglia comune con righe e colonne per visualizzare gli appuntamenti odierni, è possibile creare un componente del codice dell’utilità di pianificazione giornaliera. Il componente codice potrebbe includere funzionalità come il trascinamento della selezione per riprogrammare gli appuntamenti.

Question 4

Power Apps component framework architecture

Come sono composti i componenti?

Answer 4

Component composition

I Code components vengono implementati utilizzando HTML, CSS e JavaScript o TypeScript.

• Un manifest viene utilizzato per identificare le proprietà disponibili per l’uso da parte dell’applicazione che ospita il componente.
  
  • ​Manifest file es: control definition: Name, Description,Version resource files
• Quando il componente codice viene utilizzato dai creatori di app, avranno la possibilità di impostare staticamente un valore per le proprietà o di associarlo dinamicamente a una delle colonne di dati disponibili nell’applicazione.
• Le proprietà consentono all’applicazione e al componente di comunicare sui dati senza che l’app debba comprendere l’implementazione del componente.
• Per creare un componente, il codice deve implementare un’interfaccia che fornisce un modo coerente per l’app di hosting di interagire con il componente. Ciò viene eseguito dalla classe del componente di codice che implementa l’interfaccia StandardControl.

Question 5

Power Apps component framework architecture

Ciclo di vita di un componente?

Answer 5

Power Apps component life cycle

Quando si sviluppa un componente, è necessario implementare i metodi di interfaccia StandardControl illustrati nella tabella seguente. Questi metodi consentono al runtime di hosting di gestire il ciclo di vita del componente di codice.

Metodi:

• init() : Required. Questo metodo viene utilizzato per inizializzare l’istanza del componente.
  
  • I componenti possono avviare chiamate al server remoto e altre azioni di inizializzazione in questo metodo.
  • I valori Dataset NON possono essere inizializzati con questo metodo; sarà necessario utilizzare il metodo updateView() per questo scopo.
• updateView() : Required. il suo metodo verrà chiamato quando un qualsiasi valore nel contenitore delle proprietà del componente è cambiato.
• getOutputs(); Optional. Chiamato dal framework prima della ricezione di nuovi dati.
  
  • Utilizzare questo metodo durante la gestione dinamica delle proprietà associate in un controllo.
• ​destroy() Required. Richiamato quando il componente deve essere rimosso dall’albero DOM.
  
  • Utilizzato per la pulizia e per liberare tutta la memoria utilizzata dal componente.
• notifyOutputChanged() può essere utilizzato dall’implementazione del controllo per notificare al framework che ha nuovi output. Viene passato al controllo come parametro del metodo init().

Question 6

Power Apps component tooling

Che strumenti vengono utilizzati nei vari step durante la creazione di un code component?

Answer 6

Power Apps component tooling

Quando crei un code component di Power Apps, utilizzerai una combinazione di strumenti per semplificare i passaggi necessari dall’inizio alla fine.

Step

• Create: Crea e inizializza il progetto componente utilizzando un template.
  
  • tools Power Apps Command Line Interface (CLI)
• Implement: Descrive e implementa il comportamento e lo stile dei tuoi componenti
  
  • Code editor or Integrated Development Environment (IDE) of your choice.
• Build: Convalida e traspila il codice TypeScript, crea il manifest del componente.
  
  • ​Power Apps CLI or Visual Studio Code
• Debug: Convalida e risolvi il comportamento dei componenti senza distribuirli in un ambiente Dataverse.
• Package: Creare il file della soluzione Dataverse e creare il pacchetto del componente come parte di tale soluzione.