Compartir por

Modelo da pantalla de calendario en aplicacións de lenzo

  • Artigo

Nunha aplicación de lenzo, engada unha pantalla de calendario que amose aos usuarios eventos próximos das súas contas de Office 365 Outlook. Os usuarios poden seleccionar unha data dun calendario e percorrer unha lista de eventos dese día. Pode cambiar que detalles aparecen na lista, engadir unha segunda pantalla que amosa máis detalles sobre cada evento, mostrar unha lista de asistentes para cada evento e facer outras personalizacións.

Tamén pode engadir outras pantallas baseadas en modelos que mostren diferentes datos de Office 365, como correo electrónico, xente dunha organización e dispoñibilidade de persoas que os usuarios poden querer invitar a unha reunión.

Esta visión xeral ensínalle:

  • Como usar a pantalla do calendario predeterminada.
  • Como modificala.
  • Como integrala nunha aplicación.

Para ver mellor a funcionalidade predeterminada desta pantalla, consulte referencia da pantalla de calendario.

Requisito previo

Familiarícese con como engadir e configurar pantallas e outros controis ao crear unha aplicación en Power Apps.

Funcionalidade por defecto

Para engadir unha pantalla de calendario a partir do modelo:

  1. Inicie sesión en Power Apps e logo cree unha aplicación ou abra unha aplicación existente en Power Apps Studio.

    Este tema mostra unha aplicación de teléfono, pero os mesmos conceptos aplícanse a unha aplicación para tabletas.

  2. No separador Inicio da fita, seleccione Nova pantalla > Calendario.

    De xeito predeterminado, a pantalla parece similar a esta:

    Pantalla de calendario.

  3. Para mostrar os datos, seleccione unha opción na lista despregable situada preto da parte superior da pantalla.

    Pantalla do calendario despois de completar a carga.

Algunhas notas útiles:

  • A data de hoxe está seleccionada de xeito predeterminado e pode volver facilmente a ela seleccionando a icona do calendario na esquina superior dereita.
  • Se selecciona unha data diferente, aparecerá rodeada dun círculo e un rectángulo de cor clara (azul se se aplica o tema predeterminado) rodeará a data de hoxe.
  • Se hai polo menos un evento previsto para unha data determinada, un círculo de cores pequeno aparecerá baixo esa data no calendario.
  • Se selecciona unha data para a que se programan un ou varios eventos, os eventos aparecerán nunha lista do calendario.

Modificar a pantalla

Pode modificar a funcionalidade predeterminada desta pantalla dalgunhas formas comúns:

Se desexa modificar a pantalla aínda máis, use a referencia da pantalla de calendario como guía.

Especificar o calendario

Se xa sabe que calendario deben ver os seus usuarios, pode simplificar a pantalla especificando ese calendario antes de publicar a aplicación. Este cambio elimina a necesidade da lista despregable de calendarios, polo que a pode eliminar.

  1. Configure a propiedade OnStart da aplicación nesta fórmula:

    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

    Esta fórmula edítase lixeiramente a partir do valor por defecto da propiedade OnSelect da lista despregable para seleccionar un calendario. Para obter máis información sobre ese control, consulte a súa sección no documento referencia da pantalla de calendario.

  2. Substitúa {YourCalendarNameHere}, incluíndo as chaves, polo nome do calendario que desexa mostrar (por exemplo, Calendario).

    Importante

    Os pasos seguintes supoñen que engadiu só unha pantalla de calendario á aplicación. Se engadiu máis dunha, os nomes de controis (como iconaCalendario1) rematarán cun número diferente e precisará axustar as fórmulas en consecuencia.

  3. Axuste a propiedade Y do control iconaCalendario1 nesta expresión:

    RectQuickActionBar1.Height + 20

  4. Axuste a propiedade Y do control MesLblSeleccionado1 nesta expresión:

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. Axuste a propiedade Text do control LblSenEventos1 neste valor:

    "No events scheduled"

  6. Axuste a propiedade Visible de LblSenEventos1 nesta fórmula:

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. Elimine estes controis:

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1

  8. Se a pantalla do calendario non é a pantalla predeterminada, engada un botón que navegue desde a pantalla predeterminada á pantalla do calendario para que poida probar a aplicación.

    Por exemplo, engada un botón na Pantalla1 que navegue ata a Pantalla2 se engadiu unha pantalla do calendario a unha aplicación que creou dende cero.

  9. Garde a aplicación e próbea nun navegador ou nun dispositivo móbil.

Amosar diferentes detalles sobre un evento

De xeito predeterminado, a galería do calendario, chamada CalendarEventsGallery, mostra a hora de inicio, a duración, o asunto e a situación de cada evento. Pode configurar a galería para mostrar calquera campo (como o organizador) que admita o conector de Office 365.

  1. En CalendarEventsGallery, estableza a propiedade Text dunha etiqueta nova ou existente en ThisItem seguido dun período.

    IntelliSense enumera os campos que pode seleccionar.

  2. Seleccione o campo que desexa.

    A etiqueta mostra o tipo de información que especificou.

Ocultar eventos que non se bloqueen

En moitas oficinas, os membros do equipo envíanse solicitudes de xuntanzas para notificarse cando van estar lonxe da oficina. Para evitar bloquear os horarios de todos, a persoa que envía a solicitude establece a súa dispoñibilidade en Libre. Pode ocultar estes eventos do calendario e da galería actualizando un par de propiedades.

  1. Axuste a propiedade Items de CalendarEventsGallery nesta fórmula:

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

    Nesta fórmula, a función Filtro esconde non só aqueles eventos programados para unha data distinta á seleccionada, senón tamén eventos para os que a dispoñibilidade está establecida en Gratis.

  2. No calendario, axuste a propiedade Visible do control Círculo nesta fórmula:

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

    Esta fórmula contén os mesmos filtros que a fórmula anterior. Polo tanto, o círculo indicador de eventos aparece baixo unha data só se ten un ou varios eventos que están na data seleccionada e para os que a dispoñibilidade non está configurada en Gratis.

Integrar a pantalla nunha aplicación

A pantalla do calendario é un paquete potente de controis por si só, pero normalmente funciona mellor como parte dunha aplicación máis versátil e máis grande. Pode integrar esta pantalla nunha aplicación máis grande de varias maneiras, incluíndo engadindo estas opcións:

Ver detalles do evento

Se os usuarios seleccionan un evento en CalendarEventsGallery, pode abrir outra pantalla que amosa máis información sobre ese evento.

Nota

Este procedemento mostra os detalles do evento nunha galería con contido dinámico, pero pode obter resultados similares tomando outros enfoques. Por exemplo, pode obter máis control do deseño usando unha serie de etiquetas no seu lugar.

  1. Engada unha pantalla en branco, chamada EventDetailsScreen, que conteña unha galería de altura flexible en branco e un botón que permita volver de novo á pantalla do calendario.

  2. Na galería de altura flexible, engada un control de Etiqueta e un control de Texto HTML e configure a propiedade AutoHeight dos dous en verdadeiro.

    Nota

    Power Apps recupera o corpo de mensaxes de cada evento como texto HTML, polo que necesita amosar ese contido nun control de Texto HTML.

  3. Axuste a propiedade Y do control Texto HTML nesta expresión:

    Label1.Y + Label1.Height + 20

  4. Axuste as propiedades adicionais segundo sexa necesario para adaptalas ás súas necesidades de estilo.

    Por exemplo, pode engadir unha liña de separación debaixo do control Texto HTML.

  5. Configure a propiedade Items da galería de altura flexible nesta fórmula:

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

    Esta fórmula crea unha galería de datos dinámicos que se establece nos valores de campo de _selectedCalendarEvent, que se establece cada vez que o usuario selecciona un evento no control CalendarEventsGallery. Pode ampliar esta galería para incluír máis campos engadíndolle máis etiquetas, pero este conxunto proporciona un bo punto de partida.

  6. Cos elementos da galería no seu lugar, configure a propiedade Text do control Etiqueta en ThisItem.Title e a propiedade HtmlText do control Texto HTML en ThisItem.Value.

  7. En CalendarEventsGallery, axuste a propiedade OnSelect do control Título nesta fórmula:

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

    Nota

    En vez de usar a variable _selectedCalendarEvent, pode usar CalendarEventsGallery.Selected.

Amosar asistentes ao evento

A operación Office365.GetEventsCalendarViewV2 recupera unha variedade de campos para cada evento, incluído un conxunto separado de puntos e coma de participantes necesarios e opcionais. Neste procedemento, analizará cada conxunto de asistentes, determinará os asistentes da súa organización e recuperará os perfís de Office 365 de calquera.

  1. Se a súa aplicación non contén o conector de Usuarios de Office 365, engádao.

  2. Para recuperar os perfís de Office 365 dos asistentes á reunión, estableza a propiedade OnSelect do control Título en CalendarEventsGallery nesta fórmula:

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

Esta listaxe discute o que fai cada operación ClearCollect:

  • ClearCollect(AttendeeEmailsTemp)

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

    Esta fórmula concatena aos asistentes necesarios e opcionais nunha única cadea para logo dividir esa cadea en enderezos individuais en cada punto e coma. A fórmula entón filtra os valores en branco dese conxunto e engade os outros valores nunha colección chamada AttendeeEmailsTemp.

  • ClearCollect(AttendeeEmails)

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

    Esta fórmula determina aproximadamente se un asistente está na súa organización. A definición de _userDomain é simplemente o URL do dominio do enderezo de correo electrónico da persoa que está a executar a aplicación. Esta liña crea unha columna verdadeira/falsa adicional, chamada InOrg, na colección AttendeeEmailsTemp. Esta columna contén verdadeiro se userDomain equivale ao URL de dominio do enderezo de correo electrónico nesa liña particular de AttendeeEmailsTemp.

    Este enfoque non sempre é preciso, pero achégase bastante. Por exemplo, certos asistentes da túa organización poden ter un enderezo de correo electrónico como Jane@OnContoso.com, mentres que _userDomain é Contoso.com. O usuario da aplicación e Jane poden traballar na mesma empresa pero poden ter lixeiras variacións nos seus enderezos de correo electrónico. En casos coma estes, podes usar esta fórmula:

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

    Non obstante, esta fórmula coincide con enderezos de correo electrónico como Jane@NotTheContosoCompany.com cun _userDomain como Contoso.com, e esas persoas non traballan na mesma empresa.

  • ClearCollect(MyPeople)

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

    Para recuperar perfís de Office 365, debe usar a operación Office365Users.UserProfile ou Office365Users.UserProfileV2. Estas operacións en primeiro lugar reúnen todos os perfís de Office 365 para asistentes que estean na organización do usuario. A continuación, as operacións engaden algúns campos para os asistentes de fóra da organización. Separou estes dous elementos en operacións distintas porque o bucle ForAll non garante a orde. Polo tanto, ForAll pode recoller un asistente de fóra da organización primeiro. Neste caso, o esquema de MyPeople contén só DisplayName, Id, JobTitle e UserPrincipalName. Non obstante, as operacións de UserProfile recuperan datos moito máis ricos que iso. Por iso forza á colección MyPeople a engadir perfís de Office 365 antes dos outros perfís.

    Nota

    Pode obter o mesmo resultado con tan só unha función 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: ""
            }
        )
    )
)

Para rematar este exercicio:

  1. Engada unha pantalla que conteña unha galería para a que propiedade Items estea definida en MyPeople.

  2. Na propiedade OnSelect do control Título de CalendarEventsGallery, engada unha función Navegar á pantalla que creou no paso anterior.

Pasos seguintes

Nota

Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)

Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).