3. poglavlje: Izrada prototipa s malo kodiranja

Napomena

2. poglavlje navodi mobilnu aplikaciju kojom se koriste terenski tehničari i inženjeri te aplikaciju za stolna računala kojom se 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 malo kodiranja i usluzi Power Apps, ali ona i Maria odlučuju zajedno izraditi aplikaciju koja će terenskim tehničarima pomoći da provjere inventar (i naruče dijelove, ako je potrebno), ispitaju bazu znanja i provjere svoj sljedeću obvezu dok su izvan ureda radi servisiranja. 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 malo kodiranja obično zadatak amaterskog razvojnog inženjera, Kiana odluči obratiti pozornost na postupak kako bi osigurala da razumije kako je aplikacija napravljena. Te su joj informacije potrebne kako bi pomogla Mariji da integrira stvarne izvore podataka, API-je za web 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 je dobila povratne informacije od Caleba, vodećeg terenskog tehničara, Maria će surađivati s Kianom na integraciji aplikacije od gotovih gradivnih elemenata sa sustavom inventara koji radi lokalno.

Maria je dobro upoznata s postojećim sustavom upravljanja zalihama i razumije podatke koje sadrži. Ona započinje izradom radne knjige programa Excel koja sadrži tablice s lažnim podacima s detaljima o nekim oglednim dijelovima. Polja u tablici su ID, Ime, ID kategorija, Cijena, Pregled, Broj na zalihi i Slika (URL koji upućuje na sliku dijela). Ovu radnu knjigu može upotrebljavati za izradu i testiranje aplikacije od gotovih gradivnih elemenata kako bi se osigurao ispravan prikaz traženih podataka. Ona sprema ovu radnu knjigu u svoj OneDrive račun pod nazivom Dijelovibojlera.xlsx.

Napomena

Primjerak ove radne knjige možete pronaći u mapi Sredstva u Git repozitoriju za ovaj vodič.

Radni list dijelova bojlera, koji prikazuje popis dijelova sa stupcima ID, Naziv, ID kategorije, Cijena, Pregled, Broj na zalihi i Slika.

Ako ste dizajner povezanih baza podataka, primijetit ćete da radna knjiga programa Excel predstavlja denormalizirani prikaz podataka. Na primjer, u povezanoj bazi podataka ID kategorije najvjerojatnije bi bio numerički identifikator koji upućuje na zasebnu tablicu koja sadrži detalje 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 stranici Početno u odjeljku Počni od podataka odaberite Excel Online.

    Početna stranica za Power Apps Studio.

  3. Na stranici Veze odaberite OneDrive za tvrtke, a zatim odaberite Izradi.

    Nova veza za OneDrive.

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

    Povežite se s radnom knjigom programa Excel.

  5. Odaberite tablicu u Excelovoj datoteci (Maria je izradila tablicu koristeći zadani naziv Tablica1), a zatim odaberite Poveži.

    Povežite se s tablicom programa Excel.

  6. Pričekajte dok Power Apps generira aplikaciju.

    Generirajte aplikaciju.

  7. Kada se aplikacija generira, prikazat će se zaslon Pretraživanje prikazujući polja ID kategorije, ID i Slika iz svakog retka tablice s dijelovima u radnoj knjizi.

    Dijelovi prikazani na zaslonu Pretraživanje.

  8. Trenutačno prikazana polja nisu vrlo korisna za pomaganje inženjeru u odabiru proizvoda. Na oknu s prikazom zaslona Pretraživanje odaberite oznaku Izmjenjivač topline u prvom retku s podacima. Na traci s formulama odaberite svojstvo Tekst na padajućem popisu. Promijenite vrijednost ovog svojstva u polju ThisItem.Name. Tekst u prvom polju svakog retka prebacit će se da bi se prikazao naziv dijela.

    Napomena

    Na sljedećoj slici, oznaka Izmjenjivač topline izvorno prikazana u obrascu promijenila se u naziv proizvoda 3,5 W/S grijač.

    Promijeniti tekst kontrole za oznaku.

  9. Ponovite prethodni korak za oznake ID i Slika. Promijenite svojstvo Tekst polja ID u ID kategorija i svojstvo Tekst polja Slika u Pregled. Zaslon Pretraživanje sada bi trebao izgledati kao sljedeća slika, za koju će terenski inženjer vjerojatnije smatrati da je korisna za odabir dijelova.

    Popis stavki koji pokazuje naziv dijela, kategoriju u kojoj se nalazi i opisni pregled.

  10. Značajka pretraživanja zaslona Pretraživanje prema zadanim postavkama upotrebljava polja koja su prvotno odabrana prilikom generiranja zaslona, u ovom slučaju ID kategorija, ID i Slika. Rezultati su razvrstani prema polju ID kategorija. Korisno je prebaciti se na polja Naziv, ID kategorije i Pregled čiji su rezultati razvrstani prema polju Naziv. Odaberite kontrolu BrowseGallery1 u oknu Prikaz stabla. Na padajućem popisu s lijeve strane trake s formulama 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))
    

    Polja za razvrstavanje i pretraživanje.

  11. Promijenite izraz Pretraživanje koji upućuje na polja Naziv, ID kategorije i Pregled 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 Pretraživanje odaberite oznaku Tablica1 i na traci Formula promijenite svojstvo Tekst oznake na "Pretraži 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 za zaslon Pretraživanje promijenit će se tako da odgovara temi.

    Odaberite temu.

Učinite zaslon Detalji korisnijim

Izradili ste osnovnu aplikaciju i izmijenili zaslon Pretraživanje za prikaz polja koja inženjer može upotrijebiti za identifikaciju dijela. Aplikacija sadrži 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 ovog zaslona jer su ovi podaci inženjeru nebitni.

  1. u oknu Prikaz stabla pomaknite se prema dolje i odaberite Zaslon s detaljima1. Ovaj zaslon prikazuje detalje o dijelu koji korisnik odabere na zaslonu Pretraživanje.

    Zaslon Detalji o dijelovima.

  2. U zaglavlju zaslona Detalji u srednjem oknu odaberite oznaku Tablica1. U desnom oknu, na kartici Svojstva promijenite svojstvo Tekst na Detalji o dijelu.

    Napomena

    U mnogim slučajevima možete postići iste rezultate pomoću trake s formulama kao okno Svojstva. Međutim, neka svojstva dostupna su samo u oknu Svojstva.

    Promijenite zaglavlje zaslona pretraživanja dijelova.

  3. U oknu Prikaz stabla, u odjeljku Zaslon s detaljima1 odaberite Obrazac s detaljima1. U desnom oknu, na kartici Svojstva odaberite Uredi polja pokraj stavke 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

    Rasporedite polja na zaslonu s detaljima.

  4. Odaberite polje ID, odaberite tri točke koje se prikazuje na desnoj strani polja, a zatim odaberite Ukloni na padajućem izborniku koji se prikaže. Ovom radnjom uklanja se polje ID iz obrasca.

    Uklonite polje ID iz obrasca.

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

    Kontrola kartice s podacima ID kategorije.

    U desnom oknu, na kartici Napredno odaberite Otključaj za promjenu svojstava. U odjeljku Podaci promijenite polje Naziv za prikaz na "Kategorija" (uključite navodnike).

    Napomena

    Kao i na kartici Svojstva, mnoga svojstva na kartici Napredno također su dostupna pomoću trake s formulama. Kako biste postavili ta svojstva, možete upotrijebiti traku s formulama ako želite.

    Promijenite naziv za prikaz polja s detaljima o ID-ju kategorije.

  6. Ponovite prethodni korak kako biste promijenili tipku za NumberInStock_ DataCard1 na "Broj na zalihi" (uključite navodnike).

  7. Morate prilagoditi oblikovanje polja Cijena za prikaz podataka kao vrijednosti valute. U oknu Prikaz stabla, u odjeljku Obrazac s detaljima1, u odjeljku Cijena_Podatkovnakatrtica1 odaberite Vrijednostpodatkovnekartice7. Ovo je polje koje prikazuje vrijednost polja Cijena. U oknu Vrijednostpodatkovnekartice7 s desne strane, na kartici Napredno promijenite svojstvo Tekst na Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Format cijene kao valute.

    Izraz Parent.Default odnosi se na podatkovnu stavku s kojom je nadređena kontrola (DataCard) povezana, u ovom slučaju sa stupcem Cijena. Funkcija Tekst ponovno oblikuje ovu vrijednost koristeći format naveden kao drugi argument; u ovom primjeru to je lokalna valuta s dvije decimale.

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

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

    Zamijenite URL slike slikom.

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

    Provjerite je li dodana kontrola slike.

  11. U lijevom oknu Prikaz stabla odaberite Slika_Podatkovnakartica1. U desnom oknu, na kartici Napredno promijenite stavku Visina na 500 kako bi se omogućilo dovoljno prostora za prikaz slike.

    Postavite visinu kartice sa slikovnim podacima.

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

    • Slika: Parent.Default
    • Položajslike: 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 Uređivanje koji korisniku omogućuje promjenu podataka o dijelu. Inženjer ne bi smio mijenjati detalje dijela, izrađivati nove dijelove ili brisati dijelove iz kataloga.

  1. U oknu Prikaz stabla odaberite Zaslonuređivanja1. Odaberite gumb s tri točke, a zatim odaberite Izbriši za uklanjanje ovog zaslona.

    Izbrišite zaslon Uređivanje.

  2. U oknu Prikaz stabla odaberite Zaslon s detaljima1. Primijetit ćete da Power Apps Studio prikazuje poruku o pogreški za ovaj zaslon. Do ove pogreške dolazi jer Zaslon s detaljima1 sadrži izraze koji upućuju na zaslon Zaslon uređivanja1 koji više ne postoji.

  3. U zaglavlju Zaslon s detaljima1 odaberite ikonu olovke (Uređivanjeikone1). 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 premjestiti na zaslon Zaslonuređivanja1 .

    Uredite svojstvo OnSelect.

  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.

    Uklonite ikone za brisanje i uređivanje.

  6. Primijetit ćete da je tekst Detalji o dijelu 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.

    Kontrola LblAppName2 koja prikazuje pogrešku širine.

  7. Promijenite izraz za svojstvo Širina na Parent.Width - Self.X. Pogreška bi trebala nestati, a tekst Detalji o dijelu trebao bi se ponovo prikazati 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 ove ikone odnosi se na zaslon EditScreen1.

    Ikona nove stavke koja prikazuje pogrešku.

  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 Širina uklanjanjem reference na IconNewItem1.Width. Novi izraz trebao bi biti Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Promijenite širinu oznake.

  11. Još uvijek postoji problem sa zaglavljem. Iako se je tekst Pretraži dijelove ponovno prikazao, prikazuje se pogreška, a ikone osvježavanja i razvrstavanja 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. Trenutačno se izračunava na temelju širine kontrole IconNewItem1.

    Pogreška ikona razvrstavanja.

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

  13. U oknu Prikaz stabla odaberite IconRefresh1. Promijenite izraz za svojstvo X na 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. U odjeljku Spremi kao odaberite Oblak, unesite naziv VanArsdelApp, a zatim odaberite Spremi.

    Spremite aplikaciju.

  3. Odaberite strelicu za povratak da biste se vratili na zaslon Početno.

    Vratite se na početni zaslon.

  4. Odaberite F5 za pretpregled aplikacije. Na stranici Pretraživanje dijelova odaberite desnu zagradu (>) s desne strane bilo kojeg dijela. Zaslon Detalji prikazuje se za dio.

    Prvo pokretanje aplikacije.

  5. Odaberite lijevu zagradu (<) u zaglavlju zaslona Detalji za povratak na zaslon Pretraživanje.

  6. Na zaslonu Pretraživanje dijelova unesite tekst u okvir Pretraživanje. Dok tipkate, stavke će se filtrirati tako da prikazuju samo one koji imaju odgovarajući tekst u poljima Naziv,ID kategorije ili Pregled.

    Pretražite na zaslonu Pretraživanje dijelova.

  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 postupak uključivati Azure kognitivno pretraživanje, ali ne treba i ne želi razumjeti kako to funkcionira. Stoga, Maria odlučuje pružiti samo osnovno korisničko sučelje. Kasnije će surađivati s Kianom kako bi dodala funkcionalnost.

Maria odlučuje izraditi novi zaslon na temelju predloška Popis koji je dostupan na usluzi Power Apps Studio.

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

    Predložak Popis.

  2. U zaglavlju zaslona odaberite oznaku koja prikazuje tekst [Title]. Promijenite svojstvo Tekst na "Upit" (uključite navodnike).

    Izmijenite tekst zaglavlja zaslona upita.

  3. U zaglavlju zaslona odaberite znak plus (+), a zatim odaberite Izbriši. Ikona + namijenjena je korisniku za dodavanje još stavki na popis. Baza znanja namijenjena je samo za upite, pa ova značajka nije potrebna.

    Uklonite ikonu +.

    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 dolje do odjeljka Zaslon1 i odaberite LblAppName3. Promijenite svojstvo Širina formuli Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Izmijenite širinu zaglavlja zaslona upita.

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

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

  7. Odaberite Datoteka > Spremi.

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

  9. Vratite se na zaslon Početno i odaberite F5 za pretpregled novog zaslona. Treba izgledati kao na sljedećoj slici.

    Pokrenut zaslon Upit.

    Uzmite u obzir da ako odaberete ikonu > pokraj bilo kojeg lažnog unosa, funkcija detalja trenutačno 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)

Radna knjiga obveza.

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 sprema ovu datoteku u svoj OneDrive račun pod nazivom Obveze.xlsx. Prisjećajući se da je prethodno upotrijebila zadani naziv za tablicu u radnoj knjizi i da je morala promijeniti naslov na raznim generiranim zaslonima, ona preimenuje tablicu u radnoj knjizi u Obveze.

Napomena

Ova radna knjiga dostupna je u mapi Sredstva u Git repozitoriju za ovaj vodič.

Maria želi izraditi odjeljak za obveze u aplikaciji izravno iz datoteke Excel. Odlučila je slijediti pristup sličan funkciji upravljanja zalihama na terenu, osim što će ovaj put inženjeru biti dopušteno izrađivati i uređivati obveze.

Maria odluči izraditi zaslone za obveze u početku kao zasebnu aplikaciju. Na taj način, može upotrijebiti Power Apps Studio kako bi automatski generirala veći dio aplikacije. Power Apps Studio trenutačno vam ne dopušta generiranje dodatnih zaslona iz podatkovne veze u postojećoj aplikaciji. Kad je Maria izradila i testirala zaslone, kopirat će ih u terensku inventuru i aplikaciju baze znanja.

Napomena

Alternativni pristup je dodavanje tablice Obveze u datoteci Excel kao drugi izvor podataka postojećoj aplikaciji, a zatim ručna izrada zaslona za obveze. Maria se odlučila generirati nove zaslone iz radne knjige i kopirati zaslone; trenutačno joj je poznatiji koncept kopiranja i lijepljenja od ručne izrade zaslona, iako će postupno naučiti kako izraditi zaslone od početka, kako će proces izrade ove aplikacije napredovati.

Da biste stvorili aplikaciju za obveze

  1. Na traci izbornika usluge Power Apps Studio odaberite Datoteka.

    Izbornik datoteke.

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

    Stvorite novu aplikaciju.

  3. U oknu Veze odaberite Obveze.xlsx.

    Nova aplikacija iz radne knjige obveza.

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

    Odaberite tablicu s obvezama.

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

    Generirana aplikacija za obveze.

  6. U oknu Prikaz stabla u odjeljku BrowseScreen1, u odjeljku BrowseGallery1, odaberite Image1, a zatim odaberite Izbriši. Zaslon Pretraživanje trebao bi samo navesti obveze, a ne slike povezane s njima.

    Izbrišite kontrolu slike.

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

  7. U oknu Prikaz stabla, u odjeljku BrowseGallery1 odaberite Title1. Promijenite vrijednost u svojstvu X na 16. Promijenite formulu u svojstvu Širina na Parent.TemplateWidth - 104. To bi trebalo riješiti sve pogreške za zaslon.

  8. U oknu Prikaz stabla, u odjeljku BrowseGallery1 odaberite Body1. Ova kontrola trenutačno prikazuje podatke o kontakt telefonu za klijenta. Promijenite vrijednost u svojstvu Tekst na ThisItem.'Ime klijenta' (uključite pojedinačne navodnike).

    Promijenite kontrolu Body1 u ime klijenta.

    Detalji u nazivu zaslona Pretraživanje sada prikazuju ime klijenta.

  9. U oknu Prikaz stabla odaberite BrowseGallery1. Pomoću trake s formulama pregledajte 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 na Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

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

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

  14. U oknu Prikaz stabla odaberite BrowseScreen1, a zatim odaberite gumb s tri točke (...). Na padajućem izborniku koji se prikaže odaberite Preimenuj i promijenite naziv zaslona u BrowseAppointments.

    Preimenujte zaslon za pretraživanje.

  15. Istom tehnikom promijenite naziv kontrole BrowseGallery1 u BrowseAppointmentsGallery.

To dovršava zaslon Pretraživanje.

Za izradu zaslona s detaljima

Sada možete skrenuti pozornost na zaslon Detalji.

  1. u oknu Prikaz stabla pomaknite se prema dolje do odjeljka DetailScreen1. Možete vidjeti da su detalji predstavljeni abecednim redom prema nazivima polja i nekim korisnim dijelovima informacija, kao npr. da se polje Bilješke uopće ne prikazuje.

    Izgled zaslona s detaljima obveza.

  2. U oknu Prikaz stabla odaberite DetailForm1. U desnom oknu, na kartici Svojstva odaberite Uredi polja pokraj stavke 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

    Dodajte polja na zaslon s detaljima.

  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 lijevom oknu Prikaz stabla odaberite Notes_DataCard1. Promijenite svojstvo Visina na 320.

    Izmijenite veličinu polja bilješki.

  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 Širina u Parent.Width - Self.X - IconEdit1.Width.

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

Uređivanje zaslona Uređivanje

Konačni zaslon koji ćemo zasad pogledati je zaslon Uređivanje.

  1. U oknu Prikaz stabla odaberite Zaslonuređivanja1.

  2. U oknu Prikaz stabla, u odjeljku EditScreen1 odaberite EditForm1. U desnom oknu, na kartici Svojstva odaberite Uredi polja pokraj stavke 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 klijenta i proširite ga kako bi se prikazala njegova svojstva. Promijenite stavku Vrsta kontrole u Prikaz teksta. Ovm promjenom kontrola se može samo čitati; korisno je vidjeti ime klijenta na zaslonu Uređivanje, ali inženjer ga ne bi smio promijeniti.

    Promijenite ime klijenta u samo za čitanje.

  7. Odaberite polje Broj kontakta i proširite ga kako bi se prikazala njegova svojstva. Promijenite stavku Vrsta kontrole u Prikaz teksta. Ovo polje također treba biti samo za čitanje.

  8. Odaberite polje Bilješke, proširite ga i promijenite stavku Vrsta kontrole u Uređivanje teksta u više redaka. 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 stavku Vrsta kontrole u Dopuštene vrijednosti.

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

    Postavite dopuštene vrijednosti statusa.

  11. U oknu Prikaz stabla preimenujte EditScreen1 u EditAppointing.

Sada možete spremiti i testirati aplikaciju.

  1. Odaberite Datoteka > Spremi kao.

  2. U odjeljku Spremi kao odaberite Oblak, unesite naziv VanArsdelObveze, a zatim odaberite Spremi.

  3. Odaberite strelicu za povratak na alatnoj traci usluge Power Apps Studio da biste se vratili na zaslon Početno .

  4. Odaberite F5 za pretpregled aplikacije. Na stranici Obveze odaberite ikonu > pokraj bilo koje obveze. Trebao bi se prikazati zaslon Detalji za obvezu. U zaglavlju odaberite Uredi za ažuriranje obveze. 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.

    Pokrenuta aplikacija Obveze.

Kombiniranje zaslona u jednu aplikaciju

Maria je izradila dvije aplikacije, ali želi ih kombinirati u jednu aplikaciju. Da bi to učinila, kopira zaslone aplikacije za obveze u aplikaciju za upravljanje zalihama na terenu 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 VanArdselAplikacija, a zatim odaberite Uredi.

    Otvorite aplikaciju VanArsdel.

  3. Na alatnoj traci odaberite Novi zaslon, a zatim odaberite Prazno. Ova će radnja dodati novi zaslon u aplikaciju u koji ćete kopirati kontrole za zaslon Pretraživanje za aplikaciju VanArsdelObveze.

    Dodajte prazan zaslon.

  4. Novi zaslon nazavt će se Screen2. U oknu Prikaz stabla preimenujte ga u BrowseAppointments.

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

  6. Preimenujte Screen3 u AppointmentDetails i preimenujte Screen4 u EditAppointing.

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

    Odaberite izvor podataka.

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

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

  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. To je ista tema koju upotrebljava aplikaciju VanArsdel.

  11. Na lijevoj alatnoj traci odaberite ikonu Prikaz stabla odaberite zaslon BrowseAppointments, 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 na prozor preglednika koji prikazuje aplikaciju VanArsdelApp.

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

  15. Odaberite Ctrl + V za lijepljenje kontrola u odabrani zaslon.

    Napomena

    Ponekad se zaglavlje zaslona čini malo prenisko. Kako biste riješili ovaj problem, odaberite kontrole IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 i RectQuickActionBar1_1 u oknu Prikaz stabla (držite pritisnutom tipku Shift dok pritišćete za odabir više kontrola odjednom), a zatim ih pomoću miša ili tipki 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 zaslon Detalji o obvezama u međuspremnik (Ctrl + A nakon čega slijedi Ctrl + C).

  17. Vratite se na prozor preglednika koji prikazuje aplikaicju VanArsdelApp, odaberite zaslon Detalji o obvezama, a zatim zalijepite kontrole (Ctrl + V). Ako je potrebno, prilagodite položaj kontrola u zaglavlju zaslona.

    Napomena

    Prikazat će se pogreška prijavljena u zaglavlju zaslona Detalji o obvezama. Do ove pogreške dolazi zato što se zaslon poziva na kontrole na zaslonu Uređivanje obveza, 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 zaslon Uređivanje obveza u međuspremnik.

  19. Vratite se na prozor preglednika koji prikazuje aplikaicju VanArsdelApp, odaberite zaslon Uređivanje obveza, a zatim zalijepite kontrole. Ponovno pomaknite kontrole u zaglavlju zaslona ako je potrebno.

  20. U oknu Prikaz stabla odaberite zaslon Detalji o obvezama i provjerite je li prethodno navedena pogreška sada nestala.

  21. U oknu Prikaz stabla odaberite zaslon BrowseScreen1. Preimenujte ovaj zaslon u Pretraživanje dijelova.

  22. Preimenujte zaslon Zaslon s detaljima1 u Detalji o dijelovima.

  23. Preimenujte zaslon Zaslon1 u Baza znanja.

    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

Posljednja faza je dodavanje zaslona Početno u aplikaciju. Zaslon Početno omogućit će inženjeru da se kreće između različitih dijelova aplikacije (upravljanje zalihama, baza znanja i obveza).

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

  2. u oknu Prikaz stabla preimenujte Zaslon2 u Početno.

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

    Dodajte kontrolu slike na početni zaslon.

  4. Postavite položaj X kontrole na 16 i položaj Y na 22. Postavite stavke Širina na 605 i Visina na 127. Promijenite Položaj slike u Ispuna.

    Postavite veličinu i položaj slike.

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

    Napomena

    Ova slikovna datoteka dostupna je u mapi Sredstva u Git repozitoriju za ovaj vodič.

    Dodajte logotip na sliku.

  6. S popisa kontrola dodajte četiri kontrole Oznaka teksta u obrazac i pozicionirajte ih tako da se slože ispod logotipa VanArsdel.

    Dodajte kontrolu oznake teksta.

  7. Odaberite najgornju kontrolu Oznaka teksta. U desnom oknu, na kartici Svojstva postavite svojstvo Tekst na Sljedeća obveza. Postavite stavku Veličina fonta na 30 i pomoću alata za odabir boja postavite boju fonta na zelenu (kako bi odgovarala logotipu).

    Postavite boju fonta.

  8. Odaberite drugu kontrolu Oznaka teksta. Promijenite vrijednost u svojstvu Text u First(Appointments).'Customer Name' (uključite pojedinačne navodnike). Ova formula dohvaća ime klijenta iz prvog retka u tablici obveza.

    Prikažite ime klijenta.

    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 Oznaka teksta i postavite svojstvo Tekst na First(Appointments)'Appointment Date.

  10. Postavite svojstvo Tekst četvrte kontrole oznake First(Appointments).'Appointment Time. 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 kontrole Gumb na zaslonu, poredane okomito i ravnomjerno raspoređene ispod razdjelnika. Postavite svojstvo Tekst za gornji gumb na Obveze, svojstvo Tekst za srednji gumb na Dijelovi i svojstvo Tekst za donji gumba na Baza znanja.

    Gumbi za početni zaslon.

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

    Gumb Obveze.

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

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

Osim navigacije sa zaslona Početno na ostale zaslone u sustavu, zasloni Obveze, Dijelovi i Baza znanja trebaju način da omoguće korisniku povratak na zaslon Početno. Maria odlučuje dodati gumbe za povratak na ove zaslone.

  1. U oknu Prikaz stabla odaberite zaslon BrowseParts.

  2. Odaberitekontrolu RectQuickActionBar1 radi fokusa.

  3. Odaberite izbornik Umetanje i odaberite Dodaj ikonu. Pomaknite ikonu lijevo od kontrole RectQuickActionBar1. Uzmite u obzir da će ikona zakloniti dio oznake Pretraživanje dijelove.

    Dodajte ikonu.

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

  5. Promijenite formulu za radnjz OnSelect u izraz Back(ScreenTransition.Fade). Funkcija Povratak usmjerava korisnika na prethodni zaslon koji je posjetio.

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

  7. U zaglavlju zaslona odaberite oznaku Pregledavanje dijelova. Promijenite svojstvo X u IconReturn1.Width + 20. Oznaka Pregledavanje dijelova više ne smije biti djelomično zaklonjena.

    Pomaknite oznaku Pregledavanje dijelova.

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

  9. Slično tome, dodajte ikonu pod nazivom IconReturn3 u kontrolu RectQuickActionBar1_1 na zaslonu Pregledavanje obveza.

  10. U oknu Prikaz stabla odaberite objekt Aplikacija. Promijenite svojstvo radnje OnStart u izraz Navigate(Home, ScreenTransition.Fade). Ova radnja osigurava da se zaslon Početno prikazuje kad god se aplikacija pokrene:

    Postavite formulu App OnStart.

    Napomena

    Ako ne odredite koji će zaslon biti prikazan kad se aplikacija pokrene, upotrijebit će se zaslon koji se prikazuje na vrhu okna Prikaz stabla. Da biste zaslon premjestili na početak popisa, desnom tipkom miša kliknite zaslon u oknu Prikaz stabla i odaberite Premjesti gore dok nije na vrhu.

Napokon, možete testirati aplikaciju.

  1. Odaberite Datoteka > Spremi. Uokviru Napomene o verziji unesite Kompletna verzija s početnim zaslonom, a zatim odaberite Spremi.

  2. Odaberite strelicu za povratak da biste se vratili na zaslon Početno, a zatim odaberite F5 za pokretanje aplikacije.

  3. Provjerite prikazuje li se zaslon Početno za aplikaciju.

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

  5. Odaberite strelicu za povratak da biste se vratili na zaslon Početno.

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

  7. Odaberite strelicu za povratak da biste se vratili na zaslon Početno.

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

  9. Odaberite strelicu za povratak da biste se vratili na zaslon Početno.

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

Prototipna aplikacija sada je dovršena.