Overview
Bizagi offers Web Parts to provide powerful integration options with no need of programming.
This is an out-of-the-box feature providing quick and easy integration of Bizagi in portals, and these Web Parts will include a default style sheet compatible for these other environments.
If your corporate site has specific style guidelines or if you wish to include additional customizations to the Web Parts, you may customize the different aspects of Bizagi Web Parts.
You may customize those characteristics which are not defined through the Web Part properties but through web styles, such as: colors, width, or to make some specific adjustments in overall appearance.
This article provides examples and guidelines on how to make specific adjustments in overall appearance, such as overriding default heights, widths, or other layout properties.
Important
To override the default styles, note the location of the css files to do this, which is by default: C:\BizAgi\Projects\[YOUR_PROJECT]\WebApplication\jquery\overrides\css\desktop\portal\common\bizagi.webpart.override.css.
In addition to this, note that we recommend relying on Google Chrome's debugging tools to inspect what HTML elements and classes you may want to adjust and override.
This means that it is required that you are familiar with such tools, provided by the F12 key:
These options will help you take a closer look on classes and properties included in Bizagi's Web Parts by default and this come handy especially when you add Bizagi Web Parts directly into rich content of your pages.
Inbox customization
When showing Bizagi's Inbox, you may also customize both its width and height so that these adjust completely to a specifically assigned spot which is shorter that the default minimum height assigned by default.
Note that the default minimum height of the inbox is 400 pixels and you may override this by including the following lines:
//Use no minimum height or width in the inbox main container, and no border, so that these adjust to the assigned space
.ui-bizagi-sharepoint-webpart-parentdiv
{
min-width: 0px;
min-height: 0px;
border:0;
}
//Force a given size of the inbox table's container, and show a scroll if the information contained in it, exceeds this height
.ui-bizagi-webpart-cases-view-container
{
height: 317px;
overflow-y:auto;
}
|
The inbox will automatically display business information as it has been set in the Work Portal inbox directly in Bizagi. Keep in mind that you may too select exactly which information you want to show in the inbox by customizing columns. |
Customization guidelines
Follow these guidelines when modifying layout properties, so that you have full control of where specifically are you altering appearance.
1. Avoid defining general styles which can affect all tables (<table>, <tr>, <td>), divisions (<div>) or content at the HTML's body (<body>).
2. Try to always define properties for classes by explicitly using a context.
This may also mean that if you are including more than 1 Bizagi Web Part, you may want to make sure that style modifications apply per your container (i.e, by defining modification to classes only when inside a given element's id).
In our example above, this would mean defining styles in this manner:
#[id_Element] .ui-bizagi-sharepoint-createNewCaseButton {
...
}
This is especially useful if for example, you will be using more than 1 Bizagi Inbox throughout your different portal content.
3. Consider which styles can generate conflicts between those you want to override in Bizagi and those from the master page at your portal.
4. It is strongly recommended including Web Parts into Web Part zones of your pages content.
In this way, your Portal and its designer options handle best appearance and other settings.
An additional recommendation is to keep in mind the minimum width for Bizagi Web Parts as detailed below.
Web Part |
MINIMUM WIDTH |
MINIMUM HEIGHT |
|---|---|---|
Work Portal |
970 px |
400 px |