Šablona obrazovky kalendáře v aplikacích plátna

Článek
03/09/2022
4 min ke čtení

V aplikaci plátna přidejte obrazovku kalendáře, která ukazuje uživatelům nadcházející události z jejich účtů aplikace Office 365 Outlook. Uživatelé si mohou vybrat datum z kalendáře a procházet seznam událostí daného dne. Můžete změnit, které podrobnosti se zobrazí v seznamu, přidat druhou obrazovku, která zobrazuje více podrobností o každé události, zobrazit seznam účastníků pro každou událost a provést další přizpůsobení.

Můžete také přidat další obrazovky založené na šablonách, které zobrazují různá data z Office 365 jako e-mail, lidé v organizaci a dostupnost lidí, které by uživatelé mohli chtít pozvat na schůzku.

Tento přehled vás naučí:

Jak používat výchozí obrazovku kalendáře.
Jak ji upravit.
Jak ji integrovat do aplikace.

Pro podrobné informace o výchozí funkci této obrazovky, viz reference na obrazovce kalendáře.

Požadavek

Seznámení s tím, jak přidávat a konfigurovat obrazovky a další ovládací prvky při vytváření aplikace v Power Apps.

Výchozí funkce

Postup přidání obrazovky kalendáře ze šablony:

Přihlaste se k Power Apps a poté vytvořte aplikaci nebo otevřete existující aplikaci v systému Power Apps Studio.

Tohle téma zobrazuje telefonní aplikaci, ale stejné koncepty platí i pro tabletovou aplikaci.
Na kartě pásu Domů vyberte Nová obrazovka > Kalendář.

Ve výchozím nastavení vypadá tato obrazovka takto:
Chcete-li zobrazit data, vyberte možnost v rozevíracím seznamu v horní části obrazovky.

Několik užitečných poznámek:

Dnešní datum je ve výchozím nastavení vybráno a můžete se k němu snadno vrátit výběrem ikony kalendáře v pravém horním rohu.
Pokud vyberete jiné datum, kruh jej obklopuje a dnešní datum obklopuje světlý obdélník (modrý, je-li použit výchozí motiv).
Pokud je pro určité datum naplánována alespoň jedna událost, objeví se pod tímto datem v kalendáři malý barevný kruh.
Pokud vyberete datum, pro které je naplánována jedna nebo více událostí, zobrazí se události v seznamu pod kalendářem.

Úprava obrazovky

Výchozí funkce této obrazovky můžete upravit několika běžnými způsoby:

Pokud chcete obrazovku dále upravit, použijte reference na obrazovce kalendáře jako průvodce.

Zadejte kalendář

Pokud již víte, jaký kalendář by uživatelé měli zobrazit, můžete obrazovku před publikováním aplikace zjednodušit zadáním daného kalendáře. Tato změna odstraní potřebu rozevíracího seznamu kalendářů, abyste je mohli odebrat.

Vlastnost OnStart aplikace nastavte na tento vzorec:

Set( _userDomain, Right( User().Email, Len( User().Email ) - Find( "@", User().Email ) ) );
Set( _dateSelected, Today() );
Set( _firstDayOfMonth, DateAdd( Today(), 1 - Day( Today() ), Days ) );
Set( _firstDayInView, 
    DateAdd( _firstDayOfMonth, -( Weekday( _firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _lastDayOfMonth, DateAdd( DateAdd( _firstDayOfMonth, 1, Months ), -1, Days ) );
Set( _calendarVisible, false );
Set( _myCalendar, 
    LookUp(Office365Outlook.CalendarGetTablesV2().value, DisplayName = "{YourCalendarNameHere}" )
);
Set( _minDate, 
    DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days )
);
Set( _maxDate, 
    DateAdd(
        DateAdd( _firstDayOfMonth, -( Weekday(_firstDayOfMonth) - 2 + 1 ), Days ),
        40, 
        Days 
    )
);
ClearCollect( MyCalendarEvents, 
Office365Outlook.GetEventsCalendarViewV3(_myCalendar.name, 
    Text( _minDate, UTC),
    Text( _maxDate, UTC)
).value
);
Set( _calendarVisible, true )

Poznámka

Tento vzorec je mírně upraven z výchozí hodnoty vlastnosti OnSelect rozevíracího seznamu pro výběr kalendáře. Další informace o tomto ovládacím prvku naleznete v části reference na obrazovce kalendáře.

Nahraďte {YourCalendarNameHere} včetně složených závorek názvem kalendáře, který chcete zobrazit (například Kalendář).

Důležité

Následující kroky předpokládají, že jste do aplikace přidali pouze jednu obrazovku kalendáře. Pokud jste přidali více než jednu, kontrolní názvy (například iconCalendar1) skončí jiným číslem a budete muset odpovídajícím způsobem upravit vzorce.
Nastavte vlastnost Y ovládacího prvku iconCalendar1 na tento výraz:

RectQuickActionBar1.Height + 20
Nastavte vlastnost Y ovládacího prvku LblMonthSelected1 na tento výraz:

iconCalendar1.Y + iconCalendar1.Height + 20
Nastavte vlastnost Text ovládacího prvku LblNoEvents1 na tuto hodnotu:

"No events scheduled"
Nastavte vlastnost Viditelný prvku LblNoEvents1 na tento vzorec:

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
Odstraňte tyto ovládací prvky:
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
Pokud obrazovka kalendáře není výchozí obrazovka, přidejte tlačítko, které přechází z výchozí obrazovky na obrazovku kalendáře, abyste mohli aplikaci otestovat.

Například přidejte tlačítko na Screen1 který přejde na Screen2, pokud jste do aplikace vytvořené z prázdné přidali obrazovku kalendáře.
Uložte aplikaci a otestujte ji v prohlížeči nebo na mobilním zařízení.

Zobrazit různé podrobnosti o události

Ve výchozím nastavení galerie pod kalendářem pojmenována CalendarEventsGallery zobrazuje čas zahájení, dobu trvání, předmět a umístění každé události. Můžete nakonfigurovat galerii tak, aby zobrazovala jakékoli pole (například organizátor), které konektor Office 365 podporuje.

V CalendarEventsGallery nastavte vlastnost Text nového nebo existujícího popisku na ThisItem a přidejte za něj tečku.

IntelliSense uvádí pole, která můžete vybrat.
Vyberte požadovaná pole.

Štítek zobrazuje typ informací, které jste zadali.

Skrýt události bez blokování

V mnoha kancelářích členové týmu zasílají žádosti o schůzku, aby si navzájem oznámili, kdy budou mimo kancelář. Aby se zabránilo blokování harmonogramů všech, nastaví osoba odesílající požadavek její dostupnost Volno. Tyto události můžete skrýt z kalendáře a galerie aktualizací několika vlastností.

Nastavte vlastnost Položky CalendarEventsGallery na tento vzorec:
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
V tomto vzorci funkce Filtr skryje nejen ty události, které jsou naplánovány na jiné datum, než je datum vybrané, ale také události, pro které je dostupnost nastavena na Volno.
V kalendáři nastavte vlastnost Viditelný ovládacího prvku Kruh podle tohoto vzorce:
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
Tento vzorec obsahuje stejné filtry jako předchozí vzorec. Kruh indikátorů událostí se proto zobrazí pod datem, pouze pokud má jednu nebo více událostí, které jsou k vybranému datu a pro které není dostupnost nastavena na Volno.

Integrace obrazovky do aplikace

Obrazovka kalendáře je sama o sobě mocným souborem ovládacích prvků, obvykle však funguje nejlépe jako součást větší a všestrannější aplikace. Tuto obrazovku můžete integrovat do větší aplikace několika způsoby, včetně přidání těchto možností:

Zobrazit podrobnosti události

Pokud uživatelé vyberou událost v CalendarEventsGallery, můžete otevřít další obrazovku, která zobrazuje další informace o této události.

Poznámka

Tento postup zobrazuje podrobnosti o události v galerii s dynamickým obsahem, ale podobných výsledků můžete dosáhnout i jinými přístupy. Můžete například získat větší kontrolu nad designem pomocí řady štítků.

Přidejte prázdnou obrazovku s názvem EventDetailsScreen, která obsahuje prázdnou galerii s flexibilní výškou a tlačítko, které přejde zpět na obrazovku kalendáře.
V galerii flexibilní výšky přidejte ovládací prvek Popisek ovládací prvek HTML text a nastavit vlastnost AutoHeight obou na true.

Poznámka

Power Apps načte text zprávy každé události jako text HTML, takže je třeba ukázat tento obsah v ovládacím prvku HTML text.
Nastavte vlastnost Y ovládacího prvku HTML text na tento výraz:

Label1.Y + Label1.Height + 20
Podle potřeby upravte další vlastnosti podle svých potřeb.

Například byste mohli chtít přidat oddělovací řádek pod ovládací prvbek HTML text.
Nastavte vlastnost Položky galerie s flexibilní výškou na tento vzorec:
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
Tento vzorec vytváří galerii dynamických dat nastavenou na hodnoty pole _selectedCalendarEvent, které je nastaveno pokaždé, když uživatel vybere událost v ovládacím prvku CalendarEventsGallery. Tuto galerii můžete rozšířit o další pole přidáním dalších štítků, ale tato sada poskytuje dobrý výchozí bod.
S položkami galerie na místě, nastavte vlastnost Text ovládacího prvku Popisek na ThisItem.Title a vlastnost HtmlText ovládacího prvku HTML text na ThisItem.Value.
V CalendarEventsGallery nastavte vlastnost OnSelect ovládacího prvku Název podle tohoto vzorce:
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
Poznámka

Namísto použití proměnné _selectedCalendarEvent můžete místo toho použít CalendarEventsGallery.Selected.

Zobrazit účastníky akce

Operace Office365.GetEventsCalendarViewV2 načte pro každou událost řadu polí, včetně sady povinných a volitelných účastníků oddělených středníkem. V tomto postupu budete analyzovat každou sadu účastníků, určit, kteří účastníci jsou ve vaší organizaci, a načíst profily Office 365 všech, kdo jsou.

Pokud vaše aplikace neobsahuje konektor Uživatelé Office 365, přidejte jej.

Chcete-li načíst profily Office 365 účastníků schůzky, nastavte vlastnost OnSelect ovládacího prvku Náze v CalendarEventsGallery podle tohoto vzorce:

Set( _selectedCalendarEvent, ThisItem );
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ),
        !IsBlank( Result )
    )
);
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len( Result ) - Find( "@", Result ) ) )
    )
);
ClearCollect( MyPeople,
    ForAll( AttendeeEmails, If( InOrg, Office365Users.UserProfile( Result ) ) ) 
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { DisplayName: Result, Id: "", JobTitle: "", UserPrincipalName: Result }
        )
    )
)

Tento seznam popisuje, co každá operace ClearCollect provádí:

ClearCollect(AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
Tento vzorec zřetězí požadované a volitelné účastníky do jednoho řetězce a poté rozdělí tento řetězec na jednotlivé adresy v každém středníku. Vzorec pak odfiltruje prázdné hodnoty z této sady a přidá další hodnoty do kolekce pojmenované AttendeeEmailsTemp.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
Tento vzorec zhruba určuje, zda je účastník ve vaší organizaci. Definice _userDomain je jednoduše adresa URL domény v e-mailové adrese osoby, která aplikaci spouští. Tento řádek vytvoří další sloupec true / false pojmenovaný InOrg v kolekci AttendeeEmailsTemp. Tento sloupec obsahuje true, pokud userDomain je ekvivalentní adrese URL e-mailové adresy v tomto konkrétním řádku AttendeeEmailsTemp.

Tento přístup není vždy přesný, ale blíží se. Například někteří účastníci ve vaší organizaci mohou mít e-mailovou adresu Jane@OnContoso.com, zatímco _userDomain je Contoso.com. Uživatel aplikace a Jane mohou pracovat ve stejné společnosti, ale jejich e-mailové adresy se mohou mírně lišit. V takových případech můžete použít tento vzorec:

Upper(_userDomain) in Upper(Right(Result, Len(Result) - Find("@", Result)))

Tento vzorec však odpovídá e-mailovým adresám jako Jane@NotTheContosoCompany.com a _userDomain Contoso.com a tito lidé nepracují ve stejné společnosti.

ClearCollect(MyPeople)

ClearCollect( MyPeople,
    ForAll( AttendeeEmails, 
        If( InOrg, 
            Office365Users.UserProfile( Result )
        )
    )
);
Collect( MyPeople,
    ForAll( AttendeeEmails,
        If( !InOrg, 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result
            }
        )
    )
);

Chcete-li získat profily Office 365, musíte použít operaci Office365Users.UserProfile nebo Office365Users.UserProfileV2. Tyto operace nejprve shromáždí všechny profily Office 365 účastníků, kteří jsou v organizaci uživatele. Poté operace přidají několik polí pro účastníky mimo organizaci. Tyto dvě položky jste rozdělili na odlišné operace, protože smyčka ForAll nezaručuje objednávku. Proto ForAll může nejprve shromáždit účastníka mimo organizaci. V tomto případě schéma pro MyPeople obsahuje pouze DisplayName, ID, JobTitle a UserPrincipalName. Operace UserProfile však načítají mnohem bohatší data než ta. Takže vynutíte kolekci MyPeople přidat profily Office 365 před ostatními profily.

Poznámka

Stejného výsledku můžete dosáhnout pouze s jednou funkcí ClearCollect:

ClearCollect( MyPeople, 
    ForAll(
        AddColumns(
            Filter(
                Split(
                    ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, 
                    ";"
                ), 
                !IsBlank( Result )
            ), 
            "InOrg", _userDomain = Right( Result, Len( Result ) - Find( "@", Result ) )
        ), 
        If( InOrg, 
            Office365Users.UserProfile( Result ), 
            { 
                DisplayName: Result, 
                Id: "", 
                JobTitle: "", 
                UserPrincipalName: Result, 
                Department: "", 
                OfficeLocation: "", 
                TelephoneNumber: ""
            }
        )
    )
)

Pro dokončení tohoto cvičení:

Přidejte obrazovku, která obsahuje galerii, pro kterou je vlastnost Položky nastavena na MyPeople.
Ve vlastnosti OnSelect ovládacího prvku Název v CalendarEventsGallery přidejte funkci Navigovat na obrazovku, kterou jste vytvořili v předchozím kroku.

Další kroky

Poznámka

Můžete nám sdělit, jaké máte jazykové preference pro dokumentaci? Zúčastněte se krátkého průzkumu. (upozorňujeme, že tento průzkum je v angličtině)

Průzkum bude trvat asi sedm minut. Nejsou shromažďovány žádné osobní údaje (prohlášení o zásadách ochrany osobních údajů).

Šablona obrazovky kalendáře v aplikacích plátna

Požadavek

Výchozí funkce

Úprava obrazovky

Zadejte kalendář

Zobrazit různé podrobnosti o události

Skrýt události bez blokování

Integrace obrazovky do aplikace

Zobrazit podrobnosti události

Zobrazit účastníky akce

Další kroky

Váš názor