Vytvoření aplikace plátna pro řízení projektů

V tomto úkolu vytvoříme aplikaci plátna úplně od začátku. Tato aplikace uživateli umožňuje přiřadit k projektům manažera a aktualizovat podrobnosti projektu. Použijete některé stejné ovládací prvky a vzorce, které jste viděli v první aplikaci, ale tentokrát vytvoříte větší část aplikace sami. Tento proces je složitější, ale naučíte se toho víc, což je podle nás férový výměnný obchod.

Krátký přehled terminologie Power Apps Studio

Power Apps Studio má tři podokna a pás karet, díky kterému se vytváření aplikací podobá vytváření prezentace v PowerPointu:

1. Levý navigační panel, kde se zobrazuje hierarchický pohled na všechny obrazovky a ovládací prvky aplikace a miniatury obrazovek
2. Prostřední podokno obsahující obrazovku aplikace, na které pracujete
3. Pravé podokno, kde nastavujete možnosti, jako je rozložení a zdroje dat
4. Rozevírací seznam vlastností, kde můžete vybrat vlastnosti, ke kterým se vztahují vzorce
5. Řádek vzorců, kde můžete přidávat vzorce (jako v Excelu), které definují chování aplikace
6. Pás karet, kde můžete přidat ovládací prvky a přizpůsobit prvky návrhu

Krok 1: Vytvoření obrazovek

Po krátké rekapitulaci se můžeme pustit do vytvoření aplikace.

Vytvoření aplikace

Vytvořte prázdnou aplikaci plátna s názvem "Aplikace správy projektu" s rozložením pro Telefon.

Přidání čtyř obrazovek do aplikace

V tomto kroku vytvoříme pro aplikaci čtyři prázdné obrazovky. V závislosti na účelu obrazovky použijeme různá rozložení. Tyto obrazovky dokončíme v dalších krocích.

1. Na kartě Domů klikněte nebo klepněte na Nová obrazovka a pak na Posouvatelná obrazovka.

   

2. Přejmenujte tuto obrazovku na SelectTask.

   

3. Vytvořte a přejmenujte další obrazovky:

   1. Klikněte nebo klepněte na Nová obrazovka a pak na Posouvatelná obrazovka. Přejmenujte tuto obrazovku na AssignManager.
   2. Klikněte nebo klepněte na Nová obrazovka a pak na Obrazovka se seznamem. Přejmenujte tuto obrazovku na ViewProjects.
   3. Klikněte nebo klepněte na Nová obrazovka a pak na Obrazovka s formulářem. Přejmenujte tuto obrazovku na UpdateDetails.

4. Vyberte tři tečky (...) vedle Screen1 a pak klikněte nebo klepněte na Odstranit.

   

Aplikace by měla vypadat jako na následujícím obrázku.

Krok 2: Připojte se k seznamu vytvořeném pomocí aplikace Seznamy Microsoft

V tomto kroku se připojíme k seznamu Podrobnosti o projektu. V této aplikaci používáme jenom jeden seznam, pokud ale chcete aplikaci rozšířit, mohli byste se snadno připojit k oběma.

1. V levém navigačním panelu klikněte nebo klepněte na obrazovku SelectTask.

2. V pravém podokně klikněte nebo klepněte na Přidat zdroj dat.

   

3. Klikněte nebo klepněte na Nové připojení.

   

4. Klikněte nebo klepněte na položku SharePoint.

   

5. Vyberte Připojit přímo (cloudové služby) a klikněte nebo klepněte na Vytvořit.

   

6. Zadejte adresu URL služby SharePoint a klikněte nebo klepněte na Přejít.

   

7. Vyberte seznam Project Details a pak klikněte nebo klepněte na Připojit.

   

   Na kartě Zdroje dat v pravém podokně se teď zobrazuje vytvořené připojení.

   

Krok 3: Sestavení obrazovky SelectTask

V tomto kroku zajistíme přechod na jiné obrazovky v aplikaci a budeme pracovat s některými ovládacími prvky, vzorci a možnostmi formátování, které Power Apps nabízí.

Aktualizace názvu a vložení úvodního textu

1. V levém navigačním panelu vyberte obrazovku SelectTask.

2. V prostředním podokně vyberte výchozí [Název] a pak v řádku vzorců aktualizujte vlastnost Text na „Řízení projektů Contoso“.

   

3. Na kartě Vložit klikněte nebo klepněte na Popisek a přetáhněte ho pod horní pruh.

   

4. V řádku vzorců nastavte následující vlastnosti tohoto popisku:

   • Vlastnost Color = DarkGray

   • Vlastnost Size = 18

   • Vlastnost Text = "Pokračujte kliknutím nebo klepnutím na úkol..."

     

Přidání dvou navigačních tlačítek

1. Na kartě Vložit klikněte nebo klepněte na Tlačítko a přetáhněte ho pod popisek.

   

2. V řádku vzorců nastavte následující vlastnosti tohoto tlačítka:

   • Vlastnost OnSelect = Navigate(AssignManager; Fade). Když aplikaci spustíte a kliknete na toto tlačítko, přejdete na druhou obrazovku, přičemž mezi obrazovkami se použije zatmívací/roztmívací přechod.

   • Vlastnost Text = "Přiřadit manažera"

3. Změňte velikost tlačítka podle textu.

   

4. Vložte další tlačítko s následujícími vlastnostmi:

   • Vlastnost OnSelect = Navigate(ViewProjects; Fade)

   • Vlastnost Text = "Aktualizovat podrobnosti"

     

     Poznámka

     Toto tlačítko má název Aktualizovat podrobnosti, ale napřed přejdeme na obrazovku ViewProjects, kde vybereme projekt, který se má aktualizovat.

Spustit aplikaci

Aplikace toho zatím moc neumí, ale pokud chcete, můžete ji spustit:

1. Klikněte nebo klepněte na obrazovku SelectTask (v režimu náhledu v Power Apps Studio se aplikace vždycky spustí z vybrané obrazovky).

2. Klikněte nebo klepněte v pravém horním rohu spusťte aplikaci.

3. Kliknutím nebo klepnutím na některé z tlačítek přejděte na jinou obrazovku.

4. Klikněte nebo klepněte v pravém horním rohu aplikaci zavřete.

Krok 4: Sestavení obrazovky AssignManager

V tomto kroku zobrazíme pomocí galerie všechny projekty, které jsou schválené, ale ještě nemají manažera. Přidáme další ovládací prvky, abyste mohli manažera přiřadit.

1. Uložte změny, které jsme zatím udělali.

2. V levém navigačním panelu klikněte nebo klepněte na obrazovku AssignManager.

Aktualizace názvu a vložení úvodního textu

1. Změňte [Název] na Přiřadit manažera.

2. Přidejte popisek s následujícími vlastnostmi:

   • Vlastnost Color = DarkGray

   • Vlastnost Size = 18

   • Vlastnost Text = "Vyberte projekt a přiřaďte manažera"

     

Přidání šipky zpět pro návrat na obrazovku SelectTask

1. Klikněte nebo klepněte na modrý pruh v horní části obrazovky.

2. Na kartě Vložit klikněte nebo klepněte na Ikony a pak klikněte nebo klepněte na Vlevo.

   

3. Přemístěte tuto šipku na levou stranu modrého pruhu a nastavte následující vlastnosti:

   • Vlastnost Color = White

   • Vlastnost Height = 40

   • Vlastnost OnSelect = Navigate(SelectTask; Fade)

   • Vlastnost Width = 40

     

Přidání a úprava galerie

1. Na kartě Vložit klikněte nebo klepněte na Galerie a pak na Svisle.

   

2. V nabídce Rozvržení v pravém podokně vyberte Název, titulek a text.

   

   Galerie teď má správné rozložení, ale pořád obsahuje výchozí ukázkový text. Hned to opravíme.

   

3. Nastavte u galerie následující vlastnosti:

   • Vlastnost BorderThickness = 1

   • Vlastnost BorderStyle = Dotted

   • Vlastnost Items = Filter('Project Details'; PMAssigned="Unassigned"). Galerie bude obsahovat jenom projekty bez přiřazeného manažera.

     

4. V pravém podokně aktualizujte pole podle následujícího seznamu:

   • ApprovedDate

   • Stav

   • Název

     

5. Podle potřeby změňte velikost popisků v galerii a odeberte šipku z první položky galerie (z této galerie nepotřebujeme nikam přecházet).

   

   Obrazovka by měla vypadat jako na následujícím obrázku.

   

Změna barvy vybrané položky

1. Vyberte galerii a vlastnost TemplateFill nastavte na If (ThisItem.IsSelected=true; Orange; White).

2. Vyberte v galerii nějakou položku. Obrazovka by měla vypadat jako na následujícím obrázku.

   

Přidání popisku, textového zadání a tlačítka OK, které odešle přiřazení manažera

1. Klikněte nebo klepněte mimo galerii, se kterou jste pracovali.

2. Na kartě Vložit klikněte nebo klepněte na Popisek. Přetáhněte tento popisek doleva pod galerii. Nastavte u popisku následující vlastnosti:

   • Vlastnost Size = 20

   • Vlastnost Text = "Manažer:"

   

3. Na kartě Vložit klikněte nebo klepněte na Text a pak na Text input. Přetáhněte toto textové zadání doprostřed pod galerii. Nastavte u textového zadání následující vlastnosti:

   • Vlastnost Default = ""

   • Vlastnost Height = 60

   • Vlastnost Size = 20

   • Vlastnost Width = 250

   

4. Na kartě Vložit klikněte nebo klepněte na Tlačítko. Přetáhněte toto tlačítko doprava pod galerii. Nastavte u tlačítka následující vlastnosti:

   • Vlastnost Height = 60

   • Vlastnost OnSelect = Patch('Project Details'; LookUp('Project Details'; ID = Gallery1.Selected.ID); {PMAssigned: TextInput1.Text}). Další informace najdete v části Podrobný rozbor vzorce.

   • Tento vzorec aktualizuje seznam Project Details a nastaví hodnotu pole PMAssigned.

   • Vlastnost Size = 20

   • Vlastnost Text = "OK"

   • Vlastnost Width = 80

   

Hotová obrazovka by měla vypadat jako na následujícím obrázku.

Krok 5: Sestavení obrazovky ViewProjects

V tomto kroku změníme vlastnosti galerie na obrazovce ViewProjects. V této galerii se zobrazují položky ze seznamu Project Details. Na této obrazovce vyberete nějakou položku a její podrobnosti pak upravíte na obrazovce UpdateDetails.

1. V levém navigačním panelu klikněte nebo klepněte na obrazovku ViewProjects.

2. Změňte [Název] na "Zobrazit projekty".

3. V levém navigačním panelu klikněte nebo klepněte na BrowserGallery1 pod ViewProjects.

4. V nabídce Rozvržení v pravém podokně vyberte Název, titulek a text.

   

   Galerie teď má správné rozložení s výchozím ukázkovým textem.

   

5. Vyberte tlačítko pro aktualizaci a nastavte jeho vlastnost OnSelect na Refresh('Project Details').

6. Vyberte tlačítko pro přidání nové položky a nastavte jeho vlastnost OnSelect na NewForm(EditForm1); Navigate(UpdateDetails; ScreenTransition.None).

Přidání šipky zpět pro návrat na obrazovku SelectTask

1. V levém navigačním panelu klikněte nebo klepněte na obrazovku AssignManager.

2. Vyberte šipku zpět, kterou jste sem přidali, a zkopírujte ji.

3. Vložte tuto šipku na obrazovku ViewProjects a umístěte ji nalevo od tlačítka pro aktualizaci.

   

   Společně se šipkou se přenesou všechny její vlastnosti včetně vlastnosti OnSelect nastavené na Navigate(SelectTask; Fade).

Změna zdroje dat galerie BrowseGallery1

1. Vyberte galerii BrowseGallery1 a nastavte vlastnost Items této galerie na SortByColumns(Filter('Project Details'; StartsWith(Title; TextSearchBox1.Text)); "Title"; If(SortDescending1; Descending; Ascending)).

   Tím se zdroj dat této galerie nastaví na seznam Project Details a k hledání a řazení se použije pole Title.

2. Vyberte v první položce galerie a nastavte vlastnost OnSelect na Navigate(UpdateDetails, None).

   

3. V pravém podokně aktualizujte pole podle následujícího seznamu:

   • Stav

   • PMAssigned

   • Název

     

     Hotová obrazovka by měla vypadat jako na následujícím obrázku.

     

Krok 6: Sestavení obrazovky UpdateDetails

V tomto kroku připojíme formulář pro úpravy na obrazovce UpdateDetails ke zdroji dat a uděláme změny některých vlastností a polí. Na této obrazovce upravíte podrobnosti projektu vybraného na obrazovce Zobrazit projekty.

1. V levém navigačním panelu klikněte nebo klepněte na obrazovku UpdateDetails.

2. Změňte [Název] na "Aktualizovat podrobnosti".

3. V levém navigačním panelu klikněte nebo klepněte na EditForm1 pod UpdateDetails.

4. Nastavte u formuláře následující vlastnosti:

   • Vlastnost DataSource = 'Project Details'

   • Vlastnost Item = BrowseGallery1.Selected

5. Mějte tento formulář pořád vybraný a v pravém podokně klikněte nebo klepněte v uvedeném pořadí na zaškrtávací políčko u následujících polí:

   • Nadpis

   • PMAssigned

   • Stav

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

6. Vyberte tlačítko pro zrušení a nastavte jeho vlastnost OnSelect na ResetForm(EditForm1); Back().

7. Vyberte tlačítko uložit a podívejte se na vzorec OnSelect - SubmitForm(EditForm1). Protože používáme ovládací prvek Form pro úpravy, můžeme použít funkci Submit() místo Patch(), jak jsme to udělali dříve.

Hotová obrazovka by teď měla vypadat jako na následujícím obrázku (pokud jsou pole prázdná, ověřte, že jste vybrali nějakou položku na obrazovce Zobrazit projekty).

Krok 7: Spuštění aplikace

Teď, když je aplikace hotová, ji můžeme spustit a zjistit, jak funguje. Odkaz na tuto aplikaci přidáme na web SharePoint. Aplikaci budete moct spustit v prohlížeči, můžete ji ale nasdílet s jinými lidmi, kteří si ji pak můžou spustit. Další informace najdete v tématu Sdílení aplikace.

Přidání odkazu na aplikaci

1. Ve spouštěči aplikace Office 365 klikněte nebo klepněte na Power Apps.

   

2. V Power Apps klikněte nebo klepněte na tři tečky (. . .) u Aplikace pro řízení projektů, a pak na Otevřít.

   

3. Zkopírujte adresu (URL) aplikace v prohlížeči.

   

4. V SharePoint klikněte nebo klepněte na UPRAVIT ODKAZY.

   

5. Klikněte nebo klepněte na odkaz (+).

   

6. Zadejte „Aplikace pro řízení projektů“ a vložte adresu aplikace.

   

7. Klikněte nebo klepněte na OK a pak na Uložit.

   

Přiřazení manažera k projektu

Teď, když máme aplikaci na webu SharePoint, převezmeme roli schvalovatele projektů – vyhledáme všechny projekty, které nemají přiřazeného manažera, a přiřadíme jednomu z těchto projektů manažera. Pak převezmeme roli projektového manažera a přidáme pár informací o projektu, který máme přiřazený.

1. Nejprve se podívejme na seznam Project Details ve službě SharePoint. Dva projekty mají ve sloupci PMAssigned hodnotu Unassigned. Tyto projekty uvidíme v aplikaci.

   

2. Klikněte nebo klepněte na odkaz, který jste pro aplikaci vytvořili.

3. Na první obrazovce klikněte nebo klepněte na Přiřadit manažera.

   

4. Na obrazovce Přiřadit manažera vidíte dva nepřiřazené projekty ze seznamu. Vyberte projekt New BI software.

   

5. Do textového zadání Manažer zadejte Joni Sherman a klikněte na OK.

   Tato změna se aplikuje na seznam a galerie se aktualizuje, takže se zobrazí jediný zbývající nepřiřazený projekt.

   

6. Vraťte se do seznamu a aktualizujte stránku. Uvidíte, že záznam tohoto projektu je teď aktualizovaný o jméno projektového manažera.

   

Aktualizace podrobností projektu

1. Klikněte nebo klepněte na Chcete-li se vrátit na první obrazovku, klikněte nebo klepněte na Aktualizovat podrobnosti.

   

2. Na obrazovce Zobrazit projekty zadejte do vyhledávacího pole slovo „New“.

   

3. Klikněte na pro položku Nový software BI.

   

4. Na obrazovce Aktualizovat podrobnosti nastavte následující hodnoty:

   • Pole ProjectedStartDate = 3/6/2017

   • Pole ProjectedEndDate = "3/24/2017"

   • Pole ProjectedDays = 15

   

5. Klikněte nebo klepněte aplikujte tuto změnu na seznam.

6. Zavřete aplikaci a vraťte se k seznamu . Uvidíte, že záznam tohoto projektu je teď aktualizovaný o změny kalendářních dat a dnů.

   

Podrobný rozbor vzorce

Toto je druhý volitelný oddíl týkající se vzorců Power Apps. V prvním podrobném rozboru jsme se podívali na jeden ze vzorců, který Power Apps generuje pro procházení galerie v aplikaci se třemi obrazovkami. V tomto podrobném rozboru se podíváme na vzorec, který jsme použili na obrazovce AssignManager naší druhé aplikace. Tento vzorec vypadá takto:

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

Co tento vzorec dělá? Když vyberete nějakou položku v galerii a kliknete na tlačítko OK, aktualizuje tento vzorec seznam Project Details a nastaví sloupec PMAssigned na hodnotu zadanou do textového zadání. Vzorec přitom využívá funkce:

• Funkce Patch umožňuje změnit jeden nebo více záznamů zdroje dat.

• Funkce LookUp vyhledá první záznam v tabulce, který vyhovuje vzorci.

Když tyto funkce zkombinujete ve vzorci, stane se toto:

1. Při kliknutí na tlačítko OK se zavolá funkce Patch a aktualizuje seznam Project Details.

2. Funkce LookUp uvnitř funkce Patch identifikuje, který řádek seznamu Project Details se má aktualizovat. Porovnává přitom ID vybrané položky galerie s ID v seznamu. ID s hodnotou 12 například znamená, že se má aktualizovat položka New BI software.

3. Teď, když má funkce Patch správné ID, aktualizuje pole PMAssigned na hodnotu v ovládacím prvku TextInput1.Text.

Další kroky

Dalším krokem v této sérii kurzů je vytvoření zprávy Power BI pro analýzu projektů.

Viz také

• Scénáře integrace SharePoint