Crea un'app con i comandi Input indirizzo e Mappa

Esistono molti scenari in cui ci si aspetta che gli utenti inseriscano indirizzi in un'app. Storicamente, ci sono stati più campi che catturano ogni elemento di un indirizzo in cui l'utente fornisce l'indirizzo, la città e il codice postale e seleziona lo stato. L'input di indirizzi può essere un'attività frustrante e soggetta a errori, in particolare in scenari per dispositivi mobili.

Il comando Input indirizzo presenta all'utente suggerimenti dinamici sull'indirizzo durante la digitazione. Utilizzando la logica di corrispondenza fuzzy, il comando suggerisce più potenziali corrispondenze di indirizzi che l'utente può selezionare— rendendo più facile e veloce l'inserimento di indirizzi precisi.

Il comando restituisce l'indirizzo come dati strutturati, consentendo all'applicazione di estrarre informazioni come città, via, comune e persino latitudine e longitudine. I dati sono in un formato adatto a molte versioni locali e internazionali.

Per utilizzare il comando, è necessario abilitare Servizi geospaziali per l'ambiente.

• Guarda questo video per imparare a usare il comando Input indirizzo:

• Guarda questo video per imparare a usare il controllo Mappa:

In questo articolo impareremo come utilizzare il comando Input indirizzo nelle app canvas.

Prerequisiti

Per completare questa lezione, avrai bisogno di un ambiente Power Apps con un database Microsoft Dataverse. Se non hai già una licenza, puoi iscriverti per il Piano per sviluppatori di Power Apps o usare una versione di valutazione di Power Apps.

Crea un ambiente di valutazione

Un ambiente in Power Apps è uno spazio in cui archiviare, gestire e condividere dati aziendali, app, chatbot e flussi dell'organizzazione. Funge anche da contenitore per separare app che possono avere ruoli, requisiti di sicurezza o gruppi di destinatari diversi.

In ogni ambiente può essere presente un database Dataverse.

Per assicurarti di avere ciò di cui hai bisogno per completare questa lezione, creeremo un nuovo ambiente che include un database Dataverse. Questa è una versione di valutazione di 30 giorni che scadrà alla fine dei 30 giorni, ma puoi aggiornarla a un ambiente sandbox o di produzione se desideri mantenerlo.

Creeremo un ambiente di prova che includerà un database Dataverse e i dati di esempio utilizzati in questo argomento.

1. Vai all'interfaccia di amministrazione di Power Platform in un browser Web.

2. Seleziona Ambienti.

3. Selezionare Nuovo.

4. Immetti un nome, ad esempio "Versione di valutazione Dataverse".

5. Seleziona Versione di valutazione per il tipo di ambiente.

6. Attiva/disattiva Crea database su Sì.

7. Seleziona Avanti.

   

8. Attiva/disattiva Distribuisci le app e i dati di esempio su Sì.

9. Seleziona Salva.

Il tuo ambiente di prova verrà ora creato e includerà un database Dataverse e dati di esempio in tabelle Dataverse.

Abilita i servizi geospaziali per l'ambiente

Prima di poter utilizzare i servizi geospaziali nelle app canvas, un amministratore deve abilitare l'accesso alle funzionalità per l'ambiente in cui vogliamo creare l'app.

Per sapere come abilitare i servizi geospaziali nel tuo ambiente, vedi Abilita i servizi geospaziali per l'ambiente.

Creare un'app canvas

Inizieremo con la creazione di un'app, quindi creeremo un controllo Header da utilizzare all'interno dell'app per standardizzare l'aspetto dell'intestazione su schermi diversi.

1. Crea un'app canvas da modello vuoto nell'ambiente che hai creato prima.

2. Seleziona Inserisci > Nuova schermata > Scorrevole per aggiungere una nuova schermata.

   

3. Modifica il testo dell'etichetta in "Nuovo account".

   

4. Seleziona Inserisci > Moduli > Modifica per aggiungere un modulo alla schermata.

   

   Il controllo form viene aggiunto

   

5. Aggiorna le seguenti proprietà del modulo:

   Proprietà	valore
   Origine dati	Account
   Columns	2
   DefaultMode	FormMode.New

6. Seleziona Modifica accanto ai campi per aggiungere altri campi al modulo e selezionare i seguenti campi dell'indirizzo:

   • Indirizzo 1: via 1
   • Indirizzo 1: città
   • Indirizzo 1: Stato
   • Indirizzo 1: CAP
   • Indirizzo 1: paese/area geografica
   • Indirizzo 1: latitudine
   • Indirizzo 1: longitudine

   

7. Regola l'ordine dei campi come mostrato di seguito.

   

Controllo Input indirizzo

In questa sezione, aggiungeremo il comando Input indirizzo all'app.

1. Seleziona Inserisci > Input > Input indirizzo per aggiungere il controllo alla schermata.

   

2. Sposta il comando sul lato destro superiore della schermata.

   

Configura le proprietà per il comando Input indirizzo

In questa sezione esamineremo e, se necessario, imposteremo varie proprietà del comando dell'indirizzo. Ci sono alcune proprietà specifiche del comando Input indirizzo.

Configura le proprietà di output per il comando Input indirizzo

Il comando restituisce varie proprietà quando un utente interagisce con esso all'interno di un'app. Puoi utilizzare questi output in altri comandi o per personalizzare l'esperienza.

Nella tabella seguente sono elencate le proprietà di output disponibili.

Quando esegui l'app e inizi a digitare un indirizzo, verranno visualizzati gli indirizzi che corrispondono al valore inserito e si trovano solo entro 100.000 metri dalla posizione corrente. Inoltre, nota che non mostra più di cinque suggerimenti di indirizzi alla volta quando inizi a digitare l'indirizzo.

Utilizzando il comando sopra, cattureremo l'indirizzo nei campi dell'indirizzo del modulo per creare un nuovo account. Questo passaggio è utile in modo che l'utente non debba digitare singolarmente ciascuno degli elementi dell'indirizzo.

Imposteremo i valori della scheda dati sul valore della proprietà appropriata da Address Input

Esempio per scheda dati Indirizzo 1: Via 1:

Il modulo viene popolato con tutti i campi dell'indirizzo quando viene selezionato un indirizzo nel comando Input indirizzo.

Controllo mappa

In questa sezione vedremo come aggiungere il comando Mappa sull'app per mostrare la posizione selezionata sulla mappa.

1. Prima di aggiungere il comando Mappa, dobbiamo creare una raccolta per acquisire l'indirizzo dall'input dell'indirizzo: questa raccolta verrà utilizzata come origine dati per la mappa.

   Nella proprietà OnAddressSelect del comando Input indirizzo, immettere la seguente formula per creare una raccolta che acquisisca i dati dell'indirizzo.

   ClearCollect(
       colSelectedAddress,
       {
           Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName,
           City: AddressInput1.Municipality,
           State: AddressInput1.CountrySubdivision,
           Zip: AddressInput1.PostalCode,
           Country: AddressInput1.Country,
           Latitude: AddressInput1.SelectedLatitude,
           Longitude: AddressInput1.SelectedLongitude
       }
   )
   

   

2. Seleziona un'area al di fuori del comando Input indirizzo e seleziona Inserisci > Supporti > Mappa per aggiungere il comando Mappa alla schermata.

   

3. Seleziona la raccolta come origine dati.

   

4. Sposta la mappa sotto la sezione di inserimento dell'indirizzo.

   

Configura le proprietà per il controllo della mappa

In questa sezione esamineremo e, se necessario, imposteremo varie proprietà del comando della mappa.

La tabella seguente elenca le proprietà disponibili.

Configura le proprietà di output per il controllo della mappa

Il comando della mappa restituisce varie proprietà quando un utente interagisce con esso all'interno di un'app. Puoi utilizzare questi output in altri comandi o per personalizzare l'esperienza.

Nella tabella seguente sono elencate le proprietà di output disponibili.

Per inserire un pin sull'indirizzo inserito nell'input dell'indirizzo, utilizzeremo la raccolta che abbiamo creato nella proprietà OnAddressSelect e utilizzarla nel controllo mappa.

Alcune delle proprietà del segnaposto possono essere personalizzate per segnaposto di posizione sono spiegate di seguito:

1. ItemsColors - Per aggiornare il colore del segnaposto con un colore diverso per ogni posizione, aggiungi una colonna alla raccolta Colore: rosso e usalo nella proprietà dati ItemsColors del comando Mappa.

2. ItemsLabels - Per aggiornare l'etichetta del segnaposto con un'etichetta diversa che mostra l'indirizzo per ogni posizione, aggiungi una colonna alla raccolta Label:AddressInput1.FreeformAddress e usalo nella proprietà dati ItemsLabels del comando Mappa.

3. ItemsIcons - Per modificare l'icona del segnaposto per ogni posizione, aggiungi una colonna alla raccolta e usala nella proprietà dati ItemsIcons del comando Mappa. In questo esempio, aggiungeremo un'icona a forma di triangolo con la formula Icon: triangle.

   Suggerimento

   Per l'elenco completo delle icone, vai a Elenco dei modelli di immagini.

   ClearCollect(
       colSelectedAddress,
       {
           Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName,
           City: AddressInput1.Municipality,
           State: AddressInput1.CountrySubdivision,
           Zip: AddressInput1.PostalCode,
           Country: AddressInput1.Country,
           Latitude: AddressInput1.SelectedLatitude,
           Longitude: AddressInput1.SelectedLongitude,
           Label: AddressInput1.FreeformAddress,
           Color: Red,
           Icon: Triangle
       }
   );
   

Dopo averli aggiunti alla raccolta, vai alla scheda Avanzate del comando Mappa e aggiorna le proprietà ItemsColors, ItemsLabels e ItemsIcons.

Eseguire l'app in modalità di anteprima per eseguire il test. La mappa mostra la posizione selezionata nell'input dell'indirizzo con un'icona a triangolo e l'indirizzo viene visualizzato come etichetta sulla mappa.

Vedi anche

Controllo Mappa interattiva