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
Antes de utilizar capacidades del SDK, coloque su código dentro de sdk.onReady(). Este método ejecuta el código cuando el SDK está completamente cargado y disponible para su uso.
El editor de código proporciona ayuda contextual que muestra los métodos, parámetros, acciones y campos de datos disponibles del SDK, lo que facilita la configuración del comportamiento deseado.
El editor admite métodos de navegación que permiten que el contenido incrustado interactúe con la experiencia de la app. Los métodos de navegación disponibles incluyen:
•sdk.Navigation.goToInternalPage()
•sdk.Navigation.goToUrl()
•sdk.Navigation.goToContextualizedPage()
Cuando selecciona un método de navegación, el editor inserta el snippet de código correspondiente y muestra las opciones de navegación disponibles cuando corresponde.
El editor admite acceso a datos mediante Vistas, Casos y Colecciones de Personas.
Vistas
La API de Colecciones (sdk.Collection.view()) permite que el contenido incrustado obtenga registros, acceda a elementos individuales, cargue acciones disponibles, ejecute acciones y navegue utilizando el contexto del registro. Con las vistas, el contenido incrustado puede:
•Obtener registros de la vista.
•Acceder a registros individuales.
•Cargar acciones disponibles.
•Ejecutar acciones.
Los métodos compatibles incluyen:
•view.list()
view.get()
view.loadActions()
view.action()
Casos
El SDK permite acceder a casos de procesos de Bizagi mediante sdk.Cases.process(). Con los Casos, el contenido incrustado puede:
•Obtener listas de casos.
•Acceder a casos individuales.
•Cargar las acciones disponibles para un caso.
•Ejecutar acciones de caso.
•Navegar a páginas utilizando el contexto del caso.
Los métodos compatibles incluyen:
•list()
•get()
•loadActions()
•action()
•navigateTo()
Colecciones de Personas
El SDK de Colecciones (sdk.Collections.persona().collection()) proporciona acceso a las colecciones asociadas a Personas. Con las Colecciones de Personas, el contenido incrustado puede:
•Obtener registros de la colección.
•Acceder a registros individuales.
•Cargar acciones disponibles de la colección.
•Ejecutar acciones de la colección.
•Navegar utilizando el contexto de la colección.
Autocompletado
El editor incluye autocompletado contextual para las capacidades compatibles del SDK. Presione Ctrl + Espacio para mostrar las sugerencias disponibles. Según el contexto actual, las sugerencias pueden incluir:
•Vistas
•Procesos
•Personas
•Colecciones
•Métodos
•Acciones
•Campos de datos
Al trabajar con datos obtenidos de vistas, casos o colecciones, el editor también puede sugerir campos disponibles y metadatos relacionados.
Cuando selecciona una opción disponible, el editor inserta el snippet de código correspondiente y muestra sugerencias adicionales cuando están disponibles.
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.
|
When developing embedded content: •Use only SDK objects, properties, and methods explicitly documented in the SDK documentation. •Do not assume the existence of objects, properties, or methods that are not documented. •Do not infer SDK structures based on conventions from other libraries or frameworks. |
Desarrollo asistido por IA
La documentación del SDK está estructurada para utilizarse con un asistente de IA y generar código para una página incrustada, incluso si no tiene experiencia en programación.
Un asistente de IA puede generar el HTML, CSS y JavaScript necesarios para el control Incrustar un sitio web.
Generar código con un asistente de IA
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.
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.
Requisitos del prompt
Para obtener mejores resultados, proporcione la siguiente información.
Requisitos funcionales
Describa:
•El propósito de la página incrustada.
•La información que debe mostrarse.
•Las interacciones esperadas del usuario.
•El diseño o la presentación visual deseada.
•Cualquier navegación, filtro, paginación o acción que deba estar disponible.
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.
Información del origen de datos
Además de los requisitos funcionales, proporcione la información técnica requerida por la capacidad del SDK seleccionada.
Collection.view
Proporcione:
•Nombre de la vista.
•ID de la vista.
•Campos disponibles.
Cases.process
Proporcione:
•Nombre del proceso.
•ID del proceso.
•Campos de caso disponibles.
Collections.persona.collection
Proporcione:
•Nombre de la Persona.
•ID del stakeholder.
•Nombre de la colección.
•ID de la colección.
•Campos disponibles.
Al utilizar Collections.persona.collection, incluya el nombre visible de la colección (sourceDisplayName) junto con la información de la colección.
|
Para obtener más información sobre las capacidades e implementación del control Incrustar un sitio web, consulte el Booster. |
Last Updated 9/09/2026 8:07:40 p. m.