Predložak zaslona kalendara u aplikacijama od gotovih gradivnih elemenata

U aplikaciji radnog područja dodajte zaslon kalendara koji korisnicima prikazuje nadolazeće događaje s Office 365 računa programa Outlook. Korisnici mogu odabrati datum na kalendaru i kretati se po popisu događaja za taj dan. Možete promijeniti pojedinosti koje se prikazuju na popisu, dodati drugi zaslon na kojem će se prikazivati više pojedinosti o svakom događaju, prikazati popis sudionika za svaki događaj i izvršiti druga prilagođavanja.

Možete dodati i druge zaslone utemeljene na predlošcima koji prikazuju različite podatke sustava Office 365, kao što su e-pošta, osobe u tvrtki ili ustanovi i dostupnost osoba koje korisnici možda žele pozvati na sastanak.

U ovom pregledu možete saznati sljedeće:

  • kako upotrebljavati zadani zaslon kalendara
  • Kako to izmijeniti.
  • Kako ga integrirati u aplikaciju.

Za podrobnije razmatranje zadane funkcionalnosti ovog zaslona pogledajte odjeljak Referenca zaslona kalendara.

Preduvjet

Poznavanje načina dodavanja i konfiguriranja zaslona i drugih kontrola prilikom stvaranja aplikacije u Power Apps.

Zadana funkcionalnost

Da biste dodali zaslon kalendara iz predloška, učinite sljedeće:

  1. prijavite se u Power Apps, a zatim izradite aplikaciju ili otvorite postojeću aplikaciju u Power Apps Studio.

    U ovoj se temi prikazuje aplikacija za telefon, ali isti se koncepti primjenjuju i na aplikaciju za tablet.

  2. Na kartici Početno na vrpci odaberite mogućnost Novi zaslon > Kalendar.

    Prema zadanim postavkama zaslon bi trebao biti sličan ovome:

    Zaslon kalendara.

  3. Za prikaz podataka odaberite mogućnost na padajućem popisu pri vrhu zaslona.

    Zaslon kalendara nakon dovršetka učitavanja.

Nekoliko korisnih napomena:

  • Prema zadanim je postavkama odabran današnji datum, a na njega se možete jednostavno vratiti tako da odaberete ikonu kalendara u gornjem desnom kutu.
  • Ako odaberete drugi datum, oko njega će se pojaviti krug, a oko današnjeg će se datuma pojaviti pravokutnik u svijetloj boji (plavoj ako je primijenjena zadana tema).
  • Ako je za određeni datum zakazan barem jedan događaj, ispod tog datuma u kalendaru pojavit će se mali obojeni kružić.
  • Ako odaberete datum za koji je zakazan jedan ili više događaja, događaji će se prikazivati na popisu ispod kalendara.

Mijenjanje zaslona

Zadanu funkcionalnost ovog zaslona možete izmijeniti na nekoliko uobičajenih načina:

Ako želite dodatno izmijeniti zaslon, upotrijebite referencu za zaslon kalendara kao vodič.

Određivanje kalendara

Ako već znate koji bi se kalendar trebao prikazivati vašim korisnicima, možete pojednostaviti zaslon određivanjem tog kalendara prije objave aplikacije. Ta promjena uklanja potrebu za padajućim popisom kalendara, stoga ga možete ukloniti.

  1. Postavite svojstvo aplikacije OnStart prema ovoj formuli:

    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 )
    

    Napomena

    Ta je formula malo promijenjena u odnosu na zadanu vrijednost svojstva OnSelect padajućeg popisa za odabir kalendara. Za više informacija o toj kontroli pogledajte odjeljak o njoj u referenci za zaslon kalendara.

  2. Zamijenite {YourCalendarNameHere}, uključujući vitičaste zagrade, nazivom kalendara koji želite prikazati (npr. Kalendar).

    Važno

    Sljedeći koraci pretpostavljaju da ste aplikaciji dodali samo jedan zaslon kalendara. Ako ste dodali više od jednog, nazivi kontrola (kao što je iconCalendar1) završavat će s drugim brojem i morat ćete prema tome prilagoditi formule.

  3. Postavite svojstvo Y kontrole iconCalendar1 na sljedeći izraz:

    RectQuickActionBar1.Height + 20

  4. Postavite svojstvo Y kontrole LblMonthSelected1 na sljedeći izraz:

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. Postavite svojstvo Tekst kontrole LblNoEvents1 na sljedeću vrijednost:

    "No events scheduled"

  6. Postavite svojstvo Vidljivost kontrole LblNoEvents1 na sljedeću formulu:

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. Izbrišite sljedeće kontrole:

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1
  8. Ako zaslon kalendara nije zadani zaslon, dodajte gumb za kretanje sa zadanog zaslona na zaslon kalendara kako biste mogli ispitati aplikaciju.

    Na primjer, ako ste dodali zaslon kalendara u aplikaciju koju ste stvorili iz početka, na Zaslon1 dodajte gumb za pomicanje do Zaslon2.

  9. Spremite aplikaciju, zatim je testirajte u pregledniku ili na mobilnom uređaju.

Prikaz različitih pojedinosti o događaju

Galerija ispod kalendara, pod nazivom CalendarEventsGallery, prema zadanim postavkama prikazuje vrijeme početka, trajanje, predmet i lokaciju svakog događaja. Galeriju možete konfigurirati tako da prikazuje bilo koje polje (kao što je organizator) koje podržava Office 365 poveznik.

  1. U galeriji CalendarEventsGallery postavite svojstvo Tekst nove ili postojeće oznake na stavku ThisItem, nakon koje slijedi točka.

    IntelliSense prikazuje popis polja koja možete odabrati.

  2. Odaberite željeno polje.

    Oznaka prikazuje vrstu informacija koje ste naveli.

Skrivanje događaja koji ne blokiraju izvršavanje

Članovi tima u brojnim uredima šalju zahtjeve za sastanke kako bi se međusobno obavijestili kada ih neće biti u uredu. Da bi se izbjeglo blokiranje rasporeda svih članova, osoba koja šalje zahtjev postavlja svoju dostupnost na Slobodno. Te događaje možete sakriti u kalendaru i galeriji tako da ažurirate nekoliko svojstava.

  1. Postavite svojstvo Stavke galerije CalendarEventsGallery na sljedeću formulu:

    SortByColumns(
        Filter(
            MyCalendarEvents,
            Text( Start, DateTimeFormat.ShortDate ) = 
                Text( _dateSelected, DateTimeFormat.ShortDate ),
            ShowAs <> "Free"
        ),
        "Start"
    )
    

    U toj formuli funkcija Filter skriva ne samo događaje koji su zakazani za datum koji nije odabran, već i događaje za koje je dostupnost postavljena na Slobodno.

  2. U kalendaru postavite svojstvo Vidljivo kontrole Krug na sljedeću formulu:

    CountRows(
        Filter(
            MyCalendarEvents,
            DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, Days ),
            ShowAs <> "Free"
        )
    ) > 0 && !Subcircle1.Visible && Title2.Visible
    

    Ta formula ima iste filtre kao i prethodna. Stoga se krug pokazatelja događaja pojavljuje samo ako ima jedan ili više događaja na odabrani datum i za koje dostupnost nije postavljena na Slobodno.

Integriranje zaslona u aplikaciju

Zaslon kalendara sam je po sebi snažan skup kontrola, ali obično najbolje funkcionira kao dio veće, svestranije aplikacije. Ovaj zaslon možete integrirati u veću aplikaciju na brojne načine, uključujući dodavanje sljedećih mogućnosti:

Prikaz pojedinosti o događaju

Ako korisnici odaberu događaj u galeriji CalendarEventsGallery, možete otvoriti drugi zaslon na kojem se prikazuju informacije o tom događaju.

Napomena

Ovaj postupak prikazuje pojedinosti o događaju u galeriji s dinamičnim sadržajem, ali slične rezultate možete postići primjenom drugih pristupa. Na primjer, možete dobiti više nadzora nad dizajnom ako umjesto toga upotrijebite niz oznaka.

  1. Dodajte prazan zaslon pod nazivom EventDetailsScreen, koji sadrži praznu galeriju podesive visine i gumb za vraćanje na zaslon kalendara.

  2. U galeriji podesive visine dodajte kontrolu Oznaka i kontrolu HTML tekst i postavite njihovo svojstvo AutoHeight na true.

    Napomena

    Power Apps dohvaća tijelo poruke svakog događaja kao HTML tekst, tako da taj sadržaj morate prikazati u Kontrola HTML teksta.

  3. Postavite svojstvo Y kontrole HTML tekst na sljedeći izraz:

    Label1.Y + Label1.Height + 20

  4. Po potrebi podesite dodatna svojstva kako bi odgovarala vašim potrebama u pogledu stila.

    Na primjer, možda ispod kontrole HTML tekst želite dodati razdjelnu liniju.

  5. Postavite svojstvo Stavke galerije podesive visine na sljedeću formulu:

    Table(
        { Title: "Subject", Value: _selectedCalendarEvent.Subject },
        { 
            Title: "Time", 
            Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
        },
        { Title: "Body", Value: _selectedCalendarEvent.Body }
    )
    

    Ta formula stvara galeriju dinamičnih podataka koja je postavljena na vrijednosti polja _selectedCalendarEvent, koje se postavlja svaki put kada korisnik odabere događaj u kontroli CalendarEventsGallery. Tu galeriju možete proširiti za uključivanje više polja tako da joj dodate više oznaka, ali ovaj je niz dobar početak.

  6. Kada stavke galerije postavite na željena mjesta, postavite svojstvo Tekst kontrole Oznaka na ThisItem.Title i svojstvo HtmlText kontrole HTML tekst na ThisItem.Value.

  7. U galeriji CalendarEventsGallery postavite svojstvo OnSelect kontrole Naslov na sljedeću formulu:

    Set( _selectedCalendarEvent, ThisItem );
    Navigate( EventDetailsScreen, None )
    

    Napomena

    Umjesto varijable _selectedCalendarEvent, možete upotrijebiti CalendarEventsGallery.Selected.

Prikaz sudionika događaja

Postupak Office365.GetEventsCalendarViewV2 dohvaća razna polja za svaki događaj, uključujući skup obaveznih i neobaveznih sudionika odvojen točkom sa zarezom. U ovom ćete postupku raščlaniti svaki skup sudionika, odrediti koji su sudionici u vašoj organizaciji i dohvatiti Office 365 profila svih sudionika.

  1. Ako aplikacija ne sadrži poveznik Office 365 korisnici, dodajte ga.

  2. Da biste dohvatili Office 365 profila sudionika sastanka, postavite svojstvo OnSelect kontrole Naslov u CalendarEventsGallery na ovu formulu:

    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 }
            )
        )
    )
    

Na tom su popisu objašnjenje uloge svake radnje ClearCollect:

  • ClearCollect(AttendeeEmailsTemp)

    ClearCollect( AttendeeEmailsTemp,
        Filter(
            Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
            !IsBlank( Result)
        )
    );
    

    Ova formula povezuje obavezne i neobavezne sudionike u jedan niz, a zatim taj niz dijeli na pojedinačne adrese nakon svake točke sa zarezom. Formula zatim filtrira prazne vrijednosti iz tog niza i dodajte druge vrijednosti u zbirku pod nazivom AttendeeEmailsTemp.

  • ClearCollect(AttendeeEmails)

    ClearCollect( AttendeeEmails,
        AddColumns( AttendeeEmailsTemp, 
            "InOrg",
            Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
        )
    );
    

    Ova formula otprilike određuje je li polaznik u vašoj tvrtki ili ustanovi. Definicija _userDomain je jednostavno URL domene u adresi e-pošte osobe koja pokreće aplikaciju. Taj redak stvara dodatan stupac true/false, pod nazivom InOrg, u zbirci AttendeeEmailsTemp. Taj stupac sadrži vrijednost true ako je domena userDomain jednaka URL-u domene adrese e-pošte u tom određenom retku AttendeeEmailsTemp.

    Taj pristup nije uvijek precizan, ali je prilično blizu. Na primjer, određeni sudionici iz vaše tvrtke ili ustanove mogu imati adresu e-pošte kao što je Jane@OnContoso.com, dok je domena _userDomain Contoso.com. Korisnik aplikacije i Jane možda rade u istoj tvrtki, ali njihove se adrese e-pošte pomalo razlikuju. U takvim biste slučajevima možda željeli upotrijebiti ovu formulu:

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

    Međutim, ta se formula podudara s adresama e-pošte kao što je Jane@NotTheContosoCompany.com s domenom _userDomain kao što je Contoso.com, iako te osobe ne rade u istoj tvrtki.

  • ClearCollect(MyPeople)

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

    Da biste dohvatili Office 365 profile, morate koristiti operaciju Office365Users.UserProfile ili Office365Users.UserProfileV2. Ove operacije najprije prikupljaju sve Office 365 profile za sudionike koji se nalaze u korisničkoj organizaciji. Zatim operacije dodaju nekoliko polja za sudionike izvan organizacije. Te dvije stavke odvojili ste u različite postupke jer petlja ForAll ne osigurava red. Dakle, petlja ForAll može najprije prikupiti sudionika izvan tvrtke ili ustanove. Shema za MyPeople u tom slučaju sadrži samo DisplayName, ID, JobTitle i UserPrincipalName. Međutim, radnje UserProfile dohvaćaju puno detaljnije podatke od toga. Stoga prisiljavate zbirku MyPeople da doda Office 365 profila prije ostalih profila.

    Napomena

    Isti rezultat možete postići samo jednom funkcijom 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: ""
                }
            )
        )
    )
    

Da biste dovršili ovu vježbu, učinite sljedeće:

  1. Dodajte zaslon koji sadrži galeriju čije je svojstvo Stavke postavljeno na MyPeople.

  2. U svojstvu OnSelect kontrole Naslov u galeriji CalendarEventsGallery dodajte funkciju Navigate na zaslon koji ste stvorili u prethodnom koraku.

Sljedeći koraci