Cascading dropdowns i lærredsapps

I denne tutorial skal vi tale om, hvordan rullegardiner fungerer.

Cascading dropdowns er to eller flere dropdowns, der er afhængige af hinanden.

Når det bruges i Power Apps, kan cascading dropdowns forbedre din slutbrugers oplevelse, især når det kommer til at filtrere enorme mængder data.

Indholdsfortegnelse

• Tilføjelse af en kundeopslagstabel
• Tilføjelse af den første dropdown
• Tilslutning af datatabellen til rullemenuen
• Tilføjelse af en anden dropdown
• Oprettelse af Cascading Dropdowns
• Konklusion

Tilføjelse af en kundeopslagstabel

Lad os starte med at tilføje en dropdown på en ny skærm.

Vi vil tilføje en ny skærm ved at duplikere Master Screen, en teknik, som vi diskuterede i en. Vi kalder denne skærm for Item Lookup.

Lad os derefter tilføje en datatabel til skærmen.

Vi skal tilføje en datakilde til vores tabel for at begynde at vise de poster, vi har brug for. Lad os tilføje Tabel1 som datakilden gennem Egenskabsruden til højre.

Lad os derefter tilføje de felter, vi har brug for, ved at klikke på "Rediger felter". Til denne tabel vil vi bruge Fornavn, Efternavn, Placering og VIP-niveau.

Nu hvor vores tabel indeholder de poster, vi har brug for, vil dette fungere som vores kundeopslagstabel.

Nu er målet her, at vi skal kunne filtrere posterne her i denne tabel baseret på placering og VIP-niveau. Det er her, vores dropdowns kommer ind.

Tilføjelse af den første dropdown

Lad os gå til Input under Indsæt båndet og klik på Dropdown.

Som standard vil dropdowns have værdierne 1, 2 og 3.

Vi kan ændre elementerne i rullemenuen ved at gå til højre rude og forbinde den datakilde, vi brugte til vores kundeopslagstabel, som er Tabel1.

Derefter skal vi under Værdi vælge den kolonne, som vi vil bruge i rullemenuen. I dette tilfælde, lad os bruge Placering.

Når det er gjort, vil vi se alle mulige placeringer i rullemenuen. Vi ser dog også en del dubletter.

Det er fordi den i øjeblikket blot tager alle posterne i kolonnen Placering, uanset hvor mange gange en post dukker op. For at slippe af med disse dubletter skal vi bruge funktionen Distinct.

Funktionen Distinkt evaluerer poster i en specifik kolonne og fjerner eventuelle dubletter.

Så lad os fremhæve rullemenuen og vælge egenskaben Items. Derefter skal vi bruge funktionen Distinct og reference Tabel1 og Placering.

Når først vi har låst den formel inde, har vores dropdown nu kun unikke varer uden nogen dubletter.

For at hjælpe os med at gøre posterne i denne dropdown nemmere at gennemse, lad os sortere elementerne, så de vises i alfabetisk rækkefølge. Vi kommer til at bruge funktionen SortByColumn, som normalt kræver en kilde. I dette eksempel ville kilden være vores liste over forskellige elementer i kolonnen Placering.

Det kræver også en kolonne. I dette tilfælde vil vi have funktionen til at sortere emnerne fra selve resultatet. Dybest set kommer dette resultat fra den kilde, som vi lige har henvist til, som er vores liste over forskellige elementer. Så vi refererer til Resultat.

Nu har vi alle vores unikke placeringer sorteret i denne rullemenu.

Tilslutning af datatabellen til rullemenuen

Det næste trin ville være at gøre denne tabel afhængig af rullemenuen. Til dette bruger vi filterfunktionen.

Så lad os fremhæve datatabellen og gå til egenskaben Items og bruge Filter-funktionen. Filterfunktionen tager normalt en kilde og en logisk test. I dette tilfælde er vores kilde Tabel1. Hvad angår den logiske test, ønsker vi, at den skal svare til den værdi, brugeren vælger fra rullemenuen.

Hvis vi tager et kig på venstre rude, vil vi se, at den dropdown, vi vil referere til her, er Dropdown4.

Så det er det element, vi vil bruge til vores logiske test. Vi bruger Dropdown4.Selected.Result, fordi vi kun ønsker at vise resultaterne baseret på det valgte element.

Nu, da vi har valgt Australien i rullemenuen, viser tabellen kun poster, der har Australien som placering.

Tilføjelse af en anden dropdown

Da vi i sidste ende ønsker at kaskadere vores dropdowns, betyder det, at vi har brug for mindst to dropdowns eller mere. Så lad os tilføje en anden dropdown. Denne gang vil det blive brugt til at filtrere vores optegnelser baseret på VIP-niveau.

I dette eksempel er den nye dropdown Dropdown5.

Endnu en gang skal vi trykke på en datakilde, som er Tabel1. Derefter bruger vi VIP-niveau som værdi.

Da elementerne i VIP-niveau-kolonnen højst sandsynligt også vil have dubletter, vil vi igen bruge Distinct-funktionen, der henviser til Tabel1 og VIPLevel i processen.

Dette sikrer, at vi ikke har nogen dubletter i vores dropdown.

Lad os nu også ordne disse ting. Ligesom vores første dropdown kommer vi til at bruge SortByColumn, denne gang refererer vi til VIPLevel i stedet for Location.

Med den formel på plads er elementerne i vores dropdown nu i den rigtige rækkefølge.

Dernæst skal vi gå tilbage til vores datatabel for at sikre, at vi ikke kun filtrerer baseret på den første dropdown, men også baseret på den anden. De gode ting ved datatabeller og filterfunktionen er, at vi kan tilføje så mange filtreringskriterier, som vi vil.

Så hvis vi går til den originale formel, skal vi blot tilføje VIPLevel = Dropdown5.Selected.Result.

Når vi har gemt den formel, kan vi nu vælge elementer fra begge rullemenuer, og vores datatabel vil filtrere poster baseret på dem begge. For eksempel, hvis vi vælger Singapore fra rullemenuen Placering og 1 på rullemenuen VIP-niveau, ender vi med to poster, der matcher disse parametre.

Vi kan ændre VIP-niveauet til 4, og det vil vise et resultat, der matcher vores filtre.

Læg nu mærke til, hvordan bordet bliver tomt, når vi vælger VIP Level 5 med Singapore som lokation.

Det betyder, at der ikke er nogen i Singapore, der hører til under VIP-niveau 5. Selvom dette er forståeligt, er det, vi ønsker, at 5 ikke vises i den anden dropdown, hvis der ikke er nogen rekord, der matcher den. Det er trods alt, hvad cascading dropdowns handler om.

Oprettelse af Cascading Dropdowns

I øjeblikket kigger Egenskaben Items for vores anden dropdown på Tabel1, tager de forskellige elementer fra VIPLevel-kolonnen og sorterer dem ved hjælp af det faktiske resultat.

Det, vi ønsker, skal ske, er, at datakilden indsnævres til det, der er valgt i den første dropdown i stedet for at se på hele tabel1. For eksempel, hvis brugeren vælger Singapore fra rullemenuen Placering, skal VIPLevel-rullelisten kun vise elementer, der matcher Singapore, og ikke hele tabellen.

Så vi vil tilføje Filter-funktionen her, og sikre, at Tabel1 er filtreret ud fra betingelsen om, at Placering skal svare til Dropdown4.Selected.Result.

Hvis vi tjekker vores dropdown nu, vil vi se, at den anden dropdown ikke viser 5 længere med Singapore valgt på den første dropdown.

Hvis vi tjekker Canada denne gang, viser det, at der ikke er 3 under VIP-niveau.

Hvis vi dobbelttjekker dette i forhold til vores oprindelige datakilde, som er Tabel 1, vil vi se, at der virkelig ikke er nogen match for VIPLevel 3 i Canada. Det betyder, at vores formel virker.

Konklusion

Cascading dropdowns kan helt sikkert forbedre slutbrugerens oplevelse, især hvis du har med store mængder data at gøre. Dette gør det nemmere for dine slutbrugere at finde de poster, de har brug for hurtigere, simpelthen fordi de ikke skal håndtere ekstra elementer, der ikke giver noget, da de filtrerer resultaterne ned.

Bemærk, at du kan slippe andre rullemenuer efter behov. Du behøver ikke at begrænse dig til kun to dropdowns. Det betyder, at hvis du har flere felter i din datakilde, kan du tilføje flere dropdowns afhængigt af, hvor præcis du ønsker, at din filtrering skal blive.

Alt det bedste,

Henrik