Înțelegeți formularele de aplicații proiectate pe pânză

Adăugați trei tipuri de controale într-o aplicație proiectată pe pânză, astfel încât utilizatorul să poată căuta o înregistrare, să afișeze detalii despre acea înregistrare și să editeze sau să creeze o înregistrare:

Puneți fiecare control pe un ecran diferit pentru a fi mai ușor de distins:

După cum descrie acest subiect, combinați aceste controale cu formule pentru a crea experiența utilizatorului în general.

Cerințe preliminare

• Înregistrați-vă pentru Power Apps, apoi conectați-vă utilizând aceleași acreditări pe care le-ați folosit pentru înregistrare.
• Aflați cum să configurați un control în Power Apps.

Explorați o aplicație generată

Power Apps poate genera automat o aplicație pe baza unei surse de date specificate de dvs. Fiecare aplicație conține trei ecrane cu controalele descrise anterior și formule care le conectează. Executați aceste aplicații într-un mod nepredefinit, personalizați-le pentru obiectivele dvs. specifice sau examinați cum funcționează astfel încât să puteți învăța concepte utile care se aplică propriilor dvs. aplicații. În secțiunile următoare, inspectați ecranele, controalele și formulele care conduc o aplicație generată.

Ecran Navigare

Acest ecran prezintă aceste formule cheie:

Controlul principal pe acest ecran, BrowseGallery1, acoperă cea mai mare parte a zonei ecranului. Utilizatorul poate parcurge galeria pentru a găsi o înregistrare specifică pentru a afișa mai multe câmpuri sau pentru a actualiza.

Setați proprietatea Elemente a unei galerii pentru a afișa înregistrări de la o sursă de date din aceasta. De exemplu, setați acea proprietate pe Active pentru a afișa înregistrări dintr-o sursă de date cu acest nume.

În loc să găsească o înregistrare care să fie afișată sau editată, utilizatorul poate crea o înregistrare selectând simbolul "+" deasupra galeriei. Creați acest efect adăugând un control Imagine, afișând un simbol "+" în el și setând proprietatea acestuia OnSelect pentru această formulă:
NewForm( EditForm1 ); Navigate( EditScreen1, None )

Această formulă deschide ecranul Editează și creează, care conține un control Editare formular numit EditForm1. Formula transformă, de asemenea, acest formular în modul Nou, în care formularul arată valori implicite din sursa de date, astfel încât utilizatorul să poată crea cu ușurință o înregistrare de la zero.

Pentru a examina orice control care apare în BrowseGallery1, selectați acel control în prima secțiune a acelei galerii, care servește ca șablon pentru toate celelalte secțiuni. De exemplu, selectați controlul central Etichetă pe marginea stângă:

În acest exemplu, proprietatea controlului Text este setată pe ThisItem.AssignedTo, care este un câmp în sursa de date Active. Proprietatea Text a celorlalte trei controale Etichetă din galerie sunt setate pe formule similare și fiecare control arată un câmp diferit în sursa de date.

Selectați controlul Formă (săgeata) și confirmați că proprietatea sa OnSelect este setată la această formulă:
Navigați (DetailScreen1, None)

Dacă utilizatorul găsește o înregistrare în BrowseGallery1, utilizatorul poate selecta săgeata pentru acea înregistrare pentru a afișa mai multe informații despre aceasta în DetailScreen1. Selectând o săgeată, utilizatorul modifică valoarea proprietății Selectat a BrowseGallery1. În această aplicație, respectiva proprietate determină ce înregistrare apare nu numai în ecranul DetailScreen1 dar, de asemenea, dacă utilizatorul decide să actualizeze înregistrarea, în ecranul Editează și creează.

Detaliu ecran

Acest ecran prezintă aceste formule cheie:

În partea de sus a ecranului, trei imagini se află în afara DetailForm1 și acționează ca butoane, orchestrând între cele trei ecrane ale aplicației.

DetailForm1 domină acest ecran și afișează înregistrarea selectată de utilizator în galerie (deoarece proprietatea formularului Element este setată pe BrowseGallery1.Selected). Proprietatea Sursă de date a formularului oferă, de asemenea, metadate despre sursa de date, cum ar fi un nume de afișare ușor de utilizat pentru fiecare câmp.

DetailForm1 conține mai multe controale Card. Puteți selecta fie controlul Card în sine, fie controlul pe care îl conține pentru a descoperi informații suplimentare.

Proprietatea Câmp de date a unui control Card determină ce câmp afișează cardul. În acest caz, proprietatea respectivă este setată pe AssetID. Cardul conține un control Etichetă pentru care proprietatea Text este setată pe Parent.Default. Acest control arată valoarea Mod implicit pentru card, care este setat prin proprietatea Câmp de date.

Într-o aplicație generată, controalele Card sunt blocate implicit. Când un card este blocat, nu puteți modifica unele proprietăți, cum ar fi Câmp de date și bara de formule nu este disponibilă pentru acele proprietăți. Această restricție vă ajută să vă asigurați că personalizările dvs. nu afectează funcționalitatea de bază a aplicației generate. Cu toate acestea, puteți modifica unele proprietăți ale unui card și controalele sale în panoul din dreapta:

În panoul din dreapta, puteți selecta câmpurile de afișat și în ce tip de control este afișat fiecare câmp.

Ecranul Editare/Creare

Acest ecran prezintă aceste formule cheie:

Ca și în ecranul Detalii, un control de formular, numit EditForm1, domină ecranul Editează și creează. In plus, proprietatea Element a EditForm1 este setată la BrowseGallery1.Selected, astfel încât formularul afișează înregistrarea pe care utilizatorul a selectat-o în BrowseScreen1. In timp ce ecranul Detalii arată fiecare câmp ca doar în citire, utilizatorul poate actualiza valoarea unuia sau mai multor câmpuri folosind controalele din EditForm1. De asemenea, folosește proprietatea Sursă de date pentru a accesa metadate despre această sursă de date, cum ar fi numele afișat ușor de utilizat pentru fiecare câmp și locația în care ar trebui salvate modificările.

Dacă utilizatorul selectează pictograma "X" pentru a anula o actualizare, funcția ResetareFormular renunță la orice modificări nesalvate și funcția Înapoi deschide ecranul Detalii. Atât ecranul Detalii, cât și ecranul Editează și creează arată aceeași înregistrare până când utilizatorul selectează una diferită pe BrowseScreen1. Câmpurile din acea înregistrare rămân setate la valorile care au fost salvate cel mai recent, nu la orice modificări pe care utilizatorul le-a făcut și apoi au fost abandonate.

Dacă utilizatorul modifică una sau mai multe valori în formular și apoi selectează pictograma "bifă", funcția SubmitForm trimite modificările utilizatorului la sursa de date.

• Dacă modificările sunt salvate cu succes, formula formularului OnSuccess rulează și funcția Înapoi() deschide ecranul de detalii pentru a afișa înregistrarea actualizată.
• Dacă modificările nu sunt salvate cu succes, formula formularului OnFailure rulează, dar nu schimbă nimic, deoarece este gol. Ecranul Editează și creează rămâne deschis, astfel încât utilizatorul poate să anuleze modificările sau să remedieze eroarea. LblFormError1 arată un mesaj de eroare ușor de utilizat, la care este este setată proprietatea formularului Eroare.

Ca în cazul unui control Afișare formular, un control Editare formular conține controale Card, care conțin alte controale care arată câmpuri diferite într-o înregistrare:

În imaginea anterioară, cardul selectat arată câmpul AssetID și conține un control Introducere text, astfel încât utilizatorul să poată edita valoarea câmpului respectiv. (În schimb, ecranul de detalii arată același câmp într-un control Etichetă, care este numai de citire.) Controlul Introducere text are o proprietate Mod implicit, care este setată la Parent.Default. Dacă utilizatorul ar crea o înregistrare în loc să o editeze, acel control ar arăta o valoare inițială pe care utilizatorul o poate modifica pentru noua înregistrare.

În panoul din dreapta, puteți afișa sau ascunde fiecare card, le puteți rearanja sau le puteți configura pentru a afișa câmpuri în diferite tipuri de controale.

Dezvoltarea unei aplicații de la zero

Înțelegând cum Power Apps generează o aplicație, puteți crea una care folosește aceleași elementele constructive și formule discutate anterior în acest subiect.

Identificați datele de testare

Pentru a obține cât mai mult din acest subiect, începeți cu o sursă de date cu care puteți experimenta. Acesta trebuie să conțină date de test pe care le puteți citi și actualiza fără griji.

Pentru a urmări cu exactitate restul acestui subiect, creați o listă denumită „Înghețată” care conține aceste date:

• Creați o aplicație de la zero, pentru telefoane și conectați-o la sursa de date.

  Notă

  Aplicațiile pentru tablete sunt foarte asemănătoare, dar poate doriți un aspect ecran diferit pentru a profita la maximum de spațiul suplimentar al ecranului.

  Exemplele din restul subiectului se bazează pe o sursă de date numită Înghețată.

Căutați înregistrările

Obțineți o informație rapidă dintr-o înregistrare găsind-o într-o galerie de pe un ecran de navigare.

1. Adăugați o galerie Verticală și schimbați aspectul numai la Titlu.

   

2. Setați proprietatea galeriei Elemente la înghețată.

3. Setați proprietatea Text a primei etichete din galerie la ThisItem.Title dacă este setată la altceva.

   Eticheta arată acum valoarea în câmpul Titlu pentru fiecare înregistrare.

   

4. Redimensionați galeria pentru a umple ecranul și setați proprietatea acesteia**TemplateSize** la 60.

   Ecranul seamănă cu acest exemplu, care arată toate înregistrările din sursa de date:

   

Vizualizați detaliile

Dacă galeria nu arată informațiile pe care le doriți, selectați săgeata pentru o înregistrare pentru a deschide ecranul detaliilor. Un control Afișare formular de pe ecran afișează mai multe câmpuri, eventual toate, pentru înregistrarea selectată.

Controlul Afișare formular utilizează două proprietăți pentru a afișa înregistrarea:

• Proprietatea Sursă de date. Numele sursei de date care deține înregistrarea. Această proprietate populează panoul din dreapta cu câmpuri și determină numele afișajului și tipul de date (șir, număr, dată etc.) al fiecărui câmp.
• Proprietatea Element. Înregistrarea de afișat. Această proprietate este adesea conectată la proprietatea Selectat a controlului Galerie, astfel încât utilizatorul să poată selecta o înregistrare în controlul Galerie și apoi detaliați în acea înregistrare.

Când proprietatea Sursă de date este setată, puteți adăuga și elimina câmpuri prin panoul din dreapta și puteți modifica modul în care sunt afișate.

Pe acest ecran, utilizatorii nu pot schimba intenționat sau accidental nici o valoare a înregistrării. Controlul Afișare formular este un control numai citire, deci nu va modifica o înregistrare.

Pentru a adăuga un control Afișare formular:

1. Adăugați un ecran, apoi adăugați un control Afișare formular la acesta
2. Setați proprietatea Sursă de date a controlului formularului la 'Înghețată'.

În panoul din partea dreaptă, puteți selecta câmpurile de afișat pe ecran și ce tip de card trebuie afișat pentru fiecare câmp. Pe măsură ce efectuați modificări în panoul din dreapta, proprietatea Câmp de date pe fiecare control Card este setat pe câmpul cu care utilizatorul va interacționa. Ecranul dvs. ar trebui să semene cu acest exemplu:

În cele din urmă, trebuie să conectăm controlul Afișare formular la controlul Galerie, astfel încât să putem privi detaliile pentru o înregistrare specifică. Imediat ce terminăm setarea proprietății Element, prima înregistrare din galerie va apărea în formularul nostru.

• Setați proprietatea Element a controlului Afișare formular la Gallery1.Selected.

  Detaliile pentru elementul selectat apar în formular.

  

Excelent! Acum revenim la navigare: modul în care un utilizator deschide ecranul de detalii din ecranul galeriei și deschide ecranul galeriei din ecranul detaliilor.

• Adăugați un control Buton la ecran, setați proprietatea acestuia Text pentru a afișa Înapoi și setați proprietatea sa OnSelect la Înapoi().

  Această formulă readuce utilizatorul înapoi la galerie când termină vizualizarea detaliilor.

  

Acum, să revenim la controlul Galerie și să adăugăm navigare pe ecranul nostru de detalii.

1. Comutați la primul ecran, care găzduiește controlul nostru Galerie și selectați săgeata din primul element din galerie.

2. Setați proprietatea OnSelect a formei la această formulă:
   Navigate( Screen2, None )

   

3. Apăsați F5, apoi selectați o săgeată în galerie pentru a afișa detaliile pentru un articol.

4. Selectați butonul Înapoi pentru a reveni la galeria produselor, apoi apăsați Esc.

Editarea detaliilor

În cele din urmă, ultima noastră activitate de bază este schimbarea conținutului unei înregistrări, pe care utilizatorii o realizează într-un control Editare formular.

Controlul Editare formular folosește două proprietăți pentru a afișa și edita înregistrarea:

• Proprietatea Sursă de date. Numele sursei de date care deține înregistrarea. La fel ca în cazul controlului Afișare formular, această proprietate populează panoul din dreapta cu câmpuri și determină numele afișajului și tipul de date (șir, număr, dată etc.) pentru fiecare câmp. Această proprietate determină, de asemenea, dacă valoarea fiecărui câmp este valabilă înainte de a o trimite la sursă de date.
• Proprietatea Element. Înregistrarea de editat, care este adesea conectată la proprietatea Selectat a controlului Galerie. În acest fel, puteți selecta o înregistrare în controlul Galerie, o puteți afișa în ecranul de detalii și edita în ecranul Editează și creează.

Pentru a adăuga un control Editare formular:

1. Adăugați un ecran, adăugați un control Editare formular, apoi setați proprietatea formularului Sursă de date la 'Înghețată'.
2. Setați proprietatea Element la Gallery1.Selected.

Acum puteți selecta câmpurile de afișat pe ecran. Puteți selecta, de asemenea, ce tip de card trebuie afișat pentru fiecare câmp. Pe măsură ce efectuați modificări în panoul din dreapta, proprietate Câmp de date pe fiecare control Card este setată pe câmpul cu care utilizatorul va interacționa. Ecranul dvs. ar trebui să semene cu acest exemplu:

Aceste două proprietăți sunt aceleași cu cele ale proprietății de pe controlul Afișare formular. Și doar cu acestea, putem afișa detaliile unei înregistrări.

Controlul Editare formular merge mai departe prin oferirea funcției SubmitForm pentru a scrie modificări la sursa de date. Folosiți-o cu un buton sau un control de imagine pentru a salva modificările unui utilizator.

• Adăugați un control Buton, setați proprietatea sa Text pentru a afișa Salvare și setați proprietatea sa OnSelect la această formulă:
  SubmitForm( Form1 )

Pentru a adăuga navigare pe și de pe acest ecran:

1. Adaugați un alt control Buton, setați proprietatea sa Text pentru a afișa Anulare, și setați proprietatea sa OnSelect pentru această formulă:
   ResetForm( Form1 ); Back()

   Această formulă elimină orice editare nesalvată și deschide ecranul anterior.

   

2. Setați proprietatea OnSuccess a formularului la Înapoi().

   Când actualizările sunt salvate cu succes, ecranul anterior (în acest caz, ecranul de detalii) se deschide automat.

   

3. Pe ecranul Afişaj, adăugați un buton, setați proprietate sa Text pentru a afișa Editare și setați proprietatea sa OnSelect la această formulă:
   Navigate( Screen3, None )

   

Ați creat o aplicație de bază cu trei ecrane pentru vizualizarea și introducerea datelor. Pentru a o testa, afișați ecranul galeriei, apoi apăsați F5 (sau selectați butonul săgeată înainte „Previzualizare” lângă colțul din stânga sus al ecranului). Punctul roz indică locul în care utilizatorul face clic sau atinge ecranul la fiecare pas.

Crearea unei înregistrări

Utilizatorul interacționează cu același formular Editare pentru a actualiza și crea înregistrări. Când utilizatorul dorește să creeze o înregistrare, funcția Newform comută formularul la modul Nou.

Când formularul este în modul Nou, valoarea fiecărui câmp este setată la valorile implicite ale sursei de date. Înregistrarea care este furnizată proprietății formularului Element este ignorată.

Când utilizatorul este gata să salveze noua înregistrare, SubmitForm rulează. După ce formularul este trimis cu succes, formularul este readus la Mod de editare.

Pe primul ecran, veți adăuga un buton Nou:

1. Pe ecranul cu galeria, adăugați un control Buton.

2. Setați proprietatea butonului Text la Nou și proprietatea OnSelect la această formulă:
   NewForm( Form1 ); Navigate( Screen3, None )

   Această formulă comută controlul Editare formular pe Screen3 la modul Nou și deschide ecranul astfel încât utilizatorul să-l poată completa.

Când se deschide ecranul Editare și Creare, formularul este gol, gata pentru utilizator să adauge un element. Când utilizatorul selectează butonul Salvare, funcția SubmitForm asigură că o înregistrare este creată în loc să fie actualizată. Dacă utilizatorul selectează butonul Anulare, funcția ResetForm comută formularul înapoi în modul Editare și funcția Înapoi deschide ecranul pentru navigarea în galerie.

Ștergerea unei înregistrări

1. Pe ecranul Afişaj, adăugați un buton și setați proprietatea sa Text pentru a afișa Ștergere ..

2. Setați proprietatea OnSelect a butonului la această formulă:
   Remove( 'Ice Cream', Gallery1.Selected ); Back()

   

Manipularea erorilor

În această aplicație, o eroare apare atunci când valoarea unui câmp nu este valabilă, un câmp obligatoriu este necompletat, sunteți deconectat de la rețea sau apar orice alte probleme.

Dacă SubmitForm eșuează din orice motiv, proprietatea Eroare a controlului Editare formular conține un mesaj de eroare pentru a fi afișat utilizatorului. Cu aceste informații, utilizatorul ar trebui să poată rezolva problema și să retrimită modificarea sau poate anula actualizarea.

1. În ecranul Editare și Creare, adăugați un control Etichetă și mutați-l chiar sub butonul Salvare. Orice eroare va fi ușor de observat după ce utilizatorul selectează acest control pentru a salva modificările.

2. Setați proprietatea Text a controlului Etichetă pentru a arăta Form1.Error.

   

Într-o aplicație pe care Power Apps o generează din date, proprietatea AutoHeight a acestui control este setată pe Adevărat astfel încât să nu se consume niciun spațiu dacă nu apare nicio eroare. Proprietățile Înălţime și Y ale controlului Editare formular sunt, de asemenea, ajustate dinamic pentru a calcula creșterea acestui control atunci când apare o eroare. Pentru mai multe detalii, generați o aplicație din datele existente și inspectați aceste proprietăți. Controlul casetei de text pentru erori este foarte scurt atunci când nu a apărut nicio eroare, poate fi necesar să deschideți vizualizarea Complex (disponibilă pe fila Vizualizare) pentru a selecta acest control.

Reîmprospătare date

Sursa de date este actualizată de fiecare dată când utilizatorul deschide aplicația, dar utilizatorul ar putea dori să reîmprospăteze înregistrările din galerie fără a închide aplicația. Adăugați un buton Reîmprospătare pentru ca utilizatorul să-l poată selecta pentru a reîmprospăta manual datele:

1. Pe ecranul cu controlul Galerie, adăugați un control Buton și setați proprietatea sa Text pentru a afișa Reîmprospătare.

2. Setați proprietatea OnSelect a acestui control la această formulă:
   Reîmprospătare („înghețată”)

   

Căutați și sortați galeria

În aplicația pe care Power Apps a generat-o din date, am neglijat să discutăm două controale în partea de sus a ecranului Răsfoire. Utilizând aceste controale, utilizatorul poate căuta una sau mai multe înregistrări, sorta lista de înregistrări în ordine ascendentă sau descendentă sau ambele.

Când utilizatorul selectează butonul de sortare, ordinea sortării galeriei se inversează. Pentru a crea acest comportament, folosim o variabilă de context pentru a urmări direcția în care este sortată galeria. Când utilizatorul selectează butonul, variabila este actualizată și direcția se inversează. Proprietatea OnSelect a butonului de sortare este setată la această formulă: UpdateContext( {SortDescending1:! SortDescending1 })

Funcția UpdateContext creează variabila de context SortDescending1 dacă nu există deja. Funcția va citi valoarea variabilei și o va seta la opusul logic, folosind funcția ! operator. Dacă valoarea este adevărat, devine fals. Dacă valoarea este fals, devine adevărat.

Formula pentru proprietatea Elemente a controlului Galerie folosește această variabilă de context, împreună cu textul din controlul TextSearchBox1:

Sort( 
    If( IsBlank(TextSearchBox1.Text),
        Assets,
        Filter( Assets, TextSearchBox1.Text in Text(ApproverEmail) ) 
    ),
    ApproverEmail,
    If(SortDescending1, Descending, Ascending) 
)

Să o luăm pe bucăți:

• La exterior, avem funcția Sortare, care are trei argumente: un tabel, un câmp pe care să se sorteze și direcția în care să se sorteze.

  • Direcția de sortare este luată din variabila de context care comută atunci când utilizatorul selectează controlul ImageSortUpDown1. Valoarea adevărat/fals este tradusă în constantele Descendent și Ascendent.
  • Câmpul pe care se sortează este fixat la ApproverEmail. Dacă schimbați câmpurile care apar în galerie, va trebui să schimbați și acest argument.

• În interior, avem funcția Filtru, care ia un tabel ca argument și expresie de evaluat pentru fiecare înregistrare.

  • Tabelul este sursa de date brută Active, care este punctul de plecare înainte de filtrare sau sortare.
  • Expresia caută o instanță a șirului din TextSearchBox1 în cadrul câmpului ApproverEmail. Din nou, dacă schimbați câmpurile care apar în galerie, va trebui să actualizați și acest argument.
  • Dacă TextSearchBox1 este gol, utilizatorul dorește să arate toate înregistrările și funcția Filtru este ocolită.

Acesta nu este decât un exemplu; vă puteți crea propria formulă pentru proprietatea Elemente, în funcție de nevoile aplicației dvs., prin compunere Filtru Sortare și alte funcții și operatori împreună.

Designul ecranului

Până în prezent, nu am discutat despre alte modalități de distribuire a controalelor pe ecrane. Asta pentru că aveți multe opțiuni, iar cea mai bună selecție depinde de nevoile specifice ale aplicației dvs.

Deoarece imobilele de pe ecranele telefonului sunt atât de limitate, probabil că doriți să răsfoiți, să afișați și să editați/să creați pe diferite ecrane. În acest subiect, funcțiile Navigare și Înapoi deschid fiecare ecran.

Pe o tabletă, puteți răsfoi, afișa și edita/crea pe două sau chiar un ecran. Pentru acestea din urmă, nu ar fi necesară nicio funcție Navigare sau Înapoi.

Dacă utilizatorul lucrează pe același ecran, trebuie să aveți grijă ca utilizatorul să nu poată schimba selecția din Galerie și să poată pierde modificări în controlul Editare formular. Pentru a împiedica utilizatorul să selecteze o înregistrare diferită atunci când modificările la o altă înregistrare nu au fost încă salvate, setați proprietatea Dezactivat a galeriei la această formulă:
EditForm.Unsaved