Written by Clarisa Maman Orfali

 

Si estás buscando una forma de personalizar la plantilla de las Cards y darle color definido a los iconos y al borde superior para presentarlo en tu aplicación en APEX, hoy voy a contarte cómo puedes hacerlo.

 

El resultado al cual vamos a llegar es este:

 


 

 

 

Crear Copia de Plantilla Cards

 

Para crear nuestra personalización vamos a realizar en primera instancia una copia de la plantilla Cards que viene en el Tema Universal 42.

 

Ingresamos a nuestra aplicación demo y vamos a “Componentes Compartidos” y en la sección “Interfaz de Usuario” seleccionamos “Plantillas”.

 

Vamos a visualizar toda la lista de plantillas, buscamos en plantillas de Listas la que se llama “Cards” y realizamos una copia de la misma, ingresando el nombre “Cards Color”.

 


 

 

 

Editar Plantilla Cards Color

 

Agregar Opciones de Plantilla

 

Hacemos clic en el enlace Cards Color para editar la plantilla.

 

En la ficha “Opciones de Plantilla” vamos a agregar una opción más a la plantilla, para ello, hacemos clic en el botón “Agregar Opción de Plantilla”, una vez abierta la ventana modal ingresamos lo siguiente:

 

  • Secuencia de Visualización: 20

  • Grupo: Color Accents

  • Nombre Mostrado: Use RAG Colors

  • Identificador de Opción: USE_RAG_COLORS

  • Clases CSS: t-Cards--RAG

 

Hacemos clic en el botón Crear.

 

De esa forma veremos creada la nueva opción de la plantilla:

 


 

 

 

Editar Definición de la Plantilla

 

Ingresamos a la sección de la Definición de la Plantilla y reemplazamos el código de “La Plantilla de Lista Actual” por el siguiente código HTML:

 

<li class="t-Cards-item #A04#">

<div class="t-Card">

<a href="#LINK#" #A05# class="t-Card-wrap">

<div class="t-Card-icon"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>

<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3></div>

<div class="t-Card-body">

<div class="t-Card-desc">#A01#</div>

<div class="t-Card-info">#A02#</div>

</div>

</a>

</div>

</li>

 


 

 

 

De igual modo reemplazamos el código de la Lista “Plantilla de Lista No Actual” por el siguiente código:

 

<li class="t-Cards-item #A04#" >

<div class="t-Card">

<a href="#LINK#" #A05# class="t-Card-wrap">

<div class="t-Card-icon"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>

<div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3></div>

<div class="t-Card-body">

<div class="t-Card-desc">#A01#</div>

<div class="t-Card-info">#A02#</div>

</div>

</a>

</div>

</li>

 


 

 

 

La plantilla de Listas contiene 10 atributos adicionales que pueden ser usados para definiciones del usuario, en este caso podemos ver que tenemos definidos 5 atributos:

 

#A01# - representa la descripción

#A02# - representa información secundaria

#A03# - representa las iniciales

#A04# - representa la clase CSS que corresponde a la clase RAG Color

#A05# - representa el Target de la URL que se abre en una página en blanco usando Blank

 

Dependiendo lo que queramos colocar en nuestra cards nosotros podemos definir su significado usando las variables de sustitución.

 

Agregar estilos CSS Inline en la Plantilla

 

Para que las cards tomen los colores que le asignemos cuando hagamos la lista dinámica es necesario que tengamos las reglas CSS implementadas en nuestra plantilla.

 

Colocamos en la zona de “Hoja de Estilo en Cascada” (Cascading Style Sheet) en el recuadro de “En Liniea” (Inline) las siguientes reglas CSS:

 

/* Parametrizar los colores de las Cards usando card_modifier */

.t-Cards .RAG-red .t-Card-icon .t-Icon, .t-Cards .RAG-red .t-Card .t-Card-wrap:before {

background-color: #FF3B30;

}

.t-Cards .RAG-amber .t-Card-icon .t-Icon, .t-Cards .RAG-amber .t-Card .t-Card-wrap:before {

background-color: #FF9500;

}

.t-Cards .RAG-green .t-Card-icon .t-Icon, .t-Cards .RAG-green .t-Card .t-Card-wrap:before {

background-color: #44C35A;

}

.t-Cards .RAG-blue .t-Card-icon .t-Icon, .t-Cards .RAG-blue .t-Card .t-Card-wrap:before {

background-color: #007AFF;

}

 


 

 

Aplicamos los cambios para cerrar la plantilla.

 

Ahora estamos en condiciones de crear nuestra lista para mostrarla usando la plantilla Cards Color.

 

Primeramente necesitaremos crear una tabla que contendrá los datos de nuestra lista para que pueda ser mostrada dinámicamente en nuestra página.

 

Crear Tabla DEMO_CARDS

 

En mi ejemplo voy a crear esta tabla que contendrá el Titulo, link, icono y las variables A01, A02, A03, A04, A05.

 

Ejecutamos los siguientes scripts en el Taller de SQL por separado:

 

CREATE TABLE "DEMO_CARDS"

( "ID" NUMBER(8,0) NOT NULL ENABLE,

"TITULO" VARCHAR2(25),

"LINK" VARCHAR2(100),

"FA_ICON" VARCHAR2(30),

"A01" VARCHAR2(250),

"A02" VARCHAR2(250),

"A03" VARCHAR2(250),

"A04" VARCHAR2(250),

"A05" VARCHAR2(250),

CONSTRAINT "DEMO_CARDS_PK" PRIMARY KEY ("ID") ENABLE

)

/

 

CREATE OR REPLACE TRIGGER "BI_DEMO_CARDS"

before insert on "DEMO_CARDS"

for each row

begin

if :NEW."ID" is null then

select "DEMO_CARDS_SEQ".nextval into :NEW."ID" from sys.dual;

end if;

end;

 

/

ALTER TRIGGER "BI_DEMO_CARDS" ENABLE

/

 

Para cargar los registros de la tabla he creado un Informe Interactivo el cual te voy a dejar el archivo CSV para que puedas cargar los datos en la tabla.

 


 

 

Descargar Archivo Cards.csv

 

Esta tabla contiene 10 registros el cual son departamentos de una empresa en el que se corresponden los campos A01, A02, A03, A04, A05 con las variables de sustitución que representan atributos adicionales de la plantilla de Listas.

 

#A01# - Descripción

#A02# - Secondary Information

#A03# - Initials

#A04# - List Item CSS Classes RAG Color

#A05# - Target URL Blank

 


 

 

Nota: podemos ver las descripciones de Atributos desde la plantilla de Listas “Cards Color” en la sección “Descripciones de Atributos”

 

Tenemos nuestra tabla DEMO_CARDS y los datos ingresados en ella, para que quede claro el tema de las variables de sustitución veamos los datos del primer registro y como se corresponden a las variables de sustitución de la plantilla de Lista “Cards Color”.

 

Definición Tabla

Registro 1 de la tabla

Variables de Sustitución

ID

1

No se muestra en el Card

TITULO

Administración

#TEXT#

LINK

f?p=&APP_ID.:7:&APP_SESSION.::&DEBUG.:

#LINK#

FA ICON

fa-file-text-o

#ICON_CSS_CLASSES#

A01

Big Sur Dr. </br> Tampa</br> Florida</br> 926

#A01#

A02

2 empleados

#A02#

A03

-

#A03# (no lo usamos)

A04

RAG-red

#A04#

A05

target="_blank"

#A05#

 

Bueno tenemos todo lo necesario para crear nuestra página usando las Listas, por ello ahora vamos a crear una lista dinámica que tome los datos de la tabla DEMO_CARDS y los muestre usando la plantilla “Cards Color”.

 

 

Crear Lista Dinámica

 

Para crear la lista dinámica necesitamos conocer la sintaxis correcta para la Consulta SQL que vamos a realizar.

 

En la documentación de Oracle podemos ver la sintaxis como sigue:

 

SELECT level, labelValue label,

[targetValue] target,

[is_current] is_current_list_entry,

[imageValue] image,

[imageAttributeValue] image_attribute,

[imageAltValue] image_alt_attribute,

[attribute1] attribute1,

[attribute2] attribute2,

[attribute3] attribute3,

[attribute4] attribute4,

[attribute5] attribute5,

[attribute6] attribute6,

[attribute7] attribute7,

[attribute8] attribute8,

[attribute9] attribute9,

[attribute10] attribute10

FROM ...

WHERE ...

ORDER BY ...

 

Donde:

  • Level y Labelvalue - son requeridos

  • Level - para las listas jerárquicas, el parámetro de nivel debe ser suministrado. Para listas no jerárquicas, este parámetro se puede establecer en NULL.

  • Labelvalue - es el texto que aparece como entrada de la lista

  • Targetvalue - es la URL de destino para trasladarse cuando se selecciona la entrada de lista

  • Is current - controla el comportamiento de la entrada de la lista. Los valores que incluye son:

    • NULL - se basa en el target de la URL

    • YES - entrada de lista es siempre actual

    • NO - entrada de lista no es actual

  • imageValue - El nombre de la imagen aparece en la entrada de lista

  • imageattributevalue - es el valor de etiqueta alternativo, es necesario para los propósitos de accesibilidad en las plantillas donde el usuario debe hacer clic en la imagen.

  • Atribute1 al 10 - Estos atributos se relacionan con los 10 atributos de usuario existentes para las listas.

 

 

Vamos a crear nuestra lista dinámica para ello, regresamos a “Componentes Compartidos”, en la sección “Navegación” y hacemos clic en “Listas”.

 

  1. Hacemos clic en el botón Crear

  2. Crear Lista: Nuevo

  3. Clic en Siguiente

  4. Nombre: DEMO_CARDS

  5. Tipo: Dinámico

  6. Clic en Siguiente

  7. Consultar Tipo de Origen: Consulta SQL

Consulta SQL:
SELECT

null lvl,

'<h5>' || titulo || '</h5>' label,

link targetvalue,

null is_current,

fa_icon imagevalue,

null imageattributevalue,

null imagealtvalue_alt,

a01,

a02,

a03,

a04,

a05

FROM

demo_cards

ORDER BY

1

  1. Clic en Siguiente

  2. Clic en Crear

 

 

Crear Región de Lista en una Página

 

Creamos una página en blanco en nuestra aplicación y agregamos una nueva región:

 

  1. Sección Identificación:

    1. Título: Cards

    2. Tipo: Lista

  2. Sección Origen

    1. Lista: DEMO_CARDS

  3. Sección Apariencia

    1. Plantilla: Blank with Attributes

 

Hacemos clic en Atributos de la región Cards:

 


 

 

Plantilla de Lista: Cards Colors

Opciones de Plantilla:

Style: Compact

Icons: Dispaly Icons

Layout: 5 Columns

Body Text: Auto

Color Accents: Use RAG Colors

 


 

Guardamos los cambios y ejecutamos:

 


 

 

Para probar los links simplemente he creado una página de administración cuyo enlace se establece en la columna link de la tabla DEMO_CARDS y al hacer clic en la Card Administración nos lleva a la página creada para Administración. Así lo hacemos para todas las Cards.

 


 

 

De este modo podremos usar este tipo de adaptación de la plantilla Cards para todas nuestras aplicaciones en Oracle Application Express.

 

Si te gustó el artículo coméntalo!

 

Hasta Pronto!