Oprette en app med Adresseinput- og Kort-kontrolelementer

Der er mange scenarier, hvor brugerne forventes at angive adresser i en app. Historisk har der været flere felter, der henter hvert element i en adresse, hvor brugeren angiver gadeadressen, by og postnummer, og vælger tilstand. Indtastning af adresser kan være frustrerende og fejlbehæftede, især i mobile scenarier.

Adresseinput-kontrolelementet giver brugeren dynamiske adresseforslag, når de skriver. Ved hjælp af logikken for matchning af enheder foreslår kontrolelementet flere mulige adressematch, som brugeren kan vælge mellem, hvilket gør det hurtigere og nemmere at angive nøjagtige adresser.

Kontrolelementet returnerer adressen som strukturerede data, så programmet kan udtrække oplysninger som by, gade, gade, breddegrad og længdegrad. Dataene er i et format, der er brugervenligt for mange landestandarder og internationale adresseformater.

Hvis du vil bruge kontrolelementet, skal du aktivere De Geografiske Tjenester for miljøet.

  • Se denne video for at få mere at vide om, hvordan du bruger kontrolelementet Adresseinput:

  • Se denne video for at få mere at vide om, hvordan du bruger Kort-kontrolelement:

I denne artikel får du at vide, hvordan du bruger Adresseinput-kontrolelementet i lærredapps.

Forudsætninger

Hvis du vil fuldføre denne lektion, skal du have et Power Apps-miljø med en Microsoft Dataverse-database. Hvis du ikke allerede har en licens, du kan tilmelde dig Power Apps Udviklerplan eller bruge en Power Apps-prøveversion.

Oprette et prøvemiljø

Et miljø i Power Apps er et område til at gemme, administrere og dele din organisations forretningsdata, apps, chatrobotter og flow. Det fungerer også som en objektbeholder, der kan adskille apps, der kan have forskellige roller, sikkerhedskrav eller målgrupper.

Hvert miljø kan have én Dataverse-database.

Vi vil oprette et nyt miljø, der indeholder en Dataverse-database, for at sikre, at du har det, du skal bruge for at fuldføre denne lektion. Dette er en 30-dages prøveversion, der fjernes efter 30 dage, men du kan opgradere det til et sandkasse- eller produktionsmiljø, hvis du vil bevare det.

Vi opretter et prøvemiljø, der indeholder en Dataverse-database, og de eksempeldata, der bruges i denne emne.

  1. Gå til Power Platform Administration i en webbrowser.

  2. Vælg Miljøer.

  3. Vælg Ny.

  4. Angiv et navn, f.eks. "Dataverse-prøve".

  5. Vælg Prøve for miljøtypen.

  6. Skift Opret database til Ja.

  7. Vælg Næste.

    Oprette et prøvemiljø.

  8. Skift Installer eksempelapps og data til Ja.

  9. Vælg Gem.

Prøveversionsmiljøet oprettes nu, herunder en Dataverse-database og eksempeldata i Dataverse-tabeller.

Aktivere de geografiske tjenester for miljøet

Før vi kan bruge De Geografiske Tjenester i apps på lærred, skal en administrator give adgang til funktionerne i det miljø, hvor appen skal oprettes.

Du kan få mere at vide om, hvordan du aktiverer Geospatiale tjenester i dit miljø, under Aktivere geospatiale funktioner for miljøet.

Oprette en lærredapp

Vi starter med at oprette en app, og derefter opretter vi et header-kontrolelement, der skal bruges i appen for at standardisere headerens udseende på forskellige skærme.

  1. Opret en tom lærredapp i det miljø, du har oprettet tidligere.

  2. Vælg Indsæt > Nyt skærmbillede, > der kan rulles for at tilføje et nyt skærmbillede.

    Vælg rulbar.

  3. Ret etiketteksten til "Nyt firma".

    Overskrift

  4. Vælg Indsæt > Formularer > Rediger for at føje en formular til skærmen.

    Vælg Rediger

    Formularkontrolelementet tilføjes

    Kontrolelement til formular tilføjes

  5. Opdater følgende egenskaber for formularen:

    Egenskab Værdi
    Datakilde Konti
    Columns 2
    DefaultMode FormMode.New
  6. Vælg Rediger ud for felter for at føje flere felter til formularen, og vælg følgende adressefelter:

    • Adresse 1: Gade 1
    • Adresse 1: By
    • Adresse 1: Stat
    • Adresse 1: Postnummer
    • Adresse 1: Land/område
    • Adresse 1: Breddegrad
    • Adresse 1: Længdegrad

    Adresseegenskaber

  7. Juster rækkefølgen af felterne som vist nedenfor.

    Firmanavn og Hovedtelefonnummer i første række, Adresse 1: Gade 1 og Adresse 1: By i anden række, Adresse 1: Område og Adresse 1: Postnummer i tredje række, Adresse 1: Land/område og Adresse 1: Breddegrad i fjerde række, Adresse 1: Adresse 1: Længdegrad i rækken med vigtige oplysninger.

Adresseinput-kontrolelement

I dette afsnit tilføjer vi kontrolelementet Adresseinput i appen.

  1. Vælg Indsæt > Input > Adresseinput for at føje kontrolelementet til skærmen.

    Vælg Adresseinput-kontrolelement

  2. Flyt kontrolelement til øverste højre side af skærmen.

    Adresseinput-feltet tilføjes

Konfigurere egenskaber for kontrolelementet Adresseinput

I dette afsnit gennemgås, og du kan evt. angive forskellige egenskaber for adressekontrolelementet. Der findes nogle få egenskaber, der er specifikke for kontrolelementet Adresseinput.

Adresseinput-kontrolelement

Egenskab Beskrivelse
Grænse for søgeresultat Det antal foreslåede adresser, kontrolelementet vises for. I dette eksempel har vi angivet den til 5, så der vises højst fem adresser i søgningen.
Søg inden for radius Om kontrolelementet skal foreslå adresser i den brugerdefinerede Radius for breddegrad og længdegrad. Vi har angivet det til Ja i dette eksempel.
Breddegrad Det midterste punkts breddegrad bruges til at foreslå geografiske bias-adresser. Kræver, at Søg indenfor radius er slået til. Vi har angivet den til formlen Location.Latitude i dette eksempel for at returnere breddegraden for den aktuelle placering.
Længdegrad Det midterste punkts længdegrad bruges til at foreslå geografiske bias-adresser. Kræver, at Søg indenfor radius er slået til. Vi har angivet den til formlen Location.Longitude i dette eksempel for at returnere breddegraden for den aktuelle placering.
Radius Radius, i meter, omkring Breddegrad og Længdegrad skal begrænse adresseforslagene. Kræver, at Søg inden for radius er slået Til. Vi har angivet det til 100000 i dette eksempel.
Sprog Det sprog, som adresseforslagene returneres på. Vi har ladet den stå med standarden - "Engelsk (USA)".
Sæt af land/område Kommasepareret liste over lande/områder som adresseforslagene skal begrænses til i ISO 3166 alpha-2-landekoder. Eksempler: "USA", "FR", "KW". Vi har angivet det til USA i dette eksempel.

Konfigurere outputegenskaber for kontrolelementet Adresseinput

Kontrolelementet output for forskellige egenskaber, når en bruger kommunikerer med det i en app. Du kan bruge disse output i andre kontrolelementer eller til at tilpasse oplevelsen.

Følgende tabel viser de outputegenskaber, der er tilgængelige.

Egenskab Beskrivelse
Brugerinput Tekst, som brugeren har skrevet i inputfeltet.
SelectedLatitude Breddegraden for den brugervalgte adresse i inputfeltet.
SelectedLongitude Længdegraden for den brugervalgte adresse i inputfeltet.
SearchResultJson Søgeresultatet (baseret på egenskaben UserInput), vist som en streng i egenskaben for JSON-format.
FreeformAddress Valgt adresse på listen over foreslåede adresser.
LocalName Et adressekontrolelement, der repræsenterer navnet på et geografisk område eller et geografisk område, hvor der grupperes flere adresserede objekter med henblik på adressering, uden at være en administrativ enhed.
PostalCode Postnr.
ExtendedPostalCode Udvidet postnummer.
CountryCode Landekode.
Land/område Land/område.
CountryCodeISO3 Landekode i ISO-alpha-3-format.
CountrySubdivisionName Navn på underinddeling af land/område.
StreetName Gadenavn.
StreetNumber Gadenummer.
Kommune Kommune.
MunicipalitySubdivision Underinddeling af kommune.
CountryTertiarySubdivision Tertiær underinddeling af land/område.
CountrySecondarySubdivision Sekundær underinddeling af land/område.
CountrySubdivision Underinddeling af land/område.

Når du kører appen og begynder at skrive en adresse, vises de adresser, der svarer til den angivne værdi, og de er kun placeret inden for 100.000 fra den aktuelle placering. Bemærk også, at der ikke vises mere end fem adresseforslag på et tidspunkt, hvor du begynder at skrive adressen.

Adresseregistrering

Ved hjælp af ovenstående kontrolelement registrerer vi adressen i adressefelterne i formularen for at oprette et nyt firma. Dette trin er nyttigt, så brugeren ikke behøver at skrive i hvert af adresseelementerne enkeltvis.

Værdierne for datakortet angives til den relevante egenskabsværdi fra Adresseinput.

Tip

Standardværdierne for datakortet kan være låst. Hvis du vil låse dem op, skal du markere datakortet og gå til egenskaberne Avanceret og derefter vælge Frigør for at ændre egenskaber.

Frigør kontrolelementet

Datakort Værdi
Adresse 1: Gade 1 AddressInput1.StreetNumber & " " & AddressInput1.StreetName
Adresse 1: By AddressInput1.Municipality
Adresse 1: Område AddressInput1.CountrySubdivision
Adresse 1: Postnummer AddressInput1.PostalCode
Adresse 1: Land/område-datakort AddressInput1.Country
Adresse 1: Breddegrad AddressInput1.SelectedLatitude
Adresse 1: Længdegrad AddressInput1.SelectedLongitude

Eksempel på Adresse 1: Gade 1-datakort:

Adresseformular

Formularen udfyldes automatisk med alle adressefelter, når der vælges en adresse i kontrolelementet Adresseinput.

Endelig formular

Kort-kontrolelement

I dette afsnit kan du se, hvordan du kan tilføje Kort-kontrolelement i appen for at få vist den valgte placering på kortet.

  1. Før du tilføjer kontrolelementet Kort, skal du oprette en samling for at hente adressen fra Adresseinput – denne samling bruges som datakilde for kortet.

    Angiv følgende formel i egenskaben OnAddressSelect for kontrolelementet Adresseinput for at oprette en samling, der registrerer adressedataene.

    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
        }
    )
    

    Kort-kontrolelementformular

  2. Vælg et område uden for kontrolelementet Adresseinput, og vælg Indsæt > Medier > Kort for at føje Kort-kontrolelementet til skærmen.

    Vælg kort

  3. Vælg samlingen som datakilde.

    Vælg kontrolelementet

  4. Flyt kortet under Adresseinput-sektionen.

    Placer kortet på skærmen

Konfigurer egenskaber for Kort-kontrolelement

I dette afsnit gennemgås, og evt., angivelse af forskellige egenskaber for Kort-kontrolelementet.

Nedenstående tabel viser tilgængelige egenskaber.

Egenskab Beskrivelse
Datakilde (elementer) Datakilde (tabel), der indeholder et foruddefineret sæt længdegrader og breddegrader, som vises som en nål på kortet, når det indlæses. Kortlæg hver enkelt kolonne i dataene ved hjælp af ItemAddresses, ItemLongitudes, ItemLatitudes og ItemLabels.
Brug standardplacering Angiver, om kortet initialiseres på en standardplacering, der er angivet af brugeren.
Standardlængdegrad Den længdegrad, som kortet vil slå op på, når det indlæses, hvis Brug standardplacering er aktiveret.
Standardbreddegrad Længdegraden, som kortet vil slå op på, når det indlæses, hvis Brug standardplacering er aktiveret.
Standardzoomniveau Det zoomniveau, som kortet vil være angivet til, når det indlæses, hvis Brug standardplacering er aktiveret.
Vis aktuel placering Om kortet skal vise brugerens aktuelle placering.
Breddegrad af aktuel placering Breddegraden for brugerens aktuelle placering, hvis Vis aktuel placering er aktiveret.
Længdegrad af aktuel placering Længdegraden for brugerens aktuelle placering, hvis Vis aktuel placering er aktiveret.
Satellitvisning Angiver, om korttypen er en satellitvisning eller en vejvisning.
Klyngenåle Angiver, om nålene på kortet er klyngeopdelte.
Zoomkontrolelement Om zoomobjektet vises på kortet.
Kompasstyring Om kompasobjektet vises på kortet.
Kontrolelement for højde Om pitchreguleringen vises på kortet.
Nålefarve Farven på nålene.
ItemsLabels En kolonne i elementer, som indeholder de strenge, du vil bruge som etiketter for nålene.
ElementAdresser En kolonne i elementer med de strenge, der repræsenterer placeringen af nålene.
ItemsLongitudes Navnet på kolonnen i tabellen i din datakilde med flydende pointtal, der repræsenterer længdegraden for nålene.
ItemsLatitudes Navnet på kolonnen i tabellen i din datakilde med flydende pointtal, der repræsenterer breddegraden for nålene.
ItemsColors Farven på nålene.
ItemsIcons Ikon for nålene.
Varer Navnet på den tabel i din datakilde, som indeholder alle de poster, du vil have afbildet på kortet ved hjælp af nålene. De enkelte rækker skal have et element med etiketten, længdegraden og breddegraden for hver række.
OnMapClick Hvordan kortet reagerer, når der klikkes på en placering.
OnSelect Hvordan appen reagerer appen, når der vælges en nål på kortet.
OnLoad Hvordan appen reagerer, når kortet er indlæst.
OnItemsChange Hvordan appen reagerer, når nåle på kortet ændres.
Vis infokort Om de informationskort vises på kortets nåle.
Vis figurer Om figurerne i Shapes_Items skal vises på kortet.
Vis figurnavne Om navnene skal vises på figurerne på kortet.
Aktivér figurtegning Om tegneredskaber vises på kortet.
Aktivér sletning af figur og redigering af navn Om det er muligt at slette figurer, og om deres navne kan redigeres på kortet.
Shapes_Items Navnet på den tabel i din datakilde, som indeholder alle de poster med de GeoJSON-objekter, du vil vise på kortet som figurer.
ShapeGeoJSONObjects Navnet på kolonnen i tabellen i din datakilde med strenge, der repræsenterer GeoJSON-objekterne for figurerne.
ShapeLabels En kolonne i Shapes_Items med de strenge, du vil bruge som navne til figurerne.
ShapeColors Farven på figurerne.
OnShapeSelected Sådan reagerer appen, når der vælges en figur på kortet.
OnShapeCreated Sådan reagerer appen, når der oprettes en figur på kortet.
OnShapeEdited Sådan reagerer appen, når der redigeres en figur på kortet.
OnShapeDeleted Sådan reagerer appen, når der slettes en figur på kortet.

Konfigurer output-egenskaber for Kort-kontrolelement

Kort-kontrolelementet viser output for forskellige egenskaber, når en bruger kommunikerer med det i en app. Du kan bruge disse output i andre kontrolelementer eller til at tilpasse oplevelsen.

Følgende tabel viser de outputegenskaber, der er tilgængelige.

Egenskab Beskrivelse
CenterLocation Centrer placering på kortet som enten .Latitude eller .Longitude. Outputtet er et heltal. Hvis du f.eks. ringer til Map1.CenterLocation.Latitude, vises der et enkelt heltal, f.eks. "47.60357".
Valgt Den valgte nål på kortet.
SelectedItems Den eller de valgte nåle for den valgte klynge på kortet.
GeocodedItems De geografiske placeringer af knappenålene på kortet.
ClickedLocation Den placering på kortet, der sidst er klikket på som enten .Latitude eller .Longitude.
Shapes_Selected Posten med den valgte figur fra Shapes_Items.
Shapes_SelectedItems Posterne med de valgte overlappende figurer fra Shapes_Items.
SelectedShape Den valgte figur på kortet med .Perimeter og .Area.
DeletedShape Den senest valgte figur på kortet med .Perimeter og .Area.
GeoJSON Listen over figurer på kortet i GeoJSON-format for funktionssamlingen.

Hvis du vil slippe en nål på den adresse, der er angivet i Adresseinput, skal du bruge den samling, vi har oprettet på egenskaben OnAddressSelect, og bruge den i Kort-kontrolelementet.

Egenskab Værdi
Varer colSelectedAddress
ItemsLatitudes colSelectedAddress.Latitude
ItemsLongitude colSelectedAddress.Longitude

Egenskaber for Kort-kontrolelementer

Nedenfor forklares nogle af egenskaberne for knappenålen pr. placeringsnål:

  1. ItemsColors – Hvis du vil opdatere farven på knappenålen til en anden farve for hver placering, skal du føje en kolonne til samlingen Farve: Rød og bruge denne kolonne i egenskaben ItemsSdata for kontrolelementet Kort.

  2. ItemsLabels - Hvis du vil opdatere etiketten på knappenålen til en anden etikette, der viser adressen for hver placering, skal du føje en kolonne til samlingen Label:AddressInput1.FreeformAddress og bruge den i dataegenskaben ItemsLabels for kontrolelementet Kort.

  3. ItemsIcons – Hvis du vil ændre ikonet for knappenålen for hver placering, skal du føje en kolonne til samlingen og bruge den i egenskaben ItemsIcons for kontrolelementet Kort. I dette eksempel tilføjer vi et trekantsikon med formlen som Icon: triangle.

    Tip

    Gå til Liste over billedskabeloner for at få vist en komplet liste over skabeloner.

    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
        }
    );
    

Når du har føjet dem til samlingen, skal du gå til fanen Avanceret i kontrolelementet Kort og opdatere egenskaberne ItemsColors, ItemsLabels og ItemsIcons.

Egenskaber for avancerede Kort-kontrolelementer

Kør appen i visningen forhåndsversion til test. På kortet vises den placering, der er valgt i Adresseinput med et trekantsikon, og adressen vises som en etiket på kortet.

Opdateringsadresse til Kort-kontrolelement

Se også

Kontrolelementet Interaktivt kort