Modello di schermata del calendario nelle app canvas

Articolo
03/16/2023

In un'app canvas, aggiungi una schermata del calendario che mostra agli utenti gli eventi imminenti degli account Office 365 Outlook. Gli utenti possono selezionare una data da un calendario e scorrere l'elenco degli eventi di quel giorno. Puoi modificare i dettagli visualizzati nell'elenco, aggiungere una seconda schermata che mostra ulteriori dettagli su ciascun evento, mostrare un elenco di partecipanti per ciascun evento ed effettuare altre personalizzazioni.

Puoi anche aggiungere altre schermate basate su modello che mostrano dati diversi da Office 365, ad esempio e-mail, persone in un'organizzazione e la disponibilità delle persone che gli utenti potrebbero voler invitare a una riunione.

Questa panoramica ti insegna:

Come utilizzare la schermata del calendario predefinita.
Come modificarla.
Come integrarla in un'app.

Per un'analisi più approfondita della funzionalità predefinita di questa schermata, vedi le informazioni di riferimento per la schermata del calendario.

Prerequisito

Familiarità con l'aggiunta e la configurazione di schermate e altri controlli durante la creazione di un'app in Power Apps.

Funzionalità predefinita

Per aggiungere una schermata del calendario dal modello:

Accedi a Power Apps, quindi crea un'app o apri un'app esistente in Power Apps Studio.

Questo argomento mostra un'app per telefono, ma gli stessi concetti si applicano a un'app per tablet.
Nella scheda Home della barra multifunzione, seleziona Nuova schermata > Calendario.

Per impostazione predefinita, lo schermo è simile al seguente:
Per mostrare i dati, seleziona un'opzione nell'elenco a discesa nella parte superiore dello schermo.

Alcune note utili:

La data odierna è selezionata per impostazione predefinita e puoi facilmente modificarla selezionando l'icona del calendario nell'angolo in alto a destra.
Se selezioni una data diversa, un cerchio la circonda e un rettangolo di colore chiaro (blu se è applicato il tema predefinito) circonda la data odierna.
Se almeno un evento è programmato per una data particolare, un piccolo cerchio colorato appare sotto quella data nel calendario.
Se selezioni una data per la quale sono programmati uno o più eventi, gli eventi vengono visualizzati in un elenco sotto il calendario.

Modificare la schermata

È possibile modificare la funzionalità predefinita di questa schermata in alcuni modi comuni:

Se vuoi modificare ulteriormente lo schermo, utilizza le informazioni di riferimento per la schermata del calendario come guida.

Specificare il calendario

Se sai già quale calendario devono visualizzare gli utenti, puoi semplificare la schermata specificando quel calendario prima di pubblicare l'app. Questa modifica elimina la necessità dell'elenco a discesa dei calendari, quindi puoi rimuoverlo.

Imposta la proprietà OnStart dell'app su questa formula:

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 )

Nota

Questa formula è leggermente modificata dal valore predefinito della proprietà OnSelect dell'elenco a discesa per la selezione di un calendario. Per ulteriori informazioni sul controllo, consulta la relativa sezione nelle informazioni di riferimento per la schermata del calendario.

Sostituisci {YourCalendarNameHere}, comprese le parentesi graffe, con il nome del calendario che desideri mostrare (ad esempio, Calendario).

Importante

I seguenti passaggi presuppongono che tu abbia aggiunto solo una schermata del calendario all'app. Se ne hai aggiunta più di una, controlla che i nomi (come iconCalendar1) terminino con un numero diverso e modifica di conseguenza le formule.
Imposta la proprietà Y del controllo iconCalendar1 in modo da visualizzare questa espressione:

RectQuickActionBar1.Height + 20
Imposta la proprietà Y del controllo LblMonthSelected1 in modo da visualizzare questa espressione:

iconCalendar1.Y + iconCalendar1.Height + 20
Imposta la proprietà Text del controllo LblNoEvents1 in modo da visualizzare questo valore:

"No events scheduled"
Imposta la proprietà Visible di LblNoEvents1 sulla formula seguente:

CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible
Elimina questi controlli
- dropdownCalendarSelection1
- LblEmptyState1
- iconEmptyState1
Se la schermata del calendario non è la schermata predefinita, aggiungi un pulsante che passa dalla schermata predefinita alla schermata del calendario in modo da poter testare l'app.

Ad esempio, aggiungi un pulsante Screen1 che passa alla Screen2 se hai aggiunto una schermata del calendario a un'app creata da zero.
Salva l'app, quindi testala in un browser o su un dispositivo mobile.

Mostrare diversi dettagli su un evento

Per impostazione predefinita, la raccolta sotto il calendario, denominata CalendarEventsGallery, mostra l'ora di inizio, la durata, l'oggetto e la posizione di ciascun evento. Puoi configurare la raccolta per mostrare qualsiasi campo (come l'organizzatore) supportato dal connettore Office 365.

In CalendarEventsGallery, imposta la proprietà Text di un'etichetta nuova o esistente su ThisItem seguito da un punto.

IntelliSense elenca i campi che è possibile selezionare.
Seleziona il campo desiderato.

L'etichetta mostra il tipo di informazioni che hai specificato.

Nascondere gli eventi che non bloccano l'esecuzione

In molti uffici, i membri del team inviano convocazioni di riunione per informare quando saranno fuori ufficio. Per evitare di bloccare le pianificazioni di tutti, la persona che invia la richiesta imposta la sua disponibilità su Disponibile. Puoi nascondere questi eventi dal calendario e dalla raccolta aggiornando un paio di proprietà.

Imposta la proprietà Items di CalendarEventsGallery su questa formula:
```
SortByColumns(
    Filter(
        MyCalendarEvents,
        Text( Start, DateTimeFormat.ShortDate ) = 
            Text( _dateSelected, DateTimeFormat.ShortDate ),
        ShowAs <> "Free"
    ),
    "Start"
)
```
In questa formula, la funzione Filter nasconde non solo gli eventi programmati per una data diversa da quella selezionata, ma anche gli eventi per i quali è impostata la disponibilità Disponibile.
Nel calendario imposta la proprietà Visible del controllo Cerchio su questa formula:
```
CountRows(
    Filter(
        MyCalendarEvents,
        DateValue( Text(Start) ) = DateAdd( _firstDayInView, ThisItem.Value, TimeUnit.Days ),
        ShowAs <> "Free"
    )
) > 0 && !Subcircle1.Visible && Title2.Visible
```
Questa formula contiene gli stessi filtri della formula precedente. Pertanto, il cerchio indicatore di eventi appare sotto una data solo se sono presenti uno o più eventi per la data selezionata e con la disponibilità non impostata su Disponibile.

Integrare la schermata in un'app

La schermata del calendario è un potente insieme di controlli a sé stante, ma di solito funziona meglio come parte di un'app più grande e versatile. Puoi integrare questa schermata in un'app più grande in diversi modi, inclusa l'aggiunta di queste opzioni:

Visualizzare i dettagli dell'evento

Se gli utenti selezionano un evento in CalendarEventsGallery, puoi aprire un'altra schermata che mostra ulteriori informazioni su quell'evento.

Nota

Questa procedura mostra i dettagli dell'evento in una raccolta con contenuti dinamici, ma puoi ottenere risultati simili adottando altri approcci. Ad esempio, puoi ottenere un maggiore controllo della progettazione utilizzando una serie di etichette.

Aggiungi una schermata vuota, denominata EventDetailsScreen, che contiene una raccolta vuota ad altezza flessibile e un pulsante che torna alla schermata del calendario.
Nella raccolta ad altezza flessibile, aggiungi un controllo Etichetta e un controllo Testo HTML e imposta la proprietà AutoHeight di entrambi su true.

Nota

Power Apps recupera il corpo del messaggio di ogni evento come testo HTML, quindi è necessario mostrare quel contenuto in un controllo Testo HTML.
Imposta la proprietà Y del controllo testo HTML in modo da visualizzare questa espressione:

Label1.Y + Label1.Height + 20
Regola le proprietà aggiuntive in base alle necessità per soddisfare le tue esigenze di stile.

Ad esempio, potresti voler aggiungere una linea di separazione sotto il controllo Testo HTML.
Imposta la proprietà Items della raccolta ad altezza flessibile su questa formula:
```
Table(
    { Title: "Subject", Value: _selectedCalendarEvent.Subject },
    { 
        Title: "Time", 
        Value: _selectedCalendarEvent.Start & " - " & _selectedCalendarEvent.End 
    },
    { Title: "Body", Value: _selectedCalendarEvent.Body }
)
```
Questa formula crea una raccolta di dati dinamici impostata sui valori di campo di _selectedCalendarEvent, che viene impostato ogni volta che l'utente seleziona un evento nel controllo CalendarEventsGallery. Puoi estendere questa raccolta per includere più campi aggiungendo più etichette, ma questo set fornisce un buon punto di partenza.
Con gli elementi della raccolta in posizione, imposta la proprietà Text del controllo Etichetta su ThisItem.Title e la proprietà htmlText del controllo Testo HTML su ThisItem.Value.
In CalendarEventsGallery, imposta la proprietà OnSelect del controllo Titolo su questa formula:
```
Set( _selectedCalendarEvent, ThisItem );
Navigate( EventDetailsScreen, None )
```
Nota

Invece di usare la variabile _selectedCalendarEvent puoi utilizzare CalendarEventsGallery.Selected.

Mostrare i partecipanti all'evento

L'operazione Office365.GetEventsCalendarViewV2 recupera una varietà di campi per ogni evento, incluso un elenco separato da punti e virgola di partecipanti obbligatori e facoltativi. In questa procedura, analizzerai ogni gruppo di partecipanti, determinerai quali partecipanti sono nella tua organizzazione e ne recupererai i profili Office 365.

Se la tua app non contiene il connettore Utenti di Office 365, aggiungilo.

Per recuperare i profili Office 365 dei partecipanti alla riunione, imposta la proprietà OnSelect del controllo Titolo in CalendarEventsGallery su questa formula:

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

Questo elenco indica cosa fa ciascuna operazione ClearCollect:

ClearCollect(AttendeeEmailsTemp)
```
ClearCollect( AttendeeEmailsTemp,
    Filter(
        Split( ThisItem.RequiredAttendees & ThisItem.OptionalAttendees, ";" ), 
        !IsBlank( Result)
    )
);
```
Questa formula concatena i partecipanti obbligatori e facoltativi in una singola stringa e quindi divide quella stringa in singoli indirizzi ad ogni punto e virgola. La formula quindi filtra i valori vuoti da quell'elenco e aggiunge gli altri valori in una raccolta denominata AttendeeEmailsTemp.
ClearCollect(AttendeeEmails)
```
ClearCollect( AttendeeEmails,
    AddColumns( AttendeeEmailsTemp, 
        "InOrg",
        Upper( _userDomain ) = Upper( Right( Result, Len(Result) - Find("@", Result) ) )
    )
);
```
Questa formula determina approssimativamente se un partecipante è nella tua organizzazione. La definizione di _userDomain è semplicemente l'URL del dominio nell'indirizzo e-mail della persona che esegue l'app. Questa riga crea un'ulteriore colonna true/false, denominata InOrg, nella raccolta AttendeeEmailsTemp. Questa colonna contiene true se UserDomain è equivalente all'URL del dominio dell'indirizzo e-mail in quella particolare riga di AttendeeEmailsTemp.

Questo approccio non è sempre accurato, ma si avvicina molto. Ad esempio, alcuni partecipanti nella tua organizzazione potrebbero avere un indirizzo email come Jane@OnContoso.com, mentre _userDomain è Contoso.com. L'utente dell'app e Jane potrebbero lavorare nella stessa azienda ma hanno lievi variazioni nei loro indirizzi e-mail. Per casi come questi, potresti voler utilizzare questa formula:

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

Tuttavia, questa formula abbina indirizzi e-mail come Jane@NotTheContosoCompany.com con _userDomain come Contoso.com e quelle persone non lavorano nella stessa azienda.

ClearCollect(MyPeople)

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

Per recuperare i profili Office 365 devi utilizzare l'operazione Office365Users.UserProfile o Office365Users.UserProfileV2. Queste operazioni prima raccolgono tutti i profili Office 365 per i partecipanti che si trovano nell'organizzazione dell'utente. Quindi le operazioni aggiungono alcuni campi per i partecipanti esterni all'organizzazione. Hai separato questi due elementi in operazioni distinte perché il ciclo ForAll non garantisce l'ordine. Perciò, PForAll potrebbe raccogliere prima un partecipante esterno all'organizzazione. In questo caso, lo schema per MyPeople contiene solo DisplayName, Id, JobTitle e UserPrincipalName. Tuttavia, le operazioni UserProfile recuperano dati molto più avanzati. Quindi forza la raccolta MyPeople per aggiungere i profili Office 365 prima degli altri profili.

Nota

Puoi ottenere lo stesso risultato con una sola funzione 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: ""
            }
        )
    )
)

Per finire questo esercizio:

Aggiungi una schermata che contiene una raccolta per cui la proprietà Items è impostata su MyPeople.
Nella proprietà OnSelect del controllo Titolo in CalendarEventsGallery, aggiungi una funzione Navigate per lo schermo creato nel passaggio precedente.

Passaggi successivi

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).

Modello di schermata del calendario nelle app canvas

Prerequisito

Funzionalità predefinita

Modificare la schermata

Specificare il calendario

Mostrare diversi dettagli su un evento

Nascondere gli eventi che non bloccano l'esecuzione

Integrare la schermata in un'app

Visualizzare i dettagli dell'evento

Mostrare i partecipanti all'evento

Passaggi successivi

Commenti e suggerimenti

Risorse aggiuntive