3. poglavje: Izdelava prototipa z malo programske kode

Opomba

V 2. poglavju sta bili omenjeni mobilna aplikacija, ki jo uporabljajo terenski tehniki in serviserji, ter namizna aplikacija, ki jo uporablja osebje na mestu uporabe. Naslednja poglavja se osredotočajo na oblikovanje, implementacijo in uvajanje mobilnih aplikacij, izdelanih s storitvijo Power Apps. Namizne aplikacije pa preostanejo bralcu za vajo.

Svetlana je skeptična glede rešitev z malo kode in storitve Power Apps, toda z Matejo se odločita skupaj izdelati aplikacijo, ki bi pomagala terenskim tehnikom preverjati inventar (in po potrebi naročati dele), poizvedovati po zbirki znanja ter preveriti naslednji termin, medtem ko so zunaj pisarne zaradi klica po storitvi. Svetlana in Mateja nameravata uporabiti to izkušnjo, da bi raziskali, kako dodati kontrolnike in uporabljati formule v storitvi Power Apps.

Čeprav je izdelava prvotnega prototipa z malo programske kode običajno opravilo za nešolanega razvijalca, se Svetlana odloči, da bo spremljala proces, s čimer zagotovi, da bo razumela, kako je aplikacija zgrajena. Te informacije potrebuje, da bo lahko pomagala Mateji integrirati dejanske vire podatkov, spletne API-je in druge potrebne storitve v aplikacijo.

1. element: upravljanje terenske zaloge

Matejin prvotni cilj je izdelati aplikacijo s platnom, ki prikazuje seznam delov in omogoča uporabniku, da prikaže podrobnosti katerega koli dela. Sčasoma bi moralo biti omogočeno tudi, da lahko uporabnik del naroči; vendar bo ta prvotna različica aplikacije preprosto prototip in še ne bo povezana z zalednim delom. Potem ko pridobi povratne informacije od Klemna, glavnega terenskega tehnika, Mateja sodeluje s Svetlano pri integraciji aplikacije s platnom in sistema zaloge, ki se izvaja na mestu uporabe.

Mateji je obstoječi sistem za upravljanje zaloge zelo dobro poznan in razume informacije, ki jih vsebuje. Začne z ustvarjanjem Excelovega delovnega zvezka, ki vsebuje tabele, v katerih so testni podatki s podrobnostmi za nekatere vzorčne dele. Polja v tabeli so ID, Ime, CategoryID, Cena, Pregled, NumberInStock in Slika (URL, ki navaja sliko dela). Ta delovni zvezek lahko uporabi za izdelavo in preskušanje aplikacije s platnom, da zagotovi, da ta pravilno prikazuje zahtevane podatke. Ta delovni zvezek shrani v svojem računu OneDrive pod imenom BoilerParts.xlsx.

Opomba

Kopijo tega delovnega zvezka lahko najdete v mapi Sredstva v shrambi Git za ta vodnik.

Če ste oblikovalec relacijskih zbirk podatkov, boste opazili, da Excelov delovni zvezek predstavlja denormaliziran prikaz podatkov. Na primer v relacijski zbirki podatkov CategoryID bi najverjetneje bil številski identifikator, ki se sklicuje na ločeno tabelo, ki vsebuje podrobnosti kategorije, vključno ime.

Opomba

URL-ji v stolpcu Slika so trenutno samo označbe mest. V dokončani aplikaciji bodo ti URL-ji nadomeščeni z naslovi pravih slikovnih datotek.

Sledite tem korakom za ustvarjanje aplikacije s storitvijo Power Apps.

1. Vpišite se v storitev Power Apps.

2. Na strani Osnovno pod možnostjo Začni s podatki izberite Excel Online.

   

3. Na strani Povezave izberite OneDrive za podjetja, nato pa izberite Ustvari.

   

4. Na strani OneDrive za podjetja izberite datoteko BoilerParts.xlsx.

   

5. Izberite tabelo v Excelovi datoteki (Mateja je ustvarila tabelo z uporabo privzetega imena Table1) in nato izberite Poveži.

   

6. Počakajte, da Power Apps ustvari aplikacijo.

   

7. Ko je aplikacija ustvarjena, boste videli zaslon Prebrskaj, ki prikazuje polja CategoryID, ID in Slika iz vsake vrstice tabele z deli v delovnem zvezku.

   

8. Polja, ki so trenutno prikazana, niso zelo koristna pri pomaganju serviserju, da izbere izdelek. V podoknu, ki prikazuje zaslon Prebrskaj, izberite oznako Toplotni izmenjevalnik v prvi vrstici podatkov. V vnosni vrstici izberite lastnost Besedilo v spustnem seznamu. Spremenite vrednost te lastnosti na ThisItem.Name. Besedilo v prvem polju vsake vrstice bo preklopilo na prikaz imena dela.

   Opomba

   Na naslednji sliki je oznaka Toplotni izmenjevalnik, prvotno prikazana na obrazcu, spremenjena na ime izdelka Grelec 3,5 W/S.

   

9. Ponovite prejšnji korak za oznaki ID in Slika. Spremenite lastnost Besedilo polja ID na CategoryID, lastnost Besedilo polja Slika pa na Pregled. Zaslon Prebrskaj bi moral zdaj imeti videz kot na naslednji sliki, da je lahko za terenskega serviserja verjetneje koristen pri izbiri delov.

   

10. Funkcija iskanja zaslona Prebrskaj privzeto uporablja polja, ki so bila prvotno izbrana, ko je bil zaslon ustvarjen – v tem primeru CategoryID, ID in Slika. Rezultati so razvrščeni po možnosti CategoryID. Smiselno je to preklopiti na polja Ime, CategoryID in Pregled, z rezultati, razvrščenimi po možnosti Ime. Izberite kontrolnik BrowseGallery1 v podoknu Drevesni pogled. V spustnem seznamu na levi strani vnosne vrstice izberite lastnost Elementi. Povlecite spodnji rob vnosne vrstice navzdol, tako da je formula popolnoma vidna. Formula vsebuje naslednji izraz:

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

    

11. Spremenite izraz Poišči, da se sklicuje na polja Ime, CategoryID in Pregled z uporabo naslednje formule:

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

12. Naslov v glavi obrazca ni koristen, privzeta tema pa se ne ujema z videzom in slogom podjetja VanArsdel. Na zaslonu Prebrskaj izberite oznako Table1 in v vrstici Formula spremenite lastnost Besedilo oznake na "Prebrskaj dele" (v vrednost vključite dvojne narekovaje).

13. V orodni vrstici izberite možnost Tema (morda boste morali razširiti orodno vrstico, da prikažete več elementov) in nato izberite temo Gozd. Barve in slog zaslona Prebrskaj se spremenijo, da se ujema s temo.

    

Priprava koristnejšega zaslona s podrobnostmi

Ustvarili ste osnovno aplikacijo in spremenili zaslon Prebrskaj, da prikazuje polja, ki jih lahko serviser uporabi za identifikacijo dela. Aplikacija vsebuje tudi zaslon Podrobnosti, ki prikazuje vse informacije za izbrani del. Polja na tem zaslonu trenutno niso prikazana v logičnem zaporedju, zato jih morate preurediti. S tega zaslona lahko izbrišete tudi polje ID, ker te informacije niso pomembne za serviserja.

1. V podoknu Drevesni pogled se pomaknite navzdol in izberite DetailScreen1. Ta zaslon prikaže podrobnosti o delu, ki ga uporabnik izbere na zaslonu Prebrskaj.

   

2. V glavi zaslona Podrobnosti v srednjem podoknu izberite oznako Table1. V desnem podoknu na zavihku Lastnosti spremenite lastnost Besedilo na Podrobnosti dela.

   Opomba

   V veliko primerih lahko dosežete iste rezultate, če uporabite vnosno vrstico kot podokno Lastnosti. Vendar so nekatere lastnosti na voljo samo prek podokna Lastnosti.

   

3. V podoknu Drevesni pogled pod možnostjo DetailScreen1 izberite DetailForm1. V desnem podoknu na zavihku Lastnosti izberite Urejanje polj poleg možnosti Polja. V srednjem podoknu izberite in povlecite polja, tako da so prikazana v naslednjem zaporedju, od zgoraj navzdol:

   • Imenu
   • CategoryID
   • Pregled
   • Cena
   • NumberInStock
   • Image
   • ID

   

4. Izberite polje ID, izberite tri pike, ki se prikažejo na desni strani polja, nato pa izberite Odstrani s spustnega menija, ki se prikaže. To dejanje odstrani polje ID z obrazca.

   

5. V podoknu Drevesni pogled pod možnostjo DetailForm1 izberite CategoryID_DataCard1. Ta element je kontrolnik DataCard, ki prikazuje ime polja (imenovano ključ) in njegovo vrednost.

   

   V desnem podoknu na zavihku Napredno izberite Odkleni za spremembo lastnosti. V razdelku Podatki spremenite polje DisplayName na "Kategorija" (vključite narekovaje).

   Opomba

   Kot pri zavihku Lastnosti je veliko lastnosti na zavihku Napredno dostopnih tudi prek vnosne vrstice. Za nastavitev teh lastnosti lahko po želji uporabite vnosno vrstico.

   

6. Ponovite prejšnji korak za spremembo ključa za NumberInStock_DataCard1 na "Število na zalogi" (vključite narekovaje).

7. Za prikaz podatkov kot vrednost valute morate prilagoditi oblikovanje polja Cena. V podoknu Drevesni pogled pod možnostjo DetailForm1, pod možnostjo Price_DataCard1 izberite DataCardValue7. To je polje, ki prikazuje vrednost polja Cena. V podoknu DataCardValue7 na desni, na zavihku Napredno spremenite lastnost Besedilo na Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Izraz Parent.Default se nanaša na podatkovni element, s katerim je nadrejeni kontrolnik (DataCard) povezan – v tem primeru stolpec Cena. Funkcija Besedilo preoblikuje to vrednost z uporabo oblike, navedene kot drugi argument; v tem primeru je to lokalna valuta z dvema decimalnima mestoma.

8. Podatkovna kartica slike bi morala prikazovati sliko dela, ne URL slikovne datoteke. V podoknu Drevesni pogled pod možnostjo DetailForm1, pod možnostjo Image_DataCard1 izberite DataCardValue3, nato pa izberite Izbriši, da odstranite ta kontrolnik.

9. Izberite Image_DataCard1. V levem podoknu izberite + Vstavi. V podoknu Vstavi razširite Predstavnost, nato pa izberite Slika.

   

10. Vrnite se na podokno Drevesni pogled in potrdite, da je bil kontrolnik besedila Image1 dodan v kontrolnik Image_DataCard1.

    

11. V podoknu Drevesni pogled izberite Image_DataCard1. V desnem podoknu na zavihku Napredno spremenite Višina na 500, da omogočite dovolj prostora za prikaz slike.

    

12. V podoknu Drevesni pogled izberite Image1. Nastavite naslednje lastnosti:

    • Slika: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Širina: 550
    • Višina: 550

    Opomba

    Prikazana slika je trenutno prazna, ker je URL v Excelovem delovnem zvezku samo označba mesta. To zadevo bomo obravnavali in pridobili dejanski URL, ko bomo povezali aplikacijo v spletni API v poznejšem poglavju.

Aplikacija vsebuje tudi zaslon Uredi, ki omogoča uporabniku, da spremeni informacije za del. Serviser ne bi smel imeti možnosti spremeniti podrobnosti za del, ustvarjati novih delov ali brisati delov iz kataloga.

1. V podoknu Drevesni pogled izberite EditScreen1. Izberite gumb s tremi pikami in nato izberite Izbriši, da odstranite ta zaslon.

   

2. V podoknu Drevesni pogled izberite DetailsScreen1. Opazite lahko, da Power Apps Studio prikaže sporočilo o napaki za ta zaslon. Do te napake pride, ker DetailsScreen1 vsebuje izraze, ki se sklicujejo na zaslon EditScreen1, ki več ne obstaja.

3. V glavi možnosti DetailsScreen1 izberite ikono svinčnika (IconEdit1). Lastnost OnSelect za ta kontrolnik vsebuje izraz EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Ko je ikona Uredi izbrana, se ta izraz zažene in se poskusi premakniti na zaslon EditScreen1.

   

4. V podoknu Drevesni pogled izberite IconEdit1, nato pa izberite Izbriši. Ta ikona ni več potrebna.

5. Izberite IconDelete1, nato pa izberite Izbriši. Ta ikona se uporablja za brisanje trenutnega dela in prav tako ni potrebna.

   

6. Opazite lahko, da je besedilo Podrobnosti dela izginili iz glave zaslona, Power Apps Studio pa namesto tega prikazuje sporočilo o napaki. To se je zgodilo, ker je širina kontrolnika oznake, ki prikazuje besedilo, izračunana. V podoknu Drevesni pogled izberite LblAppName2. Preglejte lastnost Širina. Vrednost te lastnosti je rezultat izraza Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Spremenite izraz za lastnost Širina na Parent.Width - Self.X. Napaka bi morala izginiti in besedilo Podrobnosti dela bi se moralo znova prikazati v glavi zaslona.

8. V podoknu Drevesni pogled izberite BrowseScreen1. Ta zaslon bo prikazal tudi sporočilo o napaki. Ikona + v orodni vrstici (IconNewItem1) omogoča uporabniku, da doda nov del. Lastnost OnSelect za to ikono se sklicuje na zaslon EditScreen1.

   

9. Izberite IconNewItem1, nato pa izberite Izbriši. Kot prej, besedilo v glavi za zaslon izgine in prikaže se sporočilo o napaki, in to iz istega razloga.

10. V podoknu Drevesni pogled pod možnostjo BrowseScreen1 izberite LblAppName1. Spremenite izraz za lastnost Širina, tako da odstranite sklic na IconNewItem1.Width. Nov izraz bi moral biti Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Še vedno obstaja težava z glavo. Čeprav se je besedilo Prebrskaj dele znova pojavilo, je prikazana napaka, ikoni za osvežitev in razvrščanje pa sta na napačnem mestu. V podoknu Drevesni pogled izberite IconSortUpDown1. Poiščite lastnost X za ta kontrolnik. Ta lastnost določa vodoravni položaj za ikono v glavi. Trenutno je izračunana na podlagi širine kontrolnika IconNewItem1.

    

12. Spremenite izraz za lastnost X na Parent.Width - Self.Width.

13. V podoknu Drevesni pogled izberite IconRefresh1. Spremenite izraz za lastnost X na Parent.Width - IconSortUpDown1.Width - Self.Width. Vse napake bi morale izginiti.

Shranjevanje in preskušanje aplikacije

Zdaj lahko shranite in preskusite aplikacijo.

1. Izberite možnost Datoteka > Shrani kot.

2. Pod možnostjo Shrani kot izberite Oblak, vnesite ime VanArsdelApp, nato pa izberite Shrani.

   

3. Izberite puščico nazaj za vrnitev na zaslon Osnovno.

   

4. Izberite F5 za predogled aplikacije. Na strani Prebrskaj dele izberite desni kotni oklepaj (>) desno od katerega koli dela. Prikaže se zaslon Podrobnosti za del.

   

5. Izberite levi kotni oklepaj (<) v glavi zaslona Podrobnosti, da se vrnete na zaslon Prebrskaj.

6. Na zaslonu Prebrskaj dele vnesite besedilo v polje Iskanje. Med vnašanjem bodo elementi filtrirani, da bodo prikazani samo tisti, ki imajo ujemajoče se besedilo v poljih Ime, CategoryID ali Pregled.

   

7. Zaprite okno za predogled in se vrnite v Power Apps Studio.

Element 2: Terenska zbirka znanja

Za dostop do zbirke znanja si Mateja in Klemen (tehnik) zamislita enostaven vmesnik, kjer uporabnik vnese iskalni izraz in aplikacija prikaže vse članke zbirke znanja, v katerih je izraz omenjen. Maria ve, da bo ta proces vključeval Azure Cognitive Search, vendar ni potrebno— ali celo želeti— da bi razumeli, kako deluje. Zato se Mateja odloči omogočiti samo osnovni uporabniški vmesnik. Pozneje bosta s Svetlano sodelovali pri dodajanju dejanske funkcionalnosti.

Mateja se odloči ustvariti nov zaslon na podlagi predloge Seznam, ki je na voljo v storitvi Power Apps Studio.

1. V orodni vrstici zaslona Osnovno storitve Power Apps Studio izberite Nov zaslon, nato pa izberite Seznam.

   

2. V glavi zaslona izberite oznako, ki prikazuje besedilo [Title]. Spremenite lastnost Besedilo na "Poizvedba" (vključite narekovaje).

   

3. V glavi zaslona izberite znak plus (+), nato pa izberite Izbriši. Namen ikone + je, da omogoči uporabniku, da doda več elementov na seznam. Zbirka znanja so samo poizvedbe, zato ta funkcija ni potrebna.

   

   Upoštevajte, da odstranjevanje te ikone povzroči napako v glavi zaradi načina, kako so izračunani lokacija in širine drugih elementov. To ste že videli prej pri zaslonu upravljanja zaloge in rešitev je ista, kot je opisano v naslednjih korakih.

4. V podoknu Drevesni pogled se pomaknite navzdol do razdelka Screen1 in izberite LblAppName3. Spremenite lastnost Širina na formulo Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. V podoknu Drevesni pogled izberite IconSortUpDown2. Prilagodite lastnost X na formulo Parent.Width - IconSortUpDown2.Width.

6. V podoknu Drevesni pogled izberite IconRefresh2. Prilagodite lastnost X na formulo Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. To bi moralo odpraviti vse napake z zaslonom.

7. Izberite možnost Datoteka > Shrani.

8. V polje Opomba različice vnesite besedilo UV dodane zbirke znanja, nato pa izberite Shrani.

9. Vrnite se na zaslon Osnovno in izberite F5 za predogled novega zaslona. Prikazano bi moralo biti kot na naslednji sliki.

   

   Upoštevajte, da ob izbiri ikone > poleg katerega koli lažnega vnosa funkcionalnost podrobnosti trenutno ne deluje. To boste obravnavali pozneje, ko boste integrirali Azure Cognitive Search v aplikacijo.

10. Zaprite okno za predogled in se vrnite v Power Apps Studio.

Element 3: Terensko razporejanje in opombe

Mateja sodeluje z Majem, pisarniškim administratorjem, pri oblikovanju vmesnika za del aplikacije v zvezi s terenskim razporejanjem in termini. Maj pripravi Excelov delovni zvezek z nekaj vzorčnimi podatki, ki jih lahko Mateja uporabo za izdelavo zaslona s termini. Delovni zvezek vsebuje tabelo z naslednjimi stolpci:

• ID (ID termina)
• ID stranke (enolični identifikator za stranko)
• Ime stranke
• Naslov stranke
• Podrobnosti o težavi (besedilni opis težave, ki jo ima stranka)
• Številka za stik
• Stanje
• Datum termina
• Ura sestanka
• Opombe (besedilni opis z vsemi opombami, ki jih je dodal serviser)
• Slika (fotografija aparata, bodisi v delovnem stanju po popravilu ali kot dodatna slika za serviserjeve opombe)

Opomba

Tako kot pri podatkih upravljanja terenske zaloge ta delovni zvezek predstavlja denormalizirani pogled podatkov. V obstoječem sistemu terminov so ti podatki shranjeni v ločenih tabelah, v katerih so podatki terminov in podatki stranke.

Mateja shrani to datoteko v svojem računu OneDrive pod imenom Appointments.xlsx. Spomni se, da je prej uporabila privzeto ime za tabelo v delovnem zvezku in je morala naslov spremeniti na različnih zaslonih, ki so bili ustvarjeni, zato tabelo v delovnem zvezku preimenuje na Termini.

Opomba

Ta delovni zvezek je na voljo v mapi Sredstva shrambe Git za ta vodnik.

Mateja želi izdelati razdelek aplikacije s termini neposredno iz Excelove datoteke. Odloči se, da bo delovala po podobnem pristopu, kot ga ima funkcionalnost upravljanja terenske zaloge, samo da bo tokrat serviser imel dovoljenje za ustvarjanje in urejanje terminov.

Mateja se odloči prvotno izdelati zaslone s termini kot ločeno aplikacijo. Tako lahko uporabi Power Apps Studio za samodejno ustvarjanje velikega dela aplikacije. Power Apps Studio trenutno ne omogoča ustvarjanja dodatnih zaslonov iz podatkovne povezave v obstoječi aplikaciji. Ko je Mateja ustvarila in preskusila zaslone, jih bo kopirala v aplikacijo za terensko zalogo in zbirko znanja.

Opomba

Drug pristop je, da doda tabelo Termini v Excelovo datoteko kot drugi vir podatkov za obstoječo aplikacijo, nato pa ročno izdela zaslone za termine. Mateja se je odločila za ustvarjanje novih zaslonov iz delovnega zvezka in kopiranje zaslonov; trenutno je bolj seznanjena s konceptoma kopiranja in lepljenja kot z ročno izdelavo zaslonov, čeprav se bo postopno naučila, kako ustvarjati zaslone povsem na novo, ko bo proces izdelave te aplikacije napredoval.

Ustvarjanje aplikacije s termini

1. V menijski vrstici Power Apps Studio izberite Datoteka.

   

2. V levem podoknu izberite Novo. Na glavni strani izberite polje OneDrive za podjetja – Postavitev telefona.

   

3. V podoknu Povezave izberite Appointments.xlsx.

   

4. V Excelovi datoteki izberite tabelo Termini in nato izberite Poveži.

   

5. Počakajte, da je aplikacija ustvarjena. Ko se prikaže nova aplikacija, bo vsebovala zaslon Prebrskaj, zaslon Podrobnosti in zaslon Uredi z uporabo privzete teme.

   

6. V podoknu Drevesni pogled v razdelku BrowseScreen1 pod možnostjo BrowseGallery1 izberite Image1, nato pa izberite Izbriši. Na zaslonu Prebrskaj bi morali biti navedeni samo termini, ne pa slike, povezane z njimi.

   

   Upoštevajte, da odstranjevanje kontrolnika Image1 povzroči več napak, ker se širina in lokacija kontrolnika Title1 sklicujeta na kontrolnik Slika. Te težave boste odpravili v naslednjem koraku.

7. V podoknu Drevesni pogled pod možnostjo BrowseGallery1 izberite Title1. Spremenite vrednost v lastnosti X na 16. Spremenite formulo v lastnosti Širina na Parent.TemplateWidth - 104. To bi moralo odpraviti napake za zaslon.

8. V podoknu Drevesni pogled pod možnostjo BrowseGallery1 izberite Body1. Ta kontrolnik trenutno prikazuje podrobnosti telefona stika za stranko. Spremenite vrednost v lastnosti Besedilo na ThisItem.'Customer Name' (vključite enojne narekovaje).

   

   Podrobnosti za ime zaslona Prebrskaj bodo zdaj prikazovale ime stranke.

9. V podoknu Drevesni pogled izberite BrowseGallery1. Z vnosno vrstico preglejte izraz v lastnosti Elementi. Kontrolnik poišče termine z uporabo datuma, časa in številke stika za termin. Spremenite to formulo, da išče po imenu stranke, namesto po številki stika:

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

   Upoštevajte, da so termini razvrščeni po datumu in nato času (prikazani prvi dve polji).

10. V podoknu Drevesni pogled izbrišite IconNewItem1. Samo osebje na mestu uporabe lahko rezervira nove termine za serviserje in tehnike. Upoštevajte, da to dejanje privede do napak v obrazcu, ker se širina in položaj drugih kontrolnikov v glavi sklicujeta na ikono, ki ste jo ravnokar odstranili.

11. V podoknu Drevesni pogled izberite LblAppName1. Spremenite formulo za lastnost Širina. na Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. V podoknu Drevesni pogled izberite IconRefresh1. Spremenite vrednost za lastnost X na Parent.Width - IconSortUpDown1.Width - Self.Width.

13. V podoknu Drevesni pogled izberite iconSortUpDown1. Spremenite vrednost za lastnost X na Parent.Width - Self.Width.

14. V podoknu Drevesni pogled izberite BrowseScreen1, nato pa izberite gumb s tremi pikami (...). V spustnem meniju, ki se prikaže, izberite Preimenuj in spremenite ime tega zaslona na BrowseAppointments.

    

15. Z isto tehniko spremenite ime kontrolnika BrowseGallery1 na BrowseAppointmentsGallery.

S tem je zaslon Prebrskaj dokončan.

Ustvarjanje zaslona s podrobnostmi

Zdaj lahko pozornost preusmerite na zaslon Podrobnosti.

1. V podoknu Drevesni pogled se pomaknite navzdol in izberite DetailScreen1. Vidite lahko, da so podrobnosti predstavljene v abecednem vrstnem redu po imenih polj, nekatere koristne informacije – kot je polje Opombe – pa sploh niso prikazane.

   

2. V podoknu Drevesni pogled izberite DetailForm1. V desnem podoknu na zavihku Lastnosti izberite Urejanje polj poleg možnosti Polja. V srednjem podoknu izberite vsako od naslednjih polj in nato izberite Izbriši:

   • Datum termina
   • Ura sestanka
   • ID stranke
   • ID

3. Izberite + Dodaj polje, nato pa dodajte naslednja polja:

   • Beležke
   • Podrobnosti težave
   • Stanje

   

4. Povlecite vsako polje, tako da so prikazana v naslednjem vrstnem redu, od zgoraj navzdol:

   • Ime stranke
   • Naslov stranke
   • Številka stika
   • Podrobnosti težave
   • Stanje
   • Beležke
   • Image

5. V podoknu Drevesni pogled izberite Notes_DataCard1. Spremenite lastnost Višina na 320.

   

6. V podoknu Drevesni pogled izbrišite IconDelete1. Serviserjem ne bi smelo biti omogočeno, da odstranjujejo termine iz sistema.

7. Izberite LblAppName2, nato pa spremenite lastnost Širina na Parent.Width - Self.X - IconEdit1.Width.

8. S tehniko, opisano prej, spremenite ime možnosti DetailsScreen1 na AppointmentDetails.

Urejanje zaslona za urejanje

Končni zaslon, ki ga bomo pregledali, je za zdaj zaslon Uredi.

1. V podoknu Drevesni pogled izberite EditScreen1.

2. V podoknu Drevesni pogled v razdelku EditScreen1 izberite EditForm1. V desnem podoknu na zavihku Lastnosti izberite Urejanje polj poleg možnosti Polja.

3. Odstranite naslednja polja:

   • Naslov stranke
   • ID
   • ID stranke
   • Datum termina
   • Ura sestanka

4. Dodajte naslednja polja:

   • Podrobnosti težave
   • Stanje
   • Beležke

5. Povlecite vsako polje, tako da so prikazana v naslednjem vrstnem redu, od zgoraj navzdol:

   • Ime stika
   • Številka stranke
   • Podrobnosti težave
   • Stanje
   • Beležke
   • Image

6. Izberite polje Ime stranke in ga razširite za ogled lastnosti. Spremenite Vrsta kontrolnika na Prikaz besedila. S to spremembo se nastavi, da je kontrolnik samo za branje; koristno je videti ime stranke na zaslonu Uredi, serviser pa ne bi smel imeti možnosti, da ga spremeni.

   

7. Izberite polje Številka stika in ga razširite za ogled lastnosti. Spremenite Vrsta kontrolnika na Prikaz besedila. To polje bi prav tako moralo biti samo za branje.

8. Izberite polje Opombe, ga razširite in spremenite možnost Vrsta kontrolnika na Urejanje več vrstic besedila. Ta nastavitev omogoča serviserju, da doda podrobne opombe, ki se lahko raztezajo čez več vrstic.

9. Izberite polje Stanje, ga razširite in spremenite možnost Vrsta kontrolnika na Dovoljene vrednosti.

10. V podoknu Drevesni pogled izberite Status_DataCard5. V desnem podoknu na zavihku Lastnosti izberite Odkleni za spremembo lastnosti. Pomaknite se navzdol do lastnosti AllowedValues in spremenite besedilo na ["Popravljeno", "Deli naročeni", "Nerazrešeno"] (vključite oglate oklepaje). Terenski serviser lahko samo nastavi Stanje na eno od teh opredeljenih vrednosti.

    

11. V podoknu Drevesni pogled preimenujte EditScreen1 na EditAppointment.

Zdaj lahko shranite in preskusite aplikacijo.

1. Izberite možnost Datoteka > Shrani kot.

2. Pod možnostjo Shrani kot izberite Oblak, vnesite ime VanArsdelAppointments, nato pa izberite Shrani.

3. Izberite puščico nazaj v orodni vrstici Power Apps Studio za vrnitev na zaslon Osnovno.

4. Izberite F5 za predogled aplikacije. Na strani Termini izberite ikono > poleg katerega koli termina. Prikazati bi se moral zaslon Podrobnosti za termin. V glavi izberite Uredi za posodobitev termina. Preverite naslednje:

   • Polji imena stranke in številke stika sta samo za branje.
   • Polje stanja je omejeno na vrednosti v spustnem seznamu.
   • Vnesete lahko opombe, ki se raztezajo čez več vrstic.
   • Lahko naložite slikovno datoteko v slikovno polje.

   Opomba

   Izboljšava, ki jo boste dodali pozneje, bo omogočala fotografiranje s telefonom iz aplikacije, in dodajanje fotografije v slikovno polje.

   

Združevanje zaslonov v eno aplikacijo

Mateja je izdelala dve aplikaciji, toda želi ju združiti v eno aplikacijo. To stori tako, da kopira zaslone za aplikacijo s termini v aplikacijo za upravljanje terenske zaloge in zbirko znanja po naslednjih navodilih:

1. Odprite novo okno brskalnika in se vpišite v Power Apps Studio s podrobnostmi računa.

2. V levem podoknu izberite Aplikacije, izberite VanArsdelApp, nato pa izberite Uredi.

   

3. V orodni vrstici izberite Nov zaslon, nato pa izberite Prazno. S tem dejanjem dodate nov zaslon v aplikacijo, v katero želite kopirati kontrolnike za zaslon Prebrskaj za aplikacijo VanArsdelAppointments.

   

4. Nov zaslon bo imenovan Screen2. V podoknu Drevesni pogled ga preimenujte na BrowseAppointments.

5. Še dvakrat ponovite prejšnji korak, da dodate še dva prazna zaslona (Screen3 in Screen4).

6. Preimenujte Screen3 na AppointmentDetails in Screen4 na EditAppointment.

7. V levi orodni vrstici storitve Power Apps Studio izberite ikono Podatki. V podoknu Podatki izberite Dodaj podatke. Na spustnem seznamu Izbira vira podatkov v polje Iskanje vnesite OneDrive, nato pa izberite OneDrive za podjetja.

   

8. Izberite Excelovo datoteko Appointments.xlsx, izberite tabelo Termini in nato izberite Poveži.

9. Preklopite na okno brskalnika, ki prikazuje aplikacijo VanArsdelAppointments.

10. V orodni vrstici izberite možnost Tema (morda boste morali razširiti orodno vrstico, da prikažete več elementov) in nato izberite temo Gozd. To je ista tema, ki jo uporablja aplikacija VanArsdel.

11. V levi orodni vrstici izberite ikono Drevesni pogled, izberite zaslon BrowseAppointments in nato izberite Ctrl + A. S tem dejanjem izberete vse kontrolnike na zaslonu.

12. Izberite Ctrl + C, da kopirate te kontrolnike v odložišče.

13. Vrnite se na okno brskalnika, ki prikazuje aplikacijo VanArsdelApp.

14. V levi orodni vrstici izberite ikono Drevesni pogled in nato izberite zaslon BrowseAppointments.

15. Izberite Ctrl + V, da prilepite kontrolnike na zaslon.

    Opomba

    Včasih je glava zaslona prikazana nekoliko prenizko. Da odpravite to težavo, izberite kontrolnike IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 in RectQuickActionBar1_1 v podoknu Drevesni pogled (pridržite tipko Shift med klikanjem, da izberete več kontrolnikov), nato pa jih z miško ali puščičnimi tipkami premaknite navzgor v podoknu pogleda načrta.

16. Preklopite nazaj na okno brskalnika, ki prikazuje aplikacijo VanArsdelAppointments, nato pa izberite in kopirajte kontrolnike na zaslonu AppointmentDetails v odložišče (Ctrl + A, nato pa Ctrl + C).

17. Vrnite se na okno brskalnika, ki prikazuje aplikacijo VanArsdelApp in izberite zaslon AppointmentDetails ter prilepite kontrolnike (Ctrl + V). Prilagodite položaj kontrolnikov v glavi zaslona, če je potrebno.

    Opomba

    V glavi zaslona AppointmentDetails boste videli sporočeno napako. Do te napake pride, ker se zaslon sklicuje na kontrolnike na zaslonu EditAppointment, ki še niso kopirani. Naslednji koraki bi morali odpraviti to napako.

18. Preklopite nazaj na okno brskalnika, ki prikazuje aplikacijo VanArsdelAppointments, nato pa izberite in kopirajte kontrolnike na zaslonu EditAppointment v odložišče.

19. Vrnite se na okno brskalnika, ki prikazuje aplikacijo VanArsdelApp in izberite zaslon EditAppointment ter prilepite kontrolnike. Kot prej, po potrebi premaknite kontrolnike na zaslonu.

20. V podoknu Drevesni pogled izberite zaslon AppointmentDetails in preverite, da napake, ki je bila prej navedena, ni več.

21. V podoknu Drevesni pogled izberite zaslon BrowseScreen1. Preimenujte ta zaslon na BrowseParts.

22. Preimenujte zaslon DetailsScreen1 na PartDetails.

23. Preimenujte zaslon Screen1 na Zbirka znanja.

    Opomba

    Dobra praksa je, preimenovati zaslone, da odražajo svojo funkcijo, namesto da bi uporabili privzeta imena, ki jih ustvari Power Apps Studio, zlasti če aplikacija vsebuje več zaslonov. To lahko pozneje pomaga pri preprečevanju zmede, če aplikacijo spreminja drug razvijalec.

Dodajanje začetnega zaslona v aplikacijo

Zadnja faza je dodajanje zaslona Osnovno v aplikacijo. Zaslon Osnovno bo omogočal serviserju, da se premika med različnimi deli aplikacije (upravljanje zaloge, zbirka znanja in termini).

1. V aplikaciji VanArsdelApp v orodni vrstici izberite Nov zaslon, nato pa izberite Prazno.

2. V podoknu Drevesni pogled preimenujte Screen2 na Osnovno.

3. V orodni vrstici izberite Vstavi. Na seznamu kontrolnikov razširite Predstavnost, nato pa izberite možnost Slika. Kontrolnik bo dodan na zaslon.

   

4. Nastavite položaj X kontrolnika na 16, položaj Y pa na 22. Spremenite možnost Širina na 605, možnost Višina pa na 127. Spremenite Položaj slike na Zapolni.

   

5. Še vedno na zavihku Lastnosti v spustnem seznamu Slika izberite + Dodaj slikovno datoteko, nato pa naložite sliko VanArsdelLogo.png v kontrolnik.

   Opomba

   Slikovna datoteka je na voljo v mapi Sredstva v shrambi Git za ta vodnik.

   

6. S seznama kontrolnikov dodajte štiri kontrolnike Oznaka besedila v obrazec in jih umestite tako, da so naloženi pod logotipom podjetja VanArsdel.

   

7. Izberite najvišji kontrolnik Oznaka besedila. V desnem podoknu na zavihku Lastnosti nastavite lastnost Besedilo na Naslednji termin. Nastavite Velikost pisave na 30 in uporabite izbirnik barv, da nastavite barvo pisave na zeleno (da se ujema z logotipom).

   

8. Izberite drugi kontrolnik Oznaka besedila. Spremenite vrednost lastnosti Besedilo na First(Appointments).'Customer Name' (vključite narekovaje). Ta formula pridobi ime stranke iz prve vrstice v tabeli s termini.

   

   Opomba

   Trenutno ta formula deluje samo kot označba mesta. Oznako boste pozneje prilagodili, da pridobite naslednji termin za serviserja, namesto da bi se vedno prikazoval prvi.

9. Izberite tretjega Besedilna oznaka nadzor in nastavite Besedilo lastnine do Prvi (sestanki).' Datum imenovanja'.

10. Nastavite Besedilo lastnost četrte kontrole oznake za Prvi (sestanki).' Čas sestanka'. Nastavite lastnost Velikost pisave na 30.

11. S seznama kontrolnikov dodajte kontrolnik Pravokotnik. Nastavite naslednje lastnosti za ta kontrolnik:

    • Način prikaza: Pogled
    • X: 0
    • Y: 632
    • Širina: 635
    • Višina: 1

    Ta kontrolnik deluje kot vidno ločilo po sredini zaslona.

12. Na zaslon dodajte tri kontrolnike Gumb, urejene navpično in enakomerno razporejene pod ločilo. Nastavite lastnost Besedilo za zgornji gumb na Termini, lastnost Besedilo za srednji gumb na Deli in lastnost Besedilo za spodnji gumb na Zbirka znanja.

    

13. Izberite gumb Termini. Spremenite izraz v dejanju OnSelect na formulo Navigate(BrowseAppointments, ScreenTransition.Fade). S tem dejanjem preklopite prikaz na zaslon s termini, ko uporabnik izbere gumb.

    

14. Nastavite dejanje OnSelect za gumb Deli na Navigate(BrowseParts, ScreenTransition.Fade).

15. Nastavite dejanje OnSelect za gumb Zbirka znanja na Navigate(Knowledgebase, ScreenTransition.Fade).

Poleg pomika z zaslona Osnovno na druge zaslone v sistemu zasloni Termini, Deli in Zbirka znanja potrebujejo način, kako omogočiti uporabniku vrnitev na zaslon Osnovno. Mateja se odloči dodati gumbe za pomik nazaj na te zaslone.

1. V podoknu Drevesni pogled izberite zaslon BrowseParts.

2. Izberite kontrolnik RectQuickActionBar1, da je v fokusu.

3. Izberite meni Vstavi in izberite Dodaj ikono. Premaknite ikono na levo od kontrolnika RectQuickActionBar1. Upoštevajte, da bo ikona zakrila del oznake Prebrskaj dele.

   

4. V meniju Drevesni pogled spremenite ime kontrolnika nove ikone na IconReturn1.

5. Spremenite formulo v dejanju OnSelect na izraz Back(ScreenTransition.Fade). Funkcija Nazaj pomakne uporabnika na prejšnji zaslon, ki ga je obiskal.

6. Na zavihku Lastnosti spremenite lastnost ikone na < Levo.

7. V glavi zaslona izberite oznako Prebrskaj dele. Spremenite lastnost X na IconReturn1.Width + 20. Oznaka Prebrskaj dele ne bi smela biti več delno zakrita.

   

8. Po postopku, opisanem v korakih od 16 do 22, dodajte ikono z imenom IconReturn2 v kontrolnik RectQuickActionBar3 na zaslonu Zbirka znanja.

9. Podobno dodajte ikono z imenom IconReturn3 v kontrolnik RectQuickActionBar1_1 na zaslonu BrowseAppointments.

10. V podoknu Drevesni pogled izberite predmet Aplikacija. Spremenite lastnost dejanja OnStart na izraz Navigate(Home, ScreenTransition.Fade). To dejanje zagotovi, da je zaslon Osnovno prikazan ob vsakem zagonu aplikacije:

    

    Opomba

    Če ne določite, kateri zaslon prikazati, ko se aplikacija zažene, bo uporabljen zaslon, ki se pojavi na vrhu podokna Drevesni pogled. Za premik zaslona na začetek seznama z desno tipko miške kliknite zaslon v podoknu Drevesni pogled in izberite Premik gor, dokler ni najviše.

Končno, lahko preskusite aplikacijo.

1. Izberite možnost Datoteka > Shrani. V polje Opombe različice vnesite Popolna različica s osnovnim zaslonom, nato pa izberite Shrani.

2. Izberite puščico nazaj za vrnitev na zaslon Osnovno in izberite F5 za zagon aplikacije.

3. Preverite, ali se prikaže zaslon Osnovno za aplikacijo.

4. Izberite možnost Termini. Prikazati bi se moral zaslon za termine.

5. Izberite puščico nazaj za vrnitev na zaslon Osnovno.

6. Izberite možnost Deli. Prikazati bi se moral brskalnik delov.

7. Izberite puščico nazaj za vrnitev na zaslon Osnovno.

8. Izberite Zbirka znanja. Prikazati bi se moral zaslon poizvedbe po zbirki znanja.

9. Izberite puščico nazaj za vrnitev na zaslon Osnovno.

10. Zaprite okno za predogled in se vrnite v Power Apps Studio.

Prototip aplikacije je zdaj končan.

Nazaj Naprej