En la entrada de hoy quiero mostrarte cómo puedes crear fácilmente en APEX un menú personalizado a partir de una lista de tipo menú popup.

Para este ejemplo he creado una aplicación en blanco con 4 páginas, la página 1 es donde mostraré el menú y 3 páginas en blanco donde cada enlace del menú se redirigirá al hacer clic en su respectivo nombre.

El resultado de lo que haremos lo maestro en la siguiente imagen:

 

Una vez creada la aplicación con las 4 páginas vamos a crear una lista.

Ingresamos a Componentes Compartidos —-> Sección Navegación y búsqueda —-> Listas

Creamos una Lista de tipo Estática que tendrá las entradas:

  • Enlace 1: ir a página 2
  • Enlace 2: ir a página 3
  • Enlace 3: ir a página 4

Para que cada entrada se visualice un icono vamos a editar cada una de ellas, hacemos clic en la primer entrada y en Imagen/Clase ingresamos fa-binoculars.

Hacemos lo mismo para las otras dos entradas:

  • Enlace 2 – Imagen/Clase: fa-bar-chart
  • Enlace 3 – Imagen/Clase: fa-building

Tip: podemos navegar entre la lista usando el icono de avance en la parte superior de la ventana.

Abrimos la página donde queremos mostrar el menú, en mi caso será la página 1. Desde el Diseñador de Páginas de la página 1, creamos una nueva región de tipo Lista:

  • Origen: Lista Popup (nombre de mi lista)
  • Plantilla: Ninguno
  • Excluir Título de Traducción:
  • Identificador Estático: mipopup (colocamos un nombre de identificador para poder hacer referencia más adelante)

En Atributos:

  • Plantilla de Lista: Menu Popup

Si guardamos los cambios y ejecutamos la página no se verá la lista porque se convierte en un menú que aparece cuando es necesario.  Lo que vamos a hacer ahora es crear un botón para que el menú aparezca.

Desde el Diseñador de Páginas de la página 1,  creamos un botón que lo llamaremos Menú.

– En la Sección Identificación

– Etiqueta: Menú

– En la Sección Apariencia

– Plantilla de Botón: Text with Icon

– Clases CSS: js-menuButton

– Icono: fa-chevron-down

– En la Sección Comportamiento

– Definida por Acción Dinámica (lo definimos así para que el botón no haga otra cosa, aunque no tengamos definida ninguna acción dinámica)

– En la Sección Avanzada

– Atributos Personalizados: data-menu=»mipopup_menu» (el valor del atributo data-menu es el id del menu que proviene del identificador estático de la lista con el sufijo _menu añadido)

De este modo hemos llegado al resultado de nuestro menú desplegable.

Espero te sea de utilidad! Hasta la próxima!