Stvaranje aplikacije od gotovih gradivnih elemenata za upravljanje projektima

U ovom zadatku izradit ćemo aplikaciju od gotovih gradivnih elemenata ispočetka. Ova aplikacija omogućuje korisniku dodjeljivanje voditelja projektima i ažuriranje pojedinosti projekta. Uočit ćete neke od istih kontrola i formula koje ste vidjeli u prvoj aplikaciji, ali ovoga puta samostalno ćete izraditi više aplikacija. Postupak je složeniji, ali naučit ćete više pa mislimo da je riječ o poštenom kompromisu.

Brzi pregled alata Power Apps Studio

Power Apps Studio ima tri okna i vrpcu zbog kojih se stvaranje aplikacija čini kao izrada dijapozitiva u aplikaciji PowerPoint:

1. Lijeva navigacijska traka, koja prikazuje hijerarhijski prikaz svih zaslona i kontrola aplikacije, kao i sličice zaslona
2. Srednje okno, koje sadrži zaslon aplikacije na kojem radite
3. Desno okno, na kojem postavljate mogućnosti poput izgleda i izvora podataka
4. Padajući popis svojstava, na kojem odabirete svojstva na koja se formule primjenjuju
5. Traka za formule, u koju dodajete formule (kao u programu Excel) koja određuje ponašanje aplikacije
6. Vrpca, gdje dodajete kontrole i prilagođavate elemente dizajna

1. korak: Stvaranje zaslona

Nakon što dovršimo ovaj pregled, krenimo u izradu aplikacije.

Stvaranje aplikacije

Stvaranje prazne aplikacije od gotovih gradivnih elemenata s izgledom Telefon i nazivom "Aplikacija za upravljanje projektima".

Dodavanje četiri zaslona u aplikaciju

U ovom koraku stvorit ćemo četiri prazna zaslona za aplikaciju. Upotrijebit ćemo različite izgleda zaslona, ovisno o namjeni zaslona. Dodavanje na ove zaslone obavit ćemo u kasnijim koracima.

1. Na kartici Početna kliknite ili dodirnite mogućnost NewScreen, a zatim Pomični zaslon.

   

2. Preimenujte zaslon u SelectTask.

   

3. Stvorite i preimenujte dodatne zaslone:

   1. Kliknite ili dodirnite mogućnost NewScreen, a zatim Pomični zaslon. Preimenujte zaslon u AssignManager.
   2. Kliknite ili dodirnite mogućnost NewScreen, a zatim Zaslon popisa. Preimenujte zaslon u ViewProjects.
   3. Kliknite ili dodirnite mogućnost NewScreen, a zatim Zaslon obrasca. Preimenujte zaslon u UpdateDetails.

4. Odaberite tri točke (,,,) pokraj Zaslon1, a zatim kliknite ili dodirnite mogućnost Izbriši.

   

Aplikacija bi sada trebala izgledati kao sljedeća slika.

Korak 2 – Povežite se s popisom koji je stvoren pomoću Microsoft Lists

U ovom ćemo se koraku povezati s popisom Pojedinosti projekta. U ovoj aplikaciji upotrebljavamo samo jedan popis, ali možete se lako povezati s oba ako želite proširiti aplikaciju.

1. Na lijevoj navigacijskoj traci kliknite ili dodirnite zaslon SelectTask.

2. U desnom oknu kliknite ili dodirnite mogućnost Dodaj izvor podataka.

   

3. Kliknite ili dodirnite Nova veza.

   

4. Kliknite ili dodirnite SharePoint.

   

5. Odaberite mogućnost Poveži izravno (usluge u oblaku), a zatim kliknite ili dodirnite mogućnost Stvori.

   

6. Unesite URL-adresu platforme SharePoint, a zatim kliknite ili dodirnite mogućnost Idi.

   

7. Odaberite popis Pojedinosti projekta, a zatim kliknite ili dodirnite mogućnost Poveži.

   

   Kartica Izvori podataka u desnom oknu sada prikazuje vezu koju ste stvorili.

   

3. korak: Izrada zaslona SelectTask

U ovom koraku prikazat ćemo način kretanja do ostalih zaslona u aplikaciji – radeći s nekim kontrolama, formulama i mogućnostima oblikovanja koje pruža platforma Power Apps.

Ažuriranje naslova i umetanje uvodnog teksta

1. Na lijevoj navigacijskoj traci odaberite zaslon SelectTask.

2. U srednjem oknu odaberite zadanu postavku [Naslov], a zatim na traci za formule ažurirajte svojstvo Tekst na „Upravljanje projektom Contoso”.

   

3. Na kartici Umetni kliknite ili dodirnite mogućnost Označi, a zatim oznaku povucite ispod gornjeg natpisa.

   

4. U traci za formule postavite sljedeća svojstva za oznaku:

   • Svojstvo Boja = Tamnosiva

   • Svojstvo Veličina = 18

   • Svojstvo Tekst = „Za nastavak kliknite ili dodirnite zadatak...”

     

Dodavanje dva navigacijska gumba

1. Na kartici Umetni kliknite ili dodirnite mogućnost Gumb, a zatim gumb povucite ispod oznake.

   

2. U traci za formule postavite sljedeća svojstva za gumb:

   • Svojstvo OnSelect = Navigate(AssignManager, Fade). Kada pokrenete aplikaciju i kliknete ovaj gumb, krećete se do drugog zaslona u aplikaciji, s blijedim prijelazom između zaslona.

   • Svojstvo Tekst = „Dodijeli voditelja”

3. Promijenite veličinu gumba za prilagođavanje teksta.

   

4. Umetnite još jedan gumb sa sljedećim svojstvima:

   • Svojstvo OnSelect = Navigate(ViewProjects, Fade).

   • Svojstvo Tekst = „Ažuriraj pojedinosti”

     

     Napomena

     Gumb je označen Ažuriraj pojedinosti, ali prvo idemo na zaslon ViewProjects kako bismo odabrali projekta za ažuriranje.

Pokretanje aplikacije

Aplikacija još nije učinila puno, ali je možete pokrenuti ako želite:

1. Kliknite ili dodirnite zaslon SelectTask (aplikacija se uvijek pokreće s odabranog zaslona u načinu pretpregleda u alatu Power Apps Studio).

2. Kliknite ili dodirnite u gornjem desnom kutu za pokretanje aplikacije.

3. Kliknite ili dodirnite jedan od gumbiju za pomicanje na drugi zaslon.

4. Kliknite ili dodirnite u gornjem desnom kutu za zatvaranje aplikacije.

4. korak: Izrada zaslona AssignManager

U ovom koraku upotrijebit ćemo galeriju za prikaz svih projekata koji su odobreni, ali još nemaju voditelja. Dodat ćemo druge kontrole, tako da možete dodijeliti voditelja.

1. Spremite do sada unesene promjene.

2. Na lijevoj navigacijskoj traci kliknite ili dodirnite zaslon AssignManager.

Ažuriranje naslova i umetanje uvodnog teksta

1. Promijenite [Naslov] u Dodijeli voditelja.

2. Dodajte oznaku sa sljedećim svojstvima:

   • Svojstvo Boja = Tamnosiva

   • Svojstvo Veličina = 18

   • Svojstvo Tekst = „Odaberite projekt, a zatim dodijelite upravitelja”

     

Dodajte strelicu za povratak kako biste se vratili na zaslon SelectTask

1. Kliknite ili dodirnite traku plave boje pri vrhu zaslona.

2. Na kartici Umetni kliknite ili dodirnite mogućnost Ikone, a zatim kliknite ili dodirnite mogućnost Lijevo.

   

3. Pomaknite strelicu na lijevu stranu plave trake i postavite sljedeća svojstva:

   • Svojstvo Boja = Bijela

   • Svojstvo Visina = 40

   • Svojstvo OnSelect = Navigate(SelectTask, Fade)

   • SvojstvoŠirina = 40

     

Dodavanje i izmjena galerije

1. Na kartici Umetni kliknite ili dodirnite mogućnost Galerija, a zatim Okomito.

   

2. Odaberi Naslov, podnaslov i tijelo iz izbornika Izgled u desnom oknu.

   

   Galerija sada ispravno izgleda, ali još uvijek ima zadani tekst primjera. To ćemo sljedeće popraviti.

   

3. Postavite sljedeća svojstva za galeriju:

   • Svojstvo BorderThickness = 1

   • Svojstvo BorderStyle = Točkasto

   • Svojstvo Stavke = Filtar („Pojedinosti projekta”, PMAssigned = „Nije dodijeljeno”). U galeriju su uključeni samo projekti bez dodijeljenog voditelja.

     

4. U desnom oknu ažurirajte polja kako bi se podudarala sa sljedećim popisom:

   • ApprovedDate

   • Stanje

   • Naziv

     

5. Prema potrebi promijenite veličinu oznaka u galeriji i uklonite strelicu iz prve stavke galerije (ne moramo nigdje izlaziti iz ove galerije).

   

   Zaslon bi sada trebao izgledati kao sljedeća slika.

   

Promijenite boju stavke ako je odabrana

1. Odaberite galeriju, a zatim postavite svojstvo TemplateFill na Ako je (ThisItem.IsSelected = točno, Narančasta, Bijela).

2. Odaberite stavku u galeriji. Zaslon bi sada trebao izgledati kao sljedeća slika.

   

Dodavanje oznake, unosa teksta i gumba „U redu” za slanje zadataka za voditelja

1. Kliknite ili dodirnite izvan galerije u kojoj radite.

2. Na kartici Umetni kliknite ili dodirnite Oznaka. Povucite oznaku ispod galerije, slijeva. Postavite sljedeća svojstva za oznaku:

   • Svojstvo Veličina = 20

   • Svojstvo Tekst = „Voditelj:”

   

3. Na kartici Umetni kliknite ili dodirnite mogućnost Tekst, a zatim Unos teksta. Povucite unos teksta ispod galerije, u sredinu. Postavite sljedeća svojstva za padajući stil:

   • Svojstvo Zadano = „”

   • Svojstvo Visina = 60

   • Svojstvo Veličina = 20

   • SvojstvoŠirina = 250

   

4. Na kartici Umetni kliknite ili dodirnite Gumb. Povucite gumb ispod galerije, desno. Postavite sljedeća svojstva za gumb:

   • Svojstvo Visina = 60

   • Svojstvo OnSelect = Naljepak („Pojedinosti projekta”, Pretraživanje („Pojedinosti projekta”, ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Dodatne informacije potražite u odjeljku Temeljito razmatranje formula.

   • Ova formula ažurira popis Pojedinosti projekta, postavljajući vrijednosti za polje PMAssigned.

   • Svojstvo Veličina = 20

   • Svojstvo Tekst = „U redu”

   • SvojstvoŠirina = 80

   

Dovršeni zaslon sada bi trebao izgledati kao sljedeća slika.

5. korak: Izrada zaslona ViewProjects

U ovom koraku promijenit ćemo svojstva galerije na zaslonu ViewProjects. Ova galerija prikazuje predmete s popisa Pojedinosti projekta. Na ovom zaslonu odaberete stavku, a zatim uredite pojedinosti na zaslonu UpdateDetails.

1. Na lijevoj navigacijskoj traci kliknite ili dodirnite zaslon ViewProjects.

2. Promijenite [Naslov] na „Prikaz projekata”.

3. Na lijevoj navigacijskoj traci kliknite ili dodirnite BrowserGallery1 pod stavkom ViewProjects.

4. Odaberi Naslov, podnaslov i tijelo iz izbornika Izgled u desnom oknu.

   

   Galerija sada ispravno izgleda, uz zadani tekst primjera.

   

5. Odaberite gumb za osvježavanje i postavi njegovo svojstvo OnSelect na Osvježi („Pojedinosti projekta”).

6. Odaberite gumb nove stavke i postavite njezino svojstvo OnSelect na NewForm (EditForm1); Navigate (UpdateDetails, ScreenTransition.None).

Dodajte strelicu za povratak kako biste se vratili na zaslon SelectTask

1. Na lijevoj navigacijskoj traci kliknite ili dodirnite zaslon AssignManager.

2. Odaberite strelicu za povratak koju ste tamo dodali i kopirajte je.

3. Zalijepite strelicu na zaslon ViewProjects i smjestite ga s lijeve strane gumba za osvježavanje.

   

   Uz njega dolaze sva njegova svojstva, uključujući svojstvo OnSelect od Navigate(SelectTask, Fade).

Promijenite izvor podataka za galeriju BrowseGallery1

1. Odaberite galeriju BrowseGallery1 i postavite svojstvo Stavke galerije na SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

   Ovo postavlja izvor podataka galerije na popis Pojedinosti projekta i za pretraživanje i sortiranje upotrebljava polje Naslov.

2. Odaberite u prvoj stavci galerije i postavite svojstvo OnSelect na Navigacija (UpdateDetails, None).

   

3. U desnom oknu ažurirajte polja kako bi se podudarala sa sljedećim popisom:

   • Stanje

   • PMAssigned

   • Naziv

     

     Dovršeni zaslon sada bi trebao izgledati kao sljedeća slika.

     

6. korak: Izrada zaslona UpdateDetails

U ovom koraku povezat ćemo obrazac za uređivanje sa zaslona UpdateDetails s našim izvorom podataka i izvršit ćemo neke promjene svojstava i polja. Na ovom zaslonu uređujete pojedinosti projekta koji ste odabrali na zaslonu Prikaz projekata.

1. Na lijevoj navigacijskoj traci kliknite ili dodirnite zaslon UpdateDetails.

2. Promijenite [Naslov] u „Ažuriraj pojedinosti”.

3. Na lijevoj navigacijskoj traci kliknite ili dodirnite EditForm1 pod stavkom UpdateDetails.

4. Postavite sljedeća svojstva za obrazac:

   • Svojstvo Izvor podataka = „Pojedinosti projekta”

   • Svojstvo Stavka = BrowseGallery1.Selected

5. Nakon što odaberete obrazac, u desnom oknu kliknite ili dodirnite potvrdni okvir za sljedeća polja, navedenim redoslijedom:

   • Naslov

   • PMAssigned

   • Status

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

6. Odaberite gumb za otkazivanje i postavite njegovo svojstvo OnSelect na ResetForm (EditForm1); Back().

7. Odaberite gumb Spremi I provjerite formulu OnSelect – SubmitForm (Uredi obrazac1). Budući da upotrebljavamo kontrolu obrasca za uređivanje, možemo je upotrijebiti mogućnost Pošalji(), umjesto da upotrebljavamo Naljepak() kao što smo to učinili ranije.

Dovršeni zaslon sada bi trebao izgledati kao sljedeća slika (ako su polja prazna, uvjerite se kako ste na zaslonu odabrali stavku Prikaz projekata).

7. korak: Pokretanje čarobnjaka

Sada kada je aplikacija gotova, pokrenimo je da vidimo kako funkcionira. Aplikaciji ćemo dodati vezu na web-mjesto platforme SharePoint. Aplikaciju ćete moći pokrenuti u pregledniku, ali možda ćete je trebati dijeliti s drugima koji je također mogu pokrenuti. Dodatne informacije potražite u odjeljku Dijeljenje svoje aplikacije.

Dodavanje veze aplikaciji

1. U pokretaču aplikacija sustava Office 365 kliknite ili dodirnite mogućnost Power Apps.

   

2. Na platformi Power Apps kliknite ili dodirnite tri točke (...) za Aplikaciju za upravljanje projektima, a zatim Otvori.

   

3. Kopirajte adresu (URL) aplikacije u preglednik.

   

4. Na platformi SharePoint kliknite ili dodirnite mogućnost UREDI VEZE.

   

5. Kliknite ili dodirnite (+) veza.

   

6. Unesite „Aplikacija za upravljanje projektima” i zalijepite u adresu za aplikaciju.

   

7. Kliknite ili dodirnite U redu, a zatim Spremi.

   

Dodjeljivanje menadžera projektu

Sada kad aplikaciju imamo na našem web-mjestu platforme SharePoint, preuzet ćemo ulogu odobravatelja projekta – tražit ćemo sve projekte koji nemaju dodijeljenog voditelja i dodijeliti menadžera jednom od projekata. Tada ćemo preuzeti ulogu voditelja projekta i dodati neke podatke o projektu koji nam je dodijeljen.

1. Najprije ćemo pogledati popis Pojedinosti projekta na usluzi SharePoint. Dva projekta imaju vrijednost Nije dodijeljen u stupcu PMAssigned. To ćemo vidjeti u aplikaciji.

   

2. Kliknite ili dodirnite vezu koju ste stvorili do aplikacije.

3. Na prvom zaslonu kliknite ili dodirnite Dodjela upravitelja.

   

4. Na zaslonu Dodjela upravitelja prikazana su dva nedodijeljena projekta s popisa. Odaberite projekt Novi BI softver.

   

5. U polju za unos teksta Upravitelj unesite „Joni Sherman” pa kliknite U redu.

   Promjena se primjenjuje na popis, a galerija se osvježava tako da je prikazan samo preostali projekt koji nije dodijeljen.

   

6. Vratite se na popis i osvježite stranicu. Vidjet ćete da je unos projekta sada ažuriran s imenom upravitelja projekata.

   

Ažuriranje pojedinosti projekta

1. Kliknite ili dodirnite Za povratak na prvi zaslon, a zatim kliknite ili dodirnite Pojedinosti o ažuriranju.

   

2. Na zaslonu Prikaz projekata, u okvir za pretraživanje unesite „Novo”.

   

3. Kliknite za stavku Novi BI softver.

   

4. Postavite sljedeće vrijednosti na zaslonu Ažuriranje pojedinosti:

   • polje ProjectedStartDate = „3/6/2017”

   • polje ProjectedEndDate = „3/24/2017”

   • polje ProjectedDays = „15”.

   

5. Kliknite ili dodirnite za primjenjivanje promjena na popisu.

6. Zatvorite aplikaciju i vratite se na popis. Vidite kako je unos projekta sada ažuriran s datumom i promjenama dana.

   

Temeljito razmatranje formula

Ovo je drugi mogući odjeljak za formule platforme Power Apps. U prvom temeljitom razmatranju pogledali smo jednu od ovih formula koju platforma Power Apps generira za galeriju pregledavanja u aplikaciji s tri zaslona. U ovom temeljitom upoznavanju pogledat ćemo formulu koju upotrebljavamo za zaslon AssignManager naše druge aplikacije. Evo formule:

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

Što radi ova formula? Kad odaberete stavku u galeriji i kliknete na gumb U redu, formula ažurira popis Pojedinosti projekta, postavljajući stupac PMAssigned na vrijednost koju navedete u unosu teksta. Formula upotrebljava funkcije za svoj rad:

• Funkcija Naljepak mijenja jedan ili više zapisa o izvoru podataka.

• Funkcija Pretraži pronalazi prvi zapis u tablici koji zadovoljava formulu.

Kada spojite funkcije u formulu, evo što se događa:

1. Kada kliknete gumb U redu poziva se funkcija Naljepak da ažurira popis Pojedinosti projekta.

2. Unutar funkcije Naljepak, funkcija Pretraži identificira koji je redak popisa Pojedinosti projekta naveden za ažuriranje. To čini usporedbom ID-a odabrane stavke galerije s ID-om na popisu. Na primjer, ID 12 znači da se treba ažurirati unos za Novi BI softver.

3. Sada kad funkcija Naljepak ima ispravan ID, ažurira polje PMAssigned na vrijednost koja se nalazi u TextInput1.Text.

Sljedeći koraci

Sljedeći je korak u ovom nizu vodiča stvaranje izvješća usluge Power BI za analizu projekata.

Pogledajte također

• Scenariji integracije sustava SharePoint