El elemento de interfaz de usuario DateNavigator permite visualizar e introducir fechas de manera muy sencilla en intuitiva en nuestras aplicaciones Web Dynpro. Sus características incluyen la capacidad de navegar en un calendario y elegir un día, mes, año o un intervalo de fechas. Principalmente, este elemento debe ser utilizado para ayudar a los usuarios a introducir las fechas en un formato apropiado.
Para recoger las fechas que se seleccionan en el calendario, es necesario hacer un binding a las propiedades del calendario firstSelectedDate y lastSelectedDate. El atributo que relacionemos con estas propiedades deberá de ser del tipo fecha (D, DATUM…) y en ellos se guardarán las fechas seleccionadas por el usuario.
Existe la posibilidad de dar colores a ciertos días del calendario para resaltar fechas que se consideren importantes, como festivos, reuniones, cumpleaños… Para ello es necesario añadir un elemento DateNavigatorMarking. Este elemento se puede combinar con una leyenda (DateNavigatorLegend), que explique los colores utilizados. A continuación se detallan ambos elementos:
DateNavigatorMarking
Este elemento UI es el encargado de pintar en el calendario diferentes fechas. Para ello, se debe definir un nodo (de cardinalidad 0..n ó 1..n) en el contexto con los siguientes atributos:
- Categoría: del tipo WDY_MD_DATE_MARKING_CATEGORY, tipo estándar de SAP que registra la categoría, es decir, el color.
- Fecha: del tipo D, que guarda la fecha a pintar.
Después, se debe añadir al elemento DateNavigator un DateNavigatorMarking. En el árbol de elementos del layout, hacemos click con el botón derecho del ratón en el DateNavigator y pulsamos la opción “Markierung Einfungen” o “Insert Selection”, dependiendo del idioma de nuestro sistema. El siguiente paso es hacer el binding de los atributos creados en las propiedades del elemento tal y como se muestra en la siguiente imagen.
Los colores de las categorías son los siguientes:
- Categoría 1: Azul
- Categoría 2: Amarillo
- Categoría 3: Verde
- Categoría 4: Rojo
DateNavigatorLegend
Con este elemento UI se consigue crear una leyenda debajo del calendario creado para indicar que significan los colores que se han utilizado en el DateNavigator. Al igual que antes, se crea un nodo de cardinalidad 0..n ó 1..n con los siguientes atributos:
- Categoría: del tipo WDY_MD_DATE_MARKING_CATEGORY, tipo estándar de SAP que registra la categoría, es decir, el color.
- Texto: del tipo string, con el nombre que define el color.
Después, se añade al calendario un DateNavigatorLegend haciendo click derecho en el elemento DateNavigator y luego pulsando la opción “Legende Einfungen” o “Insert Legend”. Después, se vuelve a hacer el binding de los atributos creados en las propiedades del elemento.
Por último será necesario rellenar en nuestros métodos de la aplicación, tanto el nodo de la leyenda como el del marking. En las siguientes líneas de código se muestra como crear la leyenda del ejemplo mostrado arriba y algún día del marking.
**Declaramos la tabla para la leyenda DATA lt_leyenda TYPE wd_this->elements_leyenda. DATA ls_leyenda LIKE LINE OF lt_leyenda. **Rellenamos la tabla con los tres colores ls_leyenda-categoria = cl_wd_date_nav_legend=>e_category-one. ls_leyenda-texto = 'Solicitada'. APPEND ls_leyenda TO lt_leyenda. ls_leyenda-categoria = cl_wd_date_nav_legend=>e_category-three. ls_leyenda-texto = 'Aprobada'. APPEND ls_leyenda TO lt_leyenda. ls_leyenda-categoria = cl_wd_date_nav_legend=>e_category-four. ls_leyenda-texto = 'Festivo'. APPEND ls_leyenda TO lt_leyenda. **Declaramos la tabla para el Marking DATA lt_marking TYPE wd_this->elements_marking. DATA ls_marking LIKE LINE OF lt_marking. **Ponemos como festivo el 18 de febrero ls_marking-categoria = cl_wd_date_nav_legend=>e_category-four. ls_marking-fecha = '20120218'. APPEND ls_marking TO lt_marking. **Ponemos como solicitada el 14 de febrero ls_marking-categoria = cl_wd_date_nav_legend=>e_category-one. ls_marking-fecha = '20120214'. APPEND ls_marking TO lt_marking.
Con este elemento UI ya podremos mostrar y utilizar calendarios en nuestras aplicaciones Web Dynpro, para hacer más amigable nuestra interfaz a la hora de introducir y mostrar fechas.