Como Extender Formas En Bizagi
De
<keywords content="keywords"> userfields, google, links, external link, embed, custom HTML, html, iframe, frame, img, href, google map, google maps, embed web, customize forms, custom form, customize form </keywords>
|
Alerta: Los Campos de Usuario han sido deprecados, y por lo tanto, los pasos descritos en este artículo aplican únicamente en las versiones 9.1.x. La posibilidad de incluir controles personalizados bajo tecnología JQuery, CSS 3 y HTML 5, se presenta en Bizagi GO con la opción de incluir Widgets de Bizagi. |
Contenido |
Cómo personalizar las formas en Bizagi
Introducción
Como parte del producto, Bizagi ofrece una serie de Tipos de Campo predefinidos para ser incluídos en las formas de las actividades. Estos son los tipos de campo más empleados y requeridos en los procesos. Dentro de ellos encontramos controles para adjuntar archivos, combos, radio, y campos de tipo input, entre otros.
También es posible incluir controles con funcionalidades adicionales dentro de las formas del proceso (interfaces de usuario), de manera que se pueda añadir cualquier control HTML (que no se encuentre comprendido dentro del listado de campos de Bizagi).
Si desea personalizar sus formas de proceso y extender la funcionalidad HTML de las mismas, puede crear campos de usuario en Bizagi.
A través de los campos de usuario de Bizagi, se pueden mostrar enlaces a páginas externas, botones personalizados, videos, imágenes, o embeber una aplicación personalizada entre otras opciones.
Lo que debe hacer en Bizagi
La inclusión de código HTML dentro de una forma de una actividad dentro del proceso, se realiza mediante los siguientes pasos:
1. Creando el campo de usuario que contenga el código HTML.
2. Incluyendo el campo de usuario en la forma.
Ejemplo
En este artículo, se ilustrará cómo embeber un mapa de google estático dentro de una forma en Bizagi:
Creando el campo de usuario que contenga el código HTML
Antes de comenzar, se debe obtener el código HTML que representa la información del mapa de Google.
Para este ejemplo, esto se realiza copiando el enlace contenido del sitio de origen maps.google.com:
Seguidamente, dirigirse a la opción de Herramientas (Tools) en Bizagi Studio, y seleccionar la opción de Campos de Usuario (Userfields).
Añadir un nuevo campo de usuario, especificando el nombre, la descripción, y mencionar a qué tipos de datos aplicará este campo de usuario ("Todos" es una opción igualmente válida):
En este ejemplo no se emplearán parámetros en el campo de usuario.
Hacer clic en Editar código (Edit code) e incluir el código HTML:
Es de anotar que este código debe ser agregado al campo de usuario empleando el método FieldResponse.AppendHTML().
El código del campo de usuario para este ejemplo es:
FieldResponse.AppendHTML("<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'");
FieldResponse.AppendHTML("src='http://maps.google.com/?ie=UTF8&ll=26.74561,-25.488281&spn=70.868378,162.773438&t=m&z=3&output=embed'></iframe>");
FieldResponse.AppendHTML("<br /><small><a href='http://maps.google.com/?ie=UTF8&ll=26.74561,-25.488281&spn=70.868378,162.773438&t=m&z=3&source=embed'");
FieldResponse.AppendHTML("style='color:#0000FF;text-align:left' target='_blank'>View Larger Map</a></small>");
|
Nota: Se necesitará reemplazar las comillas dobles por comillas sencillas dentro del código HTML, o escapar estos caracteres con el uso de "backslash" ("\") para incluir en el método FieldResponse.AppendHTML(). |
Guardar el campo de usuario haciendo clic en "OK".
Incluyendo el campo de usuario en la forma
Ahora que se ha creado el campo de usuario, dirigirse a la vista del asistente de proceso en Bizagi Studio y luego al "Paso 3: Definir Formas":
Seleccionar la actividad en la cual se desea mostrar el campo de usuario con información embebida (en este ejemplo, un mapa de google).
En esta forma, incluir el campo de usuario creado en el paso anterior:
|
Nota: A pesar de que un campo de usuario puede no necesariamente usar la información de algún atributo del modelo de datos, se requerirá que se asocie a alguno ("data binding"). |
Guardar la forma, y proceder a correr el proceso en el portal de trabajo.
En este momento ya hemos embebido el mapa de google dentro de la forma del proceso!
Artículos Relacionados
<comments />
