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: #A03# #TEXT# #A01# #A02# De igual modo reemplazamos el código de la Lista “Plantilla de Lista No Actual” por el siguiente código: #A03# #TEXT# #A01# #A02# 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. Tampa Florida 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”. Hacemos clic en el botón Crear Crear Lista: Nuevo Clic en Siguiente Nombre: DEMO_CARDS Tipo: Dinámico Clic en Siguiente Consultar Tipo de Origen: Consulta SQL Consulta SQL: SELECT null lvl, ' ' || titulo || ' ' 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 Clic en Siguiente 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: Sección Identificación: Título: Cards Tipo: Lista Sección Origen Lista: DEMO_CARDS Sección Apariencia 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!
↧