Cvičení – přidání zdroje dat do aplikace plátna a návrh 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í webu SharePoint

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

2. Výběrem možnosti + Vytvořit web na úvodní stránce SharePointu vytvořte sharepointový web.

   

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 svého výběru.

4. Výběrem možnosti Dokončit vytvoříte sharepointový web pro načítání 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, tabulka 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, stoly a koberce.

1. Na nově vytvořeném sharepointovém webu pod názvem Easy Sales vyberte rozevírací seznam + Nový a pak vyberte Seznam a vytvořte seznam SharePointu.

   

2. V okně Vytvořit seznam vyberte Prázdný seznam a vytvořte úplně nový sharepointový seznam.

   

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 obsahují následující informace: Name, Image, Price, Dimensions, Weight, Color, PrimaryMaterial, Area, Height a 3D model/image produktu, které se mají zobrazit v hybridní realitě.

1. V vytvořeném seznamu Snadné prodeje 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: Single line of text
   • 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 kartě Vytvořit sloupec a vyberte 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 Název, který můžete přejmenovat jako 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ý , chcete-li přidat položku, a pak vyplňte požadované podrobnosti, jak je uvedeno ve staženého excelovém souboru. Výběrem možnosti Uložit 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 ImageLink přidat odkazy na obrázky veřejných imagí, které jsou k dispozici 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:

   Pro seznam kategorií koberců nebudete potřebovat hodnoty výšky, hloubky a šířky. Tato kategorie produktu převezme hodnotu oblasti měřenou během měření v relaci MR a poskytne cenu koberce po vypočítané oblasti. Přidali jsme ale sloupec Price/cm2 , který vám pomůže s výpočtem.

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. Pokud chcete začít vytvářet připojení, přihlaste se k Power Apps a v levém navigačním panelu vyberte Připojení ions. Pak vyberte + Nové připojení poblíž levého horního rohu.

2. Vyberte možnost SharePoint. Vybíráme SharePoint , protože jsme uložili požadovaná data v sharepointových seznamech.

   

3. Pokud se chcete připojit k SharePointu Online, vyberte Připojení přímo (cloudové služby) a pak vyberte Vytvořit a 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 Prázdná aplikace plátna vyberte Vytvořit.

   

2. Zadejte název aplikace; Například Easy-Sales. Vyberte Telefon 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ítá vás Power Apps Studio, vyberte Přeskočit.

   

Připojit k datům

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

1. Vlevo od Power Apps Studia 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ě Vybrat zdroj dat rozbalte oddíl Připojení orů a vyberte možnost SharePoint.

   

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 sharepointový web vytvořený pod názvem Easy Sales.

   

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

   

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 Studia. V Power Apps Studiu už byste měli mít prázdnou obrazovku; Pokud ne, na kartě Domů vyberte šipku dolů vedle obrazovky Nový, která otevře seznam typů obrazovky. Pak výběrem možnosti Prázdné vytvořte prázdnou obrazovku.

   

2. Přejmenujte obrazovku na Úvodní obrazovku tak, že vedle názvu obrazovky vyberete ikonu se třemi tečkami (...) 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 tak, aby se celý obrázek vešl do zadané velikosti. Možnost Přizpůsobit obrázek škáluje úměrně a obrázek neořízne.

   

6. Na kartě Vložení rozbalte rozevírací seznam Vstup 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 Vlastnosti v levém horním rohu nebo použít podokno Vlastnosti . Nastavte následující vlastnosti:

   • Automatický start: true

   • 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 úvodní obrazovku 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 >Soubor uložit. Dále vyberte možnost Cloud a vyberte Uložit.

Vytvoření domovské stránky

1. Vyberte domovskou stránku vytvořenou dříve. Pokud chcete vložit čtyři tlačítka, přejděte na kartu Vložení a výběrem možnosti Tlačítko přidejte 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_button a 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 je potřeba vyfiltrovat produkty ze seznamu SharePointu 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 hodnotu false následujícím kódem:

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

   

   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 produktů.

5. Stejný postup opakujte u ostatních tří tlačítek. Znovu se ujistěte, že ve funkci Navigate zadáte správné názvy obrazovek. Pokud chcete například nakonfigurovat vlastnost OnSelect tlačítek Židle, Tabulky a 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)
   

   Tip

   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 použít také Kombinaci kláves Ctrl+S .

   Poznámka:

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

   • Obrazovka: Povinné. Obrazovka, která se má zobrazit.
   • Přechod: Nepovinný. Požadovaný vizuální přechod mezi aktuální obrazovkou a další obrazovkou. Výchozí hodnota je None.
   • UpdateContextRecord: Volitelné. Záznam, který obsahuje název aspoň jednoho sloupce a hodnotu pro každý uvedený sloupec. Tento záznam aktualizuje kontextové proměnné nové obrazovky stejně, jako kdyby byl předán funkci UpdateContext.

   Tip

   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 na kartě Vložení vyberte Galerie>svisle a přidejte ovládací prvek Galerie na obrazovku.

   

2. Přejmenujte ho na Gallery_products. Na kartě Vlastnosti v levém podokně nakonfigurujte vlastnost Items 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")))
   

   

   Produkty uložené v sharepointovém seznamu vyfiltrujeme na základě kategorie produktů. Kontextové proměnné se používají pro proces filtrování.

3. Výběrem možnosti Upravit nakonfigurujte vlastnost Pole galerie>v podokně Vlastnosti:

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

   • Přiřaďte nadpis nadpisu 1 .

     

   Při přiřazování předchozích polí uvidíte, že se data v galerii projeví.

4. Podle potřeby upravte velikost Gallery_products . Pokud chcete přidat ImageLink do nadpisu Obrázek1 , vyberte obrázek v galerii a nakonfigurujte vlastnost Image na kartě Vlastnost přidáním tohoto řádku kódu:

   ThisItem.ImageLink
   

   

5. Teď vložíme popisek v horní části obrazovky tak , ž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 nad dříve přidaný popisek ikonu Zpět, která uživateli pomůže v případě potřeby přejít na domovskou stránku. 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í. Nakonfigurujte jeho vlastnost OnSelect přidáním následujícího příkazu:

   Navigate('Home Page',ScreenTransition.Cover)
   

   

8. Postupujte stejně jako u stránky Koberce . Vlastnost Items galerie přidané na stránku Koberce nakonfigurujte následujícím způsobem:

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

   

   Tip

   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 použít také Kombinaci kláves 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ů.