Peatükk 3. Vähese koodiga prototüübi ehitamine

Märkus

2. peatükis viidatakse mobiilirakendusele, mida kasutavad tehnikud ja insenerid, ning töölauarakendusele, mida kasutavad kohapealsed töötajad. Järgmistes peatükkides keskendutakse rakendusega Power Apps loodud mobiilirakenduste kujundamisele, juurutamisele ja väljaandmisele. Töölauarakendused jäetakse lugejale harjutuseks.

Kiana on skeptiline madala koodiga lahenduste ja Power Apps. Kuid Kiana ja Maria otsustavad koos luua rakenduse, mis aitab kohapealsetel tehnikutel kontrollida inventari (ja vajadusel tellida osi), teha päringuid teadmistebaasist ja kontrollida oma järgmist kohtumist, kui nad on teeninduskõnede ajal kontorist väljas. Kiana ja Maria kavatsevad selle kogemuse abil uurida, kuidas Power Apps juhtelemente lisada ja valemeid kasutada.

Kuigi esialgse, vähese koodiga prototüübi loomine on tavaliselt kodaniku arendaja ülesanne, otsustab Kiana pöörata tähelepanu protsessile, et mõista, kuidas rakendus on üles ehitatud. Kiana vajab seda teavet, et aidata Marial integreerida rakendusse reaalsed andmeallikad, veebi API-d ja muud vajalikud teenused.

Punkt 1: objekti varude haldamine

Maria esialgne eesmärk on luua lõuendirakendus, mis kuvab osade loendi ja võimaldab kasutajal vaadata mis tahes detaile. Lõpuks peaks kasutajal olema võimalus tellida ka detail. See rakenduse esialgne versioon on aga lihtsalt prototüüp ja seda ei ühendata veel serveri poolega. Pärast juhtivalt välitehnikult Calebilt tagasiside saamist töötab Maria koos Kianaga lõuendirakenduse integreerimisel asutusesisene töötava inventarisüsteemiga.

Maria tunneb olemasolevat varude haldamise süsteemi väga hästi ja saab aru selles sisalduvast teabest. Maria alustab Exceli töövihiku loomisega, mis sisaldab tabeleid, mis sisaldavad prooviandmeid koos mõne näidisosa üksikasjadega. Tabeli väljad on ID, Nimi, KategooriaID, Hind, Ülevaade, ArvLaos ja Pilt (URL, mis viitab detaili kujutisele). Seda töövihikut saab kasutada lõuendirakenduse loomiseks ja testimiseks, tagamaks, et see kuvab nõutavad andmed õigesti. Maria salvestab selle töövihiku OneDrive kontole nimega BoilerParts.xlsx.

Märkus

Selle töövihiku koopia leidmiseks kaustast Assets käesoleva juhendi Giti repositooriumis.

Korduva koodiosa tööleht, kus kuvatakse osade loend, millel on veerud Id, Nimi, CategoryId, Hind, Ülevaade, NumberInStock ja Pilt.

Kui olete relatsioonilise andmebaasi kujundaja, märkate, et Exceli töövihik kuvab andmete denormaliseeritud vaate. Näiteks relatsioonilises andmebaasis oleks CategoryID suure tõenäosusega numbriline identifikaator, mis viitab eraldi tabelile, mis sisaldab kategooria üksikasju (sealhulgas nime).

Märkus

Pilt veeru URL-d on lihtsalt kohahoidjad. Lõppenud rakenduses asendatakse need URL-id tegelike pildifailide aadressidega.

Toimige Power Apps rakendusega rakenduse loomiseks järgmiselt.

  1. Logige sisse rakendusse Power Apps.

  2. Lehel Avakuva jaotise Andmetest alt valige Excel Online.

    Power Apps Studio avaleht.

  3. Valige lehel Ühendused suvand OneDrive for Business ja seejärel Loo.

    Uus OneDrive ühendus.

  4. Lehel OneDrive for Business valige fail BoilerParts.xlsx.

    Ühendage Exceli töölehega.

  5. Valige Exceli failis tabel (Maria lõi tabeli vaikenimega Table1) ja seejärel valige Ühenda.

    Ühendage Exceli tabeliga.

  6. Oodake, kuni Power Apps loob rakenduse.

    Looge rakendus.

  7. Kui rakendus on loodud, näete kuva Sirvi, kus kuvatakse osade tabeli igast reast väljad CategoryID, ID ja Pilt töövihikus.

    Sirvimisekraanil kuvatud osad.

  8. Praegu kuvatavad väljad pole eriti kasulikud, et aidata inseneril toodet valida. Valige ekraanil Sirvi kuvataval paanil esimesel andmereal silt Soojusvahetus. Valemiribal valige ripploendist atribuut Tekst. Määrake atribuudi väärtuseks ThisItem.Name. Iga rea ​​esimese välja tekst vahetub osa nime kuvamiseks.

    Märkus

    Järgmisel pildil on vormil algselt kuvatud silt Soojusvaheti muutunud toote nimeks 3,5 W/S soojusti.

    Muutke sildi juhtelemendi teksti.

  9. Korrake eelmist sammu siltide ID ja Pilt puhul. Muutke välja ID atribuut Tekst väärtuseks CategoryID ja välja Pilt atribuudi Tekst väärtuseks Ülevaade. Kuva Sirvi peaks nüüd välja nägema nagu all toodud joonis, mida objekti insener peab osade valimiseks tõenäolisemalt kasulikuks.

    Üksuste loend, mis näitab osa nime, kategooriat, milles see on, ja kirjeldav ülevaade.

  10. Kuva Sirvi otsingufunktsioonina kasutatakse vaikimisi välju, mis olid algselt valitud ekraani loomisel— sel juhul CategoryID, ID ja Pilt. Tulemused sorditakse CategoryID kaupa. Mõistlik on määrata see väljadele Nimi, CategoryID ja Ülevaade, kus tulemused on sorteeritud Nimi järgi. Valige paanil Puuvaade juhtelement BrowseGallery1. Valemiriba vasakul küljel asuvast rippmenüüst valige atribuut Üksused. Lohistage valemiriba alumine serv alla, nii et valem oleks täielikult nähtav. Valem sisaldab järgmist väljendit:

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

    sorteeri ja otsi väljad.

  11. Muutke avaldise Otsi viide väljale Nimi, CategoryID ja Ülevaade järgmise valemi abil:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    
  12. Vormi päises olevast pealkirjast pole abi ja vaiketeema ei ühti VanArsdeli ettevõtte väljanägemisega. Valige kuval Sirvi silt Tabel1 ja muutke ribal Valem sildi Sirvi osasid atribuudi Tekst väärtust (lisage topelt jutumärgid).

  13. Valige tööriistaribal Kujundus (võib-olla peate laiendama tööriistariba, et kuvada rohkem üksusi) ja valige siis kujundus Mets. Kuva Sirvi värvid ja stiil muutuvad kujundusega sobitamiseks.

    Kujunduse valimine.

Muutke üksikasjade ekraan kasulikumaks

Olete loonud põhirakenduse ja muutnud kuva Sirvi, et kuvada väljad, mida insener saab detaili tuvastamiseks kasutada. Rakendus sisaldab ka kuva Üksikasjad, mis näitab kogu teavet valitud detaili kohta. Sellel kuval olevaid välju ei kuvata praegu loogilises järjestuses, seega peaksite nende järjekorda muutma. Sellelt kuvalt saate kustutada ka välja ID, kuna see teave pole inseneri jaoks oluline.

  1. Paanil Puuvaade lohistage allapoole ja valige DetailScreen1. Sellel kuval kuvatakse üksikasjad selle osa kohta, mille kasutaja valib kuval Sirvi.

    Detaili üksikasjade kuva.

  2. Valige keskmise paani ekraani Üksikasjad päises silt Tabel1. Paremal paanil vahekaardil Omadused seadke atribuudi Tekst väärtuseks Detaili üksikasjad.

    Märkus

    Paljudel juhtudel saate valemiriba abil teha samu tulemusi kui paanil Omadused. Kuid mõned atribuudid, mis on saadaval ainult paani Omadused kaudu.

    Sirvimisosade kuva päise muutmine.

  3. Paanil Puuvaade jaotise DetailScreen1 valige DetailForm1. Paremal paanil vahekaardil Omadused valige suvandi Väljad juures väli Muuda välju. Valige ja lohistage keskmisel paanil väljad nii, et neid kuvatakse ülalt alla järgmises järjekorras:

    • Nimetus
    • CategoryID
    • Ülevaade
    • Hind
    • NumberInStock
    • Image
    • ID

    Korraldage üksikasjade ekraanil väljad.

  4. Valige väli ID, valige välja paremal küljel kuvatav ellips ja seejärel valige ilmuvast rippmenüüst Eemalda. See toiming eemaldab vormist välja ID.

    Eemaldage vormilt ID väli.

  5. Paanil Puuvaade jaotise DetailForm1 all valige CategoryID_DataCard1. See element on juhtelement DataCard, mis kuvab välja nime (mida nimetatakse võtmeks) ja selle väärtust.

    CategoryID andmekaardi juhtelement.

    Paremal paanil vahekaardil Täpsemalt valige suvandi Lukusta lahti atribuutide muutmiseks. Jaotises Andmed seadke välja DisplayName väärtuseks "Kategooria" (koos jutumärkidega).

    Märkus

    Sarnaselt vahekaardile Omadused on paljudel vahekaardi Täpsemalt omadustel juurdepääs ka valemiriba kaudu. Nende atribuutide määramiseks võite soovi korral kasutada valemiriba.

    Muutke CategoryID üksikasjade välja kuvatavat nime.

  6. Korrake eelmist sammu, et muuta NumberInStock_DataCard1 võtme väärtuseks "Arv laos" (koos jutumärkidega).

  7. Andmete valuuta väärtusena kuvamiseks peate kohandama välja Hind vormingut. Paanil Puuvaade jaotise DetailForm1, jaotise Hind_DataCard1 all valige DataCardValue7. See on väli, mis näitab välja Hind väärtust. Parempoolsel paani DataCardValue7 vahekaardil Täpsemalt seadke atribuudi Tekst väärtuseks Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Hinna vormindamine valuutana.

    Avaldis Parent.Default viitab andmeüksusele, mille vanemjuhtelement (DataCard) on seotud— veeruga Hind. Funktsioon Tekst vormindab selle väärtuse ümber, kasutades teise argumendina määratud vormingut. Selles näites on see kohalik valuuta kahe kümnendkohaga.

  8. Pildi andmekaardil peaks olema kujutatud osa pilt, mitte pildifaili URL. Paanil Puuvaade jaotise DetailForm1, jaotise Pilt_DataCard1 all valige DataCardValue3 ja valige selle juhtelemendi eemaldamiseks seejärel Kustuta.

  9. Valige Pilt_DataCard1. Vasakul paanil valige + Sisesta. Laiendage paanil Sisesta suvand Meedia ja valige seejärel Pilt.

    Asendage pildi URL pildiga.

  10. Naaske paanile Puuvaade ja kontrollige, kas juhtnupule Pilt_DataCard1 on lisatud tekstikontroll Image1.

    Veenduge, et pildijuhtimine on lisatud.

  11. Valige paanil Puuvaade Pilt_DataCard1. Parema paani vahekaardil Täpsemalt seadke Kõrgus väärtuseks 500, et pildi kuvamiseks oleks piisavalt ruumi.

    Määrake pildi andmekaardi kõrgus.

  12. Valige paanil Puuvaade Image1. Määrake järgmised atribuudid.

    • Pilt: Parent.Default
    • Pildi asend: ImagePosition.Fit
    • Laius: 550
    • Kõrgus: 550

    Märkus

    Kuvatav pilt on praegu tühi, kuna Exceli töövihiku URL on lihtsalt kohatäide. Kui seote rakenduse hilisemas peatükis veebiliidesega, saate selle probleemi lahendada ja tõelise URL-i tuua.

Rakendus sisaldab ka kuva Muuda, mis võimaldab kasutajal detaili teavet muuta. Insener ei peaks saama detaili üksikasju muuta, uusi detaile luua ega neid kataloogist kustutada.

  1. Valige paanil Puuvaade EditScreen1. Valige kolmikpunkt ja seejärel valige selle kuva eemaldamiseks Kustuta.

    Kustutage kuva Redigeerimine.

  2. Valige paanil Puuvaade DetailsScreen1. Pange tähele, et Power Apps Studio kuvab selle kuva tõrketeate. Tõrge ilmneb seetõttu, et DetailsScreen1 sisaldab avaldisi, mis viitavad kuvale EditScreen1, mida enam pole.

  3. Valige DetailsScreen1 päises pliiatsi (IconEdit1) ikoon. Selle juhtelemendi atribuut OnSelect sisaldab avaldist EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Kui valitud on ikoon Redigeeri, jookseb see avaldis ja proovib liikuda kuvale EditScreen1.

    Redigeerige OnSelect atribuuti.

  4. Paanil Puuvaade valige IconEdit1 ja seejärel valige Kustuta. Seda ikooni ei ole enam vaja..

  5. Valige IconDelete1 ja seejärel Kustuta. Seda ikooni kasutatakse praeguse osa kustutamiseks ja see pole ka vajalik.

    Eemaldage kustutamise ja muutmise ikoonid.

  6. Pange tähele, et Detaili üksikasjade tekst on ekraanipäisest kadunud ja selle asemel kuvab Power Apps Studio tõrketeate. See on juhtunud seetõttu, et teksti kuvava sildikontrolli laius arvutatakse. Valige paanil Puuvaade LblAppName2. Uurige atribuuti Laius. Selle atribuudi väärtus tuleneb avaldisest Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    LblAppName2 juhtelement kuvab laiuse tõrketeate.

  7. Muutke atribuudi Laius avaldis väärtuseks Parent.Width - Self.X. Tõrge peaks kaduma ja Detaili üksikasjad tekst peaks uuesti ilmuma ekraanipäisesse.

  8. Valige paanil Puuvaade BrowseScreen1. Sellel kuval kuvatakse ka tõrketeade. Tööriistariba ikoon + (IconNewItem1) võimaldab kasutajatel lisada uue detaili. Selle ikooni atribuut OnSelect viitab kuvale EditScreen1.

    Uue üksuse ikoon, mis näitab tõrketeadet.

  9. Valige IconNewItem1 ja seejärel Kustuta. Nagu varemgi, kaob ekraani päises olev tekst ja samal põhjusel kuvatakse veateade.

  10. Paanil Puuvaade jaotise BrowseScreen1 valige LblAppName1. Muutke atribuudi Laius avaldist eemaldades IconNewItem1.Width viite. Uus avaldis peaks olema Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Sildi laiuse muutmine.

  11. Päises on endiselt probleem. Kuigi Sirvi detaile tekst on uuesti ilmunud, kuvatakse tõrge ning värskendus- ja sortimisikoonid on vales kohas. Valige paanil Puuvaade IconSortUpDown1. Leidke selle juhtelemendi jaoks atribuut X. See atribuut määrab päise horisontaalse asukoha. Antud juhul arvutatakse see IconNewItem1 juhtelemendi laiuse alusel.

    Sortimisikooni veateade.

  12. Muutke atribuudi X avaldis väärtuseks Parent.Width - Self.Width.

  13. Valige paanil Puuvaade IconRefresh1. Muutke atribuudi X avaldis väärtuseks Parent.Width - IconSortUpDown1.Width - Self.Width. Vead peaksid kõik kaduma.

Salvestage ja testige rakendust

Nüüd saate rakenduse salvestada ja testida.

  1. Valige Fail > Salvesta, kui.

  2. Salvesta, kui alt valige pilv, sisestage VanArsdelApp ja valige Salvesta.

    Salvestage rakendus.

  3. Avakuva kuvale naasmiseks valige taganool.

    Tagasi avakuvale liikumine.

  4. Rakenduse eelvaateks vajutage F5. Valige lehel Sirvi detaile mis tahes osast paremal asuv õige nurksulg (>). Kuvatakse detailide kuva Üksikasjad.

    Rakenduse esmane käitamine.

  5. Kuvale Sirvi naasmiseks valige Üksikasjad ekraani päisest vasak nurksulg (<).

  6. Kuval Sirvi detaile sisestage tekst Otsingukasti. Tippimise ajal filtreeritakse üksused nii, et kuvatakse ainult need, millel on väljadel Nimi, CategoryID või Ülevaade.

    Otsige detailide sirvimise ekraanil.

  7. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

Üksis 2: objekti teadmiste alus

Teadmistebaasile juurdepääsuks kujutlevad Maria ja Caleb (tehnik) ette lihtsat liidest, kus kasutaja sisestab otsingutermini ja rakendus kuvab kõik terminid mainivad teadmistebaasi artiklid. Maria teab, et see protsess hõlmab Azure'i kognitiivset otsingut, kuid ei tunne vajadust—ega tahtmist—selle toimimisest aru saada. Seetõttu otsustab Maria lihtsalt pakkuda põhilist kasutajaliidest ja töötada hiljem Kianaga, et lisada tegelik funktsionaalsus.

Maria otsustab luua uue kuva, mis põhineb mallil List, mis on saadaval rakenduses Power Apps Studio.

  1. Valige Power Apps Studio Avakuva ekraani tööriistaribal, valige Uus kuva ja seejärel valige List.

    Listimall.

  2. Valige ekraani päisest silt, mis teksti [Pealkiri] kuvab. Seadke atribuudi Teksti väärtuseks "Päring" (koos jutumärkidega).

    Muutke päringuekraani päise teksti.

  3. Kuvapäises valige plussmärk (+) ja valige Kustuta. + ikooni eesmärk on võimaldada kasutajal loendisse rohkem üksusi lisada. Teadmistebaas töötab ainult päringutega, seega pole seda funktsiooni vaja.

    Eemaldage + ikoon.

    Pange tähele, et selle ikooni eemaldamine põhjustab päises vea, mis tuleneb teiste üksuste asukoha ja laiuste arvutamise viisist. Nägite seda varem koos varude haldamise ekraaniga ja lahendus on sama, nagu on kirjeldatud järgmistes toimingutes.

  4. Paanil Puuvaade lohistage allapoole jaotiseni Screen1 ja valige LblAppName3. Muutke atribuudi Laius väärtuseks valem Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Muutke päringuekraani päise laiust.

  5. Valige paanil Puuvaade IconSortUpDown2. Seadke atribuudi X väärtuseks valem Parent.Width - IconSortUpDown2.Width.

  6. Valige paanil Puuvaade IconRefresh2. Seadke atribuudi X väärtuseks Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. See peaks lahendama kõik kuvaga seotud vead.

  7. Valige Fail > Salvesta.

  8. Sisestage väljale Versiooni märkus tekst Lisatud teabebaasi kasutajaliides ja valige seejärel Salvesta.

  9. Naaske kuvale Avakuva ja valige F5 uue ekraani eelvaate kuvamiseks. See peaks välja nägema nagu alltoodud joonis.

    Päringuekraan töötab.

    Pange tähele, et kui valite ükskõik millise võltskirje kõrval ikooni >, ei tööta üksikasjade funktsioon praegu. Selle lahendate hiljem, kui integreerite rakendusse Azure'i kognitiivse otsingu.

  10. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

Üksus 3: objekti planeerimine ja märkused

Maria töötab koos kontori administraatori Malikuga, et kujundada rakenduse objekti planeerimise ja kohtumiste osa liides. Malik annab Exceli töövihiku koos mõne näidisandmega, mida Maria saab kasutada kohtumiste kuva koostamiseks. Töövihik sisaldab järgmiste veergudega tabelit:

  • ID (kohtumise ID)
  • Kliendi ID (kliendi kordumatu ID)
  • Kliendi nimi
  • Kliendi aadress
  • Probleemi üksikasjad (kliendi kogetud probleemi tekstikirjeldus)
  • Kontakti number
  • Olek
  • Kohtumise kuupäev
  • Kohtumise aeg
  • Märkused (tekstikirjeldus koos inseneri lisatud märkustega)
  • Pilt (seadme foto, kas pärast remonti või inseneri märkmete lisapildina)

Kohtumiste tööraamat.

Märkus

Sarnaselt objekti varude halduse andmetega esitatakse selles töövihikus andmete denormaliseeritud vaade. Olemasolevas kohtumiste süsteemis on andmed salvestatud eraldi tabelitesse, kuhu on salvestatud ka kohtumiste ja klientide andmed.

Maria salvestab selle faili OneDrive kontole nimega Kohtumised.xlsx. Pidades meeles, et varem kasutati töövihikus tabeli vaikenime ja pealkirja tuli erinevatel loodud ekraanidel muuta, nimetab Maria töövihiku tabeli ümber kohtumisteks.

Märkus

Selle töövihiku leiab ka kaustast Varad käesoleva juhendi Giti repositooriumis.

Maria soovib rakenduse kohtumiste jaotise ehitada otse Exceli failist. Maria otsustab järgida sarnast lähenemist nagu välivarude haldamise funktsionaalsus, välja arvatud see, et seekord lubatakse inseneril kohtumisi luua ja redigeerida.

Maria otsustab kohtumiste ekraanid esialgu eraldi rakendusena ehitada. Nii saab Maria kasutada Power Apps Studio suure osa rakenduse automaatseks genereerimiseks. Power Apps Studio ei luba praegu olemasolevas rakenduses andmesideühendusest täiendavaid kuvasid genereerida. Pärast ekraanide loomist ja testimist kopeerib Maria need väljade inventuuri ja teadmistebaasi rakendusse.

Märkus

Alternatiivne lähenemisviis on lisada Exceli faili tabel Kohtumised teise andmeallikana olemasolevale rakendusele ja seejärel käsitsi luua kohtumiste kuvad. Maria otsustas töövihikust uued ekraanid genereerida ja ekraanid kopeerida. Praegu tunneb Maria kopeerimise ja kleepimise kontseptsioone paremini kui ekraanide käsitsi ehitamist ning õpib selle rakenduse loomise edenedes järk-järgult ekraane nullist looma.

Kohtumiste rakenduse loomiseks

  1. Klõpsake Power Apps Studio-i menüüs suvandit Fail.

    Failimenüü.

  2. Vasakul paanil valige Uus. Peapaanil valige kast OneDrive for Business - telefoni vaade.

    Looge uus rakendus.

  3. Paanil Ühendused valige Appointments.xlsx.

    Uus rakendus kohtumiste töövihikust.

  4. Valige Exceli failis tabel Kohtumised ja seejärel valige Ühenda.

    Valige kohtumiste tabel.

  5. Oodake, kuni rakendus on genereeritud. Kui uus rakendus ilmub, sisaldab see vaiketeemat kasutades kuvasid Sirvi, Üksikasjad ja Redigeeri.

    Genereeritud kohtumiste rakendus.

  6. Paanil Puuvaade jaotise BrowseScreen1, jaotise BrowseGallery1 valige Image1 ja valige seejärel Kustuta. Sirvi kuval peaksid olema ainult kohtumised, mitte nendega seotud pildid.

    Pildi juhtelemendi kustutamine.

    Pange tähele, et juhtelemendi Image1 eemaldamine põhjustab kuval mitu viga, kuna juhtnupu Title1 laiused ja asukoht viitavad mõlemad juhtelemendile Pilt. Need probleemid saate lahendada järgmises etapis.

  7. Paanil Puuvaade jaotise BrowseGallery1 valige Title1. Seadke välja X väärtus väärtuseks 16. Seadke atribuudi Laius valemi väärtuseks Parent.TemplateWidth - 104. See peaks lahendama kuvaga seotud vead.

  8. Paanil Puuvaade jaotise BrowseGallery1 valige Body1. See juhtnupp kuvab praegu kliendi kontakttelefoni üksikasju. Seadke atribuudi Teksti väärtuseks ThisItem.'Customer Name' (koos ühekordsete jutumärkidega).

    Muutke juhtnupp Body1 kliendi nimeks.

    Sirvi kuva nime üksikasjad kuvavad nüüd kliendi nime.

  9. Valige paanil Puuvaade BrowseGallery1. Uurige valemiriba abil avaldist atribuudis Üksused. Juhtnupp otsib kohtumisi kohtumise kuupäeva, kellaaja ja kontaktnumbri abil. Muutke järgmist valemit, et otsida kontakti numbri asemel kliendi nime:

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

    Pange tähele, et kohtumised on järjestatud kuupäeva ja seejärel kellaaja järgi (kuvatakse kaks esimest välja).

  10. Paanil Puuvaade kustutage IconNewItem1. Ainult kohapealsed töötajad saavad broneerida uusi kohtumisi inseneride ja tehnikutega. Pange tähele, et selle toimingu tulemuseks on vormis tõrkeid, kuna muude päises olevate juhtelementide laius ja asukoht viitavad just eemaldatud ikoonile.

  11. Valige paanil Puuvaade LblAppName1. Seadke atribuudi Laius valemi väärtuseks Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. Valige paanil Puuvaade IconRefresh1. Seadke atribuudi X väärtuseks Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. Valige paanil Puuvaade IconSortUpDown1. Seadke atribuudi X väärtuseks Parent.Width - Self.Width.

  14. Valige paanil Puuvaade BrowseScreen1 ja seejärel ellipsinupp (...). Ilmuvas rippmenüüs valige Muuda nime ja muutke ekraani nimeks BrowseAppointments.

    Nimetage sirvimiskuva ringi.

  15. Sama tehnikat kasutades muutke juhtelemendi BrowseGallery1 nimeks BrowseAppointmentsGallery.

See lõpetab kuva Sirvi.

Üksikasjade kuva loomiseks

Nüüd saate tähelepanu juhtida kuvale Üksikasjad.

  1. Paanil Puuvaade lohistage allapoole jaotiseni DetailsScreen1. Näete, et üksikasjad esitatakse tähestikulises järjekorras väljade nimede kaupa ja mõningaid kasulikke informatsioonikilde—nagu näiteks seda, et Märkused välja—ei kuvatagi.

    Kohtumise üksikasjade kuva paigutus.

  2. Valige paanil Puuvaade DetailForm1. Paremal paanil vahekaardil Omadused valige suvandi Väljad juures väli Muuda välju. Valige keskmisel paanil kõik järgmised väljad ja seejärel valige Kustuta:

    • Kohtumise kuupäev
    • Kohtumise aeg
    • Kliendi ID
    • ID
  3. Valige + Lisa väli ja lisage järgmised väljad:

    • Märkused
    • Probleemi üksikasjad
    • Olek

    Lisage üksikasjade kuvale väljad.

  4. Lohistage iga väli nii, et neid kuvatakse ülalt alla järgmises järjekorras:

    • Kliendi nimi
    • Kliendi aadress
    • Kontakti number
    • Probleemi üksikasjad
    • Olek
    • Märkused
    • Image
  5. Valige paanil Puuvaade Märkused_DataCard1. Seadke atribuudi Kõrgus väärtuseks 320.

    Märkuste välja suuruse muutmine.

  6. Paanil Puuvaade kustutage IconDelete1. Insenerid ei peaks saama kohtumisi süsteemist eemaldada.

  7. Valige LblAppName2 ja seadke atribuudi Laius väärtuseks Parent.Width - Self.X - IconEdit1.Width.

  8. Eelnevalt kirjeldatud tehnikat kasutades muutke DetailsScreen1 väärtuseks AppointmentDetails.

Redigeerimiskuva redigeerimine

Lõplik kuva, mida vaadata on hetkel kuva Redigeeri.

  1. Valige paanil Puuvaade EditScreen1.

  2. Paanil Puuvaade jaotises EditScreen1 valige EditForm1. Paremal paanil vahekaardil Omadused valige suvandi Väljad juures väli Muuda välju.

  3. Eemaldage järgmised väljad:

    • Kliendi aadress
    • ID
    • Kliendi ID
    • Kohtumise kuupäev
    • Kohtumise aeg
  4. Lisage järgmised väljad:

    • Probleemi üksikasjad
    • Olek
    • Märkused
  5. Lohistage iga väli nii, et neid kuvatakse ülalt alla järgmises järjekorras:

    • Kontakti nimi
    • Kliendinumber
    • Probleemi üksikasjad
    • Olek
    • Märkused
    • Image
  6. Valige väli Kliendi nimi ja laiendage seda atribuutide vaatamiseks. Muutke Juhtelemendi tüüp väärtuseks Kuva tekst. See muudatus muudab juhtelemendi kirjutuskaitstuks. Kasulik on näha kliendi nime kuval Redigeeri, kuid insener ei tohiks seda muuta.

    Pange kliendi nimi kirjutuskaitstavaks.

  7. Valige väli Kontaktnumber ja laiendage seda atribuutide vaatamiseks. Muutke Juhtelemendi tüüp väärtuseks Kuva tekst. See väli peaks olema kirjutuskaitstud.

  8. Valige väli Märkused, laiendage seda ja seadke Juhtelemendi tüüp väärtuseks Muuda mitmerealist teksti. See seade võimaldab inseneril lisada üksikasjalikke märkmeid, mis võivad hõlmata mitut rida.

  9. Valige väli Staatus, laiendage seda ja seadke Juhtelemendi tüüp väärtuseks Lubatud väärtused.

  10. Valige paanil Puuvaade Staatus_DataCard5. Paremal paanil vahekaardil Atribuudid valige suvandi Lukusta lahti atribuutide muutmiseks. Kerige alla atribuudini AllowedValues ja muutke teksti väärtuseks ["Tellimus olemas", "Detailid tellitud", "Lahendamata"] (nurksulgudega). Valdkonna insener saab seada Staatus ainult ühele neist määratletud väärtustest.

    Määrake lubatud staatuse väärtused.

  11. Nimetage paanil Puuvaade EditScreen1 ümber EditAppointment.

Saate nüüd rakenduse salvestada ja testida.

  1. Valige Fail > Salvesta, kui.

  2. Salvesta, kui alt valige pilv, sisestage VanArsdelApppointments ja valige Salvesta.

  3. Avakuva kuvale naasmiseks valige Power Apps Studio tööriistaribal taganool.

  4. Rakenduse eelvaateks vajutage F5. Valige lehel Kohtumised mis tahes kohtumise kõrval ikoon >. Kuvatakse kohtumiste kuva Üksikasjad. Kohtumise värskendamiseks valige päises Redigeeri. Kontrollige järgmist.

    • Kliendi nime ja kontakti numbri väljad on kirjutuskaitstud.
    • Olekuväli on piiratud rippmenüü loendis olevate väärtustega.
    • Võite sisestada märkmeid, mis hõlmavad mitut rida.
    • Pildiväljale saate üles laadida pildifaili.

    Märkus

    Hiljem lisatav täiustus võimaldab teil teha rakendusega oma telefoniga pilti ja lisada selle pildiväljale.

    Kohtumiste rakendus käib.

Kuvade ühendamine üheks rakenduseks

Maria on loonud kaks rakendust, kuid soovib need ühendada üheks rakenduseks. Selleks kopeerib Maria kohtumiste rakenduse ekraanid väljavarude halduse ja teabebaasi rakendusse järgmiselt.

  1. Avage uus brauseriaken ja logige oma konto üksikasjadega sisse rakendusse Power Apps Studio.

  2. Vasakul paanil valige Rakendused, valige VanArdselApp ja seejärel valige Redigeeri.

    Avage VanArsdel rakendus.

  3. Valige tööriistaribal Uus kuva ja seejärel valige Tühi. See toiming lisab rakendusele uue ekraani, kuhu kopeerite rakenduse VanArsdelAppointments kuva Sirvi juhtelemendid.

    Lisa tühi kuva.

  4. Uue kuva nimeks on Screen2. Nimetage paanil Puuvaade see ümber BrowseAppointments.

  5. Korrake eelmist sammu veel kaks korda, et lisada veel kaks tühja kuva (Screen3 ja Screen4).

  6. NimetageScreen3 AppointmentDetails ja nimetage Screen4 ümber EditAppointment.

  7. Valige rakenduse Power Apps Studio vasakul tööriistaribal ikoon Andmed. Valige paanil Andmed käsk Lisa andmed. Sisestage rippmenüüst Valige andmeallikas väljale Search väljale OneDrive ja valige seejärel OneDrive for Business.

    Valige andmete allikas.

  8. Valige Exceli failis Appointments.xlsx tabel Kohtumised ja seejärel valige Ühenda.

  9. Avage brauseriaken, kus kuvatakse rakendus VanArsdelAppointments.

  10. Valige tööriistaribal Kujundus (võib-olla peate laiendama tööriistariba, et kuvada rohkem üksusi) ja valige siis kujundus Mets. See on sama teema, mida kasutab rakendus VanArsdel.

  11. Valige vasakul tööriistaribal ikoon Puuvaade, valige ekraan BrowseAppointments ja seejärel valige Ctrl+A. See toiming valib kõik kuval olevad juhtnupud.

  12. Nende juhtnuppude lõikelauale kopeerimiseks valige Ctrl+C.

  13. Avage brauseriaken taas, kus kuvatakse rakendus VanArsdelApp.

  14. Valige vasakul tööriistaribal ikoon Puuvaade, ja seejärel valige kuva BrowseAppointments.

  15. Juhtelementide kuvale kleepimiseks valige Ctrl+V.

    Märkus

    Mõnikord kuvatakse kuva päis veidi liiga madalal. Selle probleemi lahendamiseks valige paani Puuvaates juhtelemendid IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1, and RectQuickActionBar1_1 (hoidke all klahvi Shift, klõpsates samal ajal mitme juhtelemendi valimiseks korraga) ja seejärel kasutage hiire või nooleklahvide abil neid kujundusvaate paanil ülespoole.

  16. Lülitage tagasi brauseriaknale, kus kuvatakse rakendus VanArsdelAppointments, seejärel valige ja kopeerige kuval AppointmentDetails olevad juhtnupud lõikelauale (Ctrl+A, millele järgneb Ctrl+C).

  17. Naasege brauseriaknale, kus kuvatakse rakendus VanArsdelApp, seejärel valige kuva AppointmentDetails ja kleepige juhtnupud (Ctrl+V). Vajadusel reguleerige juhtnuppude asukohta ekraani päises.

    Märkus

    Kuva AppointmentDetails päises kuvatakse tõrge. See tõrge ilmneb seetõttu, et ekraanil kuvatakse EditAppointment juhtelemendid, mida pole veel kopeeritud. Järgmised sammud peaksid selle vea lahendama.

  18. Lülitage tagasi brauseriaknale, kus kuvatakse rakendus VanArsdelAppointments, seejärel valige ja kopeerige kuval EditAppointment olevad juhtnupud lõikelauale.

  19. Naasege brauseriaknale, kus kuvatakse rakendus VanArsdelApp, seejärel valige kuva EditAppointment ja kleepige juhtnupud. Jällegi, vajadusel reguleerige juhtnuppude asukohta ekraani päises.

  20. Valige paanil Puuvaade ekraan AppointmentDetails ja veenduge, et varem näidatud viga on nüüd kadunud.

  21. Valige paanil Puuvaade kuva BrowseScreen1. Nimetage see kuva ümber BrowseParts.

  22. Nimeta kuva DetailsScreen1 ümber PartDetails.

  23. Nimeta kuva Screen1 ümber Teadmistebaasiks.

    Märkus

    Hea tava on kuvade ümbernimetamine nende funktsiooni kajastamiseks, mitte Power Apps Studio loodud vaikenimede kasutamine, eriti kui rakendus sisaldab mitut kuva. See aitab hiljem segadust vältida, kui rakendust muudab teine arendaja.

Avakuva lisamine rakendusse

Viimane etapp on rakendusele lisada Avakuva. Avakuva võimaldab inseneril liikuda rakenduse erinevate osade (varude haldamine, teadmistebaas ja kohtumised) vahel.

  1. Valige VanArsdelApp rakenduse tööriistaribal Uus kuva ja seejärel valige Tühi.

  2. Nimetage paanil Puuvaade Screen2 ümber Avakuva.

  3. Valige tööriistaribal Sisesta. Juhtelementide nimekirjas laiendage Meedia ja valige seejärel Pilt. Juhtelement lisatakse ekraanile.

    Lisage avakuvale pildi juhtelement.

  4. Määrake juhtelemendi asendi X väärtuseks 16 ja Y asendi väärtuseks 22. Muutke Laius väärtuseks 605 ja Kõrgus väärtuseks 127. Määrake Pildi asend vääruseks Täida.

    Määrake pildi suurus ja asukoht.

  5. Kui olete endiselt vahekaardil Atribuudid, valige Pilt rippmenüüst + Lisa pildifail ja laadige seejärel VanArsdelLogo.png juhtelement üles.

    Märkus

    Pildifaili leiab ka kaustast Assets käesoleva juhendi Giti repositooriumis.

    Logo lisamine pildile.

  6. Lisage juhtelementide loendisse neli Text label juhtelementi ja asetage need nii, et need oleksid virnastatud VanArsdeli logo alla.

    Tekstisildi juhtelementide lisamine.

  7. Valige ülemine Tekstisilt juhtelement. Paremal paanil vahekaardil Omadused seadke atribuudi Tekst väärtuseks Järgmine kohtumine. Määrake Fondi suurus väärtuseks 30 ja määrake värvivalijaga fondi värv roheliseks (logoga sobivaks).

    Fondi värvi määramine.

  8. Valige teine Tekstisilt juhtelement. Seadke atribuudi Teksti väärtuseks First(Appointments).'Customer Name' (koos jutumärkidega). See valem toob kliendinime kohtumiste tabeli esimesest reast.

    Kuvage kliendi nimi.

    Märkus

    Praegu toimib see valem lihtsalt kohahoidjana. Te muudate silti hiljem, et hankida järgmine kohtumine insenerile, selle asemel et alati esimest kuvada.

  9. Valige kolmas juhtelement Tekstisilt ja määrake atribuudi Tekst väärtuseks First(Appointments).'Appointment Date'.

  10. Määrake neljanda sildi juhtelemendi atribuudi Tekst väärtuseks First(Appointments).'Appointment Time'. Määrake atribuudi Fondi suurus väärtuseks 30.

  11. Lisage juhtelementide loendist Ristküllik juhtelement. Määrake selle juhtelemendi jaoks järgmised atribuudid.

    • Kuvarežiim: Kuva
    • X: 0
    • Y: 632
    • Laius: 635
    • Kõrgus: 1

    See juhtelement toimib visuaalse eraldajana kogu kuva keskel.

  12. Lisage ekraanile kolm Nupp juhtelementi, mis on paigutatud vertikaalselt ja jaotatud ühtlaselt separaatori alla. Määrake ülemise nupu jaoks atribuudi Tekst väärtuseks Kohtumised, keskmise nupu atribuudi Tekst väärtuseks Detailid ja atribuudiks Tekst kui alumine nupp on Teadmistebaas.

    Avakuva nupud.

  13. Valige nupp Kohtumised. Muutke toimingu OnSelect avaldis valemiks Navigate(BrowseAppointments, ScreenTransition.Fade). See toiming lülitab ekraani kohtumiste kuvale, kui kasutaja valib nupu.

    Kohtumiste nupp.

  14. Valige Detailid nupu OnSelect toiminguks Navigate(BrowseParts, ScreenTransition.Fade).

  15. Valige Teadmistebaas nupu OnSelect toiminguks Navigate(Knowledgebase, ScreenTransition.Fade).

Lisaks navigeerimisele ekraanilt Avakuva süsteemi teistele ekraanidele vajavad Kohtumised, Detailid ja Teadmistebaas kuvad viisi, kuidas naasta Avakuvale. Maria otsustab lisada neile kuvadele tagasi nupud.

  1. Valige paanil Puuvaade kuva BrowseParts.

  2. Fookuse määramiseks valige juhtelement RectQuickActionBar1.

  3. Valige menüüs Lisamine suvand Lisa ikoon Liigutakse ikoon juhtelemendist RectQuickActionBar1 vasakule. Pange tähele, et ikoon varjab osa sildist Sirvi detaile.

    Ikooni lisamine.

  4. Menüüs Puuvaade muutke uue ikooni juhtnupu nimeks IconReturn1.

  5. Muutke toimingu OnSelect avaldis valemiks Back(ScreenTransition.Fade). Funktsioon Tagasi navigeerib kasutaja eelmisele külastatud kuvale.

  6. Paremal paanil vahekaardil Atribuudid seadke ikooni väärtuseks < Vasak.

  7. Valige ekraani päisest silt Sirvi detaile. Seadke atribuudi X väärtuseks IconReturn1.Width + 20. Sirvi detaile silti ei tohiks enam osaliselt varjata.

    Sirvi detaile sildi liigutamine.

  8. Järgides punktides 16–22 kirjeldatud protsessi, lisage ikoon nimega IconReturn2 juhtnupule RectQuickActionBar3 kuval Teadmistebaas.

  9. Sarnaselt lisage juhtelemendile RectQuickActionBar1_1 ikoon nimega IconReturn3 kuval BrowseAppointments.

  10. Valige paanil Puuvaade objekt Rakendus. Muutke atribuudi StartScreen atribuudiks Avaleht. See tagab, et avakuva kuvatakse iga kord, kui rakendus käivitub:

    Rakenduse OnStart valemi määramine.

    Märkus

    Kui te ei määra, millist ekraani rakenduse käivitamisel kuvatakse, kasutatakse paani Puuvaade ülaosas kuvatavat ekraani. Ekraani loendi algusesse viimiseks paremklõpsake paanil Puuvaade parempoolset ekraani ja valige Nihuta üles, kuni see on ülaosas.

Lõpuks saate rakendust testida.

  1. Valige Fail > Salvesta. Sisestage väljale Versiooni märkused Avakuvaga täisversioon ja valige seejärel Salvesta.

  2. Avakuvale naasmiseks valige taganool ja vajutage rakenduse käitamiseks F5.

  3. Veenduge, et kuvataks rakenduse Avakuva.

  4. Valige Kohtumised. Ilmuma peaks kohtumiste kuva.

  5. Avakuva kuvale naasmiseks valige taganool.

  6. Valige Detailid. Ilmuma peaks detailide sirvija.

  7. Avakuva kuvale naasmiseks valige taganool.

  8. Valige Teadmistebaas. Ilmuma peaks teadmistebaasi päringuekraan.

  9. Avakuva kuvale naasmiseks valige taganool.

  10. Sulgege eelvaateaken ja naaske siis tagasi rakendusse Power Apps Studio.

Rakenduse prototüüp on nüüd valmis.