Elementele de intrare și modul în care sunt utilizate în Power Apps

În acest tutorial, vom vorbi despre elementele de intrare și despre cum să le maximizăm utilizarea în Power Apps.

Există un număr mare de elemente de intrare pe care le puteți utiliza pentru a afișa datele cu care lucrați, îmbunătățind în același timp experiența generală a utilizatorului final al aplicației. Ceea ce face elementele de intrare diferite de restul elementelor este faptul că permit utilizatorilor să introducă ceva în aplicație.

Un exemplu este caseta de selectare, în care utilizatorii pot bifa și debifa caseta pentru a arăta că se înscriu sau aleg opțiunea pe care o reprezintă. Un altul este butonul radio care face același lucru, dar în mod normal ar necesita cel puțin două opțiuni.

Vom trece prin câteva dintre cele mai comune intrări pe care le vedem adesea în aplicații. Deoarece există atât de multe intrări disponibile, puteți consulta documentele Microsoft Power Apps pentru a afla informații mai specifice despre cele despre care nu le vom discuta aici.

Cuprins

• Caseta combinată
• Selector de date
• Caseta cu listă
• Comutare
• Glisoare
• Evaluare
• Temporizator
• Concluzie

Caseta combinată

Casetele combinate sunt elemente de intrare care prezintă o listă de articole. Acest lucru le face foarte asemănătoare cu drop-down-urile. Marea diferență este că, pe lângă prezentarea unei liste, casetele combinate vă permit și să efectuați o căutare. Are o casetă de căutare în partea de sus care permite utilizatorilor să introducă orice.

Deci, dacă introducem 1, de exemplu, filtrează întreaga listă și arată rezultatele potrivite.

Acest lucru facilitează utilizatorilor să găsească ceea ce caută, mai ales dacă există o listă lungă de articole de parcurs.

În acest moment, caseta combinată arată opțiunile implicite încorporate în Power Apps. Dar putem adăuga o sursă de date prin panoul din dreapta și putem alege o coloană specifică din care Power Apps va extrage lista. Pentru acest exemplu, să folosim Locație.

Acum, lista arată diferitele locații din sursa noastră de date.

Putem introduce în Canada și caseta va filtra automat potrivirile.

În acest moment, arată mai multe rezultate pentru aceeași locație. Asta pentru că listele cu mai multe intrări ale aceluiași articol trebuie să utilizeze funcția Distinct pentru a elimina orice duplicat. Apoi, trebuie să continuăm cu funcția SortByColumn pentru a sorta lista alfabetic. Am vorbit despre aceste funcții într-un tutorial despre meniurile derulante în cascadă .

Selector de date

Selectoarele de date sunt utilizate în mod obișnuit în aplicațiile care impun utilizatorilor să aleagă o anumită dată.

Lucrul grozav despre selecționatorii de date din platformele Microsoft ca acesta este că le permite utilizatorilor să facă clic pe un calendar real pentru a alege data potrivită.

Pentru a alege anul, utilizatorii ar putea pur și simplu să facă clic pe anul implicit care apare pe ecran și să aleagă din listă.

Același lucru se poate face pentru a alege luna.

De asemenea, putem adăuga o etichetă aici, apoi schimbăm textul de pe etichetă în DatePicker1.SelectedDate. Eticheta va afișa orice dată pe care utilizatorul o alege din selectorul de date.

Caseta cu listă

Caseta de listă este, de asemenea, foarte asemănătoare cu un drop-down, dar în acest caz, puteți selecta dintr-o listă scurtă de elemente afișate pe ecran. Aceasta înseamnă că nu este nevoie să derulați în sus sau în jos pentru a vedea întreaga listă.

O casetă listă vă permite, de asemenea, să selectați mai multe elemente din listă.

Gândiți-vă la asta ca la o colecție de articole în care puteți alege orice este aplicabil la orice încercați să faceți pe diapozitivul specific.

Comutare

Intrarea de comutare este un alt element util pe care l-ați putea folosi în aplicația dvs. Vedeți acest lucru în multe aplicații care vă permit să activați sau să dezactivați o opțiune. În mod normal, comutatorul este evidențiat sau colorat când îl porniți.

Apoi, devine gri când îl dezactivați.

Lucrul grozav al comutărilor este că puteți schimba textul, astfel încât să îl puteți face mai aplicabil la orice doriți să facă utilizatorul în această parte a aplicației. De exemplu, dacă doriți să schimbați eticheta pentru opțiunea „Dezactivat”, puteți accesa pur și simplu proprietatea FalseText a comutatorului.

Apoi, îl puteți schimba în textul pe care doriți să îl utilizați, cum ar fi „Ascundeți eticheta”.

Apoi, puteți merge la TrueText și îl puteți face „Afișați eticheta”, astfel încât să reflecte opțiunea opusă când comutatorul este dezactivat.

Puteți modifica și alte proprietăți. De exemplu, culoarea comutatorului poate fi schimbată și cu altceva.

De asemenea, putem extrage valoarea care vine din tabel în același mod în care am făcut-o mai devreme cu selectorul de date. Trebuie doar să adăugăm o etichetă și să schimbăm textul în Toggle2.Value. În acest caz, folosim Toggle2 deoarece corespunde elementului specific pe care îl folosim. Acest lucru s-ar putea schimba dacă aveți alte comutări în aplicație.

Deoarece comutatorul are o valoare True sau False, eticheta noastră arată True atunci când elementul este activat.

Apoi, eticheta arată False dacă dezactivăm comutatorul.

Glisoare

În continuare, să vorbim despre glisoare. Glisoarele sunt un element comun în aplicațiile care folosesc valori numerice.

Utilizatorii pot alege un anumit număr dintr-un interval de valori date prin glisarea comutatorului la stânga sau la dreapta.

Este posibil să setați valoarea minimă și maximă în panoul Proprietăți din dreapta. În acest moment, glisorul permite utilizatorilor să aleagă între 0 și 100. Îl puteți seta la 200, de exemplu, dacă doriți ca utilizatorii să poată alege o valoare peste o sută, dar mai mică de 200.

Să vedem cum putem maximiza și mai mult utilizarea acestui glisor adăugând o pictogramă dreptunghi.

Să adăugăm și o etichetă aici.

Înainte de a conecta aceste elemente, să ne asigurăm că avem numele corect al elementului. În acest caz, lucrăm cu Slider4.

Deci, să schimbăm textul de pe etichetă și să îl facem Slider4.Value.

Acest lucru va face ca eticheta să afișeze valoarea pe care o alegem pe glisor.

Acum, să facem ceva tare cu pictograma dreptunghi pe care am adăugat-o mai devreme. Să vedem cum putem face ca opacitatea dreptunghiului să depindă de valoarea aleasă pe glisor.

Mai întâi, vom seta valoarea maximă înapoi la 100.

Nivelul de luminozitate sau opacitate poate fi găsit aici în fila Personalizat din proprietatea de umplere din panoul din dreapta. Scopul aici este de a potrivi valoarea de opacitate a umplerii cu opacitatea pictogramei dreptunghi. Opacitatea poate fi văzută în ultima casetă din dreapta, care arată acum 58. Vom permite utilizatorului să aleagă această valoare folosind glisorul.

Deci, să evidențiem pictograma dreptunghi și să mergem la proprietatea Fill. Rețineți că valoarea finală care apare este 0,58, care este opacitatea noastră de umplere.

Apoi vom schimba valoarea finală din serie în Slider4.Value.

Deoarece valoarea opacității este acum o zecimală la 0,58, trebuie să o împărțim la o sută pentru a o face un număr între 0 și 100.

Odată ce formula este completă, acum putem controla cât de strălucitoare va arăta caseta folosind glisorul. De exemplu, îl putem glisa în jos până la 4 și veți vedea că dreptunghiul aproape a dispărut.

Dar dacă mutăm glisorul la 100, veți vedea luminozitatea maximă a dreptunghiului.

Evaluare

Acum, să vorbim despre rating. În mod obișnuit, vedem acest lucru în aplicațiile, paginile sau site-urile de afaceri care permit utilizatorilor, clienților și clienților să evalueze serviciile și produsele oferite.

Evaluările sunt aproape aceleași cu glisoarele știind că ambele permit utilizatorilor să aleagă o anumită valoare. Diferența cheie este formatul vizual.

De asemenea, este posibil să modificați valoarea maximă pe care o poate alege un utilizator prin panoul Proprietăți din dreapta. Putem face valoarea Max 9, de exemplu, și vom vedea și numărul de stele crește.

Asemenea celorlalte elemente cu care am lucrat, putem obține și valoarea din evaluare și să o afișam sub forma unei etichete. Înainte de a începe cu acea etichetă, să ne amintim că elementul de evaluare pe care îl vom folosi este Rating2.

Așadar, la fel ca ceea ce am făcut mai devreme, să adăugăm o etichetă și să schimbăm valoarea de test la Rating2.Value.

Acum, eticheta arată valoarea numerică a ceea ce alege utilizatorul în evaluare.

Acest lucru poate fi foarte util pentru aplicații precum cea pe care am dezvoltat-o ​​în aceste tutoriale. Deoarece sursa noastră de date are o coloană pentru nivelul VIP, de exemplu, am putea folosi elementul de evaluare, deoarece nivelul nostru VIP merge oriunde de la 1 la 5. Acest lucru ar putea fi mai distractiv pentru utilizatori în comparație cu un drop-down sau slider.

Temporizator

Ultimul dintre diferitele elemente de intrare despre care vom vorbi în acest tutorial este intrarea temporizatorului.

Pe lângă faptul că permite utilizatorilor finali să cronometreze ceva, un cronometru vă permite să executați o acțiune sau o bucată de cod la fiecare număr de x secunde. Potrivit Power Apps , temporizatorul „controlează modul în care aplicația dvs. răspunde după o anumită perioadă de timp.

Am văzut acest lucru aplicat în multe moduri diferite. De exemplu, un utilizator care a fost pe un nou ecran de formular timp de 30 de secunde sau mai mult ar putea vedea o fereastră pop-up care conține informații utile care ar putea accelera procesul pentru el. Un cronometru este folosit pentru a declanșa această funcție.

Să aruncăm o privire la modul în care funcționează temporizatoarele și să explorăm câteva aplicații.

În panoul de proprietăți din dreapta, puteți controla durata cronometrului. Rețineți că acest lucru este afișat în milisecunde, astfel încât 60000 de aici este de fapt echivalent cu 60 de secunde.

Să o schimbăm la 10 secunde, ceea ce înseamnă că vom introduce 10000.

De asemenea, vom seta temporizatorul să fie pe Repeat, ceea ce înseamnă că va reporni automat cronometrul în momentul în care ajunge la 10 secunde. Să activăm și pornirea automată, astfel încât cronometrul să pornească în momentul în care se încarcă ecranul.

Acum, să facem niște aplicații interesante. Mai întâi, să luăm valoarea temporizatorului și să-l arătăm într-o etichetă. Deci, să adăugăm o etichetă și să schimbăm textul în Timer2.Value.

Rețineți că valoarea este în milisecunde, de aceea, deși cronometrul arată 2 secunde, eticheta arată 2000.

Să încercăm să apară o pictogramă după 5 secunde. Vom începe prin a adăuga pictograma de căutare.

Apoi, vom seta proprietatea Visible a pictogramei la o care spune dacă Timer2.Value este mai mare de 5000, atunci pictograma ar trebui să fie vizibilă. În caz contrar, nu ar trebui să fie vizibil.

Acum, să vedem dacă funcționează. Momentan, cronometrul este la 2300 de milisecunde. Pictograma nu este vizibilă momentan.

Dar după ce temporizatorul atinge marcajul 5000, a apărut pictograma de căutare.

Și din moment ce am setat temporizatorul să se repete, pictograma dispare din nou în momentul în care temporizatorul repornește.

Iată o altă aplicație grozavă. Să adăugăm un cerc.

Apoi, vom lăsa culoarea cercului să se schimbe în funcție de cronometru. Acest lucru creează niște gradiente foarte grozave pe măsură ce cronometrul rulează.

Să mergem la proprietatea Fill a cercului. Observați că primul număr de aici este 56. Vom edita culoarea cercului pe baza cronometrului.

Putem crea niște degrade foarte grozavi dacă facem asta. De exemplu, să trecem la culoare sau la umplere.

Vom schimba acel număr în Timer2.Value, apoi îl vom împărți la 100.

Cu această formulă, cercul începe ca albastru.

Pe măsură ce temporizatorul rulează, acesta își schimbă încet culoarea și devine violet când temporizatorul ajunge la 10 secunde.

Putem face schimbarea mai rapidă și mai pronunțată dacă schimbăm numărul. Deci, în loc să împărțim prima valoare la 100, să o schimbăm la 10.

Din nou, începe ca albastru.

Apoi, la doar 1900 de milisecunde, s-a schimbat într-o nuanță violet.

Și la 5600 de milisecunde, a devenit roz strălucitor.

Puteți fi atât de creativ pe cât doriți cu aceste setări. Puteți avea întregul ecran să își schimbe culorile, de exemplu. Sau poate doriți să se întâmple ceva diferit la fiecare 5 secunde.

Poate că nici măcar nu este doar de dragul esteticii. De exemplu, puteți solicita ca aplicația să întrebe utilizatorul dacă are nevoie de mai mult ajutor în momentul în care pare că durează prea mult pe un singur ecran și să îl conducă către o pagină de destinație, de exemplu.

Introducere Power Apps: Definiție, caracteristici, funcții și importanță
Medii Power Apps: Configurarea corectă a elementelor aplicației
Funcții și formule PowerApps | O introducere

Concluzie

Elementele de intrare sunt cu siguranță utile, indiferent de tipul de aplicație pe care o creați. Nu numai că vă fac aplicația să arate mai profesionistă, ci și ca întreaga experiență să fie mai convenabilă pentru utilizatori.

Ceva la fel de simplu precum un glisor sau o casetă combinată îi poate ajuta să restrângă cantități uriașe de date și, pe baza a ceea ce tocmai am făcut cu cronometrul nostru, puteți crea și pentru ei o experiență mai distractivă și mai captivantă.

Puteți explora alte tipuri de elemente în afară de aceste elemente de intrare, cum ar fi elementele media care permit utilizatorilor să-și folosească camera sau microfonul telefonului. Cu aceste elemente media și de intrare care lucrează împreună în aplicația dvs., creați o experiență cu adevărat unică pentru utilizatori.

Toate cele bune,

Henry