Saltar al contenido

Paneles de calendario en Jitterbit App Builder

Descripción general

Los paneles Calendar (Calendario) pueblan un calendario con información de una fuente de datos, utilizando tres tipos de control requeridos: Description (Descripción), Event Start (Inicio del evento) y Event End (Fin del evento). El control Description designa lo que aparece en el calendario, típicamente el nombre de un evento. Event Start y Event End designan el día en que cada evento comienza y termina, opcionalmente incluyendo marcas de tiempo mostradas junto a la descripción del evento. Al igual que los paneles Chart (Gráfico), los paneles Calendar se pueden vincular a otro panel para mostrar mayor detalle sobre un evento en el calendario. Consulta Paneles para ver la lista completa de tipos de control del panel Calendar.

Por defecto, un panel Calendar se muestra en función de los datos en su regla de negocio, respetando cualquier ordenamiento que la regla aplique; revisa tu regla de negocio para verificar su ordenamiento. Si la regla de negocio aún no tiene datos, el calendario muestra el mes, día o año actual en su lugar. Una vez que agregues datos, probablemente querrás añadir un ordenamiento a la regla de negocio también — consulta Mostrar el mes actual por defecto a continuación.

Por ejemplo, la siguiente captura de pantalla muestra un panel Calendar:

ordercalendar.png

Esta página también cubre las siguientes tareas:

Mostrar el mes actual por defecto

Para asegurarte de que el panel devuelve el mes, día o año actual, añade una columna llamada Sort con tipo lógico numérico, y aplica un ordenamiento ascendente en esa columna. Por ejemplo, si tu objeto de negocio que respalda el panel de calendario tiene una columna llamada StartDate que te gustaría usar, y es una fuente de datos SQL, puedes usar una función de escape SQL:

${ABS(DateDiff(day, getdate(), StartDate))}

o una declaración IIF de App Builder:

IIF(DateDiff(dd, Now(), StartDate) < 0, (DateDiff(dd, Now(), StartDate))*-1, DateDiff(dd, Now(), StartDate))

Nota

El método de escape SQL es más eficiente, pero IIF no depende de la sintaxis SQL. Ambos producen resultados idénticos.

Para ver otros meses, haz clic en los botones de chevron hacia adelante y hacia atrás en la esquina superior izquierda del panel. Para alternar entre las vistas Day (Día), Week (Semana) y Monthly (Mensual), haz clic en los botones correspondientes en la esquina superior derecha del panel. Los paneles Calendar no se pueden editar directamente; sin embargo, un panel separado que muestra los controles del evento sí se puede editar.

Cambiar la fecha y hora de un evento

Para cambiar la fecha y hora de un evento:

  1. Selecciona el evento.
  2. En el panel que muestra la información del evento, haz clic en el icono de Pencil (Lápiz).
  3. Ajusta la fecha y hora según sea necesario, luego haz clic en el icono de Checkmark (Marca de verificación) para guardar.

Agregar un nuevo evento al calendario

Para agregar un nuevo evento al calendario:

  1. Selecciona cualquier evento preexistente y haz clic en el botón Create (Crear).
  2. Ingresa un título para el evento, luego selecciona una fecha del menú desplegable del calendario.
  3. Para controles con hora y fecha habilitadas, haz clic en el icono de Time (Hora) para abrir un reloj.
  4. Haz clic en el icono de Checkmark (Marca de verificación) para guardar.
  5. Después de realizar cualquier revisión en el calendario, actualiza la página para confirmar la actualización.

Crear un calendario usando la base de datos Northwinds

Este ejemplo añade un nuevo panel Calendar para representar visualmente las fechas en que los pedidos se registran en la base de datos de ejemplo Northwinds.

  1. Crea un objeto de negocio para usar con el panel de calendario:

  2. Crear una nueva regla de negocio.

  3. Asignar un Nombre a la regla. Por ejemplo: Order (Calendar).
  4. Establecer el campo Purpose en Calendar.
  5. Seleccionar la tabla Order.
  6. Hacer clic en Save.
  7. Desde la tabla Order, seleccionar las columnas OrderID y OrderDate.
  8. Hacer clic en la pestaña Where. Agregar la columna OrderDate al campo Left, elegir IS NOT NULL como el Operator y dejar el campo Right en blanco.

  9. Si lo desea, agregar una columna que admita ordenamiento a la pestaña Columns. Por ejemplo: DatePart(mm, O.OrderDate).

  10. Crear el calendario:

    1. Ir a App Workbench > Pages.
    2. Nombrar la página Order Calendar y hacer clic en Create.
    3. Seleccionar el diseño de una sola columna, luego hacer clic en + Add Panel.
    4. Seleccionar Calendar.
    5. Localizar la regla de negocio creada arriba y hacer clic en Select.
    6. Hacer clic en Customize Page.
    7. Ingresar Order Calendar para el Name, seleccionar Calendar Panel como el Type y seleccionar Monthly como el Sub Type.

    8. Agregar dos controles con la siguiente configuración:

      Column Name Usage Type
      Control #1: OrderID Order Description
      Control #2: OrderDate Order Date Event Start

    9. Navegar a la vista de la aplicación y confirmar que ahora se ve el calendario.

Configurar los eventos del calendario para vincularse a otra página

Para configurar los eventos de un calendario para vincularse a otra página:

  1. Desde la página del calendario en la aplicación, seleccionar Action Drawer > Live Designer.
  2. Hacer clic en el botón Controls del panel Calendar.
  3. Hacer clic en el icono Open Record del control desde el cual se desea vincular.
  4. Desde Update and Linking, establecer Link To Page en Orders.
  5. Verificar que esté vinculado por OrderID en los Criteria.
  6. Navegar a la vista de la aplicación y confirmar la actualización.

Consultar Configure how linked pages open para conocer cómo Link Target y Replace Page In History afectan el comportamiento de la página vinculada.

Habilitar formato de hora de 24 horas

Desde App Builder 4.60, los paneles de calendario admiten el formato de hora de 24 horas. De forma predeterminada, los tiempos de los eventos se muestran en formato de 12 horas. Para cambiar al formato de 24 horas:

  1. Navegar a la página del calendario en la aplicación y seleccionar Action Drawer > Live Designer.
  2. Hacer clic en el botón Controls del panel de calendario.
  3. Hacer clic en la pestaña Edge Case.
  4. En la sección General, habilitar la configuración Use 24-Hour Clock.
  5. Navegar a la vista de la aplicación y confirmar la actualización.

Usar el control de color para cambiar el color de los eventos

Para usar el control de color para cambiar el color de los eventos:

  1. Agregar una nueva columna a la regla de negocio del calendario. Por ejemplo, ingresar '#000343' en el campo Column or Expression e ingresar Color en el campo Alias.
  2. Navegar a la página del calendario de la aplicación y seleccionar Action Drawer > Live Designer.

  3. Agregar un nuevo control:

    • Seleccionar Color para el Column.
    • Nombrar el control Color.
    • Seleccionar Color para el Control Type.

  4. Navegar a la vista de la aplicación y confirmar la actualización.