Jak vytvořit aplikaci, Microsoft 365, MS Power Platform, PowerApps, Vše

1. část – Power Apps tvorba nové aplikace s galerií obrázků

První článek, z naší minisérie: Jak vytvořit aplikaci v Power Apps, je na světě. Postupně budeme přidávat další články, které vás provedou tvorbou aplikace v Power Apps bez znalosti kódování. Dnes nás čeká první část, která se věnuje tvorbě nové aplikace a v ní si vytvoříme galerii obrázků.

Nová aplikace

Aplikace se vytváří a fungují v prostředí Microsoft 365 v platformě Power Apps. Stejně jako jste v Microsoft 365 zvyklí otevírat jakoukoli jinou online službu (Outlook,Word, Excel), otevřete si i Power Apps.

Poté už stačí na úvodní stránce kliknout na Prázdná aplikace -> Aplikace prázdného plátna nebo v levém menu v sekci Aplikace na Nová aplikace -> Plátno.

 

Následně aplikaci pojmenujte (v tomto článku se bude vytvářet aplikace s přehledem kontaktů na externí zaměstnance, kteří nemají účty v Microsoft 365), zvolte její rozložení (pro tento případ tablet) a vytvořte.

Přidání ovládacích a vizuálních prvků

Nyní je třeba aplikaci nastavit tak, aby byla funkční. Nejprve přidejte nejjednodušší prvek, kterým je Textový popisek. V levém panelu vyberte ikonu +, poté se objeví nabídka všech prvků, které lze přidat do aplikace. Vyberte Textový popisek. Přidá se na stránku aplikace.

Nyní můžete textový popisek snadno upravovat. Jen pomocí myši lze popisek roztahovat a přesunovat. V pravém panelu pak máte vlastnosti aktuálně vybraného prvku. U popisku tedy můžete například nastavit jeho text, barvu, tloušťku a velikost písma nebo barvu pozadí. Na základě těchto informací můžete z tohoto textového popisku udat záhlaví stránky aplikace.

Stejným způsobem jako textový popisek přidáte i prvek Svislá galerie. Po jeho přidání ho můžete roztáhnout a přesunout, aby zabral zbytek stránky aplikace. Galerie se vloží s předdefinovaným vzhledem. Ten lze upravovat dle vlastního uvážení. Vše uvnitř galerie jsou další ovládací prvky, například již zmiňované textové popisky.

Nyní galerie nezobrazuje žádná reálná data, ty je třeba nejdříve připojit.

Připojení dat ze SharePointu

Pro připojení dat je třeba nějaká dat mít. Nejjednodušší místo, kde uchovávat data, je SharePoint. V tomto případě jednoduše použijete rozložení galerie, které Power Apps předgeneroval. Tedy v SharePoint seznamu by měly být alespoň dvě textová pole (například Příjmení a Jméno) a speciální pole Obrázek, kde bude v každém řádku seznamu uložen právě jeden obrázkový soubor (vytváření seznamů na SharePointu). V editoru aplikace při kliknutí na galerii bez dat vyskočí malé okno, kde lze data připojit. Zde vyberte Spojnici SharePoint (buď rozkliknutím Spojnic nebo přímým hledáním) a poté zvolte připojení s vaším účtem.

Následně vyberte SharePoint web, kde je seznam s vašimi daty. Pokud se daný web nezobrazuje nebo nevyhledává, můžete zkopírovat a vložit jeho URL adresu.

Zde už jen stačí vybrat požadovaný seznam z nabídky. Následně se v galerii objeví tolik řádků, kolik je položek ve vašem seznamu (pokud se nevejdou na jednu obrazovku, galerií lze scrollovat).  Většinou se automaticky do jednotlivých prvků přiřadí konkrétní pole ze seznamu, tedy i do obrázku obrázek. Pokud chcete zobrazit jiné hodnoty, při vybrání celé galerie (ne jen prvního řádku) v pravém panelu vlastností zvolte možnost Pole upravit a následně pro jakýkoli prvek uvnitř galerie můžete zvolit, co se v něm má zobrazit.

Výsledná galerie může vypadat například takto (data jsou ukázková, aby nebyly šířeny informace o žijících osobách):

Přidání dalších prvků do galerie

Většinou je třeba zobrazit více informací v galerii, než nám nabízí základní šablona. V případě kontaktů na externí zaměstnance by kromě jména bylo vhodné vidět i jejich e-mail a telefon. Tyto (v tomto případě) textová pole je samozřejmě nutné mít definována v datech na SharePointu.

Poté můžete začít přidávat prvky (nyní opět popisky) dovnitř samotné galerie. Zde je nutné si uvědomit, že vždy upravujeme a přidáváme prvky v rámci prvního řádku galerie. Všechny ostatní řádky budou obsahovat stejné prvky stejně naformátované, jen v nich budou zobrazeny jiné informace, podle toho, co je v daném záznamu v datovém zdroji uloženo. To je hlavní výhoda galerie, nezáleží na počtu řádků, množství práce je stále stejné.

Pro přidání prvků do galerie vyberte první řádek galerie nebo galerii samotnou a poté černou ikonku tužky v levém horním rohu oné galerie (viz obrázek níže). Poté v levém ovládacím panelu v sekci přidávání prvků najdete a vyberete požadovaný prvek, nyní textový popisek (postup stejný jako výše).

Když textový popisek přidáte do galerie, objeví se ve všech řádcích a automaticky se v něm zobrazí nějaká další textová hodnota ze zdroje dat, v tomto případě e-mail. Pokud chceme zobrazit jinou hodnotu, lze to nastavit stejným způsobem, jak je popsáno výše. Stejně jako s popiskem mimo galerii lze i uvnitř galerie s ním manipulovat a formátovat ho, jak je třeba. Stejně tak to lze s prvky již vygenerovanými v základní šabloně. Můžete tedy například zmenšit šířku popisku jména a na volné místo roztáhnout popisek s e-mailem.

Spojení dvou textových hodnot do jednoho popisku

Nyní by ještě bylo záhodno přidat telefonní číslo na zaměstnance. Nemusí se to však vždy řešit přidáváním dalších prvků. Další možnost je spojit více textových hodnot do jednoho řetězce a zobrazit ho v jednom poli a tím uvolnit již existující popisek pro jinou hodnotu. Zde už to bude třeba zapsat kódem, který je však naprosto jednoduchý.

Jakýkoli kód se nejpřehledněji píše v řádku vzorců, který se nachází v horní části editoru aplikace, kde vlevo vedle něj je název vlastnosti, pro kterou daný kód (vzorce) platí. Jak bylo řečeno výše, každý prvek má různé své vlastnosti. Některé jdou měnit výběrem z možností nebo zadáním hodnoty v pravém ovládacím panelu. Všechny pak jdou měnit kódem v řádku vzorců. Pokud vyberete popisek s příjmením, v řádků vzorců se zobrazí kód, který zajišťuje, že se zde bude vypisovat právě příjmení. Vlevo od něj můžete vidět, že se jedná o vlastnost Text (viz obrázek níže) a kód ThisItem.Title říká, že text popisku má být titulek aktuální položky (řádku). Titulek je základní pole v SharePointu, které je vygenerované automaticky a v tomto příkladu je používáno pro hodnoty příjmení, jelikož to je ta nejdůležitější informace v těchto datech.

Pokud vyberete popisek se jménem bude v řádku vzorců ThisItem.Jméno a pokud popisek s e-mailem, bude tam ThisItem.Email. Vždy záleží, jak máte pojmenované sloupce ve zdroji dat. Pokud tedy chcete spojit dohromady jméno a příjmení, použijete tedy ve výsledném kódu právě tyto vzorce. Aby se však vše správně zobrazilo, je třeba pomocí nějakých znaků kódu říci aplikaci, že má zobrazit více textových hodnot za sebou a s mezerou mezi nimi.

K tomu využijete znak &, pomocí kterého lze spojovat jakékoli textové řetězce v jeden dlouhý. Princip je takový, že napíšete jeden textový řetězec nebo vzorec pro jeho hodnotu, poté zapíšete znak &, a poté další textový řetězec. Takto můžete zřetězit kolik textu chcete. Pro tento případ můžete spojit jméno a příjmení.

Všimněte si, že jméno a příjmení se nyní zobrazují v jednom popisku. Pouze mezi nimi není mezera, protože ve zdroji dat žádná mezera není, což je správně. Mezeru tedy musíte doplnit zde v aplikaci. K tomu využijete textový řetězec napřímo napsaný do řádku vzorců a připojíte k textu, který zde již spojujete. Pro psaní textu, který není brán jako kód, se používají uvozovky a veškerý text se píše mez ně, například: “Jan Novák”. Mezeru do stávajícího vzorce tedy vložíte pomocí textu pouze mezery.

Nyní můžete volný popisek, kde bylo jméno, použít na zobrazení telefonního čísla. Nyní už znáte dva způsoby. Buď způsob popsaný při prvním vkládání dat nebo způsob zapsání kódem – v tomto případě ThisItem.Telefon.

Výsledná galerie pak může vypadat takto:

Školení Power Apps krok za krokem

Chcete se naučit aplikace v Power Apps tvořit od A do Z. Přihlaste se na náš kurz pro začátečníky. V průběhu kurzu si vytvoříte aplikaci HelpDesk a na praktickém příkladu se naučíte, jak v Power Apps pracovat a aplikace vytvářet.

Naše minisérie článků

Zajímá vás, co dalšího lze v Power Apps nastavit a jak dále aplikaci tvořit. Sledujte naši minisérii článků, kam pravidelně přidáváme další články o Power Apps.

Napsat komentář