En esta oportunidad quiero mostrarte cómo puedes crear una lista dinámica y que use imágenes personalizadas localizadas dentro de tu espacio de trabajo.
En un anterior artículo explico cómo crear una Lista Estática con imagen personalizada. Que te servirá para cuando tienes una lista que no necesitas tener sus entradas en una tabla de tu base de datos.
Trabajaremos con las mismas imágenes del artículo anterior para este ejemplo de Lista Dinámica, teniendo las siguientes referencias:
#APP_IMAGES#apex-50.jpg
#APP_IMAGES#bi-50.jpg
#APP_IMAGES#mysql-50.jpg
#APP_IMAGES#plsql-50.png
#APP_IMAGES#sql-50.png
Ahora vamos a crear una tabla que tendrá la información de cada una de las entradas de la lista:
Ejecutamos el siguiente script en nuestro Taller de SQL:
CREATE TABLE "LISTA"
( "ID" NUMBER(8,0) NOT NULL ENABLE,
"NOMBRE" VARCHAR2(15),
"NOMBRE_IMG" VARCHAR2(25),
CONSTRAINT "LISTA_PK" PRIMARY KEY ("ID")
USING INDEX ENABLE
)
/
CREATE OR REPLACE EDITIONABLE TRIGGER "BI_LISTA"
before insert on "LISTA"
for each row
begin
if :NEW."ID" is null then
select "LISTA_SEQ".nextval into :NEW."ID" from sys.dual;
end if;
end;
/
ALTER TRIGGER "BI_LISTA" ENABLE
/
Cargamos cada registro como se ve en la siguiente imagen:
Tener especial cuidado de colocar el nombre de la imagen en la columna NOMBRE_IMG sin espacios ni adelante ni atrás. Los nombres son exactamente el mismo nombre utilizado en las referencias de imágenes de nuestro espacio de trabajo.
Lo siguiente que vamos a hacer es crear una copia de la plantilla Media List.
Desde Componentes compartidos vamos a la sección Interfaz de Usuario y hacemos clic en Plantillas, buscamos la plantilla Media List y realizamos una copia que la llamaremos Media Dynamic List with Image.
Podemos ver recuadrado en rojo la copia de la plantilla; recuadrado en verde la plantilla original y recuadrado en celeste la plantilla que trabajamos en el artículo de Lista Estática.
Hacemos clic en el enlace del nombre de la plantilla Media Dynamic List with Image para editarla:
En la sección Plantilla de Lista Actual reemplazamos el siguiente código:
<span class="t-Icon #ICON_CSS_CLASSES#" #IMAGE_ATTR#></span>
Por este otro código:
<img src="#APP_IMAGES##IMAGE#" #IMAGE_ATTR#/>
Estamos agregando el path de la ubicación de nuestras imágenes usando la variable de sustitución de la referencia, que en este caso es #APP_IMAGES# y luego añadimos la variable #IMAGE# el cual alberga el nombre de la imagen guardada en la tabla Lista.
Hacemos lo mismo para la sección Plantilla de Lista No Actual.
Guardamos los cambios.
Como siguiente paso vamos a crear una lista dinámica, desde componentes compartidos ingresamos a la sección Navegación y hacemos clic en Listas.
- Hacemos clic en el botón Crear
- Crear Lista: Nuevo
- Clic en Siguiente
- Nombre: Lista Dinámica con Imágenes
- Tipo: Dinámico
- Clic en Siguiente
- Consultar Tipo de Origen: Consulta SQL
- Consulta SQL:
SELECT
null lvl,
nombre label,
null targetvalue,
null is_current,
nombre_img imagevalue,
null imageattributevalue,
null imagealtvalue_alt,
null a01,
null a02,
null a03,
null a04
FROM
lista
ORDER BY 2
- Clic en Siguiente
- Clic en Crear
Nota: Si quieres conocer la sintaxis de la lista dinámica, puedes ver este artículo en el cual hago referencia a la misma cuando personalizamos la plantilla Cards y hacemos uso de los atributos adicionales de la plantilla el cual los cargamos en la tabla demo.
Cabe aclarar que en este ejemplo no estoy usando los atributos adiciones A01, A02, A03 y A04 que viene con la plantilla, nosotros podemos cargar esa información como columnas en la tabla si quisiéramos usarlo, como dije antes en este caso los valores son Null.
Finalmente vamos a crear una región de tipo Lista en nuestra página de Apex el cual le asignaremos la plantilla que hemos creado:
Hacemos clic en Atributos de la región de Lista para asignarle la plantilla que hemos creado Media Dynamic List with Image y en opciones de la plantilla seleccionamos span Horizontal:
Guardamos los cambios.
Ejecutamos la página para ver los resultados, en la parte superior esta la región con la lista estática que trabajamos en este artículo y en la parte inferior se muestra la lista dinámica ordenada por nombre.
De esta forma podemos incorporar nuestras propias imágenes para que se muestren en nuestras listas, tanto sea Estáticas como Dinámicas.
Espero te haya gustado este articulo y nos vemos pronto!!!