Resumen
Bizagi ofrece los Web parts para dar una opción de integración poderosa sin necesidad de programar.
Los Web parts son una característica nativa que provee una rápida y fácil integración de Bizagi en portales y que incluyen una hoja de estilos predeterminada para los ambientes externos.
Si su sitio corporativo tiene guías de estilo específicas o si desea incluir personalizaciones adicionales, usted puede personalizar las diferentes características de los Web parts de Bizagi.
También, puede personalizar aquellas características que no están definidas a través de las propiedades de los Web parts sino a través de estilos web, por ejemplo: colores, ancho o hacer ajustes específicos a la apariencia general de los mismos.
Este artículo provee una guía y unos ejemplos de cómo realizar ajustes específicos en toda la apariencia, como sobrescribir los valores predeterminados de alto, ancho u otras propiedades del diseño.
Importante
Para sobre escribir los estilos predeterminados, tenga en cuenta que los archivos css se encuentran de manera predeterminada en la ruta: C:\BizAgi\Enterprise\Projects\[YOUR_PROJECT]\WebApplication\jquery\overrides\css\desktop\portal\common\bizagi.webpart.override.css.
Adicionalmente, tenga en cuenta que recomendamos el uso de la herramienta de depuración de Google para inspeccionar cuáles elementos de HTML y cuáles clases desea ajustar y sobrescribir.
Esto quiere decir que se necesita que esté familiarizado con las herramientas proporcionadas por la tecla F12:
Estas opciones le ayudaran a ver más de cerca las clases y propiedades incluidas en los Web parts de Bizagi y es práctico cuando se agregan Web parts al contenido de sus páginas.
Personalización del Inbox
Cuando se muestra el Inbox de Bizagi, usted podrá configurar tanto su ancho como su alto, de tal forma que se ajuste completamente a un espacio asignado que sea más pequeño que los valores asignados por defecto.
Observe que el alto mínimo predeterminado del Inbox es de 400 pixeles y usted puede sobre escribir esto incluyendo las siguientes líneas:
//No use altura o anchura mínima, ni bordes en el contenedor principal del inbox, para que este se ajuste al espacio asignado
.ui-bizagi-sharepoint-webpart-parentdiv
{
min-width: 0px;
min-height: 0px;
border:0;
}
//Establezca el tamaño dado de la tabla contenedora del inbox y muestre una barra de desplazamiento si la información contenida supera esta altura
.ui-bizagi-webpart-cases-view-container
{
height: 317px;
overflow-y:auto;
}
|
El inbox mostrará automáticamente la información de negocio como se haya establecido en el inbox del Portal de Trabajo de Bizagi. Recuerde que también puede seleccionar exactamente qué información quiere mostrar en el inbox usando Columnas personalizadas. |
Personalización de estilos de diseño
Siga la siguiente guía cuando vaya a modificar las propiedades del diseño, para tener un control completo de dónde está modificando la apariencia.
1. Evite definir estilos generales que puedan afectar todas las tablas (<table>, <tr>, <td>), divisiones (<div>) o contenidos del cuerpo de HTML (<body>).
2. Siempre intente definir propiedades para las clases usando un contexto específico.
Esto significa que si está incluyendo más de un Web part de Bizagi, deba asegurarse de que la modificación de estilos aplique para cada contenedor (p.ej, modificando clases solo cuando están dentro de elementos específicos).
En nuestro ejemplo, esto quiere decir que debe definir los estilos de esta manera:
#[id_Element] .ui-bizagi-sharepoint-createNewCaseButton {
...
}
Esto es útil cuando, por ejemplo, usa más de un Inbox de Bizagi a lo largo de los diferentes contenidos del portal.
3. Considere cuáles estilos pueden generar conflictos con aquellos que quiere sobrescribir en Bizagi y aquellos que sean de las páginas de su portal.
4. Es muy recomendado incluir los Web parts una zona del contenido de su página.
De esta manera, su portal y las opciones de diseño pueden manejar mejor la apariencia y los demás ajustes.
Una recomendación adicional es recordar el ancho y el alto mínimo de los Web parts de Bizagi como se detallan a continuación.
WEB PART |
ANCHO MÍNIMO |
ALTO MÍNIMO |
|---|---|---|
Portal de Trabajo |
970 px |
400 px |