Kalenderskjermmal i lerretsapper

Artikkel
03/15/2023

I en lerretsapp legger du til en kalenderskjerm som viser brukere forestående hendelser fra Office 365 Outlook-kontoene sine. Brukere kan velge en dato fra en kalender og bla gjennom en liste over dagshendelser. Du kan endre hvilke detaljer som vises i listen, legge til et nytt skjermbilde som viser flere detaljer om hver hendelse, vise en liste over deltakere for hver hendelse, og gjøre andre tilpassinger.

Du kan også legge til andre malbaserte skjermbilder som viser andre data fra Office 365, for eksempel en brukers e-post, personer i en organisasjon og tilgjengelighet for personer som brukere kan ønske å invitere til et møte.

Denne oversikten lærer deg:

Slik bruker du standardskjermen for kalender.
Slik endrer du den.
Slik integrerer du den i en app.

Hvis du vil ha en mer detaljert informasjon om denne skjermens standardfunksjoner, kan du se referanse for kalenderskjermen.

Forutsetning

Kjennskap til hvordan du legger til og konfigurerer skjermer og andre kontroller mens du oppretter en app i Power Apps.

Standard funksjonalitet

Slik legger du til en kalenderskjerm fra malen:

Logg på Power Apps, og opprett en app, eller åpne en eksisterende app i Power Apps Studio.

Dette emnet viser en telefonapp, men de samme konseptene gjelder for en nettbrettapp.
På Start-fanen på båndet velger du Ny skjerm > Kalender.

Skjermbildet ser ut som standard på denne måten:
Hvis du vil vise data, velger du et alternativ i rullegardinlisten nær toppen av skjermen.

Noen nyttige notater:

Dagens dato velges som standard, og du kan enkelt gå tilbake til den ved å velge kalenderikonet øverst i høyre hjørne.
Hvis du velger en annen dato, omsluttes den av en sirkel og et lyst rektangel (blå hvis standardtemaet brukes) omslutter dagens dato.
Hvis minst én hendelse er planlagt for en bestemt dato, vises en liten, farget sirkel under denne datoen i kalenderen.
Hvis du velger en dato som det skal planlegges en eller flere hendelser for, vises hendelsene i en liste under kalenderen.

Endre skjermbildet

Du kan endre standardfunksjonaliteten for dette skjermbildet på noen få vanlige måter:

Hvis du vil endre skjermen ytterligere, kan du bruke referansen for kalenderskjerm som veiledning.

Angi kalenderen

Hvis du allerede vet hvilken kalender brukerne skal vise, kan du forenkle skjermen ved å angi denne kalenderen før du publiserer appen. Denne endringen fjerner behovet for rullegardinlisten over kalendere, slik at du kan fjerne den.

Angi OnStart-egenskapen for appen i denne formelen:

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 )

Obs!

Denne formelen er noe redigert fra standardverdien for OnSelect-egenskapen på rullegardinlisten for å velge en kalender. Hvis du vil ha mer informasjon om denne kontrollen, kan du se delen i referanse for kalenderskjermen.

Erstatt {YourCalendarNameHere}, inkludert klammeparenteser, med navnet på kalenderen du vil vise (for eksempel Kalender).

Viktig

Fremgangsmåten nedenfor forutsetter at du har lagt til bare en kalenderskjerm i appen. Hvis du har lagt til flere, vil kontrollnavn (for eksempel iconCalendar1) slutte med et annet tall, og du må justere formlene i henhold til dette.
Angi Y-egenskapen for iconCalendar1-kontrollen til dette uttrykket:

RectQuickActionBar1.Height + 20
Angi Y-egenskapen for LblMonthSelected1-kontrollen til dette uttrykket:

iconCalendar1.Y + iconCalendar1.Height + 20
Angi Text-egenskapen for LblNoEvents1-kontrollen til denne verdien:

"No events scheduled"
Angi Visible-egenskapen for LblNoEvents1 til denne formelen:

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
Slett disse kontrollene:
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
Hvis kalenderskjermen ikke er standardskjermen, legger du til en knapp som navigerer fra standardskjermbildet til kalenderskjermen, slik at du kan teste appen.

Du kan for eksempel legge til en knapp på Screen1 som navigerer til Screen2 hvis du har lagt til en kalenderskjerm i en app som du har opprettet fra tom.
Lagre appen, og test den i en nettleser eller på en mobil enhet.

Vise ulike detaljer om en hendelse

Galleriet under kalenderen med navnet CalendarEventsGallery viser som starttiden, varighet, emne og plassering for hver hendelse. Du kan konfigurere galleriet til å vise alle felt (for eksempel arrangøren) som Office 365-koblingen støtter.

I CalendarEventsGallery angir du Text-egenskapen for en ny eller eksisterende etikett til ThisItem etterfulgt av et punktum.

IntelliSense viser en liste over felt som du kan velge.
Velg ønsket felt.

Etiketten viser informasjonstypen du har angitt.

Skjul ikke-blokkeringshendelser

På mange kontorer sender teammedlemmer møteinnkallelser for å varsle hverandre når de er borte fra kontoret. For å unngå å blokkere alles tidsplaner, angir personen som sender forespørselen, tilgjengeligheten til Ledig. Du kan skjule disse hendelsene fra kalenderen og galleriet ved å oppdatere et par egenskaper.

Angi Items-egenskapen for CalendarEventsGallery til denne formelen:
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
I denne formelen skjuler Filter-funksjonen ikke bare de hendelsene som er planlagt for en annen dato enn den som er valgt, men også hendelser som tilgjengeligheten er satt til Ledig for.
Angi Visible-egenskapen for Sirkel-kontrollen til denne formelen:
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
Denne formelen inneholder de samme filtrene som i forrige formel. Derfor vises sirkelen for hendelsesindikatoren under en dato bare hvis den har én eller flere hendelser som er på den valgte datoen, og som tilgjengeligheten ikke er angitt til Ledig for.

Integrere skjermen i en app

Kalenderskjermen er en kraftig bunt med kontroller, men den fungerer vanligvis best som en del av en større og mer fleksibel app. Du kan integrere dette skjermbildet i en større app på flere måter, inkludert å legge til disse alternativene:

Vis hendelsesdetaljer

Hvis brukere velger en hendelse i CalendarEventsGallery, kan du åpne et annet skjermbilde som viser mer informasjon om den hendelsen.

Obs!

Denne prosedyren viser hendelsesdetaljer i et galleri med dynamisk innhold, men du kan oppnå samme resultat med andre fremgangsmåter. Du kan for eksempel få flere utformingskontroller ved å bruke en serie etiketter i stedet.

Legg til en tom skjerm med navnet EventDetailsScreen, som inneholder et tomt galleri med fleksibel høyde, og en knapp som navigerer tilbake til kalenderskjermbildet.
I galleriet med fleksibel høyde legger du til en Etikett-kontroll og en HTML-tekst-kontroll og angir AutoHeight-egenskapen for begge til sann.

Obs!

Power Apps henter meldingsteksten for hver hendelse som HTML-tekst, så du må vise innholdet i en HTML-tekst-kontroll.
Angi Y-egenskapen for HTML-tekst-kontrollen til dette uttrykket:

Label1.Y + Label1.Height + 20
Juster ytterligere egenskaper etter behov, slik at de passer til stilbehovene dine.

Det kan for eksempel hende at du vil legge til en skillelinje nedenfor HTML-tekst-kontrollen.
Angi Items-egenskapen for galleriet med fleksibel høyde til denne formelen:
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
Denne formelen oppretter et galleri med dynamiske data som er angitt som feltverdier for _selectedCalendarEvent, som angis hver gang brukeren velger en hendelse i CalendarEventsGallery-kontrollen. Du kan utvide dette galleriet slik at det inneholder flere felt ved å legge til flere etiketter, men dette settet gir et godt utgangspunkt.
Sett Text-egenskapen for Etikett-kontrollen til ThisItem.Title og med HtmlText-egenskapen til HTML- HtmlText-egenskapen for HTML-tekst-kontrollen til ThisItem.Value.
I CalendarEventsGallery angir du OnSelect-egenskapen for Tittel-kontrollen til denne formelen:
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
Obs!

I stedet for å bruke variabelen _selectedCalendarEvent, kan du i stedet bruke CalendarEventsGallery.Selected.

Vis hendelsesdeltakere

Office365.GetEventsCalendarViewV2-operasjonen henter en rekke felt for hver hendelse, inkludert et semikolondelt sett med obligatoriske og valgfrie deltakere. I denne prosedyren skal du analysere hvert sett med deltakere, avgjøre hvilke deltakere som er i organisasjonen, og hente Office 365-profilene for alle.

Hvis appen ikke inneholder koblingen til Office 365-brukere, legg den til.

Hvis du vil hente Office 365-profilene til møtedeltakerne, angir du OnSelect-egenskapen for Tittel-kontrollen i CalendarEventsGallery til denne formelen:

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

Denne listen beskriver hva hver ClearCollect-operasjon gjør:

ClearCollect(AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
Denne formelen setter sammen de obligatoriske og valgfrie deltakerne til én enkelt streng, og deler deretter denne strengen inn i enkeltadresser for hvert semikolon. Formelen filtrerer deretter tomme verdier fra settet og legger til andre verdier i en samling med navnet AttendeeEmailsTemp.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
Denne formelen avgjør om en deltaker er i organisasjonen. Definisjonen av _userDomain er ganske enkelt URL-adressen til domenet i e-postadressen til personen som kjører appen. Denne linjen oppretter en ekstra sann/usann-kolonne med navnet InOrg i AttendeeEmailsTemp-samlingen. Denne kolonnen inneholder sann hvis userDomain tilsvarer URL-adressen for domenet for e-postadressen i en bestemt rad av AttendeeEmailsTemp.

Denne metoden er ikke alltid nøyaktig, men ganske nær. Enkelte deltakere i organisasjonen kan for eksempel ha en e-postadresse som Jane@OnContoso.com, mens _userDomain er Contoso.com. Appbrukeren og Jane kan arbeide i samme firma, men har små variasjoner i e-postadressene. For saker som disse kan det være lurt å bruke denne formelen:

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

Denne formelen samsvarer imidlertid e-postadresser som Jane@NotTheContosoCompany.com med en _userDomain som for eksempel Contoso.com, og disse personene jobber ikke i samme firma.

ClearCollect(MyPeople)

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

Hvis du vil hente Office 365-profiler, må du bruke Office365Users.UserProfile eller Office365Users.UserProfileV2-operasjonen. Disse operasjonene samler først opp alle Office 365-profilene til deltakere som er i brukerens organisasjon. Deretter legger operasjonen til noen få felt for deltakere fra utenfor organisasjonen. Du har skilt disse to elementene i forskjellige operasjoner fordi ForAll-løkken ikke garanterer rekkefølge. Derfor kan ForAll innhente en deltaker fra utenfor organisasjonen først. I dette tilfellet inneholder skjemaet for MyPeople bare DisplayName, ID, JobTitle og UserPrincipalName. UserProfile-operasjonene henter imidlertid mye rikere data enn dette. Så du tvinger MyPeople-samlingen til å legge til Office 365-profiler før de andre profilene.

Obs!

Du kan oppnå samme resultat med bare én ClearCollect-funksjon:

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

Slik fullfører du denne øvelsen:

Legg til et skjermbilde som inneholder et galleri med Items-egenskapen satt til MyPeople.
I OnSelect-egenskapen for Tittel-kontrollen i CalendarEventsGallery legger du til en Navigate-funksjon i skjermen du opprettet i forrite trinn.

Neste trinn

Obs!

Kan du fortelle oss om språkinnstillingene for dokumentasjonen? Ta en kort undersøkelse. (vær oppmerksom på at denne undersøkelsen er på engelsk)

Undersøkelsen tar rundt sju minutter. Det blir ikke samlet inn noen personopplysninger (personvernerklæring).

Del via

Kalenderskjermmal i lerretsapper

Forutsetning

Standard funksjonalitet

Endre skjermbildet

Angi kalenderen

Vise ulike detaljer om en hendelse

Skjul ikke-blokkeringshendelser

Integrere skjermen i en app

Vis hendelsesdetaljer

Vis hendelsesdeltakere

Neste trinn

Tilbakemeldinger

Flere ressurser