Apex · APEX Css · Oracle

Reporte jerarquico usando Interactive Report

En esta publicación del blog, aprenderemos a crear un reporte en formato de árbol o jerárquico, asignando a cada línea un espacio definido, un color distintivo y un ícono representativo.

El código necesario estará disponible en el siguiente enlace de Git.

Utilizaremos una tabla para almacenar la relación entre elementos padre e hijo en cada nivel de la jerarquía.

-- Crear la tabla para almacenar datos jerárquicos
CREATE TABLE demo_hierarchical_data (
    id                NUMBER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
    parent_id         NUMBER,
    nombre            VARCHAR2(100) NOT NULL,
    descripcion       VARCHAR2(4000),
    tipo              VARCHAR2(50),
    fecha_creacion    DATE DEFAULT SYSDATE,
    estado            VARCHAR2(20) DEFAULT 'ACTIVO',
    orden             NUMBER,
    creado_por        VARCHAR2(50) DEFAULT USER,
    
    -- Restricciones
    CONSTRAINT demo_hier_parent_fk FOREIGN KEY (parent_id) 
        REFERENCES demo_hierarchical_data(id) ON DELETE CASCADE,
    CONSTRAINT demo_hier_check_estado 
        CHECK (estado IN ('ACTIVO', 'INACTIVO'))
);

CREATE INDEX demo_hier_parent_idx ON demo_hierarchical_data(parent_id);
CREATE SEQUENCE demo_hier_seq START WITH 100 INCREMENT BY 1;

Lo siguiente que necesitaremos es una vista que nos permita visualizar los datos estructurados como elementos padre e hijo.

CREATE OR REPLACE VIEW v_demo_hierarchical_report AS
SELECT 
    id,
    parent_id,
    nombre,
    CASE
        WHEN LEVEL = 1 THEN nombre
        WHEN CONNECT_BY_ISLEAF = 1 THEN 
            LPAD(' ', (LEVEL-1)*3, ' ') || '└─ ' || nombre
        ELSE 
            LPAD(' ', (LEVEL-1)*3, ' ') || '├─ ' || nombre
    END AS nombre_jerarquico,
    
    -- Versión con HTML para mejor visualización
    CASE 
        WHEN CONNECT_BY_ISLEAF = 1 THEN 
            '<div class="hierarchy-item level-' || LEVEL || ' leaf-node">' ||
            '<span class="fa fa-file-o" style="margin-right:5px;"></span>' || nombre || '</div>'
        ELSE 
            '<div class="hierarchy-item level-' || LEVEL || ' parent-node">' ||
            '<span class="fa fa-folder-o" style="margin-right:5px;"></span>' || nombre || '</div>'
    END AS nombre_html,
    
    -- Ruta completa
    SYS_CONNECT_BY_PATH(nombre, ' > ') AS path_completo,
    
    tipo,
    descripcion,
    fecha_creacion,
    estado,
    orden,
    creado_por,
    LEVEL AS nivel_jerarquia,
    CONNECT_BY_ISLEAF AS es_hoja,
    CONNECT_BY_ROOT id AS id_raiz,
    CONNECT_BY_ROOT nombre AS nombre_raiz
FROM 
    demo_hierarchical_data
START WITH 
    parent_id IS NULL
CONNECT BY PRIOR 
    id = parent_id
ORDER SIBLINGS BY 
    orden, nombre;

Crearemos una página en Oracle APEX que incluirá un Interactive Report y un formulario basado en la tabla que definimos previamente.

SELECT 
    id,
    parent_id,
    nombre_html AS nombre,
    descripcion,
    fecha_creacion,
    estado,
    nivel_jerarquia
FROM 
    v_demo_hierarchical_report
ORDER BY 
    path_completo

También añadiremos algunos estilos CSS personalizados para lograr una interfaz más limpia y elegante, que facilite la visualización jerárquica de los datos.

.hierarchy-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.hierarchy-item.level-1 { margin-left: 0; }
.hierarchy-item.level-2 { margin-left: 20px; }
.hierarchy-item.level-3 { margin-left: 40px; }
.hierarchy-item.level-4 { margin-left: 60px; }
.hierarchy-item.level-5 { margin-left: 80px; }
.hierarchy-item.level-6 { margin-left: 100px; }

.hierarchy-item.parent-node span.fa-folder-o { color: #ffa500; }
.hierarchy-item.leaf-node span.fa-file-o { color: #6f6f6f; }

One thought on “Reporte jerarquico usando Interactive Report

Leave a comment