3. poglavlje: Izrada prototipa s malo kodiranja

Napomena

Poglavlje 2 odnosilo se na mobilnu aplikaciju koju koriste terenski tehničari i inženjeri te aplikaciju za stolna računala koju koristi lokalno osoblje. Sljedeća se poglavlja usredotočuju na dizajn, implementaciju i uvođenje mobilnih aplikacija koje su izrađene pomoću usluge Power Apps. Aplikacije za stolna računala ostale su kao vježba za čitatelja.

Kiana je skeptična prema rješenjima s niskim kodom i Power Apps. Međutim, Kiana i Maria odlučuju zajedno izraditi aplikaciju kako bi pomogle terenskim tehničarima da provjere inventar (i naruče dijelove, ako je potrebno), upitaju bazu znanja i provjere sljedeći sastanak dok su izvan ureda na servisnim pozivima. Kiana i Maria planiraju iskoristiti ovo iskustvo kako bi istražile kako dodati kontrole i upotrebljavati formule na usluzi Power Apps.

Iako je izrada početnog prototipa s niskim kodom obično zadatak građanskog programera, Kiana odlučuje obratiti pozornost na proces kako bi razumjela kako je aplikacija konstruirana. Kiani su potrebne ove informacije kako bi pomogla Mariji da integrira izvore podataka iz stvarnog svijeta, web API-je i druge potrebne usluge u aplikaciju.

1. stavka: upravljanje terenskim inventarom

Marijin početni cilj je izraditi aplikaciju od gotovih gradivnih elemenata koja prikazuje popis dijelova i omogućuje korisniku prikaz detalja o bilo kojem dijelu. Na kraju, korisnik bi također trebao imati mogućnosti naručiti dio. Međutim, ova početna verzija aplikacije jednostavno će biti prototip i još neće biti spojena na pozadinu. Nakon što dobije povratne informacije od Caleba, vodećeg terenskog tehničara, Maria će raditi s Kianom na integraciji aplikacije platna sa sustavom inventara koji radi lokalno.

Maria je dobro upoznata s postojećim sustavom upravljanja zalihama i razumije podatke koje sadrži. Maria započinje stvaranjem radne knjige programa Excel koja sadrži tablice s lažnim podacima s pojedinostima za neke ogledne dijelove. Polja u tablici su ID, Naziv, ID kategorije, Cijena, Pregled, NumberInStock i Slika (URL koji upućuje na sliku dijela). Ova radna knjiga može se koristiti za izradu i testiranje aplikacije radnog područja kako bi se osiguralo da ispravno prikazuje potrebne podatke. Maria pohranjuje ovu radnu knjigu OneDrive na račun s imenom BoilerParts.xlsx.

Napomena

Kopiju ove radne knjige možete pronaći u mapi Sredstva u spremištu Git za ovaj vodič.

Ako ste dizajner povezanih baza podataka, primijetit ćete da radna knjiga programa Excel predstavlja denormalizirani prikaz podataka. Na primjer, u relacijskoj bazi podataka, CategoryID bi najvjerojatnije bio numerički identifikator koji upućuje na zasebnu tablicu koja sadrži pojedinosti o kategoriji, uključujući naziv.

Napomena

URL-ovi u stupcu Slika trenutačno su samo rezervirana mjesta. U dovršenoj aplikaciji ti će se URL-ovi zamijeniti adresama stvarnih slikovnih datoteka.

Slijedite ove korake za izradu aplikacije koristeći Power Apps.

1. Prijavite se u sustav Power Apps.

2. Na početnoj stranici u odjeljku Započni od podataka odaberite Excel Online.

   

3. Na stranici Veze odaberite OneDrive Posao, a zatim odaberite Stvori.

   

4. Na OneDrive stranici za tvrtke odaberite datoteku BoilerParts.xlsx .

   

5. Odaberite tablicu u datoteci programa Excel (Maria je stvorila tablicu pomoću zadanog naziva,Tablica1 ), a zatim odaberite Poveži.

   

6. Pričekajte dok Power Apps generira aplikaciju.

   

7. Kada se aplikacija generira, vidjet ćete zaslon Pregledaj koji prikazuje polja CategoryID, ID i Image iz svakog retka tablice dijelova u radnoj knjizi.

   

8. Trenutačno prikazana polja nisu vrlo korisna za pomaganje inženjeru u odabiru proizvoda. U oknu na kojem se prikazuje zaslon Pregledavanje odaberite oznaku Izmjenjivač topline u prvom retku podataka. Na traci formule odaberite svojstvo Tekst s padajućeg popisa. Promijenite vrijednost ovog svojstva na ThisItem.Name. Tekst u prvom polju svakog retka prebacit će se da bi se prikazao naziv dijela.

   Napomena

   Na sljedećoj slici, naljepnica izmjenjivača topline izvorno prikazana na obrascu promijenjena je u naziv proizvoda,3.5 W/S grijač.

   

9. Ponovite prethodni korak za oznake ID i Slika . Promijenite svojstvo Tekst polja ID u CategoryID, a svojstvo Text polja Slika u Overview. Zaslon za pregledavanje sada bi trebao izgledati kao na sljedećoj slici, što će terenski inženjer vjerojatnije smatrati korisnim za odabir dijelova.

   

10. Značajka pretraživanja zaslona za pretraživanje prema zadanim postavkama koristi polja koja su prvotno odabrana prilikom generiranja zaslona – u ovom slučaju CategoryID, ID i Image. Rezultati su razvrstani prema CategoryID. Ima smisla prebaciti ovo u polja Name,CategoryID i Overview s rezultatima razvrstanim prema nazivu. Odaberite kontrolu BrowseGallery1 u oknu prikaza stabla. Na padajućem popisu na lijevoj strani trake formule odaberite svojstvo Stavke . Povucite donji rub trake s formulama prema dolje kako bi formula bila potpuno vidljiva. Formula sadrži sljedeći izraz:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. Promijenite izraz pretraživanja tako da bi upućivao na polja Name,CategoryID i Overview pomoću sljedeće formule:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. Naslov u zaglavlju obrasca nije koristan, a zadana tema ne odgovara korporativnom izgledu i stilu tvrtke VanArsdel. Na zaslonu Pregledavanje odaberite oznaku Tablica1 , a zatim na traci formule promijenite svojstvo Tekst natpisa u "Pregledaj dijelove" (u vrijednost uključite dvostruke navodnike).

13. Na alatnoj traci odaberite Tema (možda ćete morati proširiti alatnu traku da biste prikazali više stavki), a zatim odaberite temu Šuma . Boje i stil zaslona Pregledavanje promijenit će se kako bi odgovarali temi.

    

Učinite zaslon Detalji korisnijim

Stvorili ste osnovnu aplikaciju i izmijenili zaslon Pregledaj za prikaz polja koja inženjer može koristiti za prepoznavanje dijela. Aplikacija također sadrži zaslon Detalji , koji prikazuje sve informacije za odabrani dio. Polja na ovom zaslonu trenutačno se ne prikazuju u logičnom slijedu, pa biste ih trebali ponovno rasporediti. Također možete izbrisati polje ID s ovog zaslona, jer su te informacije nevažne za inženjera.

1. U oknu Prikaz stabla pomaknite se prema dolje i odaberite DetailScreen1. Ovaj zaslon prikazuje pojedinosti o dijelu koji korisnik odabere na zaslonu Pregled.

   

2. U zaglavlju zaslona Detalji u srednjem oknu odaberite oznaku Tablica1 . U desnom oknu na kartici Svojstva promijenite svojstvo Tekst u Pojedinosti dijela.

   Napomena

   U mnogim slučajevima iste rezultate možete postići pomoću trake formule kao okna Svojstva . Međutim, neka svojstva koja su dostupna samo putem okna Svojstva .

   

3. U oknu Prikaz stabla u odjeljku DetailScreen1 odaberite DetailForm1. U desnom oknu na kartici Svojstva odaberite Uređivanje polja pokraj Polja . U srednjem oknu odaberite i povucite polja tako da se prikazuju sljedećim redoslijedom, od vrha do dna:

   • Ime
   • ID kategorije
   • Pregled
   • Cijena
   • Broj na zalihi
   • Image
   • ID

   

4. Odaberite polje ID , odaberite tri točke koje se pojavljuju na desnoj strani polja, a zatim odaberite Ukloni s padajućeg izbornika koji se pojavi. Ova radnja uklanja polje ID iz obrasca.

   

5. U oknu Prikaz stabla u odjeljku DetaljniObrazac1 odaberite CategoryID_DataCard1. Ovaj je element kontrola DataCard koja prikazuje naziv polja (koje se naziva ključ )i njegovu vrijednost.

   

   U desnom oknu na kartici Dodatno odaberite Otključaj da biste promijenili svojstva. U odjeljku Podaci promijenite polje DisplayName u "Category" (uključite navodnike).

   Napomena

   Kao i kod kartice Svojstva , mnoga svojstva na kartici Napredno dostupna su i putem trake formule. Kako biste postavili ta svojstva, možete upotrijebiti traku s formulama ako želite.

   

6. Ponovite prethodni korak da biste promijenili ključ za NumberInStock_DataCard1 u "Broj na zalihi" (uključite navodnike).

7. Morate prilagoditi oblikovanje polja Cijena da biste podatke prikazali kao vrijednost valute. U oknu Prikaz stabla u odjeljku DetaljniObrazac1 u odjeljku Price_DataCard1 odaberite DataCardValue7. To je polje koje prikazuje vrijednost polja Cijena . U oknu DataCardValue7 s desne strane, na kartici Napredno promijenite svojstvo Text u Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Izraz Parent.Default odnosi se na stavku podataka na koju je vezana nadređena kontrola ( DataCard ) – u ovom slučaju stupac Cijena . Funkcija Text preoblikuje tu vrijednost pomoću oblika navedenog kao drugi argument; u ovom primjeru to je lokalna valuta s dva decimalna mjesta.

8. Kartica sa slikovnim podacima trebala bi prikazivati sliku dijela, a ne URL slikovne datoteke. U oknu Prikaz stabla, u odjeljku DetailsForm1, u odjeljku Image_DataCard1, odaberite DataCardValue3, a zatim odaberite Izbriši da biste uklonili ovu kontrolu.

9. Odaberite Image_DataCard1. U lijevom oknu odaberite + Umetni. U oknu Umetanje proširite Mediji, a zatim odaberite Slika.

   

10. Vratite se u okno Prikaz stabla i provjerite je li kontrola teksta Slika1 dodana u kontrolu Image_DataCard1 .

    

11. U oknu Prikaz stabla odaberite Image_DataCard1. U desnom oknu na kartici Napredno promijenite Visina na 500 da biste omogućili dovoljno prostora za prikaz slike.

    

12. U oknu Prikaz stabla odaberite Slika1. Postavite sljedeća svojstva:

    • Slika: Roditelj.Zadano
    • ImagePosition: ImagePosition.Fit
    • Širina: 550
    • Visina: 550

    Napomena

    Prikazana slika trenutačno je prazna jer je URL u radnoj knjizi programa Excel samo rezervirano mjesto. Riješit ćete ovaj problem i dohvatiti pravi URL kad u kasnijem poglavlju povežete aplikaciju s API-jem za web.

Aplikacija također sadrži zaslon za uređivanje , koji korisniku omogućuje promjenu podataka za dio. Inženjer ne bi smio mijenjati detalje dijela, izrađivati nove dijelove ili brisati dijelove iz kataloga.

1. U oknu Prikaz stabla odaberite EditScreen1. Odaberite gumb s tri točke, a zatim odaberite Izbriši da biste uklonili ovaj zaslon.

   

2. U oknu Prikaz stabla odaberite DetailsScreen1. Primijetit ćete da Power Apps Studio prikazuje poruku o pogreški za ovaj zaslon. Ta se pogreška pojavljuje jer DetailsScreen1 sadrži izraze koji se pozivaju na zaslon EditScreen1 , koji više ne postoji.

3. U zaglavlju zaslona DetailsScreen1 odaberite ikonu olovke (IconEdit1). Svojstvo OnSelect za ovu kontrolu sadrži izraz EditForm(EditForm1); Navigate(EditScreen1, ScreenTransition.None). Kada je odabrana ikona Uredi , ovaj se izraz pokreće i pokušava se pomaknuti na zaslon EditScreen1 .

   

4. U oknu Prikaz stabla odaberite IconEdit1, a zatim odaberite Izbriši. Ova ikona više ije potrebna.

5. Odaberite IconDelete1, a zatim odaberite Izbriši. Ova se ikona upotrebljava za brisanje trenutačnog dijela i također nije potrebna.

   

6. Primijetite da je tekst pojedinosti dijela nestao iz zaglavlja zaslona i umjesto toga Power Apps Studio prikazuje poruku o pogrešci. To se dogodilo jer se izračunava širina kontrole oznake koja prikazuje tekst. U oknu Prikaz stabla odaberite LblAppName2. Pregledajte svojstvo Širina . Vrijednost ovog svojstva rezultat je izraza Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Promijenite izraz za svojstvo Width u Parent.Width - Self.X. Pogreška bi trebala nestati, a tekst pojedinosti o dijelu trebao bi se ponovno pojaviti u zaglavlju zaslona.

8. U oknu Prikaz stabla odaberite BrowseScreen1. Na ovom će se zaslonu također prikazati poruka o pogrešci. Ikona + na alatnoj traci (IconNewItem1) omogućuje korisniku dodavanje novog dijela. Svojstvo OnSelect za ovu ikonu upućuje na zaslon EditScreen1 .

   

9. Odaberite IconNewItem1, a zatim odaberite Izbriši. Kao i prije, tekst u zaglavlju zaslona nestaje i prikazuje se poruka o pogrešci iz istog razloga.

10. U oknu Prikaz stabla u odjeljku BrowseScreen1 odaberite LblAppName1. Izmijenite izraz za svojstvo Width uklanjanjem reference na IconNewItem1.Width. Novi izraz trebao bi biti Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Još uvijek postoji problem sa zaglavljem. Iako se tekst Pregledaj dijelove ponovno pojavio, prikazuje se pogreška, a ikone za osvježavanje i sortiranje nalaze se na pogrešnom mjestu. U oknu Prikaz stabla odaberite IconSortUpDown1. Pronađite svojstvo X za ovu kontrolu. Ovo svojstvo određuje vodoravni položaj ikone u zaglavlju. Trenutno se izračunava na temelju širine kontrole IconNewItem1 .

    

12. Promijenite izraz za svojstvo X u Parent.Width - Self.Width.

13. U oknu Prikaz stabla odaberite IconRefresh1. Promijenite izraz za svojstvo X u Parent.Width - IconSortUpDown1.Width - Self.Width. Sve bi pogreške trebale nestati.

Spremanje i testiranje aplikacije

Sada možete spremiti i testirati aplikaciju.

1. Odaberite Datoteka>Spremi kao.

2. Pod Spremi kao odaberite Oblak, unesite naziv VanArsdelApp, a zatim odaberite Spremi.

   

3. Odaberite strelicu natrag za povratak na početni zaslon.

   

4. Odaberite F5 za pretpregled aplikacije. Na stranici Pregledaj dijelove odaberite desnu kutnu zagradu (>) desno od bilo kojeg dijela. Pojavit će se zaslon s detaljima za dio.

   

5. Odaberite lijevu kutnu zagradu (<) u zaglavlju zaslona Detalji za povratak na zaslon Pregledaj .

6. Na zaslonu Pregledaj dijelove unesite tekst u okvir Traži . Dok tipkate, stavke će se filtrirati kako bi se prikazale samo one koje imaju odgovarajući tekst u poljima Naziv, ID kategorije ili Pregled .

   

7. Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.

2. stavka: terenska baza znanja

Za pristup bazi znanja Maria i Caleb (tehničar) predviđaju jednostavno sučelje gdje korisnik unosi termin za pretraživanje, a aplikacija prikazuje sve članke iz baze znanja koji spominju taj pojam. Maria zna da će ovaj proces uključivati Azure Cognitive Search, ali ne treba – niti želi – razumjeti kako to funkcionira. Stoga Maria odlučuje pružiti samo osnovno korisničko sučelje i kasnije surađivati s Kianom kako bi dodala stvarnu funkcionalnost.

Maria odlučuje stvoriti novi zaslon na temelju predloška List dostupnog u Power Apps Studio.

1. Na alatnoj traci početnog zaslona odaberite Novi zaslon, a zatim odaberite Popis. Power Apps Studio

   

2. U zaglavlju zaslona odaberite oznaku koja prikazuje tekst [Naslov]. Promijenite svojstvo Text u "Query" (uključujući navodnike).

   

3. U zaglavlju zaslona odaberite znak plusa (+), a zatim odaberite Izbriši. Ikona + namijenjena je omogućavanju korisniku dodavanja više stavki na popis. Baza znanja namijenjena je samo za upite, pa ova značajka nije potrebna.

   

   Primijetit ćete da uklanjanje ove ikone uzrokuje pogrešku u zaglavlju zbog načina na koji se izračunavaju mjesto i širina ostalih stavki. To ste već vidjeli na ekranu za upravljanje zalihama, a rješenje je isto, kao što je opisano u sljedećim koracima.

4. U oknu Prikaz stabla pomaknite se prema dolje do odjeljka Screen1 i odaberite LblAppName3. Promijenite svojstvo Width u formulu Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. U oknu Prikaz stabla odaberite IconSortUpDown2. Izmijenite svojstvo X u formulu Parent.Width - IconSortUpDown2.Width.

6. U oknu Prikaz stabla odaberite IconRefresh2. Izmijenite svojstvo X u Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. To bi trebalo riješiti sve pogreške na zaslonu.

7. Odaberite Datoteka>Spremi.

8. U okvir Napomena o verziji unesite tekst Dodano korisničko sučelje baze znanja, a zatim odaberite Spremi.

9. Vratite se na početni zaslon i odaberite F5 za pregled novog zaslona. Treba izgledati kao na sljedećoj slici.

   

   Imajte na umu da ako odaberete ikonu > pored bilo kojeg od lažnih unosa, funkcionalnost detalja trenutno ne radi. To ćete riješiti kasnije kada integrirate Azure kognitivno pretraživanje u aplikaciju.

10. Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.

3. stavka: terensko zakazivanje i bilješke

Maria surađuje s Malikom, uredskim recepcionerom, kako bi dizajnirala sučelje za terensko zakazivanje i obveze aplikacije. Malik osigurava radnu knjigu programa Excel s nekoliko oglednih podataka koje Maria može iskoristiti za izradu zaslona za obveze. Radna knjiga sadrži tablicu sa sljedećim stupcima:

• ID (ID obveze)
• Korisnički ID (jedinstveni identifikator klijenta)
• Ime i prezime klijenta
• Adresa klijenta
• Detalji o problemu (tekstualni opis problema s kojim se klijent suočava)
• Broj za kontakt
• Stanje
• Datum obveze
• Vrijeme obveze
• Bilješke (tekstualni opis s bilo kojim bilješkama koje je dodao inženjer)
• Slika (fotografija uređaja, ili u radnom stanju nakon popravka ili kao dodatna slika za napomene inženjera)

Napomena

Kao i pri podacima o upravljanju zalihama na terenu, i ova radna knjiga predstavlja denormalizirani prikaz podataka. U postojećem sustavu obveza ti se podaci pohranjuju u zasebne tablice u kojima se nalaze podaci o obvezama i podaci o klijentima.

Maria pohranjuje ovu datoteku na račun s nazivom *Appointments.xlsx*. OneDrive Sjećajući se da se prethodno u radnoj knjizi koristio zadani naziv tablice i da se naziv morao mijenjati na raznim generiranim zaslonima, Maria preimenuje tablicu u radnoj knjizi u Sastanci.

Napomena

Ova radna knjiga dostupna je u mapi Assets Git repozitorija za ovaj vodič.

Maria želi izraditi odjeljak za obveze u aplikaciji izravno iz datoteke Excel. Maria odlučuje slijediti sličan pristup kao i kod funkcionalnosti upravljanja terenskim zalihama, osim što će ovaj put inženjer moći kreirati i uređivati termine.

Maria odluči izraditi zaslone za obveze u početku kao zasebnu aplikaciju. Na ovaj način Maria može koristiti ` Power Apps Studio ` za automatsko generiranje većeg dijela aplikacije. Power Apps Studio trenutačno vam ne dopušta generiranje dodatnih zaslona iz podatkovne veze u postojećoj aplikaciji. Nakon što izradi i testira zaslone, Maria će ih kopirati u aplikaciju za terenski inventar i bazu znanja.

Napomena

Alternativni pristup je dodati tablicu Sastanci u Excel datoteku kao drugi izvor podataka u postojeću aplikaciju, a zatim ručno izraditi zaslone za sastanke. Maria je odlučila generirati nove zaslone iz radne knjige i kopirati ih. Trenutno je Maria bolje upoznata s konceptima kopiranja i lijepljenja nego s ručnom izradom zaslona te će postupno naučiti kako stvarati zaslone od nule kako proces izrade ove aplikacije bude napredovao.

Za izradu aplikacije za sastanke

1. U izborniku Power Apps Studio odaberite Datoteka.

   

2. U lijevom oknu odaberite Novo. U glavnom oknu odaberite okvir OneDrive za tvrtke - izgled telefona .

   

3. U oknu Veze odaberite Sastanci.xlsx.

   

4. U Excel datoteci odaberite tablicu Sastanci , a zatim odaberite Poveži se.

   

5. Pričekajte dok se aplikacija generira. Kada se nova aplikacija pojavi, sadržavat će zaslon Pregledavanje , zaslon Detalji i zaslon Uređivanje , koristeći zadanu temu.

   

6. U oknu Prikaz stabla , u odjeljku Pregledaj zaslon1 pod Pregledaj galeriju1, odaberite Slika1, a zatim odaberite Izbriši. Zaslon Pregledaj trebao bi prikazivati samo popis termina, a ne slike povezane s njima.

   

   Imajte na umu da uklanjanje kontrole Image1 uzrokuje nekoliko pogrešaka na zaslonu jer širine i položaj kontrole Title1 upućuju na kontrolu Image . Te ćete probleme riješiti u sljedećem koraku.

7. U oknu Prikaz stabla pod PregledajGaleriju1 odaberite Naslov1. Promijenite vrijednost u svojstvu X na 16. Promijenite formulu u svojstvu Width u Parent.TemplateWidth - 104. To bi trebalo riješiti sve pogreške za zaslon.

8. U oknu Prikaz stabla pod PregledajGaleriju1 odaberite Tijelo1. Ova kontrola trenutačno prikazuje podatke o kontakt telefonu za klijenta. Promijenite vrijednost u svojstvu Text u ThisItem.'Ime kupca' (uključujući jednostruke navodnike).

   

   Detalji na zaslonu Pregledaj sada prikazuju ime kupca.

9. U oknu Prikaz stabla odaberite Pregledaj galeriju1. Pomoću trake formule provjerite izraz u svojstvu Stavke . Kontrola traži obveze koristeći datum, vrijeme obveze i broj kontakta. Promijenite ovu formulu za pretraživanje imena klijenta, a ne broja kontakta:

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   Primijetit ćete da su obveze poredane prema datumu, a zatim prema vremenu (prikazana su prva dva polja).

10. U oknu Prikaz stabla izbrišite IconNewItem1. Samo lokalno osoblje može rezervirati nove obveze za inženjere i tehničare. Primijetit ćete da ova akcija rezultira pogreškama u obrascu jer se širina i mjesto ostalih kontrola u zaglavlju odnose na ikonu koju ste upravo uklonili.

11. U oknu Prikaz stabla odaberite LblAppName1. Promijenite formulu za svojstvo Širina . u Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. U oknu Prikaz stabla odaberite IconRefresh1. Promijenite vrijednost za svojstvo X u Parent.Width - IconSortUpDown1.Width - Self.Width.

13. U oknu Prikaz stabla odaberite ikonuSortUpDown1. Promijenite vrijednost za svojstvo X na Parent.Width - Self.Width.

14. U oknu Prikaz stabla odaberite PregledajScreen1, a zatim odaberite gumb s tri točke (...). U padajućem izborniku koji se pojavi odaberite Preimenuj i promijenite naziv zaslona u PregledajSastanke.

    

15. Koristeći istu tehniku, promijenite naziv kontrole BrowseGallery1 u BrowseAppointmentsGallery.

Time je zaslon Pregledaj dovršen.

Za izradu zaslona s detaljima

Sada možete obratiti pozornost na zaslon Detalji .

1. U oknu Prikaz stabla pomaknite se prema dolje do odjeljka DetailsScreen1 . Možete vidjeti da su detalji prikazani abecednim redom prema nazivima polja, a neki korisni dijelovi informacija - poput polja Napomene - uopće se ne prikazuju.

   

2. U oknu Prikaz stabla odaberite DetailForm1. U desnom oknu na kartici Svojstva odaberite Uredi polja pokraj Polja. U srednjem oknu odaberite svako od sljedećih polja, a zatim odaberite Izbriši:

   • Datum obveze
   • Vrijeme obveze
   • ID klijenta
   • ID

3. Odaberite + Dodaj polje i dodajte sljedeća polja:

   • Bilješke
   • Pojedinosti o problemu
   • Stanje

   

4. Povucite svako polje tako da se prikazuje sljedećim redoslijedom, od vrha do dna:

   • Ime i prezime klijenta
   • Adresa klijenta
   • Broj za kontakt
   • Pojedinosti o problemu
   • Stanje
   • Bilješke
   • Image

5. U oknu Prikaz stabla odaberite Notes_DataCard1. Promijenite svojstvo Visina na 320.

   

6. U oknu Prikaz stabla izbrišite IconDelete1. Inženjeri ne bi trebali imati mogućnost uklanjanja obveza iz sustava.

7. Odaberite LblAppName2 i promijenite svojstvo Width u Parent.Width - Self.X - IconEdit1.Width.

8. Koristeći prethodno opisanu tehniku, promijenite naziv DetailsScreen1 u AppointmentDetails.

Za uređivanje zaslona za uređivanje

Posljednji zaslon koji za sada treba pogledati je zaslon Uredi .

1. U oknu Prikaz stabla odaberite EditScreen1.

2. U oknu Prikaz stabla , u odjeljku UrediScreen1 odaberite UrediObrazac1. U desnom oknu na kartici Svojstva odaberite Uređivanje polja pokraj Polja .

3. Uklonite sljedeća polja:

   • Adresa klijenta
   • ID
   • ID klijenta
   • Datum obveze
   • Vrijeme obveze

4. Dodajte sljedeća polja:

   • Pojedinosti o problemu
   • Stanje
   • Bilješke

5. Povucite svako polje tako da se prikazuje sljedećim redoslijedom, od vrha do dna:

   • Naziv kontakta
   • Broj klijenta
   • Pojedinosti o problemu
   • Stanje
   • Bilješke
   • Image

6. Odaberite polje Ime kupca i proširite ga da biste vidjeli njegova svojstva. Promijenite Vrstu kontrole u Prikaži tekst. Ova promjena čini kontrolu samo za čitanje; korisno je vidjeti ime kupca na zaslonu Uredi , ali inženjer ga ne bi trebao moći promijeniti.

   

7. Odaberite polje Broj kontakta i proširite ga da biste vidjeli njegova svojstva. Promijenite Vrstu kontrole u Prikaži tekst. Ovo polje također treba biti samo za čitanje.

8. Odaberite polje Bilješke , proširite ga i promijenite Vrstu kontrole u Uredi višeredni tekst. Ova postavka omogućuje inženjeru dodavanje detaljnih bilješki koje se mogu protezati u nekoliko redaka.

9. Odaberite polje Status , proširite ga i promijenite Vrstu kontrole u Dopuštene vrijednosti.

10. U oknu Prikaz stabla odaberite Status_DataCard5. U desnom oknu, na kartici Svojstva odaberite Otključaj za promjenu svojstava. Pomaknite se prema dolje do svojstva DopušteneVrijednosti i promijenite tekst u ["Ispravljeno", "Naručeni dijelovi", "Neriješeno"] (uključujući uglate zagrade). Terenski inženjer može postaviti Status samo na jednu od ovih definiranih vrijednosti.

    

11. U oknu Prikaz stabla preimenujte EditScreen1 u EditAppointment.

Sada možete spremiti i testirati aplikaciju.

1. Odaberite Datoteka>Spremi kao.

2. Pod Spremi kao odaberite Oblak, unesite naziv VanArsdelAppointments, a zatim odaberite Spremi.

3. Odaberite strelicu za povratak u alatnoj traci za povratak na početni zaslon. Power Apps Studio

4. Odaberite F5 za pretpregled aplikacije. Na stranici Termini odaberite ikonu > pored bilo kojeg termina. Trebao bi se pojaviti zaslon s detaljima za sastanak. U zaglavlju odaberite Uredi za ažuriranje termina. Izvršite sljedeće provjere:

   • Polja za ime klijenta i kontakt broj samo su za čitanje.
   • Polje statusa ograničeno je na vrijednosti s padajućeg popisa.
   • Možete unijeti bilješke u nekoliko redaka.
   • Datoteku slike možete prenijeti u polje slike.

   Napomena

   Poboljšanje koje ćete dodati kasnije omogućit će vam fotografiranje telefonom iz aplikacije i dodavanje u polje slike.

   

Kombiniranje zaslona u jednu aplikaciju

Maria je izradila dvije aplikacije, ali ih želi spojiti u jednu aplikaciju. Da bi to učinila, Maria kopira zaslone za aplikaciju za sastanke u aplikaciju za upravljanje terenskim inventarom i bazu znanja na sljedeći način:

1. Otvorite novi prozor preglednika i prijavite se na Power Apps Studio s podacima o vašem računu.

2. U lijevom oknu odaberite Aplikacije, odaberite VanArdselApp, a zatim odaberite Uredi.

   

3. U alatnoj traci odaberite Novi zaslon, a zatim odaberite Prazno. Ova će radnja dodati novi zaslon aplikaciji na koji ćete kopirati kontrole za zaslon Pregledaj za aplikaciju VanArsdelAppointments .

   

4. Novi zaslon će se zvati Zaslon2. U oknu Prikaz stabla preimenujte ga u Pregledaj sastanke.

5. Ponovite prethodni korak još dva puta kako biste dodali još dva prazna zaslona (Screen3 i Screen4).

6. Preimenujte Screen3 kao AppointmentDetails i preimenujte Screen4 kao EditAppointment.

7. Na lijevoj alatnoj traci od Power Apps Studio odaberite ikonu Podaci . U oknu Podaci odaberite Dodaj podatke. U padajućem popisu Odaberi izvor podataka , u polje Pretraži unesite OneDrive, a zatim odaberite OneDrive za tvrtke.

   

8. Odaberite Excel datoteku Appointments.xlsx , odaberite tablicu Appointments , a zatim odaberite Poveži.

9. Prebacite se na prozor preglednika koji prikazuje aplikaciju VanArsdelAppointments.

10. Na alatnoj traci odaberite Tema (možda ćete morati proširiti alatnu traku da biste prikazali više stavki), a zatim odaberite temu Šuma . Ovo je ista tema koju koristi aplikacija VanArsdel.

11. Na lijevoj alatnoj traci odaberite ikonu Prikaz stabla , odaberite zaslon Pregledaj sastanke , a zatim odaberite Ctrl+A. Ovom radnjom odabiru se sve kontrole na zaslonu.

12. Odaberite Ctrl+C za kopiranje ovih kontrola u međuspremnik.

13. Vratite se u prozor preglednika koji prikazuje aplikaciju VanArsdelApp.

14. Na lijevoj alatnoj traci odaberite ikonu Prikaz stabla , a zatim odaberite zaslon Pregledaj termine .

15. Odaberite Ctrl+V za lijepljenje kontrola na zaslon.

    Napomena

    Ponekad se zaglavlje zaslona čini malo prenisko. Da biste riješili ovaj problem, odaberite kontrole IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 i RectQuickActionBar1_1 u oknu Prikaz stabla (držite pritisnutu tipku Shift dok klikate da biste odabrali više kontrola istovremeno), a zatim ih mišem ili tipkama sa strelicama pomaknite prema gore u oknu prikaza dizajna.

16. Vratite se na prozor preglednika koji prikazuje aplikaciju VanArsdelAppointments , a zatim odaberite i kopirajte kontrole na zaslonu AppointmentDetails u međuspremnik (Ctrl+A a zatim Ctrl+C).

17. Vratite se u prozor preglednika koji prikazuje aplikaciju VanArsdelApp , odaberite zaslon AppointmentDetails i zatim zalijepite kontrole (Ctrl+V). Ako je potrebno, prilagodite položaj kontrola u zaglavlju zaslona.

    Napomena

    U zaglavlju zaslona Detalji termina prikazat će se pogreška. Do ove pogreške dolazi jer zaslon upućuje na kontrole na zaslonu UrediSastanak koje još nisu kopirane. Sljedeći koraci trebali bi riješiti ovu pogrešku.

18. Vratite se na prozor preglednika koji prikazuje aplikaciju VanArsdelAppointments , a zatim odaberite i kopirajte kontrole na zaslonu EditAppointment u međuspremnik.

19. Vratite se u prozor preglednika koji prikazuje aplikaciju VanArsdelApp , odaberite zaslon Uredi termin i zatim zalijepite kontrole. Ponovno pomaknite kontrole u zaglavlju zaslona ako je potrebno.

20. U oknu Prikaz stabla odaberite zaslon Detalji sastanka i provjerite je li prethodno naznačena pogreška sada nestala.

21. U oknu Prikaz stabla odaberite zaslon BrowseScreen1 . Preimenuj ovaj zaslon kao BrowseParts.

22. Preimenujte zaslon DetailsScreen1 u PartDetails.

23. Preimenuj zaslon Screen1 u KnowledgeBase.

    Napomena

    Dobra je praksa preimenovati zaslone kako bi odražavali njihovu funkciju, a ne upotrebljavati zadana imena koja generira Power Apps Studio, pogotovo ako aplikacija sadrži nekoliko zaslona. To može pomoći u izbjegavanju zabune kasnije ako je aplikaciju izmijenio drugi razvojni inženjer.

Dodavanje početnog zaslona u aplikaciju

Završna faza je dodavanje početnog zaslona aplikaciji. Početna stranica omogućit će inženjeru kretanje između različitih dijelova aplikacije (upravljanje zalihama, baza znanja i zakazivanje termina).

1. U aplikaciji VanArsdelApp na alatnoj traci odaberite Novi zaslon, a zatim odaberite Prazno.

2. U oknu Prikaz stabla preimenujte Zaslon2 u Početna.

3. Na alatnoj traci odaberite Umetni. Na popisu kontrola proširite Mediji, a zatim odaberite Slika. Kontrola će se dodati na zaslon.

   

4. Postavite položaj kontrole X na 16 i položaj Y na 22. Promijenite Širinu na 605 i Visinu na 127. Promijenite Položaj slike u Ispuni.

   

5. Dok ste još uvijek na kartici Svojstva , na padajućem popisu Slika odaberite + Dodaj slikovnu datoteku, a zatim prenesite sliku VanArsdelLogo.png u kontrolu.

   Napomena

   Datoteka slike dostupna je u mapi Assets u Git repozitoriju za ovaj vodič.

   

6. S popisa kontrola dodajte četiri kontrole Tekstualna oznaka u obrazac i postavite ih tako da budu složene ispod logotipa VanArsdel.

   

7. Odaberite najgornju kontrolu Tekstualna oznaka . U desnom oknu, na kartici Svojstva , postavite svojstvo Tekst na Sljedeći sastanak. Postavite veličinu fonta Veličina fonta na 30 i pomoću alata za odabir boja postavite boju fonta na zelenu (kako bi odgovarala logotipu).

   

8. Odaberite drugu kontrolu Tekstualna oznaka . Promijenite vrijednost svojstva Text u First(Appointments).'Ime kupca' (uključujući navodnike). Ova formula dohvaća ime klijenta iz prvog retka u tablici obveza.

   

   Napomena

   Trenutačno ova formula djeluje samo kao rezervirano mjesto. Oznaku ćete izmijeniti kasnije da biste dohvatili sljedeću obvezu za inženjera, umjesto da uvijek prikazujete prvu.

9. Odaberite treću kontrolu Tekstualna oznaka i postavite svojstvo Tekst na Prvo(Sastanci).'Datum sastanka'.

10. Postavite svojstvo Tekst četvrte kontrole oznake na Prvo(Sastanci).'Vrijeme sastanka'. Postavite svojstvo Veličina fonta na 30.

11. S popisa kontrola dodajte kontrolu Pravokutnik . Postavite sljedeća svojstva za ovu kontrolu:

    • Način prikaza: Prikaz
    • X: 0
    • Y: 632
    • Širina: 635
    • Visina: 1

    Ova kontrola djeluje kao vizualni razdjelnik na sredini zaslona.

12. Dodajte tri Button kontrole na zaslon, raspoređene okomito i ravnomjerno razmaknute ispod separatora. Postavite svojstvo Text za gornji gumb na Appointments, svojstvo Text za srednji gumb na Parts i svojstvo Text za donji gumb na Knowledgebase.

    

13. Odaberite gumb Sastanci . Promijenite izraz u akciji OnSelect u formulu Navigate(BrowseAppointments, ScreenTransition.Fade). Ova radnja prebacuje zaslon na zaslon obveza kada korisnik odabere gumb.

    

14. Postavite radnju OnSelect za gumb Parts na Navigate(BrowseParts, ScreenTransition.Fade).

15. Postavite radnju OnSelect za gumb Knowledgebase na Navigate(Knowledgebase, ScreenTransition.Fade).

Osim navigacije s početnog zaslona na ostale zaslone u sustavu, zasloni Sastanci ,Dijelovi iBaza znanja trebaju način koji korisniku omogućuje povratak na početni zaslon . Maria odlučuje dodati gumbe za povratak na ove zaslone.

1. U oknu Prikaz stabla odaberite zaslon Pregledaj dijelove .

2. Odaberite kontrolu RectQuickActionBar1 da biste joj dali fokus.

3. Odaberite izbornik Umetni i odaberite ikonu Dodaj. Premjestite ikonu lijevo od kontrole RectQuickActionBar1 . Imajte na umu da će ikona prekriti dio oznake Pregledaj dijelove .

   

4. U izborniku Prikaz stabla promijenite naziv nove kontrole ikone u IconReturn1.

5. Promijenite formulu za akciju OnSelect u izraz Back(ScreenTransition.Fade). Funkcija Natrag navigira korisnika na prethodni zaslon koji je posjetio.

6. Na kartici Svojstva promijenite svojstvo Ikona na < Lijevo.

7. U zaglavlju zaslona odaberite oznaku Pregledaj dijelove . Promijenite svojstvo X u IconReturn1.Width + 20. Oznaka Pregledaj dijelove više ne bi trebala biti djelomično zaklonjena.

   

8. Slijedeći postupak opisan u koracima 16 do 22, dodajte ikonu pod nazivom IconReturn2 u kontrolu RectQuickActionBar3 na zaslonu Baza znanja .

9. Slično tome, dodajte ikonu pod nazivom IconReturn3 kontroli RectQuickActionBar1_1 na zaslonu BrowseAppointments .

10. U oknu Prikaz stabla odaberite objekt Aplikacija . Promijenite svojstvo StartScreen u izraz Home. To osigurava da se početni zaslon prikazuje svaki put kada se aplikacija pokrene:

    

    Napomena

    Ako ne odredite koji će se zaslon prikazati prilikom pokretanja aplikacije, koristit će se zaslon koji se pojavljuje na vrhu okna Prikaz stabla . Da biste premjestili zaslon na početak popisa, desnom tipkom miša kliknite zaslon u oknu Prikaz stabla i odaberite Premjesti gore dok ne bude na vrhu.

Napokon, možete testirati aplikaciju.

1. Odaberite Datoteka>Spremi. U okvir Bilješke o verziji unesite Potpuna verzija s početnim zaslonom, a zatim odaberite Spremi.

2. Odaberite strelicu natrag za povratak na početni zaslon, a zatim odaberite F5 za pokretanje aplikacije.

3. Provjerite pojavljuje li se početni zaslon aplikacije.

4. Odaberite Sastanci. Trebao bi se prikazati zaslon za obveze.

5. Odaberite strelicu natrag za povratak na početni zaslon.

6. Odaberite Dijelove. Trebao bi se pojaviti preglednik dijelova.

7. Odaberite strelicu natrag za povratak na početni zaslon.

8. Odaberite Bazu znanja. Trebao bi se prikazati zaslon upita za bazu znanja.

9. Odaberite strelicu natrag za povratak na početni zaslon.

10. Zatvorite prozor za pretpregled i vratite se na Power Apps Studio.

Prototipna aplikacija sada je dovršena.

PrethodnoSljedeće