Syöttöelementit ja niiden käyttö Power Appsissa

Tässä opetusohjelmassa puhumme syöttöelementeistä ja niiden käytön maksimoimisesta Power Appsissa.

On olemassa valtava määrä syöttöelementtejä, joiden avulla voit näyttää käsittelemäsi tiedot ja parantaa samalla sovelluksen loppukäyttäjän yleistä kokemusta. Syöttöelementit eroavat muista elementeistä on se, että niiden avulla käyttäjät voivat syöttää jotain sovellukseen.

Yksi esimerkki on valintaruutu, jossa käyttäjät voivat valita ruudun ja poistaa sen valinnan osoittaakseen, että he osallistuvat tai valitsevat ruudun edustaman vaihtoehdon. Toinen on valintanappi, joka tekee saman asian, mutta vaatisi normaalisti vähintään kaksi vaihtoehtoa.

Käymme läpi joitain yleisimmistä syötteistä, joita näemme usein sovelluksissa. Koska käytettävissä on niin monia syötteitä, voit tarkistaa Microsoft Power Apps -asiakirjoista lisätietoja niistä, joista emme keskustele tässä.

Sisällysluettelo

• Yhdistelmälaatikko
• Päivämäärävalitsin
• Luetteloruutu
• Vaihda
• Liukusäätimet
• Luokitus
• Ajastin
• Johtopäätös

Yhdistelmälaatikko

Yhdistelmäruudut ovat syöttöelementtejä, jotka esittävät luettelon kohteista. Tämä tekee niistä hyvin samankaltaisia ​​kuin pudotusvalot. Suuri ero on, että luettelon esittämisen lisäksi yhdistelmälaatikot mahdollistavat myös haun. Sen päällä on hakukenttä, johon käyttäjät voivat kirjoittaa mitä tahansa.

Joten jos kirjoitamme esimerkiksi 1, se suodattaa koko luettelon ja näyttää vastaavat tulokset.

Tämän ansiosta käyttäjien on helppo löytää etsimänsä, varsinkin jos läpikäytäviä kohteita on pitkä.

Tällä hetkellä yhdistelmäruudussa näkyvät Power Appsin oletusasetukset. Mutta voimme lisätä tietolähteen oikeanpuoleisen ruudun kautta ja valita tietyn sarakkeen, josta Power Apps poimii luettelon. Tässä esimerkissä käytetään Sijaintia.

Nyt luettelo näyttää eri sijainnit tietolähteestämme.

Voimme kirjoittaa Kanadassa ja ruutu suodattaa automaattisesti osumat.

Tällä hetkellä se näyttää useita tuloksia samalle sijainnille. Tämä johtuu siitä, että luetteloissa, joissa on useita saman kohteen merkintöjä, on käytettävä Distinct-toimintoa kopioiden poistamiseksi. Sitten meidän on seurattava sitä SortByColumn-toiminnolla lajitellaksesi luettelon aakkosjärjestyksessä. Puhuimme näistä toiminnoista opetusohjelmassa.

Päivämäärävalitsin

Päivämäärävalitsimia käytetään yleisesti sovelluksissa, joissa käyttäjien on valittava tietty päivämäärä.

Tällaisten Microsoft-alustojen päivämäärävalitsimien hieno asia on, että sen avulla käyttäjät voivat napsauttaa todellista kalenteria valitakseen oikean päivämäärän.

Valitakseen vuoden käyttäjät voivat yksinkertaisesti napsauttaa näytöllä näkyvää oletusvuotta ja valita luettelosta.

Saman asian voi tehdä valittaessa kuukausi.

Voimme myös lisätä tähän tunnisteen ja muuttaa sitten tarran tekstiksi DatePicker1.SelectedDate. Tunniste näyttää minkä tahansa päivämäärän, jonka käyttäjä valitsee päivämäärävalitsimesta.

Luetteloruutu

Luetteloruutu on myös hyvin samanlainen kuin pudotusvalikko, mutta tässä tapauksessa voit valita lyhyestä näytöllä näkyvien kohteiden luettelosta. Tämä tarkoittaa, että sinun ei tarvitse vierittää ylös tai alas nähdäksesi koko luettelon.

Luetteloruudun avulla voit myös valita useita kohteita luettelosta.

Ajattele sitä kokoelmana esineitä, joista voit valita mitä tahansa, mikä sopii mihin tahansa, mitä yrität tehdä tietyllä dialla.

Vaihda

Vaihtosyöttö on toinen hyödyllinen elementti, jota voit käyttää sovelluksessasi. Näet tämän monissa sovelluksissa, joiden avulla voit ottaa vaihtoehdon käyttöön tai poistaa sen käytöstä. Normaalisti kytkin on korostettu tai värillinen, kun kytket sen päälle.

Sitten se muuttuu harmaaksi, kun kytket sen pois päältä.

Hienoa kytkimissä on, että voit muuttaa tekstiä niin, että voit tehdä siitä soveltuvamman kaikkeen, mitä haluat käyttäjän tekevän sovelluksen tässä osassa. Jos esimerkiksi haluat vaihtaa "Pois"-vaihtoehdon tunnisteen, voit yksinkertaisesti siirtyä valitsimen FalseText-ominaisuuteen.

Sitten voit muuttaa sen tekstiksi, jota haluat käyttää, kuten "Piilota tarra".

Sitten voit siirtyä TrueTextiin ja tehdä siitä "Näytä etiketti" niin, että se kuvastaa vaihtoehtoa, joka on päinvastainen kuin silloin, kun kytkin on kytketty pois päältä.

Voit myös muuttaa muita ominaisuuksia. Esimerkiksi kytkimen värin voi myös vaihtaa johonkin muuhun.

Voimme myös poimia taulukosta tulevan arvon samalla tavalla kuin teimme päivämäärävalitsimella aiemmin. Meidän on vain lisättävä tunniste ja muutettava teksti muotoon Toggle2.Value. Tässä tapauksessa käytämme Toggle2:ta, koska se vastaa tiettyä käyttämäämme elementtiä. Tämä voi muuttua, jos sovelluksessa on muita valintoja.

Koska vaihtokytkimellä on True tai False-arvo, tarramme näyttää True, kun elementti on kytketty päälle.

Sitten tarrassa näkyy False, jos kytkemme kytkimen pois päältä.

Liukusäätimet

Seuraavaksi puhutaan liukusäätimistä. Liukusäätimet ovat yleinen elementti sovelluksissa, jotka käyttävät numeerisia arvoja.

Käyttäjät voivat valita tietyn luvun arvoalueelta liu'uttamalla kytkintä vasemmalle tai oikealle.

On mahdollista asettaa vähimmäis- ja enimmäisarvo oikealla olevasta Ominaisuudet-ruudusta. Tällä hetkellä liukusäätimen avulla käyttäjät voivat valita arvon 0 ja 100 välillä. Voit asettaa sen esimerkiksi 200:ksi, jos haluat, että käyttäjät voivat valita arvon yli sata mutta alle 200.

Katsotaanpa, kuinka voimme maksimoida tämän liukusäätimen käytön lisäämällä suorakaiteen kuvakkeen.

Lisätään tähän myös tarra.

Ennen kuin yhdistämme nämä elementit, varmista, että meillä on oikea elementin nimi. Tässä tapauksessa työskentelemme Slider4:n kanssa.

Muutetaan siis tarramme tekstiä ja tehdään siitä Slider4.Value.

Tämä saa etiketin näyttämään arvon, jonka valitsemme liukusäätimellä.

Tehdään nyt jotain siistiä aiemmin lisätyllä suorakaidekuvakkeella. Katsotaan kuinka voimme tehdä suorakulmion läpinäkyvyyden riippuvaiseksi liukusäätimellä valitusta arvosta.

Ensin asetamme enimmäisarvon takaisin 100:aan.

Kirkkaus- tai peittävyystaso löytyy täältä oikeanpuoleisen ruudun täyttöominaisuuden Custom-välilehdestä. Tavoitteena on sovittaa täytön peittävyysarvo suorakulmiokuvakkeen peittävyyteen. Peittävyys näkyy viimeisessä oikealla olevassa laatikossa, jossa nyt näkyy 58. Annamme käyttäjän valita tämän arvon liukusäätimellä.

Korostetaan siis suorakulmiokuvake ja siirrytään Täyttö-ominaisuuteen. Huomaa, että lopullinen näkyvä arvo on 0,58, mikä on täyttöopasiteettimme.

Muutamme sitten sarjan lopulliseksi arvoksi Slider4.Value.

Koska opasiteettiarvo on nyt desimaaliluku 0,58, meidän on jaettava se sadalla, jotta se on luku välillä 0 ja 100.

Kun kaava on valmis, voimme nyt hallita laatikon kirkkautta liukusäätimellä. Voimme esimerkiksi liu'uttaa sen alas arvoon 4 ja näet, että suorakulmio on melkein kadonnut.

Mutta jos siirrämme liukusäätimen arvoon 100, näet suorakulmion suurimman kirkkauden.

Luokitus

Puhutaan nyt arvostuksesta. Näemme tämän usein yrityssovelluksissa, -sivuilla tai -sivustoilla, joiden avulla käyttäjät, asiakkaat ja asiakkaat voivat arvioida tarjottuja palveluita ja tuotteita.

Arviot ovat melkein samat kuin liukusäätimet, koska ne antavat käyttäjille mahdollisuuden valita tietyn arvon. Tärkein ero on visuaalinen muoto.

On myös mahdollista muuttaa enimmäisarvoa, jonka käyttäjä voi valita oikealla olevan Ominaisuudet-ruudun kautta. Voimme tehdä Max-arvoksi esimerkiksi 9, ja näemme myös tähtien määrän kasvavan.

Kuten muidenkin elementtien kanssa, joiden kanssa olemme työstäneet, voimme myös saada arvon arvosanasta ja näyttää sen etiketin muodossa. Ennen kuin aloitamme tämän etiketin käytön, muistetaan, että luokituselementti, jota aiomme käyttää, on Rating2.

Joten aivan kuten teimme aiemmin, lisätään otsikko ja muutetaan testiarvoksi Rating2.Value.

Nyt tarra näyttää numeerisen arvon siitä, mitä käyttäjä valitsee luokituksessa.

Tämä voi olla erittäin hyödyllistä sovelluksissa, kuten näissä opetusohjelmissa kehittämämme sovellukset. Koska tietolähteessämme on sarake esimerkiksi VIP-tasolle, voisimme käyttää luokituselementtiä, koska VIP-tasomme vaihtelee välillä 1–5. Tämä voi olla käyttäjille hauskempaa kuin pudotusvalikko tai liukusäädin.

Ajastin

Viimeinen eri syöttöelementeistä, joista aiomme puhua tässä opetusohjelmassa, on ajastinsyöttö.

Sen lisäksi, että loppukäyttäjät voivat ajastaa jotain, ajastimen avulla voit suorittaa toiminnon tai koodinpalan joka x sekuntimäärä. Mukaan ajastin "ohjaa, kuinka sovelluksesi reagoi tietyn ajan kuluttua.

Olemme nähneet tämän soveltavan monin eri tavoin. Esimerkiksi käyttäjä, joka on ollut uudessa lomakenäytössä vähintään 30 sekuntia, saattaa nähdä ponnahdusikkunan, joka sisältää hyödyllisiä tietoja, jotka voivat nopeuttaa prosessia. Tämän ominaisuuden käynnistämiseen käytetään ajastinta.

Katsotaanpa, miten ajastimet toimivat, ja tutkitaan muutamia sovelluksia.

Oikeanpuoleisessa ominaisuusruudussa voit hallita ajastimen kestoa. Huomaa, että tämä näytetään millisekunteina, joten tässä oleva 60 000 vastaa itse asiassa 60 sekuntia.

Muutetaan se 10 sekuntiin, mikä tarkoittaa, että kirjoitamme 10 000.

Asetamme myös ajastimen Repeat-tilaan, mikä tarkoittaa, että se käynnistää ajastimen automaattisesti uudelleen heti, kun se saavuttaa 10 sekuntia. Laitetaan myös Autostart päälle niin, että ajastin käynnistyy heti, kun näyttö latautuu.

Tehdään nyt hienoja sovelluksia. Otetaan ensin ajastimen arvo ja näytettävä se tarrassa. Lisätään siis otsikko ja muutetaan tekstiksi Timer2.Value.

Muista, että arvo on millisekunteina, joten vaikka ajastin näyttää 2 sekuntia, etiketti näyttää 2000.

Yritetään saada kuvake näkyviin 5 sekunnin kuluttua. Aloitamme lisäämällä hakukuvakkeen.

Sitten asetamme kuvakkeen Visible-ominaisuuden arvoon, joka sanoo, että jos Timer2.Value on suurempi kuin 5000, kuvakkeen pitäisi olla näkyvissä. Muuten sen ei pitäisi olla näkyvissä.

Katsotaan nyt, toimiiko se. Tällä hetkellä ajastin on 2300 millisekunnissa. Kuvake ei ole tällä hetkellä näkyvissä.

Mutta kun ajastin saavuttaa 5000:n rajan, hakukuvake ilmestyi.

Ja koska olemme asettaneet ajastimen toistumaan, kuvake katoaa uudelleen, kun ajastin käynnistyy uudelleen.

Tässä on toinen hieno sovellus. Lisätään piiri.

Sen jälkeen annamme ympyrän värin muuttua ajastimen mukaan. Tämä luo todella hienoja gradientteja ajastimen käydessä.

Siirrytään ympyrän Täyttö-ominaisuuteen. Huomaa, että ensimmäinen numero tässä on 56. Muokkaamme ympyrän väriä ajastimen perusteella.

Jos teemme tämän, voimme luoda todella hienoja gradientteja. Siirrytään esimerkiksi väriin tai täyttöön.

Muutamme tämän luvun arvoksi Timer2.Value, ja jaamme sen sitten 100:lla.

Kun tämä kaava on paikallaan, ympyrä alkaa sinisenä.

Ajastimen käydessä se vaihtaa hitaasti väriä ja muuttuu violetiksi, kun ajastin saavuttaa 10 sekuntia.

Voimme tehdä muutoksen nopeammin ja selvemmin, jos muutamme numeroa. Joten sen sijaan, että jakaisimme ensimmäisen arvon 100:lla, muutetaan se 10:ksi.

Jälleen se alkaa sinisenä.

Sitten, vain 1900 millisekunnissa, se on muuttunut purppuranpunaiseksi.

Ja 5600 millisekunnin kohdalla se on muuttunut kirkkaan vaaleanpunaiseksi.

Voit olla niin luova kuin haluat näiden asetusten avulla. Voit esimerkiksi saada koko näytön vaihtamaan värejä. Tai saatat haluta jotain erilaista tapahtuvan 5 sekunnin välein.

Se ei ehkä ole edes vain estetiikan vuoksi. Voit esimerkiksi pyytää sovelluksen kysymään käyttäjältä, tarvitseeko hän lisäapua, kun näyttää siltä, ​​että hän vie liian kauan yhdellä näytöllä, ja ohjata hänet esimerkiksi aloitussivulle.

Johtopäätös

Syöttöelementit ovat varmasti hyödyllisiä riippumatta siitä, millaista sovellusta olet luomassa. Sen lisäksi, että ne tekevät sovelluksestasi näyttävän ammattimaisemmalta, ne tekevät myös koko käyttökokemuksesta mukavamman käyttäjille.

Jokin yksinkertainen, kuten liukusäädin tai yhdistelmälaatikko, voi auttaa heitä rajaamaan valtavia tietomääriä, ja sen perusteella, mitä juuri teimme ajastimellamme, voit luoda heillekin hauskempaa ja kiinnostavampaa kokemusta.

Voit tutkia muitakin elementtejä näiden syöttöelementtien lisäksi, kuten mediaelementtejä, joiden avulla käyttäjät voivat käyttää puhelimen kameraa tai mikrofonia. Kun nämä media- ja syöttöelementit toimivat yhdessä sovelluksessasi, luot käyttäjillesi todella ainutlaatuisen kokemuksen.

Kaikki parhaat,

Henry