Ustvarjanje aplikacije delovnega območja za upravljanje projektov

Opomba

Ta članek je del nabora vadnic o uporabi aplikacij Power Apps, Power Automate in Power BI z aplikacijo SharePoint Online. Za pridobitev celostne slike preberite predstavitev nabora in si oglejte povezane prenose.

V tem razdelku bomo ustvarili aplikacijo delovnega območja od začetka. Ta aplikacija uporabniku omogoča dodelitev vodje projektom in posodabljanje podrobnosti o projektu. Videli boste nekaj istih kontrolnikov in formul kot v prvi aplikaciji, vendar boste lahko tokrat sami ustvarili večji del aplikacije. Postopek je bolj kompleksen, vendar se boste naučili več, zato menimo, da gre za dobro rešitev.

Hiter pregled storitve Power Apps Studio

Power Apps Studio ima tri podokna in trak, s katerimi ustvarjate aplikacijo kot bi ustvarjali paket diapozitivov v PowerPointu:

1. Leva vrstica za krmarjenje, ki prikazuje hierarhični pogled vseh zaslonov in kontrolnikov aplikacije ter sličice zaslonov
2. Srednje podokno z zaslonom aplikacije, ki jo ustvarjate
3. Desno podokno, v katerem nastavite možnosti, kot sta postavitev in viri podatkov
4. Spustni seznam lastnosti, s katerega izberete lastnosti, za katere veljajo formule
5. Vnosna vrstica, v katero dodate formule (na primer v Excelu), ki določajo vedenje aplikacije
6. Trak, na katerem dodate kontrolnike in prilagodite elemente oblikovanja

1. korak: Ustvarjanje zaslonov

Spoznali smo vse elemente, zdaj pa lahko začnemo ustvarjati aplikacijo.

Ustvarjanje aplikacije

Ustvariti aplikacija za prazno platno z Telefon postavitev in ime "Project Management app".

Dodajanje štirih zaslonov v aplikacijo

V tem koraku bomo za aplikacijo ustvarili štiri prazne zaslone. Uporabili bomo različne postavitve zaslona, odvisno od namena zaslona. Na te zaslone bomo pozneje dodali elemente.

Zaslon	Namen
SelectTask	Odpiranje zaslona; pomik do drugih zaslonov
AssignManager	Dodelitev vodje odobrenemu projektu
ViewProjects	Ogled seznama projektov s povzetkom podatkov
UpdateDetails	Ogled in posodobitev podrobnosti o projektu

1. Na zavihku Osnovno kliknite ali tapnite možnost NewScreen in nato Drsni zaslon.

   

2. Preimenujte zaslon v SelectTask.

   

3. Ustvarite in preimenujte dodatne zaslone:

   1. Kliknite ali tapnite možnost NewScreen in nato Drsni zaslon. Preimenujte zaslon v AssignManager.
   2. Kliknite ali tapnite možnost NewScreen in nato Zaslon seznama. Preimenujte zaslon v ViewProjects.
   3. Kliknite ali tapnite možnost NewScreen in nato Zaslon obrazca. Preimenujte zaslon v UpdateDetails.

4. Izberite simbol treh pik (. . .) poleg možnosti Screen1, nato kliknite ali tapnite možnost Izbriši.

   

Aplikacija bi morala zdaj biti videti tako kot na naslednji sliki.

2. korak: povežite se s seznamom, ustvarjenim z Microsoftovimi seznami

V tem koraku se bomo povezali z Podrobnosti o projektu seznam. V tej aplikaciji uporabljamo samo en seznam, vendar se lahko preprosto povežete z obema, če želite razširiti aplikacijo.

1. V levi vrstici za krmarjenje kliknite ali tapnite zaslon SelectTask.

2. V desnem podoknu kliknite ali tapnite možnost Dodaj vir podatkov.

   

3. Kliknite ali tapnite Nova povezava.

   

4. Kliknite ali tapnite SharePoint.

   

5. Izberite možnost Neposredna povezava (storitve v oblaku), nato kliknite ali tapnite Ustvari.

   

6. Vnesite URL storitve SharePoint, nato kliknite ali tapnite Pojdi.

   

7. Izberite seznam Podrobnosti projekta in nato kliknite ali tapnite Poveži.

   

   Zavihek Viri podatkov v desnem podoknu zdaj prikazuje povezavo, ki ste jo ustvarili.

   

3. korak: Ustvarjanje zaslona SelectTask

V tem koraku je opisan način za pomikanje na druge zaslone v aplikaciji – pri tem bomo uporabili kontrolnike, formule in možnosti oblikovanja, ki jih ponuja storitev Power Apps.

Posodobitev naslova in vstavljanje uvodnega besedila

1. V levi vrstici za krmarjenje izberite zaslon SelectTask.

2. V srednjem podoknu izberite privzeto možnost [Naslov], nato pa v vnosni vrstici posodobite lastnost Text na »Upravljanje projektov Contoso«.

   

3. Na zavihku Vstavi kliknite ali tapnite možnost Oznaka, nato povlecite oznako pod pasico na vrhu.

   

4. V vnosni vrstici nastavite naslednje lastnosti za oznako:

   • Lastnost Color = DarkGray

   • Lastnost Size = 18

   • Lastnost Text = »**Za nadaljevanje kliknite ali tapnite opravilo ...**«

     

Dodajanje dveh gumbov za krmarjenje

1. Na zavihku Vstavi kliknite ali tapnite možnost Gumb, nato pa povlecite gumb pod oznako.

   

2. V vnosni vrstici nastavite naslednje lastnosti za gumb:

   • Lastnost OnSelect = Navigate(AssignManager, Fade). Ko zaženete aplikacijo in kliknete ta gumb, se pomaknete do drugega zaslona v aplikaciji, pri čemer je prehod med zasloni postopen s pojemanjem.

   • Lastnost Text = »Dodeli vodjo«

3. Velikost gumba prilagodite besedilu.

   

4. Vstavite še en gumb z naslednjimi lastnostmi:

   • Lastnost OnSelect = Navigate(ViewProjects, Fade).

   • Lastnost Text = »Posodobi podrobnosti«

     

     Opomba

     Gumb je označen kot Posodobi podrobnosti, vendar se najprej pomaknemo na zaslon ViewProjects, da izberemo projekt, ki ga želimo posodobiti.

Zagon aplikacije

Aplikacija še nima veliko funkcij, vendar jo lahko zaženete, če želite:

1. Kliknite ali tapnite zaslon SelectTask (aplikacija se vedno zažene z izbranega zaslona v načinu predogleda v storitvi Power Apps Studio).

2. Kliknite ali tapnite v zgornjem desnem kotu, da zaženete aplikacijo.

3. Kliknite ali tapnite enega od gumbov, da se pomaknete na drug zaslon.

4. Kliknite ali tapnite v zgornjem desnem kotu, da zaprete aplikacijo.

4. korak: Ustvarjanje zaslona AssignManager

V tem koraku bomo uporabili galerijo za prikaz vseh projektov, ki so bili odobreni, vendar še nimajo vodje. Dodali bomo druge kontrolnike, da boste lahko dodelili vodjo.

Opomba

Pozneje bomo v aplikaciji ustvarili stran, na kateri boste lahko urejali vsa polja projekta (vključno s poljem vodje), vendar se nam je zdelo zanimivo, da ustvarimo tudi takšen zaslon.

1. Shranite spremembe, ki ste jih uvedli do zdaj.

2. V levi vrstici za krmarjenje kliknite ali tapnite zaslon AssignManager.

Posodobitev naslova in vstavljanje uvodnega besedila

1. Polje [Naslov] spremenite v Dodeli vodjo.

2. Dodajte oznako z naslednjimi lastnostmi:

   • Lastnost Color = DarkGray

   • Lastnost Size = 18

   • Lastnost Text = »Izberi projekt, nato dodeli vodjo«

     

Dodajanje puščico nazaj za vrnitev na zaslon SelectTask

1. Na vrhu zaslona kliknite ali tapnite modro vrstico.

2. Na zavihku Vstavljanje kliknite ali tapnite Ikone in nato Levo:

   

3. Premaknite puščico na levo stran modre vrstice in nastavite naslednje lastnosti:

   • Lastnost Color = White

   • Lastnost Height = 40

   • Lastnost OnSelect = Navigate(SelectTask, Fade)

   • Lastnost Width = 40

     

Dodajanje in spreminjanje galerije

1. Na zavihku Vstavljanje kliknite ali tapnite Galerija in nato izberite možnost Navpično.

   

2. V meniju Postavitev v desnem podoknu izberite možnost Naslov, podnaslov in besedilo.

   

   Galerija ima zdaj ustrezno postavitev, vendar še vedno vsebuje privzeto vzorčno besedilo. To bomo popravili v nadaljevanju.

   

3. Za galerijo nastavite naslednje lastnosti:

   • Lastnost BorderThickness = 1

   • Lastnost BorderStyle = Dotted

   • Lastnost Items = Filter('Project Details', PMAssigned="Unassigned"). V galerijo so vključeni samo projekti brez dodeljene vodje.

     

4. V desnem podoknu posodobite polja, da se bodo ujemala z naslednjim seznamom:

   • ApprovedDate

   • Stanje

   • Naslov

     

5. Po potrebi spremenite velikost oznak v galeriji in odstranite puščico s prvega elementa galerije (v tej galeriji nam ni treba krmariti).

   

   Zaslon bi moral biti zdaj prikazan kot na naslednji sliki.

   

Sprememba barve elementa, ko je izbran

1. Izberite galerijo in nato lastnost TemplateFill nastavite na If (ThisItem.IsSelected=true, Orange, White).

2. Izberite element v galeriji. Zaslon bi moral biti zdaj prikazan kot na naslednji sliki.

   

Dodajanje oznake, vnosa besedila in gumba »V redu« za pošiljanje dodelitev vodje

1. Kliknite ali tapnite zunaj galerije, v kateri delate.

2. Na zavihku Vstavljanje kliknite ali tapnite možnost Oznaka. Povlecite oznako levo pod galerijo. Za oznako nastavite naslednje lastnosti:

   • Lastnost Size = 20

   • Lastnost Text = »Vodja:«

   

3. Na zavihku Vstavljanje kliknite ali tapnite Besedilo in nato izberite možnost Vnos besedila. Vnos besedila povlecite na sredino pod galerijo. Za spustni meni nastavite naslednje lastnosti:

   • Lastnost Default = ""

   • Lastnost Height = 60

   • Lastnost Size = 20

   • Lastnost Width = 250

   

4. Na zavihku Vstavljanje kliknite ali tapnite možnost Gumb. Povlecite gumb desno pod galerijo. Za gumb nastavite naslednje lastnosti:

   • Lastnost Height = 60

   • Lastnost OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Za več informacij glejte razdelek Prikaz vseh podrobnosti formul.

   • Ta formula posodobi seznam Podrobnosti o projektu in nastavi vrednost za polje PMAssigned.

   • Lastnost Size = 20

   • Lastnost Text = "OK"

   • Lastnost Width = 80

   

Dokončan zaslon bi moral biti zdaj prikazan kot na naslednji sliki.

5. korak: Ustvarjanje zaslona ViewProjects

V tem koraku bomo spremenili lastnosti galerije na zaslonu ViewProjects. Ta galerija prikazuje elemente seznama Podrobnosti o projektu. Na tem zaslonu izberete element in nato uredite podrobnosti na zaslonu UpdateDetails.

1. V levi vrstici za krmarjenje kliknite ali tapnite zaslon ViewProjects.

2. Možnost [Naslov] spremenite v »Ogled projektov«.

3. V levi vrstici za krmarjenje kliknite ali tapnite BrowserGallery1 na zaslonu ViewProjects.

4. V meniju Postavitev v desnem podoknu izberite možnost Naslov, podnaslov in besedilo.

   

   Galerija ima zdaj ustrezno postavitev s privzetim vzorčnim besedilom.

   

5. Izberite gumb za osvežitev in nastavite lastnost OnSelect na Refresh('Project Details').

6. Izberite gumb novega elementa in nastavite lastnost OnSelect na NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Dodajanje puščico nazaj za vrnitev na zaslon SelectTask

1. V levi vrstici za krmarjenje kliknite ali tapnite zaslon AssignManager.

2. Izberite puščico nazaj, ki ste jo dodali, in jo kopirajte.

3. Puščico prilepite na zaslon ViewProjects in jo postavite levo od gumba za osvežitev.

   

   Prenesejo se tudi vse lastnosti, vključno z lastnostjo OnSelect, ki je nastavljena na Navigate(SelectTask, Fade).

Spreminjanje vira podatkov za galerijo BrowseGallery1

1. Izberite galerijo BrowseGallery1 in lastnost Items galerije nastavite na SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

   S tem vir podatkov galerije nastavite na seznam Podrobnosti o projektu, za iskanje in razvrščanje pa se uporabi polje Naslov.

2. Izberite v prvem elementu galerije in nastavite lastnost OnSelect na Navigate(UpdateDetails, None).

   

3. V desnem podoknu posodobite polja, da se bodo ujemala z naslednjim seznamom:

   • Stanje

   • PMAssigned

   • Naslov

     

     Dokončan zaslon bi moral biti zdaj prikazan kot na naslednji sliki.

     

6. korak: Ustvarjanje zaslona UpdateDetails

V tem koraku bomo povezali obrazec za urejanje na zaslonu UpdateDetails z našim virom podatkov, poleg tega pa bomo spremenili nekatere lastnosti in polja. Na tem zaslonu urejate podrobnosti za projekt, ki ste ga izbrali na zaslonu Ogled projektov.

1. V levi vrstici za krmarjenje kliknite ali tapnite zaslon UpdateDetails.

2. Možnost [Naslov] spremenite v »Posodobi podrobnosti«.

3. V levi vrstici za krmarjenje kliknite ali tapnite EditForm1 na zaslonu UpdateDetails.

4. Za obrazec nastavite naslednje lastnosti:

   • Lastnost DataSource = 'Project Details'

   • Lastnost Item = BrowseGallery1.Selected

5. Obrazec naj bo še vedno izbran, v desnem podoknu pa kliknite ali tapnite potrditveno polje za naslednja polja, in sicer v prikazanem vrstnem redu:

   • Naslov

   • PMAssigned

   • Stanje

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

6. Izberite gumb za preklic in nastavite lastnost OnSelect na ResetForm(EditForm1); Back().

7. Izberite gumb Shrani in preverite formulo OnSelect – SubmitForm(EditForm1). Ker uporabljamo kontrolnik za urejanje obrazca lahko namesto možnosti Patch(), ki smo jo uporabili prej, zdaj uporabimo možnost Submit().

Dokončani zaslon bi moral zdaj biti prikazan kot na naslednji sliki (če so polja prazna, izberite element na zaslonu Ogled projektov).

7. korak: Zagon aplikacije

Ko je aplikacija končana, jo zaženemo, da vidimo, kako deluje. Na mesto SharePoint bomo dodali povezavo do aplikacije. Aplikacijo boste lahko zagnali v brskalniku, vendar boste morda morali aplikacijo dati v skupno rabo z drugimi, da jo bodo lahko zagnali. Za več informacij glejte razdelek Skupna raba aplikacije.

Dodajanje povezave do aplikacije

1. V zaganjalniku aplikacij Office 365 kliknite ali tapnite možnost Power Apps.

   

2. V storitvi Power Apps kliknite ali tapnite simbol treh pik (. . .) poleg možnosti Aplikacija za upravljanje projektov, nato izberite možnost Odpri.

   

3. Kopirajte naslov (URL) aplikacije v brskalniku.

   

4. V storitvi SharePoint kliknite ali tapnite možnost UREDI POVEZAVE.

   

5. Kliknite ali tapnite (+) povezava.

   

6. Vnesite »Aplikacija za upravljanje projektov« in prilepite naslov aplikacije.

   

7. Kliknite ali tapnite možnost V redu in nato Shrani.

   

Dodelitev vodje projektu

Ko je aplikacija na mestu SharePoint, bomo prevzeli vlogo odobritelja projekta – poiskali bomo vse projekte brez dodeljene vodje in enemu od projektov dodelili vodjo. Nato bomo prevzeli vlogo vodje projekta in dodali nekaj informacij o projektu, ki nam je dodeljen.

1. Najprej si oglejmo seznam Podrobnosti projekta v storitvi SharePoint. Dva projekta imata v stolpcu PMAssigned vrednost Nedodeljeno. Te bomo videli v aplikaciji.

   

2. Kliknite ali tapnite povezavo, ki ste jo ustvarili za aplikacijo.

3. Na prvem zaslonu kliknite ali tapnite Dodeli vodjo.

   

4. Na zaslonu Dodelitev vodje lahko vidite dva nedodeljena projekta s seznama. Izberite projekt Nova programska oprema BI.

   

5. V polju za vnos besedila Vodja vnesite »Timotej Šebenik« in kliknite V redu.

   Sprememba je uporabljena na seznamu, galerija pa se osveži tako, da je prikazan samo preostali nedodeljeni projekt.

   

6. Vrnite se na seznam in osvežite stran. Videli boste, da je projektni vnos zdaj posodobljen z imenom vodje projekta.

   

Posodabljanje podrobnosti projekta

1. Kliknite ali tapnite da se vrnete na prvi zaslon, nato kliknite ali tapnite Podrobnosti posodobitve.

   

2. V iskalno polje na zaslonu Ogled projektov vnesite možnost »Novo«.

   

3. Kliknite za element nove programske opreme BI.

   

4. Na zaslonu Podrobnosti posodobitve nastavite naslednje vrednosti:

   • Polje ProjectedStartDate = »3/6/2017«

   • Polje ProjectedEndDate = »3/24/2017«

   • Polje ProjectedDays = »15«

   

5. Kliknite ali tapnite Da uveljavite spremembo na seznamu.

6. Zaprite aplikacijo in se vrnite na seznam. Videli boste, da je projektni vnos zdaj posodobljen s spremembami datumov in dni.

   

Prikaz vseh podrobnosti formul

To je drugi izbirni razdelek formul Power Apps. V prvem prikazu vseh podrobnosti smo si ogledali eno od formul, ki jih storitev Power Apps ustvari za brskanje po galeriji v aplikaciji s tremi zasloni. V tem prikazu vseh podrobnosti si bomo ogledali formulo, ki jo uporabljamo za zaslon AssignManager naše druge aplikacije. Tukaj je prikazana formula:

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Kakšen je namen te formule? Ko izberete element v galeriji in kliknite gumb OK, formula posodobi seznam Podrobnosti projekta, pri čemer stolpec PMAssigned nastavi na vrednost, ki jo določite za vnos besedila. Za izpolnjevanje namena uporablja ta formula funkcije:

• Funkcija Patch spremeni enega ali več zapisov vira podatkov.

• Funkcija LookUp poišče prvi zapis v tabeli, ki ustreza formuli.

Ko funkcije združite v formulo, se zgodi naslednje:

1. Ko kliknete gumb OK, funkcija Patch posodobi seznam Podrobnosti projekta.

2. V funkciji Patch funkcija LookUp prepozna, katero vrstico seznama Podrobnosti projekta je treba posodobiti. To stori tako, da primerja ID izbranega elementa galerije z ID-jem na seznamu. Primer: ID 12 pomeni, da je treba posodobiti vnos možnosti Nova programska oprema BI.

3. Ko ima funkcija Patch pravi ID, posodobi polje PMAssigned na vrednost v polju TextInput1.Text.

Naslednji koraki

Naslednji korak v tem naboru vadnic je ustvarjanje poročila storitve Power BI za analizo projektov.

Glejte tudi

• Primeri uporabe integracije za storitev SharePoint

Opomba

Ali nam lahko poveste, kateri je vaš prednostni jezik za dokumentacijo? Izpolnite kratko anketo. (upoštevajte, da je v angleščini)

Z anketo boste porabili približno sedem minut. Ne zbiramo nobenih osebnih podatkov (izjava o zasebnosti).