Introducción
El control Incrustar un sitio web en el editor del App Designer le permite mostrar contenido web personalizado en su app utilizando HTML, CSS y JavaScript.
El control incluye un editor de código con funcionalidades de búsqueda, vista previa y personalización de tema. Soporta interacción con datos de Bizagi a través del SDK, habilita contenido dinámico mediante páginas contextualizadas y proporciona capacidades de generación de código asistida por IA.
Configurar el control
Pestaña Administrar
El campo Título le permite definir un título para el sitio web incrustado. Puede elegir si el título se muestra en la app.
El campo Agregue su código aquí le permite configurar contenido estático o dinámico. Para contenido Fijo, puede escribir código HTML, CSS y JavaScript para crear y mostrar un sitio web incrustado personalizado en la app.
Páginas de Detalle
Cuando la página está configurada como una Página de Detalle, puede definir si el contenido incrustado es estático o dinámico seleccionando Fijo o Contextualizado, respectivamente.
Pestaña Diseño
Las propiedades de la pestaña Diseño le permiten personalizar la apariencia del control. Para restaurar la configuración original, haga clic en Restablecer.
Estilo
•Alinear: Establece la alineación del contenido dentro del control en izquierda, centro o derecha.
•Altura del control: Define la altura del control. Puede configurar la altura en píxeles o como un porcentaje del espacio disponible de la pantalla.
•Ancho del control: Define el ancho del control. Puede configurar el ancho como un porcentaje del espacio disponible de la pantalla.
•Mostrar título: Determina si se muestra el título definido en el campo Título.
Borde
•Tamaño del borde: Define el ancho del borde en píxeles.
•Tipo de borde: Define el estilo de borde aplicado al control.
•Color de borde: Define el color del borde del control.
|
Las propiedades con valores heredados muestran un punto azul. Pase el cursor sobre el punto azul para ver el origen del valor. Cuando se modifica una propiedad, aparece una opción Restablecer para esa propiedad específica. |
Visibilidad
Puede definir la visibilidad del control desde la pestaña VISIBILIDAD.
Esta opción contiene dos secciones:
•En la sección Personas, puede seleccionar las entidades o Personas que tienen permiso para visualizar el control.
•En la sección Dispositivos, puede configurar la visibilidad del control por dispositivo (Desktop, Tablet o Mobile). Para más información, consulte Visibilidad de controles por dispositivo.
Editor de Código del Control Incrustar un sitio web
Menú de opciones
La esquina superior izquierda del editor de código contiene cuatro opciones: Buscar, Expandir, Tema y Copiar.
•Buscar: Busca palabras clave o cadenas de texto dentro del editor de código.Search for keywords or text strings within the code editor.
•Expandir: Amplía el editor de código y muestra un panel de vista previa junto al editor. Un divisor ajustable entre el editor de código y el panel de vista previa le permite ajustar el tamaño de cada área, proporcionando más espacio de trabajo para editar código o revisar la vista previa.
•Tema: Cambia la apariencia visual del editor de código.
•Copiar: Copia todo el contenido del editor de código para que pueda guardar, revisar o editar el código fuera del editor del App Designer.
Fragmentos y Ayuda Contextual para APIs
El editor de código facilita agregar e integrar acciones dentro del control Incrustar un sitio web. Puede configurar el comportamiento de la app, como navegar a una página interna. Las acciones disponibles incluyen:
•goToInternalPage
•goToUrl
•createCase
El editor proporciona ayuda contextual que muestra los métodos y parámetros de API disponibles, facilitando la configuración del comportamiento deseado.
El editor también soporta la API de Colección (SDK de Sites) y proporciona autocompletado para métodos como:
•sdk.Collection.view()
•view.list()
•view.get()
•view.loadActions()
•view.action()
Además de vistas, el editor soporta Casos (sdk.Cases.process) y Colecciones de Persona (sdk.Collections.persona().collection()). El autocompletado contextual está disponible para listar datos, cargar acciones, ejecutar acciones y navegar con contexto.
Cuando selecciona una acción disponible, el editor inserta un snippet de código que contiene el método requerido para la operación seleccionada. Un menú secundario muestra las páginas disponibles para que pueda elegir la página de destino para las acciones de navegación.
Para métodos del SDK, el editor inserta el snippet de código correspondiente y expone las acciones o campos disponibles asociados con la vista seleccionada.
Si necesita cambiar una opción seleccionada, elimine el valor actual y presione Ctrl + Espacio para volver a abrir el menú de sugerencias y seleccionar una opción diferente.
Trabajo con Páginas de Detalle
Al trabajar con Páginas de Detalle, puede acceder a los atributos de la página utilizando llaves dobles ({{ }}).
Después de escribir las llaves dobles de apertura, el editor muestra una lista de atributos disponibles para la página actual. Puede filtrar la lista de atributos por nombre para localizar rápidamente el atributo requerido.
Después de seleccionar un atributo, el valor del atributo se representa directamente dentro del control Incrustar un sitio web.
Desarrollo asistido por IA
La documentación del SDK está estructurada para que pueda utilizarse con un asistente de IA para generar código para una página incrustada, incluso si no tiene experiencia en programación.
Proporcione la documentación del SDK y describa la funcionalidad deseada. El asistente de IA puede generar el HTML, CSS y JavaScript requeridos para el control Incrustar un sitio web.
Para generar código con un asistente de IA:
1.Descargue la documentación de la API del SDK o copie las secciones relevantes.
2.Proporcione la documentación al asistente de IA.
3.Escriba un prompt que describa la funcionalidad deseada. El prompt debe ser:
•Claro: Explique qué debe hacer la página incrustada.
•Específico: Describa los datos, el diseño y las interacciones esperadas.
•Conciso: Concéntrese en el resultado requerido y evite detalles innecesarios.
•Orientado a la acción: Describa qué debe ocurrir cuando los usuarios interactúan con la página.
4.Copie el código generado en el editor de código del control Incrustar un sitio web.
5.Revise el resultado generado y refínelo manualmente o solicite modificaciones adicionales al asistente de IA.
|
Para obtener más información sobre las capacidades e implementación del control Incrustar un sitio web, consulte el Booster. |
Last Updated 7/20/2026 10:02:13 PM