Introducción
El Widget de Consejos de Bizagi está disponible para descarga en el Widget Xchange de Bizagi.
A través de este Widget, el usuario final podrá ingresar un código HTML y visualizar una renderización en el Portal de Trabajo. Usted puede habilitar la opción de impresión desde el modelador de formas de Bizagi Studio.
Antes de empezar
Para poder probar y utilizar este Widget, usted necesitará:
1.Bizagi Studio previamente instalado.
2.Este Widget en específico instalado previamente como se describe en https://help.bizagi.com/platform/es/index.html?widget_xchange.htm, o en https://help.bizagi.com/platform/es/index.html?widgets_manualinst.htm.
3.En el Modelo de Datos, cree un atributo de texto extendido que será usado por el usuario final para ingresar el código HTML.
Propiedades de configuración
To configure this Widget once it is installed in your project, on the Forms designer of Bizagi Studio, select the controls tab. From the utilities section, drag and drop the HTML Display widget to the form.
Para configurar este widget una vez que esté instalado en su proyecto, en el diseñador de formas de Bizagi Studio, seleccione la pestaña de controles. Desde la sección de utilidades, arrastre y suelte el widget de visualización HTML a la forma.
Seleccione el Widget en la forma. Después en el panel izquierdo configure la fuente del modelo de datos del atributo de texto extendido.
Habilite o deshabilite que el botón de impresión aparezca en la forma.
En el panel izquierdo, seleccione la pestaña de datos. Arrastre el atributo de texto extendido del panel izquierdo a la forma.
Ejemplos y consideraciones
|
El widget no requiere ni admite el uso de metadatos o etiquetas especiales fuera de la sección <body>. Concéntrese en proporcionar el contenido HTML visible que desea mostrar dentro del widget. Siguiendo estas pautas, puede aprovechar al máximo el widget para mostrar eficazmente su contenido HTML deseado. |
Cuando use el widget para visualizar HTML, siga estas pautas para asegurar una representación y visualización adecuadas de su contenido.
1.El widget no permite la ejecución de código Script ni Javascript.
2.El botón de impresión no está disponible en la aplicación móvil nativa. Sin embargo, es compatible con navegadores móviles.
3.Restrinja el código a la sección <body>: Solo el código HTML dentro de las etiquetas <body> será reconocido y mostrado correctamente por el widget. Por favor, excluya cualquier código HTML fuera de la sección <body>, incluyendo etiquetas dentro de la sección <head> o la etiqueta <title>.
Por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Contenido visible dentro de la sección <body> -->
</body>
</html>
4.Estilos en línea para dar estilo: Si desea configurar el estilo de sus elementos HTML, puede utilizar estilos en línea directamente dentro de cada etiqueta.
Por ejemplo:
<h1 style="font-size: 28px;">Esto es una prueba de título</h1>
Al especificar el atributo de estilo dentro de una etiqueta HTML y proporcionar las propiedades y valores CSS deseados, puede personalizar la apariencia de los elementos individuales.
Tenga en cuenta que los estilos externos o las etiquetas <style> dentro de la sección <head> no son compatibles con el widget. Los estilos en línea son el método recomendado para aplicar estilos dentro del widget.
Ejemplo
Considere el siguiente ejemplo que demuestra el uso correcto del widget:
<div>
<h1 style="font-size: 28px;">Esto es una prueba de título</h1>
<h2>Esto es una prueba de subtítulo</h2>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
En este ejemplo, el código HTML incluye un elemento <div> para envolver el contenido visible. El contenido visible consta de un encabezado <h1> con un tamaño de fuente personalizado, un subtítulo <h2> y una lista desordenada <ul> con tres elementos de lista <li>. Al seguir esta estructura, se asegura de que solo el contenido visible dentro de la sección <body> sea reconocido y mostrado correctamente por el widget.
Last Updated 6/30/2023 2:41:10 PM