Cvičení – přidání zdroje dat do plátnové aplikace a navrhování funkčních stránek

Dokončeno

V Power Apps můžete svá data připojit k již existující aplikaci nebo k aplikaci, kterou vytváříte úplně od začátku. Vaše aplikace se může připojit k SharePointu, Microsoft Dataverse, Salesforce, OneDrivu nebo jinému zdroji dat.

Jako primární zdroj dat pro tuto aplikaci budeme používat SharePoint. Můžete se připojit k webu SharePointu a automaticky vygenerovat aplikaci z vlastního seznamu, vytvořit připojení před přidáním dat do existující aplikace nebo vytvořit úplně novou aplikaci.

Vytvoření sharepointového webu

1. Přihlaste se k portálu SharePoint pomocí přihlašovacích údajů organizace Microsoftu.

2. Vyberte + Vytvořit stránku na úvodní stránce SharePointu a vytvořte SharePoint stránku.

   

3. Na úvodní stránce SharePointu najdete následující informace:

   • Zvolte typ lokality; volba je komunikační web nebo týmový web. Vyberte komunikační web.

   • Zadejte vhodný název lokality; například Easy Sales.

   • V případě potřeby přidejte popis webu (volitelné).

   • V rozevíracím seznamu vyberte jazyk podle vašeho výběru.

4. Vyberte Dokončit pro vytvoření webu SharePoint pro načtení vašich dat.

   

Moderní sharepointový web je vytvořený a připravený k použití v řádu sekund. Na nově vytvořeném webu teď můžete vytvořit seznam, knihovnu dokumentů, stránku atd.

Poznámka

Pokud jste vybrali týmový web, vytvoří se také skupina Microsoft 365.

Vytvoření sharepointového seznamu

SharePointový seznam shromažďuje data s určitou strukturou, podobně jako tabulka, spreadsheet nebo jednoduchá databáze. Může obsahovat mnoho různých typů informací, jako jsou čísla, text, přílohy a dokonce i obrázky.

Pro naši aplikaci Easy Sales vytvoříme seznam obsahující podrobnosti o všech kategoriích produktů: pohovky, židle, stolya koberce.

1. Na nově vytvořeném SharePointovém webu pod názvem Easy Salesvyberte rozevírací seznam + Nový a pak vyberte Seznam pro vytvoření SharePointového seznamu.

   

2. V okně Vytvořit seznam vyberte Prázdný seznam pro vytvoření seznamu SharePoint od začátku.

   

3. Nakonfigurujte podokno Vytvořit následujícím způsobem:

   • Zadejte vhodný název seznamu; například Easy Sales.

   • V případě potřeby vyplňte popis (volitelné).

   • Nechte zaškrtnuté políčko Zobrazit v navigaci na webu.

   • Vyberte Vytvořit.

     

Přidání dat do sharepointového seznamu

Po vytvoření seznamu je čas data přidat. V této části "data" se rozumí podrobnosti o jakémkoli konkrétním produktu. Podrobnosti o produktu zahrnují následující informace: Název, Obrázek, Cena, Rozměry, Hmotnost, Barva, Primární materiál, Plocha, Výška a 3D model/obrázek produktu, které se mají zobrazit ve smíšené realitě.

1. V vytvořeném seznamu Easy sales vyberte + Přidat sloupec a přidejte sloupec určitého typu. Následující seznam ukazuje sloupce, které je potřeba vytvořit, s jejich názvy a typy v tomto formátu: Název sloupce – typ sloupce.

   • Název: Jeden řádek textu
   • ImageLink: Jeden řádek textu
   • Cena: Jeden řádek textu
   • rozměry: Jeden řádek textu
   • Tloušťka: Jeden řádek textu
   • Barva: Jeden řádek textu
   • PrimaryMaterial: Jeden řádek textu
   • výška: Číslo
   • Hloubka: číslo
   • šířka: Číslo
   • Cena/cm2: Číslo
   • ProductCategory: Jeden řádek textu
   • FileType: Jeden řádek textu

   V rozevíracím seznamu vyberte typ sloupce; Vyberte například Jeden řádek textu.

   

   Zadejte podrobnosti o sloupci na záložce Vytvořit sloupec a zvolte Uložit.

   

   Stejný postup opakujte pro zbývající sloupce v předchozím seznamu.

   Poznámka

   Po vytvoření SharePointového seznamu se vytvoří výchozí sloupec Titul, který můžete přejmenovat na Název.

2. Po přidání sloupců musíme do těchto sloupců přidat skutečná data. Začněte přidávat data do sloupců stažením vlastní složky, která obsahuje všechny podrobnosti o produktu pro všechny čtyři seznamy. Pokud chcete získat přístup k datům, vyberte následující odkaz, vyberte tlačítko Další akce souborů (...) v pravém horním rohu stránky a vyberte Stáhnout.

   vlastní složka Power Apps

3. Vyberte + Nový a přidat položku a potom vyplňte požadované podrobnosti, jak je uvedeno ve staženém Excelovém souboru. Vyberte Uložit a uložte zadané podrobnosti.

   

   Poznámka

   Zobrazení mřížky umožňuje volně přidávat informace do různých řádků nebo sloupců.

4. Začněte přidávat data do příslušných sloupců, jak je znázorněno na obrázku:

   

   Poznámka

   Pokud chcete zahrnout vlastní obrázky, můžete do sloupce Image Link přidat odkazy na obrázky veřejných imagí dostupných na internetu. Odkazy na obrázky můžete získat tak, že kliknete pravým tlačítkem a vyberete možnost Kopírovat adresu obrázku.

   Poznámka

   Hodnoty výšky, hloubky a šířky pro seznam kategorií Carpet nebudete potřebovat. Tato kategorie produktu převezme hodnotu plochy změřenou během měření v rámci relace MR a poskytne cenu koberce podle vypočítané plochy. Přidali jsme ale sloupec Price/cm2 pro usnadnění výpočtu.

Vytvoření připojení

Teď, když jsou všechna naše data požadovaná pro aplikaci uložená v sharepointovém seznamu, vytvoříme připojení v Power Apps. Po navázání připojení můžete snadno přistupovat k datům SharePointu prostřednictvím aplikace.

1. Abyste mohli začít vytvářet připojení, přihlaste se k Power Apps a v levém navigačním panelu vyberte Připojení. Pak vyberte + Nové připojení v levém horním rohu.

2. Vyberte SharePoint. Vybíráme SharePoint, protože jsme uložili požadovaná data do SharePointových seznamů.

   

3. Pokud se chcete připojit k SharePointu Online, vyberte Připojit přímo (cloudové služby), pak vyberte Vytvořita potom po zobrazení výzvy zadejte přihlašovací údaje.

   

4. Připojení se vytvoří a můžete vytvořit zcela novou aplikaci.

   Poznámka

   I když se připojení vytvoří, můžete dál přidávat, upravovat a odstraňovat data uložená v sharepointovém seznamu. Všechny změny se projeví v aplikaci prostřednictvím připojení.

Pojďme začít vytvářet aplikaci Easy Sales na základě dat SharePointu a pak podle potřeby přidat data z jiných zdrojů. Podle tohoto postupu budete moct navrhnout některé hlavní stránky aplikace. Naučíte se například navrhnout úvodní obrazovku, stránku produktu a stránku se seznamem produktů. Budeme také přistupovat k datům uloženým v sharepointovém seznamu prostřednictvím ovládacího prvku galerie Power Apps.

Otevření prázdné aplikace

1. Přejděte na domovskou stránku Power Apps a v nabídce vlevo vyberte Vytvořit. Vyberte Prázdnou aplikaci, a pak v části Aplikace na prázdné plátnovyberte Vytvořit.

   

2. Zadejte název aplikace; například Easy-Sales . Vyberte Telefonnía pak vyberte Vytvořit.

   

   Power Apps Studio vytvoří prázdnou aplikaci pro telefony.

   Poznámka

   I když můžete navrhnout aplikaci úplně od začátku pro různá zařízení, toto téma se zaměřuje na návrh aplikace pro telefony.

3. Pokud se otevře dialogové okno Vítejte v Power Apps Studio, zvolte Přeskočit.

   

Připojení k datům

Pokud chcete do Power Appu zahrnout data, musíte se k datům připojit prostřednictvím konektorů ve své aplikaci. Protože jsme všechna data uložili do sharepointového seznamu, vybereme SharePoint jako jeden z konektorů.

1. Na Power Apps Studio vlevo vyberte možnost Data.

2. Po otevření podokna Data vyberte tlačítko Přidat data a připojte se k datům.

3. V okně Vyberte zdroj dat rozbalte část Konektory a vyberte možnost SharePointu.

   

4. V předchozím cvičení jsme už vytvořili připojení. Výběrem vytvořeného připojení přidejte data do aplikace. Vyberte web SharePointu, který byl vytvořen pod názvem Easy Sales.

   

5. Po výběru webu SharePoint Easy Sales se zobrazí všechny seznamy vytvořené na tomto webu. Dále vyberte SharePoint seznam vytvořený ve vztahu k aplikaci a klikněte na Připojit.

   

6. Všechna požadovaná data jsou připojená a připravená k použití v aplikaci. Teď můžete začít vytvářet aplikaci.

Vytvoření úvodní obrazovky

1. Vyberte možnost Stromové zobrazení nalevo od Power Apps Studio . V Power Apps Studiu už byste měli mít prázdnou obrazovku; Pokud ne, na kartě Domů vyberte šipku dolů vedle Nová obrazovka, která otevře seznam typů obrazovky. Pak vyberte Prázdná a vytvořte prázdnou obrazovku.

   

2. Přejmenujte obrazovku na úvodní obrazovku tak, že vyberete ikonu se třemi tečkami (...) vedle názvu obrazovky a vyberete možnost Přejmenovat.

   

3. Vyberte nově vytvořenou obrazovku a změňte její vlastnosti na kartě Vlastnosti na pravé straně obrazovky.

4. Vyberte rozevírací seznam vedle vlastnosti Obrázek pozadí a přidejte obrázek na obrazovku. Vyberte + Přidat soubor obrázku a vyberte stažený soubor s logem.

   

5. Nastavte pozici obrázku na Přizpůsobit, aby se celý obrázek vešel do zadané velikosti. Možnost Přizpůsobit mění velikost obrázku úměrně a obrázek nerozřízne.

   

6. Na kartě Vložit rozbalte rozevírací seznam Vstupní a vyberte Časovač. Potom přetáhněte tlačítko na obrazovku a umístěte ho tam, kde chcete.

   

7. Pokud chcete upravit některé vlastnosti časovače, můžete použít rozevírací seznam Vlastnost v levém horním rohu nebo použít podokno Vlastnosti. Nastavte následující vlastnosti:

   • Automatické spuštění: pravda

   • Doba trvání: 2000

   • Viditelné: false

     

     Poznámka

     Ve výchozím nastavení se doba trvání měří v milisekundách. Protože 1 sekunda = 1000 milisekund, jako hodnotu pro dobu trvání zadáme 2000.

8. Chceme, aby úvodní obrazovka byla viditelná jenom dvě sekundy a pak přešla na domovskou stránku. Vytvořte prázdnou obrazovku, jak jsme to udělali v předchozím kroku, a přejmenujte ji na domovskou stránku. Později vyberte tlačítko časovače přidané na obrazovku Splash a nakonfigurujte vlastnost OnTimerEnd. Nahraďte false následujícím obsahem:

   Navigate('Home Page',ScreenTransition.Fade)
   

   

9. Uložte aplikaci tak, že přejdete na File>Uložit. Dále vyberte možnost Mrak a vyberte Uložit.

Vytvoření domovské stránky

1. Vyberte dříve vytvořenou domovskou stránku . Pro vložení čtyř tlačítek přejděte na kartu Vložení a vyberte možnost Tlačítko, abyste přidali tlačítka na obrazovku. Podle potřeby upravte velikost a umístění těchto tlačítek. Přejmenujte je na Sofas_button, Chairs_button, Tables_buttona Carpets_button.

   

2. Změňte zobrazovaný text tlačítek tak, aby označí kategorie produktů, jako jsou pohovky, židle, stoly a koberce.

   

3. Pomocí těchto tlačítek přejdeme na seznam produktů v různých kategoriích. K tomu musíme vyfiltrovat produkty ze sharepointového seznamu na základě kategorie produktů. Vytvořte dvě nové prázdné obrazovky a přejmenujte je produkty a koberce.

   

4. Vyberte nově vytvořené tlačítko Sofas_button a nakonfigurujte vlastnost OnSelect. Po výběru tlačítka nás musí převést na stránku se seznamem produktů vytvořenou v předchozím kroku. Nahraďte false následujícím kódem:

   Navigate(Products,ScreenTransition.Cover, {ID:1});
   

   pohovky

   Poznámka

   ID je kontextová proměnná s určitou přiřazenou hodnotou. Tato hodnota se předává na cílovou stránku uvedenou ve funkci Navigate. Hodnota přiřazená proměnné vyfiltruje produkty na základě Kategorie produktu.

5. Stejný postup opakujte u ostatních tří tlačítek. Znovu nezapomeňte zadat správné názvy obrazovek ve funkci Navigate; například, chcete-li konfigurovat vlastnost OnSelect tlačítek židle, stolya koberce, použijte funkci Navigate následujícím způsobem:

   Navigate(Products,ScreenTransition.Cover, {ID:2});
   

   Navigate(Products,ScreenTransition.Cover, {ID:3});
   

   Navigate(Carpets,ScreenTransition.Cover)
   

   Spropitné

   Pokud chcete uložit průběh, vyberte nahoře kartu Soubor a vyberte možnost Uložit. K uložení průběhu můžete také použít Ctrl+S.

   Poznámka

   Výchozí syntaxe funkce Navigate je: Navigate(Screen [, Transition [, UpdateContextRecord]])

   • obrazovka: Povinné. Obrazovka, která se má zobrazit.
   • přechod: volitelný. Vizuální přechod pro použití mezi aktuální obrazovkou a další obrazovkou. Výchozí hodnota je None.
   • UpdateContextRecord: Volitelné. Záznam, který obsahuje název alespoň jednoho sloupce a hodnotu pro každý sloupec. Tento záznam aktualizuje kontextové proměnné nové obrazovky, jako by byly předány funkci UpdateContext.

   Spropitné

   Aplikaci můžete otestovat stisknutím klávesy F5 na klávesnici nebo kliknutím na tlačítko Přehrát v pravém horním rohu Power Apps Studia.

Použití ovládacího prvku Galerie

Teď, když jsme přidali kategorie produktů, zobrazíme seznam produktů v každé kategorii. V Power Apps používáme ovládací prvek galerie k zobrazení záznamu dat.

1. Na obrazovce Produkty vyberte na kartě Vložit možnost Galerie>Svislá a přidejte na obrazovku ovládací prvek Galerie .

   

2. Přejmenujte ho na Gallery_products. Na záložce Vlastnosti v levém podokně nastavte vlastnost Položky následujícím způsobem:

   If(
   ID = 1,
   Filter('Easy Sales',(ProductCategory = "Sofa")),
   ID = 2,
   Filter('Easy Sales',(ProductCategory = "Chair")),
   ID = 3,
   Filter('Easy Sales',(ProductCategory = "Table")),
   ID = 4,
   Filter('Easy Sales',(ProductCategory = "Carpet")))
   

   

   Filtrujeme produkty uložené v seznamu SharePoint na základě kategorie produktu . Kontextové proměnné se používají pro proces filtrování.

3. V podokně Vlastnosti nakonfigurujte vlastnost pole Galerie> výběrem možnosti Upravit.

   • Přiřaďte cenu nadpisu Podnadpis1.

   • Přiřaďte nadpisu Nadpis1 název Nadpis.

     

   Přiřazováním předcházejících polí si všimnete, že se data odrážejí ve vaší galerii .

4. Podle potřeby upravte velikost Gallery_products. Pokud chcete přidat ImageLink k nadpisu Image1, vyberte Image v galerii a nakonfigurujte vlastnost Image na kartě Property přidáním následujícího kódu:

   ThisItem.ImageLink
   

   

5. Teď vložme popisek do horní části obrazovky tím, že vybereme možnost Popisek. Pak upravte umístění, barvu a zobrazení textu, jak je znázorněno na obrázku:

   

6. Přidejte ikonu Zpět nad dříve přidaným popiskem, která uživateli pomůže v případě potřeby přejít na domovské stránky. Pokud chcete přidat ikonu Zpět, rozbalte rozevírací seznam Ikony a vyberte ikonu Zpět.

   

7. V případě potřeby umístěte ikonu Zpět správně a v případě potřeby změňte její barvu zobrazení. Pomocí následujícího příkazu nakonfigurujte jeho vlastnost OnSelect:

   Navigate('Home Page',ScreenTransition.Cover)
   

   vlastnosti OnSelect

8. Postupujte stejně jako pro stránku Koberců. Nakonfigurujte vlastnost Items galerie přidanou na stránku Koberce následujícím způsobem:

   Filter('Easy Sales',ProductCategory = "Carpet")
   

   

   Spropitné

   Pokud chcete uložit průběh, vyberte nahoře kartu Soubor a vyberte možnost Uložit. K uložení průběhu můžete také použít Ctrl+S.

Po implementaci předchozích kroků musí vaše aplikace vypadat takto. Aplikace bude obsahovat vynikající úvodní obrazovku, domovskou stránku a inventář produktů pro procházení produktů.