Kapitola 3: Vytváření prototypu s nízkým kódem

Poznámka

Kapitola 2 odkazovala na mobilní aplikaci používanou terénními techniky a techniky a na desktopovou aplikaci používanou zaměstnanci ve společnosti. Následující kapitoly se zaměřují na design, implementaci a zavádění mobilních aplikací vytvořených pomocí Power Apps. Aplikace pro stolní počítače jsou ponechány jako cvičení pro čtenáře.

Kiana je skeptická k řešením s minimem kódu a k Power Apps. Nicméně Kiana a Maria se rozhodnou společně vytvořit aplikaci, která terénním technikům pomůže zkontrolovat zásoby (a v případě potřeby objednat součásti), dotazovat se ve znalostní databázi a zkontrolovat jejich další schůzku, když jsou mimo kancelář na telefonu. Kiana a Maria plánují využít toto prostředí k prozkoumání, jak přidat ovládací prvky a používat vzorce v Power Apps.

Ačkoli vytváření počátečního prototypu s nízkým kódem je obvykle úkolem civilního vývojáře, Kiana se rozhodne věnovat pozornost procesu, aby pochopila, jak je aplikace konstruována. Kiana tyto informace potřebuje, aby Marii pomohla integrovat do aplikace zdroje dat z reálného světa, webová rozhraní API a další požadované služby.

Položka 1: správa zásob v terénu

Prvotním cílem Marie je vytvořit aplikaci plátna, která zobrazí seznam dílů a umožní uživateli zobrazit podrobnosti kterékoli součásti. Uživatel by nakonec měl mít také možnost objednat si součást; tato počáteční verze aplikace však bude jednoduše prototypem a ještě nebude připojena k back endu. Po získání zpětné vazby od vedoucího terénního technika Caleba bude Maria pracovat s Kianou na integraci aplikace plátna se systémem zásob s místním spuštěním.

Maria velmi dobře zná stávající systém řízení zásob a rozumí informacím, které obsahuje. Maria začne vytvořením sešitu aplikace Excel, který obsahuje tabulky obsahující cvičná data s podrobnostmi o některých ukázkových součástkách. Pole v tabulce jsou ID, Název, ID kategorie, Cena, Přehled, NumberInStock a Obraz (adresa URL, která odkazuje na obrázek součásti). Tento sešit lze použít k sestavení a otestování aplikace plátna, aby bylo zajištěno, že správně zobrazí požadovaná data. Maria uloží tento sešit do svého účtu OneDrive se jménem BoilerParts.xlsx.

Poznámka

Kopii tohoto sešitu najdete ve složce Majetek v úložišti Git pro tuto příručku.

Pokud jste návrhář relační databáze, všimnete si, že sešit aplikace Excel představuje denormalizované zobrazení dat. Například v relační databázi CategoryID by s největší pravděpodobností byl číselný identifikátor, který odkazuje na samostatnou tabulku obsahující podrobnosti o kategorii, včetně názvu.

Poznámka

Adresy URL ve sloupci Obrázek jsou v současné době pouze zástupné symboly. V dokončené aplikaci budou tyto adresy URL nahrazeny adresami skutečných obrazových souborů.

Pomocí těchto kroků aplikaci vytvoříte pomocí Power Apps.

1. Přihlaste se do Power Apps

2. Na Domovské stránce v Začít od dat vyberte Excel Online.

   

3. Na stránce Připojení vyberte OneDrive for Business a potom vyberte Vytvořit.

   

4. Na stránce OneDrive for Business vyberte soubor BoilerParts.xlsx.

   

5. Vyberte tabulku v souboru Excel (Maria vytvořila tabulku pomocí výchozího názvu Table1) a poté vyberte Připojit.

   

6. Počkejte, dokud Power Apps nevygeneruje aplikaci.

   

7. Po vygenerování aplikace se zobrazí obrazovka Procházet ukazující pole CategoryID, ID a Obrázek z každého řádku tabulky dílů v sešitu.

   

8. Pole, která se aktuálně zobrazují, nejsou příliš užitečná, aby pomohla technikovi vybrat produkt. Na panelu zobrazujícím obrazovku Procházet vyberte popisek Výměník tepla v prvním řádku dat. Na řádku vzorců vyberte vlastnost Text z rozevíracího seznamu. Změňte hodnotu vlastnosti na ThisItem.Name. Text v prvním poli každého řádku se přepne a zobrazí název součásti.

   Poznámka

   Na následujícím obrázku se popisek Výměník tepla původně zobrazený ve formuláři změnil na název produktu 3.5 W/S Heater.

   

9. Opakujte předchozí krok pro popisky ID a Obrázek. Změňte vlast Text pole ID na CategoryID a vlastnost Text pole Obrázek na Přehled. Obrazovka Procházet by nyní měla vypadat jako na následujícím obrázku, který je pro terénního inženýra s větší pravděpodobností užitečný pro výběr dílů.

   

10. Funkce vyhledávání obrazovky Procházet ve výchozím nastavení používá pole, která byla původně vybrána při generování obrazovky—v tomto případě, CategoryID, ID a Obrázek. Výsledky jsou seřazeny podle CategoryID. Má smysl toto přepnout na pole Název, CategoryID a Přehled s výsledky seřazenými podle Názvu. Vyberte ovládací prvek BrowseGallery1 v podokně Stromové zobrazení. V rozevíracím seznamu na levé straně řádku vzorců vyberte vlastnost Položky. Přetáhněte spodní okraj řádku vzorců dolů, aby byl vzorec zcela viditelný. Vzorec obsahuje následující výraz:

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

    

11. Změňte výraz Vyhledávání, aby odkazoval na pole Název, CategoryID a Přehled pomocí následujícího vzorce:

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

12. Nadpis v záhlaví formuláře není užitečný a výchozí téma neodpovídá korporátnímu stylu VanArsdel. Na obrazovce Procházet vyberte popisek Table1 a na liště Vzorec změňte vlastnosti Text popisku na "Procházet díly“ (do hodnoty zahrňte uvozovky).

13. Na panelu nástrojů vyberte Téma (pro zobrazení více položek bude pravděpodobně nutné rozbalit panel nástrojů) a poté vybrat téma Forest. Barvy a styly pro obrazovku Procházet se změní, aby odpovídaly tématu.

    

Zvyšte užitečnost obrazovky Podrobnosti

Vytvořili jste základní aplikaci a upravili jste obrazovku Procházet k zobrazení polí, která může technik použít k identifikaci dílu. Aplikace také obsahuje obrazovku Podrobnosti, která zobrazuje všechny informace o vybrané součásti. Pole na této obrazovce se aktuálně nezobrazují v logickém sledu, takže byste je měli přeskupit. Můžete také odstranit pole ID z této obrazovky, protože tyto informace jsou pro inženýra irelevantní.

1. V podokně Stromoví zobrazení přejděte dolů a vyberte DetailScreen1. Tato obrazovka zobrazuje podrobnosti o součásti, kterou uživatel vybere na obrazovce Procházet.

   

2. V záhlaví obrazovky Podrobnosti ve středním podokně vyberte popisek Table1. V pravém podokně na kartě Vlastnosti změňte vlastnost Text na Podrobnosti dílu.

   Poznámka

   V mnoha případech můžete dosáhnout stejných výsledků pomocí lišty vzorců jako podokno Vlastnosti. Některé vlastnosti jsou k dispozici pouze prostřednictvím podokna Vlastnosti.

   

3. V podokně Stromové zobrazení v DetailScreen1 vyberte DetailForm1. V pravém podokně na kartě Vlastnosti vyberte Upravit pole vedle položky Pole. V prostředním podokně vyberte a přetáhněte pole tak, aby se zobrazovala v následujícím pořadí, shora dolů:

   • Jméno
   • CategoryID
   • Přehled
   • Cena
   • NumberInStock
   • Image
   • ID

   

4. Vyberte pole ID, vyberte tři tečky, které se zobrazí na pravé straně pole, a poté vyberte Odstranit z rozevírací nabídky, která se zobrazí. Tato akce odstraní pole ID z formuláře.

   

5. V podokně Stromové zobrazení v DetailScreen1 vyberte CategoryID_DataCard1. Tento prvek je ovládací prvek DataCard, který zobrazuje název pole (tzv. klíč) a jeho hodnotu.

   

   V pravém podokně na kartě Rozšířený vyberte Odemknutím změníte vlastnosti. V sekci Data změňte pole DisplayName na "Kategorie" (uveďte uvozovky).

   Poznámka

   Stejně jako u karty Vlastnosti je mnoho vlastností na kartě Rozšířené také přístupných z řádku vzorců. Chcete-li nastavit tyto vlastnosti, můžete podle potřeby použít lištu vzorců.

   

6. Opakujte předchozí krok pro změnu klíče pro NumberInStock_DataCard1 na "Množství na skladě" (uveďte uvozovky).

7. Musíte upravit formátování pole Cena pro zobrazení dat jako hodnoty měny. V podokně Stromové zobrazení v DetailForm1 v Price_DataCard1 vyberte DataCardValue7. Toto je pole, které zobrazuje hodnotu pole Cena. V podokně DataCardValue7 vpravo na kartě Rozšířený změňte vlastnost Text na Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Výraz Parent.Default odkazuje na datovou položku, ke které je nadřazený ovládací prvek (DataCard) vázán—v tomto případě se jedná o sloupec Cena. Funkce Text přeformátuje tuto hodnotu pomocí formátu uvedeného jako druhý argument; v tomto příkladu se jedná o místní měnu se dvěma desetinnými místy.

8. Na datové kartě obrázku by měl být zobrazen obrázek součásti, nikoli adresa URL souboru obrázku. V podokně Stromové zobrazení v DetailForm1 v Image_DataCard1 vyberte DataCardValue3 a potom vyberte Odstranit, chcete-li odstranit tento ovládací prvek.

9. Vyberte Image_DataCard1. V levém podokně vyberte + Vložit. V podokně + Vložit rozbalte Média a potom vyberte Obrázek.

   

10. Vraťte se do podokna Stromové zobrazení a ověřte, že je textový ovládací prvek Image1 přidán do ovládacího prvku Image_DataCard1.

    

11. V podokně Stromové zobrazení vyberte Image_DataCard1. V pravém podokně na kartě Rozšířené změňte Výšku na 500, aby bylo možné zobrazit dostatečný prostor pro obrázek.

    

12. V podokně Stromové zobrazení vyberte Image1. Nastavte následující vlastnosti:

    • Obrázek: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Šířka: 550
    • Výška: 550

    Poznámka

    Zobrazený obrázek je aktuálně prázdný, protože adresa URL v sešitu aplikace Excel je pouze zástupný symbol. Tento problém vyřešíte a načtete skutečnou adresu URL, když v další kapitole vytvoříte vazbu aplikace s webovým API.

Aplikace také obsahuje obrazovku Upravit, která umožňuje uživateli změnit informace o součástce. Inženýr by neměl být schopen měnit podrobnosti o součástce, vytvářet nové součásti nebo mazat součásti z katalogu.

1. V podokně Stromové zobrazení vyberte EditScreen1. Vyberte tlačítko se třemi tečkami a poté vyberte Odstranit, chcete-li odstranit tuto obrazovku.

   

2. V podokně Stromové zobrazení vyberte DetailsScreen1. Všimněte si, že Power Apps Studio zobrazí chybovou zprávu pro tuto obrazovku. K této chybě dochází, protože DetailScreen1 obsahuje výrazy, které odkazují na obrazovku EditScreen1 obrazovka, která již neexistuje.

3. V záhlaví DetailsScreen1 vyberte ikonu tužky (IconEdit1). Vlastnost OnSelect pro tento ovládací prvek obsahuje výraz EditForm (EditForm1); Navigovat (EditScreen1, ScreenTransition.None). Když je vybrána ikona Upravit, tento výraz se spustí a pokusí se přejít na obrazovku EditScreen1.

   

4. V podokně Stromové zobrazení vyberte IconEdit1 a potom vyberte Odstranit. Tato ikona již není nutná.

5. Vyberte IconDelete1 a potom vyberte Odstranit. Tato ikona se používá k odstranění aktuální části a také není nutná.

   

6. Všimněte si, že text Podrobnosti součástek zmizel z hlavičky obrazovky a místo toho Power Apps Studio zobrazí chybovou zprávu. K tomu došlo, protože se vypočítá šířka ovládacího prvku popisku, který zobrazuje text. V podokně Stromové zobrazení vyberte LblAppName2. Prozkoumejte vlastnost Šířka. Hodnota této vlastnosti je výsledkem výrazu Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Změňte výraz pro vlastnost Šířka na Parent.Width - Self.X. Chyba by měla zmizet a text Podrobnosti součástek by se měl znovu objevit v záhlaví obrazovky.

8. V podokně Stromové zobrazení vyberte BrowseScreen1. Na této obrazovce se také zobrazí chybová zpráva. Ikona + na panelu nástrojů (IconNewItem1) umožňuje uživateli přidat novou část. Vlastnost OnSelect pro tuto ikonu odkazuje na obrazovku EditScreen1.

   

9. Vyberte IconNewItem1 a potom vyberte Odstranit. Stejně jako dříve zmizí text v záhlaví obrazovky a zobrazí se chybová zpráva, a to ze stejného důvodu.

10. V podokně Stromové zobrazení v BrowseScreen1 vyberte LblAppName1. Upravte výraz pro vlastnost Šířka odstraněním odkazu na IconNewItem1.Width. Nový výraz by měl být Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Stále dochází k problému se záhlavím. Ačkoliv se text Procházet díly znovu objevil, zobrazuje se chyba a ikony pro aktualizaci a řazení jsou na nesprávném místě. V podokně Stromové zobrazení vyberte IconSortUpDown1. Najděte vlastnost X pro tento ovládací prvek. Tato vlastnost určuje vodorovnou polohu ikony v záhlaví. V současné době se počítá na základě šířky ovládacího prvku IconNewItem1.

    

12. Změňte výraz pro vlastnost X na Parent.Width - Self.Width.

13. V podokně Stromové zobrazení vyberte IconRefresh1. Změňte výraz pro vlastnost X na Parent.Width - IconSortUpDown1.Width - Self.Width. Všechny chyby by měly zmizet.

Uložte a otestujte aplikaci

Nyní můžete uložit a otestovat aplikaci.

1. Vyberte Soubor > Uložit jako.

2. V Uložit jako vyberte The cloud, zadejte název VanArsdelApp a potom vyberte Uložit.

   

3. Výběrem černé šipky se vraťte na obrazovku Domů.

   

4. Vyberte F5 pro náhled aplikace. Na stránce Procházet díly vyberte pravouhlou závorku (>) napravo od kterékoli části. Zobrazí se obrazovka Podrobnosti pro součást.

   

5. Vyberte levý úhelník (<) v záhlaví obrazovky Podrobnosti pro návrat na obrazovku Procházet.

6. Na obrazovce Procházet díly zadejte text do pole Vyhledávání. Při psaní budou položky filtrovány, aby se zobrazovaly pouze ty, které mají odpovídající text v polích Název, CategoryID nebo Přehled.

   

7. Zavřete okno náhledu a vraťte se na Power Apps Studio.

Položka 2: znalostní báze týkající se práce v terénu

Pro přístup do znalostní báze si Maria a Caleb (technik) představují jednoduché rozhraní, kde uživatel zadá hledaný termín a aplikace zobrazí všechny články znalostní báze, které tento výraz zmiňují. Maria ví, že tento proces bude zahrnovat Azure Cognitive Search, ale nepotřebuje—nebo dokonce nechce—vědět, jak to funguje. Maria se proto rozhodla poskytnout pouze základní uživatelské rozhraní a později spolupracovat s Kianou na přidání samotných funkcí.

Maria se rozhodne vytvořit novou obrazovku na základě šabloény Seznam, která je k dispozici v Power Apps Studio.

1. Na panelu nástrojů obrazovky Power Apps Studio Domů vyberte Nová obrazovka a potom vyberte Seznam.

   

2. V záhlaví obrazovky vyberte popisek, který zobrazuje text [Název]. Změňte vlastnost Text na "Dotaz" (uveďte uvozovky).

   

3. V záhlaví obrazovky vyberte znaménko plus (+) a poté vyberte Odstranit. Ikona + má uživateli umožnit přidat do seznamu více položek. Znalostní báze je pouze pro dotazy, takže tato funkce není nutná.

   

   Všimněte si, že odebrání této ikony způsobí chybu v záhlaví kvůli způsobu, jakým se počítá umístění a šířky ostatních položek. Viděli jste to dříve na obrazovce správy zásob a řešení je stejné, jak je popsáno v následujících krocích.

4. V podokně Stromové zobrazení přejděte dolů do sekce Screen1 a vyberte LblAppName3. Změňte vlastnost Šířka vlastnost vzorce Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. V podokně Stromové zobrazení vyberte IconSortUpDown2. Upravte vlastnost X vzorce Parent.Width - IconSortUpDown2.Width.

6. V podokně Stromové zobrazení vyberte IconRefresh2. Upravte vlastnost X vzorce Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. To by mělo vyřešit všechny chyby na obrazovce.

7. Vyberte Soubor > Uložit.

8. Do pole Poznámka k verzi zadejte text Přidáno uživatelské rozhraní znalostní báze a potom vyberte Uložit.

9. Vraťte se ne Domovskou obrazovku a vyberte F5 pro náhled nové obrazovky. Vaše zadání by mělo vypadat jako na následujícím obrázku.

   

   Všimněte si, že pokud vyberete ikonu > vedle kterékoli z fiktivních položek, funkce podrobností aktuálně nefunguje. Toto vyřešíte později, až integrujete Azure Cognitive Search do aplikace.

10. Zavřete okno náhledu a vraťte se na Power Apps Studio.

Položka 3: Plánování a poznámky týkající se práce v terénu

Maria ve spolupráci s Malikem, recepčním v kanceláři, navrhla rozhraní pro část aplikace pro plánování a schůzky v terénu. Malik poskytuje sešit aplikace Excel s některými ukázkovými daty, která Maria může použít k vytvoření obrazovky schůzek. Sešit obsahuje tabulku s následujícími sloupci:

• ID (ID schůzky)
• ID zákazníka (jedinečný identifikátor pro zákazníka)
• Jméno zákazníka
• Adresa zákazníka
• Podrobnosti o problému (textový popis problému, se kterým se zákazník setkává)
• Telefonní číslo kontaktu
• Stav
• Datum schůzky
• Čas schůzky
• Poznámky (textový popis se všemi poznámkami přidanými technikem)
• Obrázek (fotografie spotřebiče, buď v provozuschopném stavu po opravě, nebo jako doplňkový obrázek k poznámkám technika)

Poznámka

Stejně jako u údajů o řízení zásob v terénu představuje tento sešit denormalizovaný pohled na data. Ve stávajícím systému schůzek jsou tato data uložena v samostatných tabulkách, které obsahují data schůzek a údaje o zákaznících.

Maria uloží tento soubor do účtu OneDrive s názvem Appointments.xlsx. Maria si pamatuje, že dříve použila výchozí název tabulky v sešitu a musela změnit název na různých obrazovkách, které byly vygenerovány, a přejmenuje tabulku v sešitu na Schůzky.

Poznámka

Tento sešit je k dispozici ve složce Majetek v úložišti Git pro tuto příručku.

Maria chce vytvořit sekci schůzek aplikace přímo ze souboru aplikace Excel. Maria se rozhodne použít podobný přístup jako u funkce správy inventáře v terénu, až na to, že tentokrát bude technikovi umožněno vytvářet a upravovat schůzky.

Maria se rozhodne nejprve vytvořit obrazovky schůzek jako samostatnou aplikaci. Tímto způsobem může Maria použít Power Apps Studio a automaticky vygenerovat většinu aplikace. Power Apps Studio vám v současné době neumožňuje generovat další obrazovky z datového připojení ve stávající aplikaci. Po vytvoření a otestování obrazovek je Maria zkopíruje do aplikace terénního inventáře a znalostní báze.

Poznámka

Alternativním přístupem je přidání tabulky Schůzky do souboru Excel jako druhý zdroj dat k existující aplikaci a poté ručně vytvořit obrazovky pro schůzky. Maria se rozhodla vytvořit nové obrazovky ze sešitu a zkopírovat obrazovky. V současné době je Maria více obeznámena s koncepty kopírování a vkládání než s ručním vytvářením obrazovek, a během procesu vytváření této aplikace se postupně naučí vytvářet obrazovky od začátku.

Vytvoření aplikace pro schůzky

1. Na panelu nabídek Power Apps Studio vyberte Soubor.

   

2. V levém podokně vyberte Nový. Na hlavním panelu vyberte pole OneDrive for Business - rozložení telefonu.

   

3. V podokně Připojení vyberte Appointments.xlsx.

   

4. V souboru Excel vyberte tabulku Schůzky a poté vyberte Připojit.

   

5. Počkejte, dokud se nevygeneruje aplikace. Když se nová aplikace zobrazí, bude obsahovat obrazovku Procházet a Podrobnosti a obrazovku Upravit pomocí výchozího motivu.

   

6. V podokně Stromové zobrazení v sekci BrowseScreen1 sekce v BrowseGallery1 vyberte Image1 a potom vyberte Odstranit. Obrazovka Procházet by měla obsahovat pouze seznam schůzek, nikoli obrázky s nimi spojené.

   

   Všimněte si, že odstranění ovládacího prvku Image1 způsobí na obrazovce několik chyb, protože šířky a umístění ovládacího prvku Title1 odkazují na ovládací prvek Obrázek. Tyto problémy vyřešíte v následujícím kroku.

7. V podokně Stromové zobrazení v BrowseGallery1 vyberte Title1. Změňte hodnotu ve vlastnosti X na 16. Změňte vzorec ve vlastosti Šířka na Parent.TemplateWidth - 104. To by mělo vyřešit chyby na obrazovce.

8. V podokně Stromové zobrazení v BrowseGallery1 vyberte Body1. Tento ovládací prvek aktuálně zobrazuje kontaktní telefonní údaje zákazníka. Změňte hodnotu ve vlastnosti Text na ThisItem.'Customer Name' (včetně jednoduchých uvozovek).

   

   Podrobnosti o názvu obrazovky Procházet nyní zobrazí jméno zákazníka.

9. V podokně Stromové zobrazení vyberte BrowseGallery1. Pomocí řádku vzorců prozkoumejte výraz ve vlastnosti Položky. Ovládací prvek vyhledá schůzky pomocí data, času a kontaktního čísla schůzky. Změňte tento vzorec tak, aby vyhledával spíše jméno zákazníka než kontaktní číslo:

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

   Všimněte si, že schůzky jsou seřazeny podle data a času (zobrazují se první dvě pole).

10. V podokně Stromové zobrazení odstraňte IconNewItem1. Pouze místní zaměstnanci mohou rezervovat nové schůzky pro inženýry a techniky. Všimněte si, že tato akce má za následek chyby ve formuláři, protože šířka a poloha dalších ovládacích prvků v záhlaví odkazují na ikonu, kterou jste právě odebrali.

11. V podokně Stromové zobrazení vyberte LblAppName1. Změňte vzorec pro vlastnost Šířka na Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. V podokně Stromové zobrazení vyberte IconRefresh1. Změňte hodnotu pro vlastnost X na Parent.Width - IconSortUpDown1.Width - Self.Width.

13. V podokně Stromové zobrazení vyberte iconSortUpDown1. Změňte hodnotu pro vlastnost X na Parent.Width - Self.Width.

14. V podokně Stromové zobrazení vyberte BrowseScreen1 a poté vyberte tlačítko se třemi tečkami (...). V rozevírací nabídce, která se zobrazí, vyberte Přejmenovat a změňte název obrazovky na BrowseAppointments.

    

15. Stejnou technikou změňte název ovládacího prvku BrowseGallery1 na BrowseAppointmentsGallery.

Tím je dokončen obrazovka Procházet.

Vytvoření obrazovky s podrobnostmi

Nyní můžete obrátit svou pozornost k obrazovce Podrobnosti.

1. V podokně Stromoví zobrazení přejděte dolů do sekce DetailScreen1. Vidíte, že podrobnosti jsou uvedeny v abecedním pořadí podle názvů polí a některé užitečné informace—např. pole Poznámky—se nezobrazí vůbec.

   

2. V podokně Stromové zobrazení vyberte DetailForm1. V pravém podokně na kartě Vlastnosti vyberte Upravit pole vedle položky Pole. V prostředním podokně vyberte každé z následujících polí a poté vyberte Odstranit:

   • Datum schůzky
   • Čas schůzky
   • ID zákazníka
   • ID

3. Vyberte + Přidat pole a přidejte následující pole:

   • Poznámky
   • Podrobnosti problému
   • Stav

   

4. Přetáhněte každé pole tak, aby se zobrazovalo v následujícím pořadí, shora dolů:

   • Jméno zákazníka
   • Adresa zákazníka
   • Telefonní číslo kontaktu
   • Podrobnosti problému
   • Stav
   • Poznámky
   • Image

5. V podokně Stromové zobrazení vyberte Notes_DataCard1. Změňte vlastnost Výška na 320.

   

6. V podokně Stromové zobrazení odstraňte IconDelete1. Inženýři by neměli být schopni odebrat schůzky ze systému.

7. Vyberte LblAppName2 a vlastnost Šířka na Parent.Width - Self.X - IconEdit1.Width.

8. Pomocí výše popsané techniky změňte název DetailsScreen1 na AppointmentDetails.

Ǔprava obrazovky pro úpravy

Poslední obrazovka, na kterou se nyní podíváme, je obrazovka Upravit.

1. V podokně Stromové zobrazení vyberte EditScreen1.

2. V podokně Stromové zobrazení v sekci EditScreen1 vyberte EditForm1. V pravém podokně na kartě Vlastnosti vyberte Upravit pole vedle položky Pole.

3. Odeberte následující pole:

   • Adresa zákazníka
   • ID
   • ID zákazníka
   • Datum schůzky
   • Čas schůzky

4. Přidejte následující pole:

   • Podrobnosti problému
   • Stav
   • Poznámky

5. Přetáhněte každé pole tak, aby se zobrazovalo v následujícím pořadí, shora dolů:

   • Jméno kontaktu
   • Číslo zákazníka
   • Podrobnosti problému
   • Stav
   • Poznámky
   • Image

6. Vyberte pole Jméno zákazníka a rozbalte jej pro zobrazení jeho vlastností. Změňte Typ ovládacího prvku na Zobrazit text. Tato změna způsobí, že ovládací prvek bude jen pro čtení; je užitečné vidět jméno zákazníka na obrazovce Upravit, ale technik by to neměl být schopen změnit.

   

7. Vyberte pole Kontaktní číslo a rozbalte jej pro zobrazení jeho vlastností. Změňte Typ ovládacího prvku na Zobrazit text. Toto pole by mělo být také jen pro čtení.

8. Vyberte pole Poznámky, rozbalte jej a změňte Typ ovládacího prvku na Upravit víceřádkový text. Toto nastavení umožňuje technikovi přidat podrobné poznámky, které mohou zahrnovat několik řádků.

9. Vyberte pole Stav, rozbalte jej a změňte Typ ovládacího prvku na Povolené hodnoty.

10. V podokně Stromové zobrazení vyberte Status_DataCard5. V pravém podokně na kartě Vlastnosti vyberte Odemknutím změníte vlastnosti. Přejděte dolů na vlastnost AllowedValues a změňte text na ["Opravené", "Objednané díly", "Nevyřešené"] (včetně hranatých závorek). Terénní technik může nastavit pouze Stav na jednu z těchto definovaných hodnot.

    

11. V podokně Stromové zobrazení přejmenujte EditScreen1 na EditAppointment.

Nyní můžete uložit a otestovat aplikaci.

1. Vyberte Soubor > Uložit jako.

2. V Uložit jako vyberte The cloud, zadejte název VanArsdelAppointments a potom vyberte Uložit.

3. Výběrem černé šipky na liště nástrojů Power Apps Studio se vraťte na obrazovku Domů.

4. Vyberte F5 pro náhled aplikace. Na stránce Schůzky vyberte ikonu > vedle jakékoli schůzky. Měla by se objevit obrazovka Podrobnosti pro schůzku. V záhlaví vyberte Upravit, chcete-li aktualizovat schůzku. Ověřte následující podrobnosti:

   • Pole jména zákazníka a kontaktního čísla jsou jen pro čtení.
   • Stavové pole je omezeno na hodnoty v rozevíracím seznamu.
   • Můžete zadat poznámky, které pokrývají několik řádků.
   • Do pole obrázku můžete nahrát soubor obrázku.

   Poznámka

   Vylepšení, které později přidáte, vám umožní fotit telefonem pomocí aplikace a přidat snímek do pole obrázku.

   

Kombinace obrazovek do jedné aplikace

Maria vytvořila dvě aplikace, ale chce je spojit do jedné aplikace. Za tímto účelem Maria zkopíruje obrazovky aplikace schůzek do aplikace pro správu inventáře v terénu a znalostní báze následujícím způsobem:

1. Otevřete nové okno prohlížeče a přihlaste se do Power Apps Studio s údaji o vašem účtu.

2. V levém podokně vyberte Aplikace, vyberte VanArdselApp a potom vyberte Upravit.

   

3. Na nástrojové liště vyberte Nová obrazovka a pak vyberte Prázdná. Tato akce přidá do aplikace novou obrazovku, do které zkopírujete ovládací prvky pro obrazovku Procházet pro aplikaci VanArsdelAppointments.

   

4. Nová obrazovka bude pojmenována Screen2. V podokně Stromové zobrazení ji přejmenujte na BrowseAppointments.

5. Opakujte předchozí krok ještě dvakrát a přidejte další dvě prázdné obrazovky (Screen3 a Screen4).

6. Přejmenujte Screen3 na AppointmentDetails a přejmenujte Screen4 na EditAppointment.

7. Na levém panelu nástrojů v Power Apps Studio vyberte ikonu Data. V podokně Data vyberte Přidat data. V rozvíracím seznamu Vyberte zdroj dat v poli Vyhledávání zadejte OneDrive a potom vyberte OneDrive for Business.

   

8. Vyberte soubor Excel Appointments.xlsx, vyberte tabulku Schůzky a poté vyberte Připojit.

9. Přepněte do okna prohlížeče, které zobrazuje aplikaci VanArsdelAppointments.

10. Na panelu nástrojů vyberte Téma (pro zobrazení více položek bude pravděpodobně nutné rozbalit panel nástrojů) a poté vybrat téma Forest. Toto je stejný motiv, který používá aplikace VanArsdel.

11. Na levém panelu nástrojů vyberte ikonu Stromové zobrazení, vyberte obrazovku BrowseAppointments a poté vyberte Ctrl + A. Tato akce vybere všechny ovládací prvky na obrazovce.

12. Vyberte Ctrl + C a zkopírujte tyto ovládací prvky do schránky.

13. Přepněte zpět do okna prohlížeče, které zobrazuje aplikaci VanArsdelApp.

14. Na levém panelu nástrojů vyberte ikonu Stromové zobrazení a pak vyberte obrazovku BrowseAppointments.

15. Pomocí kombinace kláves Ctrl+V vložte ovládací prvky na obrazovku.

    Poznámka

    Záhlaví obrazovky se někdy jeví příliš nízko. Chcete-li tento problém vyřešit, vyberte ikonu ovládací orvky IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 a RectQuickActionBar1_1 v podokně Stromové zobrazení (podržte Shift a kliknutím vyberte více než jeden ovládací prvek najednou) a poté je pomocí kláves s šipkami nebo myši přesuňte nahoru v podokně návrhového zobrazení.

16. Přepněte zpět do okna prohlížeče, které zobrazuje aplikaci VanArsdelAppointments a poté vyberte a zkopírujte ovládací prvky na obrazovce AppointmentDetails do schránky (Ctrl+A následován Ctrl+C).

17. Vraťte se do okna prohlížeče, které zobrazuje aplikaci VanArsdelApp, vyberte obrazovku AppointmentDetails a poté vložte ovládací prvky (Ctrl+V). V případě potřeby upravte polohu ovládacích prvků v záhlaví obrazovky.

    Poznámka

    V záhlaví obrazovky AppointmentDetails se zobrazí chyba. K této chybě dochází, protože obrazovka odkazuje na ovládací prvky na obrazovce EditAppointment, které ještě nebyly zkopírovány. Další kroky by měly tuto chybu vyřešit.

18. Přepněte zpět do okna prohlížeče, které zobrazuje aplikaci VanArsdelAppointments a poté vyberte a zkopírujte ovládací prvky na obrazovce EditAppointment do schránky.

19. Vraťte se do okna prohlížeče, které zobrazuje aplikaci VanArsdelApp, vyberte obrazovku EditAppointment a poté vložte ovládací prvky. V případě potřeby znovu přesuňte ovládací prvky v záhlaví obrazovky.

20. V podokně Stromové zobrazení vyberte obrazovku AppointmentDetails a ověřte, zda dříve uvedená chyba nyní zmizela.

21. V podokně Stromové zobrazení vyberte obrazovku BrowseScreen1. Přejmenujte tuto obrazovku na BrowseParts.

22. Přejmenujte obrazovku DetailsScreen1 na PartDetails.

23. Přejmenujte obrazovku Screen1 na Knowledgebase.

    Poznámka

    Je dobrým zvykem přejmenovávat obrazovky tak, aby odrážely jejich funkci, místo aby používaly výchozí názvy generované v Power Apps Studio, zejména pokud aplikace obsahuje několik obrazovek. To může pomoci vyhnout se nejasnostem později, pokud je aplikace upravena jiným vývojářem.

Přidání domovské obrazovky do aplikace

Poslední fází je přidání a Domovské obrazovky do aplikace. Domovská obrazovka umožní technikovi pohybovat se mezi různými částmi aplikace (správa zásob, znalostní báze a schůzky).

1. V aplikaci VanArsdelApp na panelu nástrojů vyberte Nová obrazovka a potom vyberte Prázdná.

2. V podokně Stromové zobrazení přejmenujte Screen2 na Domů.

3. Na panelu nástrojů vyberte Vložit. V seznamu ovládacích prvků rozbalte Média a potom vyberte Obrázek. Ovládací prvek bude přidán na obrazovku.

   

4. Nastavte pozici X ovládacího prvku na 16 a Y na 22. Změňte Šířku na 605 a Výšku na 127. Změňte Pozice obrazu na Vyplnit.

   

5. Zatímco ještě na kartě Vlastnosti v rozvíracím seznamu Obrázek vyberte + Přidejte soubor obrázku a poté nahrajte obrázek VanArsdelLogo.png do ovládacího prvku.

   Poznámka

   Soubor obrázku je k dispozici ve složce Majetek v úložišti Git pro tuto příručku.

   

6. Ze seznamu ovládacích prvků přidejte čtyři ovládací prvky Textový popisek do formuláře a umístěte je tak, aby byly naskládány pod logem VanArsdel.

   

7. Vyberte nejvyšší ovládací prvek Textový popisek. V pravém podokně na kartě Vlastnosti nastavte vlastnost Text na Další schůzka. Nastavte Velikost písma na 30 a pomocí nástroje pro výběr barvy nastavte barvu písma na zelenou (aby odpovídala logu).

   

8. Vyberte druhý ovládací prvek Textový popisek. Změňte hodnotu vlastnosti Text na First(Appointments).'Customer Name' (včetně jednoduchých uvozovek). Tento vzorec načte jméno zákazníka z prvního řádku v tabulce schůzek.

   

   Poznámka

   V současné době tento vzorec funguje pouze jako zástupný symbol. Štítek později upravíte, abyste získali další schůzku pro technika, než abyste vždy zobrazovali první.

9. Vyberte třetí ovládací prvek Textový popisek a nastavte jeho vlastnost Text na First(Appointments).'Appointment Date'.

10. Nastavte vlastnost Text čtvrtého ovládacího prvku Textový popisek na First(Appointments).'Appointment Time'. Nastavte vlastnost Velikost písma na 30.

11. Ze seznamu ovládacích prvků přidejte ovládací prvek Rectangle. Nastavte následující vlastnosti tohoto ovládacího prvku:

    • Režim zobrazení Zobrazit
    • X: 0
    • Y: 632
    • Šířka: 635
    • Výška: 1

    Tento ovládací prvek funguje jako vizuální oddělovač uprostřed obrazovky.

12. Přidejte tři ovládací prvky Tlačítko na obrazovku, uspořádané svisle a rozmístěné rovnoměrně pod oddělovačem. Nastavte vlastnost Text pro horní tlačítko na Schůzky, vlastnost Text prostředního tlačítka na Díly a vlastnost Text pro spodní tlačítko na Znalostní databáze.

    

13. Vyberte tlačítko Schůzky. Změňte výraz v akci OnSelect na vzorec Navigate(BrowseAppointments, ScreenTransition.Fade). Tato akce přepne displej na obrazovku schůzek, když uživatel vybere tlačítko.

    

14. Nastavte akci OnSelect tlačítka Díly na Navigate(BrowseParts, ScreenTransition.Fade).

15. Nastavte akci OnSelect tlačítka Znalostní báze na Navigate(Knowledgebase, ScreenTransition.Fade).

Kromě navigace z obrazovky Domů na další obrazovky v systému, obrazovky Schůzky, Díly a Znalostní databáze potřebují způsob, jak uživateli umožnit návrat na obrazovku Domů. Maria se rozhodne přidat tlačítka zpět na tyto obrazovky.

1. V podokně Stromové zobrazení vyberte obrazovku BrowseParts.

2. Vyberte ovládací prvek RectQuickActionBar1, aby se na to zaměřil.

3. Vyberte nabídku Vložit a vyberte Přidat ikonu. Přesuňte ikonu vlevo od ovládacího prvku RectQuickActionBar1. Všimněte si, že ikona zakryje část popisku Procházet díly.

   

4. V nabídce Stromové zobrazení změňte název nového ovládacího prvku ikony na IconReturn1.

5. Změňte vzorec v akci OnSelect na výraz Back(ScreenTransition.Fade). Funkce Zpět naviguje uživatele na předchozí obrazovku, kterou navštívili.

6. Na kartě Vlastnosti změňte vlastnost Ikony na < Vlevo.

7. V záhlaví obrazovky vyberte popisek Procházet díly. Změňte vlastnost X na IconReturn1.Width + 20. Popisek Procházet díly by již neměl být částečně zakryt.

   

8. Podle postupu popsaného v krocích 16 až 22 přidejte ikonu s názvem IconReturn2 do ovládacího prvku RectQuickActionBar3 na obrazovce Znalostní databáze.

9. Podobně přidejte ikonu s názvem IconReturn3 do ovládacího prvku RectQuickActionBar1_1 na obrazovku BrowseAppointments.

10. V podokně Stromové zobrazení vyberte objekt App. Změňte vlastnost StartScreen na výraz Home. Tato akce zajišťuje, že obrazovka Domů se zobrazí při každém spuštění aplikace:

    

    Poznámka

    Pokud neurčíte, která obrazovka se má zobrazit při spuštění aplikace, použije se obrazovka, která se zobrazí v horní části podkokna Stromové zobrazení. Chcete-li přesunout obrazovku na začátek seznamu, klepněte pravým tlačítkem myši na obrazovku v podokně Stromové zobrazení a vyberte Posunout nahoru, dokud nebude nahoře.

Nakonec můžete aplikaci otestovat.

1. Vyberte Soubor > Uložit. V poli Poznámky k verzi zadejte Kompletní verze s domovskou obrazovkou a potom vyberte Uložit.

2. Kliknutím na šipku zpět se vrátíte na obrazovku Domů a poté vyberte F5 a spusťte aplikaci.

3. Ověřte, že se zobrazí obrazovka Domů.

4. Vyberte Schůzky. Měla by se zobrazit obrazovka schůzek.

5. Výběrem černé šipky se vraťte na obrazovku Domů.

6. Výberte Díly. Měl by se zobrazit prohlížeč dílů.

7. Výběrem černé šipky se vraťte na obrazovku Domů.

8. Vyberte Znalostní databáze. Měla by se zobrazit obrazovka dotazu znalostní báze.

9. Výběrem černé šipky se vraťte na obrazovku Domů.

10. Zavřete okno náhledu a vraťte se na Power Apps Studio.

Prototyp aplikace je nyní hotový.

Předchozí Další