Editor y widgets de Portales

El Editor de Portales combina un repositorio de archivos navegable con un compositor visual. Ambos modos operan sobre el mismo borrador: las modificaciones visuales actualizan las fuentes y las partes gestionadas directamente en el código se conservan.

Modo Código

El modo Código muestra:

• Explorador, para buscar, crear, renombrar y organizar archivos;
• Cargar imagen, para añadir al repositorio activos PNG, JPEG, GIF o WebP;
• pestañas para los archivos abiertos;
• editor con resaltado para JSON, HTML, CSS y JavaScript;
• estado de guardado y número de revisión actual;
• panel Problemas con errores e indicaciones corregibles.

Explorador y Problemas se pueden colapsar con el botón de su encabezado. En el Explorador, el chevrón situado junto a cada directorio también permite expandir o contraer solo esa rama. El estado de los directorios se mantiene durante la sesión de edición, mientras que una búsqueda expande temporalmente las ramas necesarias para mostrar las coincidencias.

Los cambios se guardan de forma asíncrona. Si el borrador ha sido actualizado por otra sesión, el editor detiene el guardado e indica el conflicto: recargar la versión actual antes de reanudar el trabajo.

Usar Punto de control para fijar una revisión inmutable y reconocible del borrador. Un punto de control no publica el Portal.

Al abrir un archivo que no representa una página — por ejemplo portal.json, una Data Resource, un CSS o un archivo de componente — el editor cambia automáticamente a Código. El compositor Visual permanece asociado solo a las páginas y nunca muestra el lienzo de un archivo abierto previamente. El modo elegido para cada página se recuerda durante la sesión de edición: si una página estaba abierta en modo Visual, vuelve automáticamente a Visual después de consultar un archivo de configuración.

Para crear una página, seleccionar Nuevo archivo y usar una ruta JSON bajo pages/, por ejemplo pages/dashboard.json o pages/orders/detail.json. El nombre del archivo es libre: el editor genera automáticamente UUID, título, diseño en rejilla y lista de widgets. Para hacerlo navegable, añadir en portal.json una ruta que apunte a la ruta completa de la página.

Modo Visual

El modo Visual pone a disposición paletas, lienzo e Inspector. Es posible añadir un widget, seleccionarlo y configurar:

• título y propiedades;
• posición, ancho y alto en la rejilla;
• estilos para la instancia individual;
• CSS scoped;
• renderizado para Escritorio, Tableta y Móvil.

Las propiedades guiadas se aplican y guardan cuando el control cambia; un toaster confirma el resultado. Guardar cambios avanzados sirve en su lugar para los recuadros JSON y CSS, donde es normal tener contenido temporalmente no válido durante la escritura. El estado en el encabezado distingue modificaciones en curso, guardando y fuente guardada.

Los campos del Inspector dependen del widget: rutas, imágenes, Vistas de Usuario, widgets individuales de una Vista, Flujo de trabajo, parámetros y Data Resource se eligen de menús filtrados por el Proyecto. Los colores se pueden elegir con el selector o insertar como valor CSS o token de diseño.

Los presets Viewport declaran el tamaño simulado. La barra de zoom ofrece −, +, restablecimiento al 100 % y Ajustar. Ajustar usa tanto el ancho como el alto disponibles, reduce uniformemente el lienzo y mantiene las proporciones de la Vista previa. Un clic en el porcentaje restablece el 100 %; un doble clic permite introducir un valor del 5 % al 200 %. Con un zoom personalizado, las barras de desplazamiento permiten explorar las zonas que no caben en el área de trabajo. El zoom solo modifica la visualización del editor, no la geometría guardada ni el renderizado en ejecución. Cada widget muestra también su indicador ancho × alto en celdas de la rejilla.

Para modificar la geometría de un widget:

• arrastrar el asa superior izquierda para moverlo;
• arrastrar el asa inferior derecha para cambiar su tamaño;
• usar Alt + flecha para moverlo una celda;
• usar Mayús + Alt + flecha para modificar su ancho o alto de una celda.

Para eliminar un widget, seleccionarlo y usar Eliminar widget en el Inspector. Alternativamente, pulsar Supr o Retroceso cuando el cursor no esté en un campo. El editor siempre pide confirmación.

Cuando una región contiene propiedades no gestionadas por el compositor, el editor la identifica como gestionada por el código y la conserva durante las actualizaciones visuales.

Para configurar la página en lugar de un widget, hacer clic en un área libre del fondo del lienzo. El Inspector Estilo de la página permite establecer color, fondo, espaciado interno y altura mínima; Estilo JSON y CSS scoped de la página siguen disponibles para ajustes avanzados.

Configurar aspecto y CSS

El Estilo guiado expone color, fondo, tamaño de texto, alineación, espaciado y radio de borde. Los valores aceptan sintaxis CSS normal, por ejemplo #0f172a, 1rem o 8px.

La Configuración avanzada permite usar propiedades CSS en kebab-case, estados y puntos de ruptura:

{
  "color": "#0f172a",
  "background-color": "#ffffff",
  "padding": "1rem",
  "states": {
    "hover": {"background-color": "#e0f2fe"}
  },
  "breakpoints": {
    "md": {"font-size": "18px"}
  }
}

El campo CSS scoped permite intervenir en cualquier detalle sin influir en los demás widgets. & representa el contenedor de la instancia; .portal-text selecciona el contenido del widget Texto:

&:hover { transform: translateY(-2px); }
.portal-text { font-weight: 600; letter-spacing: .02em; }

Seleccionar Guardar cambios avanzados para registrar JSON y CSS en la página. La Vista previa muestra el resultado compilado definitivo.

Catálogos del Proyecto

Los botones Widget personalizado e Imágenes abren un catálogo unificado. Cada elemento siempre muestra su procedencia: Portal actual, otro Portal del mismo Proyecto, Vista de Usuario publicada o catálogo compartido de Vistas. No se muestran objetos externos al Proyecto o no accesibles al usuario.

La paleta incluye también los widgets de las Vistas de Usuario publicadas del Proyecto. Es posible incorporar tanto widgets estándar — incluidos gráficos, KPI, tablas y mapas — como widgets del catálogo personalizado. La selección registra Vista, versión publicada y clave del widget; una versión permanece estable incluso si la Vista se modifica posteriormente.

Cuando se utiliza una imagen o un componente proveniente de otro objeto, el editor crea una copia en el repositorio del Portal. Esta materialización hace que los puntos de control, las compilaciones y las versiones sean reproducibles; la tarjeta del catálogo conserva la indicación del origen para evitar ambigüedades.

Widgets disponibles

El catálogo gestionado comprende:

• Texto, Hero, Card, Imagen y Divisor;
• Enlace, Menú, Pestañas de navegación y Breadcrumb;
• Sección, Panel colapsable, Barra lateral y Cajón (Drawer);
• Formulario de solo lectura, Formulario de datos, Tabla de datos, Gráfico de barras y Exportación de datos;
• Vista de Usuario completa y widget único de Vista de Usuario;
• Acción de Flujo de trabajo (Workflow);
• Reportes Power BI y Dashboards Qlik;
• Widget personalizado sandbox.

Cada widget soporta propiedades de estilo, estados visuales y puntos de ruptura. El CSS scoped permite personalizar incluso el estado de pasar el ratón (hover), el foco, el estado activo y el estado deshabilitado sin modificar los demás componentes de la página.

El botón Guía de widget abre la referencia integrada del widget seleccionado: enumera propiedades, tipos, valores predeterminados, capacidades y ejemplos de estilo. La referencia completa también está disponible en Reference dei widget.

Cargar y usar una imagen

1. Si el archivo es local, usar Cargar imagen en el Explorador y elegir un PNG, JPEG, GIF o WebP.
2. Para reutilizar un activo, abrir Imágenes y filtrar el catálogo por nombre o procedencia.
3. Seleccionar Usar imagen o Copiar y usar: el editor propone una ruta bajo assets/ y rellena el widget seleccionado.
4. Completar siempre alt, luego elegir adaptación (contain, cover, fill, none, scale-down) y posición.
5. Verificar el resultado en Vista previa.

La altura establecida para el widget en la cuadrícula determina también el espacio ocupado por la imagen. Por defecto, la imagen se contiene sin deformaciones; el CSS scoped puede modificarlo object-fit mediante el selector .portal-image.

Data Manager y consultas visuales

Datos abre el Data Manager del Portal. No es necesario conocer de antemano la estructura de la carpeta data/:

1. Crear un Recurso de Datos y asignar clave y nombre;
2. Elegir Entorno de Conexión o Modelo Semántico;
3. Para Entorno, cargar el catálogo, y luego elegir esquema, tabla, dimensiones, medidas, agregaciones y alias;
4. Para un Modelo Semántico, elegir la versión publicada del Proyecto, y luego campos y medidas gobernadas;
5. Configurar filas máximas, tiempo de espera y parámetros solo cuando sea necesario;
6. Guardar: el archivo data/<chiave>.resource.json se crea y se asocia al widget seleccionado.

El modo SQL personalizado avanzado está reservado para consultas de solo lectura que no son expresables por el configurador. También requiere la declaración de las columnas de salida. Los joins, filtros u ordenamientos complejos se pueden refinar abriendo el JSON generado en modo Código.

El navegador no recibe las credenciales ni consulta directamente la fuente. Las consultas, parámetros, límites y autorizaciones se vuelven a comprobar en tiempo de ejecución.

Datos e integraciones de Sybot

Los recursos de datos pueden usar fuentes y Modelos Semánticos autorizados. Las consultas son de solo lectura y respetan nuevamente los permisos del usuario en el momento de la ejecución.

En el widget Vista de Usuario, elegir de un desplegable una vista publicada del Proyecto del Portal. La selección registra automáticamente tanto la vista como la versión publicada anclada.

En el widget Acción de Flujo de Trabajo, elegir un Flujo de Trabajo ejecutable del Proyecto. Para cada parámetro, indicar si usar el valor predeterminado, solicitar el valor al usuario o guardar un valor fijo. Los parámetros sensibles solo pueden solicitarse en tiempo de ejecución; los Flujos de Trabajo con parámetros de archivo, no son seleccionables. En la Vista Previa solo se realiza la verificación de la configuración.

Escribir un widget personalizado

Al añadir Widget personalizado sandbox, el editor crea una carpeta explícita:

components/<chiave>/
├── component.json
├── template.html
├── styles.css
└── index.js

Abrir código componente pasa a Código y abre los cuatro archivos. template.html contiene el marcado, styles.css el estilo aislado, index.js exporta mount(sdk) y component.json declara archivos y capacidades. El código puede modificar el DOM de su iframe, reaccionar a eventos y usar PortalWidgetSDK para datos, navegación interna y Flujos de Trabajo autorizados. No puede acceder al documento padre, a la sesión, a otros widgets, a cookies o a red directa.

Power BI y Qlik

Reporte Power BI admite Secure URL con la sesión Microsoft del lector y App owns data con un perfil y una vinculación gobernados por el Proyecto. Panel Qlik admite Secure URL y OAuth impersonation con qlik-embed. En ambos casos, los secretos permanecen en la configuración administrativa y el widget solo guarda una URL o vinculación lógica. Ejecute Diagnóstico antes de la Vista previa y pruebe permisos, licencia y políticas del proveedor en el dominio publicado.

Consulte Integraciones gobernadas para el procedimiento completo.

Validar y probar el borrador

1. Guardar el archivo o aplicar las propiedades desde el compositor.
2. Seleccionar Validar.
3. Corregir los elementos listados en el panel Problemas.
4. Seleccionar Compilar para verificar la construcción del borrador.
5. Seleccionar Vista Previa y probar el diseño, los datos y las interacciones.

La Vista Previa está separada de la versión publicada. Los errores muestran un mensaje utilizable y, cuando está disponible, un identificador para comunicarlo a soporte.

Para accesos y ciclo de publicación, consultar Pubblicazione e accessi.