APEX_CSS: Almacena Bloques CSS en base de datos y aplicalos en APEX.

En el artículo anterior, aprendimos a usar el paquete APEX_CSS para aplicar estilos dinámicos directamente desde PL/SQL, adaptando el diseño de la página según el usuario o las condiciones de negocio.
Si todavía no lo leíste, te recomiendo hacerlo antes: APEX_CSS: aplica estilos dinámicos en Oracle APEX con PL/SQL

En esta ocación, vamos un paso más allá:
Veremos que es posible almacenar bloques de código CSS en tablas dentro de la base de datos y aplicarlos dinámicamente desde nuestras páginas de APEX.

¿Por qué almacenar CSS en la base de datos?

Guardar los estilos en tablas ofrece ventajas interesantes:

• Permite que los usuarios administradores cambien el aspecto de la app sin tocar el código.

• Facilita la personalización visual por perfil, empresa o entorno.

• Se pueden versionar y activar/desactivar temas fácilmente.

• Centraliza la gestión de estilos en la base de datos.

En resumen: tu base de datos se convierte en un gestor de temas dinámicos.

1. Crear una tabla para los estilos

Primero, creamos una tabla donde almacenaremos nuestros bloques CSS:

CREATE TABLE APP_CSS_BLOC (
    ID       NUMBER GENERATED ALWAYS AS IDENTITY,
    NOMB     VARCHAR2(100),
    CSS_BLOC    CLOB,
    ACTI     CHAR(1) DEFAULT 'N',
    CONSTRAINT PK_APP_CSS_BLOC PRIMARY KEY (ID)
);

Luego, insertamos algunos estilos base:

INSERT INTO APP_CSS_BLOC (NOMB, CSS_BLOC, ACTI)
VALUES (
    'Fondo Oscuro',
    'body {
            background: #2e2e2e;
            color: #fff;
            }

            .t-Button {
                background-color: #444;
           }    ',
    'Y'
);

INSERT INTO APP_CSS_BLOC (NOMB, CSS_BLOC, ACTI)
VALUES (
    'Fondo Claro',
    'body { 
            background: #fefefe; 
            color: #222; } .t-Button { background-color: #e0e0e0; }',
    'N'
);

2. Aplicar el CSS activo desde PL/SQL

Ahora, en nuestra página APEX, creamos un proceso en el evento “Before Header” y añadimos este bloque:

DECLARE
    l_css CLOB;
BEGIN
    -- Obtiene el bloque CSS activo desde la base de datos
    SELECT CSS_BLOC
      INTO l_css
      FROM APP_CSS_BLOC
     WHERE ACTI = 'Y'
       AND ROWNUM = 1;

    -- Inyecta el CSS en tiempo de ejecución usando APEX_CSS
    apex_css.add(p_css => l_css);

END;

¿Qué hace este código?

1. Consulta la tabla para obtener el CSS que tenga ACTI = 'Y'.

2. Usa apex_css.add para inyectarlo dinámicamente en la página al momento de renderizar.

3. Así, el tema activo se aplica automáticamente sin editar archivos estáticos.

3. Cambiar el tema desde la base de datos

Podés crear una sencilla página de administración donde el usuario elija el tema activo:

update APP_CSS_BLOC
   set ACTI = case
                when id = :P1_TEMA_ACTUAL then
                 'Y'
                else
                 'N'
              end
where id=:P1_TEMA_SELECCIONADO;

Y al recargar la aplicación, el nuevo CSS se aplicará automáticamente.
Esto hace posible cambiar el aspecto de toda la aplicación en tiempo real y sin despliegues.

Resultado

• Puedes cambiar de temas sin modificar la plantilla.

¡Todo controlado desde la base de datos!

Conclusión

Con este enfoque, APEX_CSS deja de ser solo una herramienta para pequeños retoques visuales:
se convierte en un mecanismo de personalización dinámica y administrable directamente desde la base de datos.

Este patrón es ideal para:

• Aplicaciones multiempresa o con branding personalizable.

• Portales donde el administrador define los colores o temas.

• Entornos donde se busca independencia del equipo de diseño.

¿Te gustó este contenido? Dejá un comentario, compartilo con tu equipo o Invitame un cafe.