Introducción
Una vez que tenga las Web parts en el diseño de sus páginas, puede optar por personalizar ciertas propiedades tanto para: utilizar colores diferentes a los asignados por defecto, o para realizar algunos ajustes específicos de diseño en la apariencia general.
Esta sección provee ejemplos y lineamientos para realizar ajustes personalizados en la apariencia general de las Web parts, tales como sobrescribir sus dimensiones (alto o ancho), o cambiar otras propiedades básicas del diseño.
Importante
Antes de continuar, tenga en cuenta que se recomienda revisar Estilos de las Web parts donde se describe cómo sobrescribir la definición de estilos por defecto.
Tenga en cuenta que la ubicación del archivo involucrado para ello, es el mismo que se usa para el cambio de tema y color indicado en el enlace anterior (por defecto en C:\BizAgi\Enterprise\Projects\[SU_PROYECTO]\WebApplication\jquery\overrides\css\desktop\portal\common\bizagi.webpart.override.css).
Además de lo anterior, recomendamos utilizar las herramientas de depuración de Google Chrome para inspeccionar los elementos HTML y las clases que se utilizan.
Esto implica que debe estar familiarizado con estas opciones provistas en Chrome al presionar la tecla F12:
Estas opciones son fundamentales para ayudarlo a observar de cerca las propiedades y clases que usan las Web parts de Bizagi.
Esto es de mayor utilidad especialmente cuando se adicionan las Web parts directamente en el contenido enriquecido de sus páginas (cuando no se adicionan las Web parts en Web part zones preasignadas e identificadas por SharePoint).
Personalización del Inbox
Para las Web parts que muestran el Inbox de Bizagi, usted puede personalizar su ancho y alto. Por ejemplo, para que estas dimensiones se ajusten completamente a algún espacio determinado en la página que sea menor a las dimensiones mínimas asignadas por Bizagi (por defecto).
Tenga en cuenta que el tamaño mínimo del Inbox es de 400 píxeles y que podrá sobrescribir esta definición al incluir las siguientes líneas:
//No utilizar un alto o ancho mínimo para el contenedor principal del inbox, y tampoco usar bordes, para que el contenido se ajuste según el límite
.ui-bizagi-sharepoint-webpart-parentdiv
{
min-width: 0px;
min-height: 0px;
border:0;
}
//Forzar un tamaño fijo en la tabla de casos del inbox, y habilitar el scroll si la información excede el alto asignado
.ui-bizagi-webpart-cases-view-container
{
height: 317px;
overflow-y:auto;
}
|
El inbox despliega automáticamente la información tal como se ha definido para ser mostrada en el inbox del Portal de Trabajo en Bizagi. Recuerde que puede seleccionar qué información se muestra en el inbox, por medio de la personalización de columnas. |
Personalización para Start Process button
Específicamente para la Web part llamada Start Process button, nótese que es posible personalizar el alto y el ancho del botón para iniciar casos.
Para ello puede utilizar las siguientes opciones:
//Ajustar de manera automática el tamaño del botón
#btnNewCase {
width: auto;
height: auto;
}
//Ajustar el tamaño del contenedor (div) del botón
.ui-bizagi-sharepoint-createNewCaseButton{
min-height:0px;
min-width:0px;
overflow:hidden;
}
|
La personalización de los botones, puede hacerse en el archivo ubicado por defecto en C:\BizAgi\Enterprise\Projects\[SU_PROYECTO]\WebApplication\jquery\overrides\css\desktop\sharepoint\common\bizagi.webpart.override.css, dado que estos no quedan dentro de un iFrame. |
Lineamientos
Siga estas recomendaciones cuando se deseen modificar las propiedades que afectan el layout, de manera que usted pueda tener un mayor control sobre en qué lugares específicos se están alterando las propiedades por defecto.
1. Evite sobrescribir estilos generales para: todas las tablas (<table>, <tr>, <td>), divisiones (<div>) o del cuerpo del HTML (<body>).
2. En lo posible defina las propiedades para las clases incluyendo explícitamente un contexto.
Especialmente cuando se tiene más de un Web part de Bizagi y se quiere ajustar los estilos solo a uno de ellos.
Entonces deberá definir las personalizaciones para que apliquen únicamente a ciertas clases cuando estén dentro de cierto elemento (referenciado por su Id).
En el ejemplo anterior, significaría definir los estilos de la siguiente manera:
#[idElemento] .ui-bizagi-sharepoint-createNewCaseButton {
...
}
3. Considere previamente los estilos que pueden generar conflicto con aquellos que desea sobrescribir en Bizagi y aquellos que están dados por la página master en SharePoint.
4. Se recomienda enfáticamente incluir las Web parts de Bizagi dentro de las Web part zones que identifica SharePoint para el contenido de sus páginas.
De esta manera, SharePoint y sus opciones para el diseño de páginas, podrán manejar adecuadamente las propiedades de estilo y edición de apariencia en general.
Como recomendación adicional, también se lista el ancho mínimo (y alto mínimo) que deben utilizar las Web parts de Bizagi por defecto.
WEB PART |
ANCHO MÍNIMO |
ALTO MÍNIMO |
|---|---|---|
Portal de Trabajo |
970 px |
400 px |
My Inbox, Case summary, Activity form |
264 px |
400 px |
Start process list, Start process button |
264 px |
40 px |