Share via

Plantilla de pantalla de calendario en aplicaciones de lienzo

  • Artículo

En una aplicación de lienzo, agregue una pantalla de calendario que muestre a los usuarios los próximos eventos de sus cuentas de Office 365 Outlook. Los usuarios pueden seleccionar una fecha de un calendario y desplazarse por una lista de los eventos de ese día. Puede cambiar los detalles que aparecen en la lista, agregar una segunda pantalla que muestre más detalles sobre cada evento, mostrar una lista de asistentes para cada evento y realizar otras personalizaciones.

También puede agregar otras pantallas basadas en plantillas que muestran datos diferentes de Office 365, como el correo electrónico de un usuario, personas en una organización, y disponibilidad de las personas que los usuarios quieran invitar a una reunión.

Esta descripción general le enseña:

  • Cómo usar la pantalla de calendario predeterminada.
  • Cómo modificarla.
  • Cómo integrarla en una aplicación.

Para una inmersión más profunda en la funcionalidad predeterminada de esta pantalla, consulte la referencia de pantalla de calendario.

Requisito previo

Familiaridad con cómo agregar y configurar pantallas y otros controles a medida que crea una aplicación en Power Apps.

Funcionalidad predeterminada

Para agregar una pantalla de calendario desde una plantilla:

  1. Inicie sesión en Power Apps, y luego cree una aplicación o abra una aplicación existente en Power Apps Studio.

    Este tema muestra una aplicación de teléfono, pero los mismos conceptos se aplican a una aplicación de tableta.

  2. En la pestaña Inicio de la cinta, seleccione Nueva pantalla > Calendario.

    Por defecto, la pantalla se parece a esto:

    Pantalla de calendario.

  3. Para mostrar datos, seleccione una opción en la lista desplegable cerca de la parte superior de la pantalla.

    Pantalla de calendario después de completar la carga.

Algunas notas útiles:

  • La fecha de hoy está seleccionada de forma predeterminada, y puede volver fácilmente a ella seleccionando el icono del calendario en la esquina superior derecha.
  • Si selecciona una fecha diferente, se rodeará con un círculo y aparecerá un rectángulo de color claro (azul si se aplica el tema predeterminado) en la fecha actual.
  • Si al menos un evento está programado para una fecha en particular, aparecerá un pequeño círculo de color debajo de esa fecha en el calendario.
  • Si selecciona una fecha para la que se programan uno o más eventos, los eventos aparecen en una lista debajo del calendario.

Modificar la pantalla

Puede modificar la funcionalidad predeterminada de esta pantalla de varias maneras comunes:

Si desea modificar más la pantalla, use la referencia de pantalla de calendario como guía.

Especificar el calendario

Si ya sabe qué calendario deben ver sus usuarios, puede simplificar la pantalla especificando ese calendario antes de publicar la aplicación. Este cambio elimina la necesidad de la lista desplegable de calendarios, por lo que puede eliminarla.

  1. Seleccione la propiedad OnStart de la aplicación en la 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 está ligeramente editada a partir del valor predeterminado de la propiedad OnSelect de la lista desplegable para seleccionar un calendario. Para obtener más información sobre ese control, consulte su sección en la referencia de pantalla de calendario.

  2. Reemplace {YourCalendarNameHere}, incluido el conjunto de llaves, por el nombre del calendario que desea mostrar (por ejemplo, Calendario).

    Importante

    Los siguientes pasos suponen que ha agregado solo una pantalla de calendario a la aplicación. Si ha agregado más de uno, los nombres de control (como iconCalendar1) finalizarán con un número diferente y deberá ajustar las fórmulas en consecuencia.

  3. Establezca la propiedad Y del control iconCalendar1 en esta expresión:

    RectQuickActionBar1.Height + 20

  4. Establezca la propiedad Y del control LblMonthSelected1 en esta expresión:

    iconCalendar1.Y + iconCalendar1.Height + 20

  5. Establezca la propiedad Text del control LblNoEvents1 en este valor:

    "No events scheduled"

  6. Establezca la propiedad Visible de LblNoEvents1 en esta fórmula:

    CountRows(CalendarEventsGallery1.AllItems) = 0 && _calendarVisible

  7. Elimine estos controles:

    • dropdownCalendarSelection1
    • LblEmptyState1
    • iconEmptyState1

  8. Si la pantalla del calendario no es la pantalla predeterminada, agregue un botón que navegue desde la pantalla predeterminada a la pantalla del calendario para que pueda probar la aplicación.

    Por ejemplo, agregue un botón en Screen1 que navega a Screen2 si agregó una pantalla de calendario a una aplicación que creó desde cero.

  9. Guarde la aplicación y luego pruébela en un navegador o en un dispositivo móvil.

Mostrar diferentes detalles sobre un evento

De manera predeterminada, la galería en el calendario, llamada CalendarEventsGaller, muestra la hora de inicio, la duración, el tema y la ubicación de cada evento. Puede configurar la galería para mostrar cualquier campo (como el organizador) que admita el conector de Office 365.

  1. En CalendarEventsGallery, establezca la propiedad Text de una etiqueta nueva o existente en ThisItem seguido de un punto.

    IntelliSense enumera los campos que puede seleccionar.

  2. Seleccione el campo que desee.

    La etiqueta muestra el tipo de información que especificó.

Ocultar eventos no bloqueantes

En muchas oficinas, los miembros del equipo envían solicitudes de reunión para notificarse mutuamente cuándo estarán fuera de la oficina. Para evitar bloquear los horarios de todos, la persona que envía la solicitud establece su disponibilidad en Libre. Puede ocultar estos eventos del calendario y la galería actualizando un par de propiedades.

  1. Establezca la propiedad Items de CalendarEventsGallery en esta fórmula:

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

    En esta fórmula, la función Filter oculta no solo aquellos eventos que están programados para una fecha distinta a la seleccionada, sino también los eventos para los que la disponibilidad está establecida en Libre.

  2. En el calendario, configure la propiedad Visible del control Circle en esta fórmula:

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

    Esta fórmula contiene los mismos filtros que la fórmula anterior. Por lo tanto, el círculo del indicador de evento aparece debajo de una fecha solo si tiene uno o más eventos en la fecha seleccionada y para los cuales la disponibilidad no está establecida en Libre.

Integrar la pantalla en una aplicación

La pantalla de calendario es un poderoso paquete de controles por derecho propio, pero generalmente funciona mejor como parte de una aplicación más grande y versátil. Puede integrar esta pantalla en una aplicación más grande de varias maneras, incluyendo la adición de estas opciones.

Ver detalles del evento

Si los usuarios seleccionan un evento en CalendarEventsGallery, puede abrir otra pantalla que muestre más información sobre ese evento.

Nota

Este procedimiento muestra detalles de eventos en una galería con contenido dinámico, pero puede lograr resultados similares si adopta otros enfoques. Por ejemplo, puede obtener más control de diseño utilizando una serie de etiquetas.

  1. Agregue una pantalla en blanco, llamada EventDetailsScreen, que contenga una galería en blanco de altura flexible y un botón que devuelve a la pantalla del calendario.

  2. En la galería de altura flexible, agregue un control Etiqueta y un control Texto HTML y establezca la propiedad AutoHeight de ambos en true.

    Nota

    Power Apps recupera el cuerpo del mensaje de cada evento como texto HTML, por lo que debe mostrar ese contenido en un control Texto HTML.

  3. Establezca la propiedad Y del control Texto HTML en esta expresión:

    Label1.Y + Label1.Height + 20

  4. Ajuste las propiedades adicionales según sea necesario para satisfacer sus necesidades de estilo.

    Por ejemplo, es posible que desee agregar una línea de separación debajo del control Texto HTML.

  5. Establezca la propiedad Items de la galería de altura flexible en esta fórmula:

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

    Esta fórmula crea una galería de datos dinámicos que se establece en los valores de campo de _selectedCalendarEvent, que se establecen cada vez que el usuario selecciona un evento en el control CalendarEventsGallery. Puede ampliar esta galería para incluir más campos agregando más etiquetas, pero este conjunto proporciona un buen punto de partida.

  6. Con los elementos de la galería puestos, configure la propiedad Text del control Etiqueta en ThisItem.Title y la propiedad HtmlText del control Texto HTML en ThisItem.Value.

  7. En CalendarEventsGallery, configure la propiedad OnSelect del control Title en esta fórmula:

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

    Nota

    En lugar de usar la variable _selectedCalendarEvent, en su lugar podría usar CalendarEventsGallery.Seleccionado.

Mostrar asistentes al evento

La operación Office365.GetEventsCalendarViewV2 recupera una variedad de campos para cada evento, incluido un conjunto de asistentes obligatorios y opcionales separados por punto y coma. En este procedimiento, analizará cada conjunto de asistentes, determinará qué asistentes están en su organización y recuperará los perfiles de Office 365 de cualquiera.

  1. Si su aplicación no contiene el conector de Office 365 Users, agréguelo.

  2. Para recuperar los perfiles de Office 365 de los asistentes a la reunión, establezca la propiedad OnSelect del control Title en la CalendarEventsGallery en esta 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 lista indica lo que hace cada operación ClearCollect:

  • ClearCollect(AttendeeEmailsTemp)

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

    Esta fórmula concatena los asistentes obligatorios y opcionales en una sola cadena y luego divide esa cadena en direcciones individuales en cada punto y coma. La fórmula filtra los valores en blanco de ese conjunto y agrega los otros valores a una colección llamada AttendeeEmailsTemp.

  • ClearCollect(AttendeeEmails)

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

    Esta fórmula determina de manera aproximada si un asistente está en su organización. La definición de _userDomain es simplemente la URL del dominio en la dirección de correo electrónico de la persona que ejecuta la aplicación. Esta línea crea una columna adicional true/false, llamada InOrg, en la colección AttendeeEmailsTemp. Esta columna contiene true si userDomain es equivalente a la URL del dominio de la dirección de correo electrónico en esa fila particular de AttendeeEmailsTemp.

    Este enfoque no siempre es preciso, pero se acerca bastante. Por ejemplo, determinados asistentes de su organización pueden tener una dirección de correo electrónico como Jane@OnContoso.com, mientras que _userDomain es Contoso.com. El usuario de la aplicación y Jane pueden trabajar en la misma compañía pero tienen ligeras variaciones en sus direcciones de correo electrónico. Para casos como estos, es posible que desee utilizar esta fórmula:

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

    Sin embargo, esta fórmula hace coincidir direcciones de correo electrónico como Jane@NotTheContosoCompany.com con un _userDomain como Contoso.com, y esas personas no trabajan en la misma 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 perfiles de Office 365, debe usar la operación Office365Users.UserProfileo Office365Users.UserProfileV2. Estas operaciones primero reúnen todos los perfiles de Office 365 para los asistentes que están en la organización del usuario. Luego, las operaciones agregan algunos campos para los asistentes externos a la organización. Ha separado estos dos elementos en operaciones distintas porque el bucle ForAll no garantiza el orden. Por lo tanto, ForAll podría recoger primero a un asistente de fuera de la organización. En este caso, el esquema para MyPeople contiene solo DisplayName, Id, JobTitle y UserPrincipalName. Sin embargo, las operaciones de UserProfile recuperan datos mucho más ricos que eso. Entonces obliga a la colección MyPeople a agregar los perfiles de Office 365 antes que los otros perfiles.

    Nota

    Puede lograr el mismo resultado con solo una 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 terminar este ejercicio:

  1. Agregue una pantalla que contenga una galería en la que la propiedad Items se haya establecido en MyPeople.

  2. En la propiedad OnSelect del control Title en la CalendarEventsGallery, agregue una función Navigate a la pantalla que creó en el paso anterior.

Pasos siguientes

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).