Customizing the layout

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Bizagi from external applications > Portals integration > Bizagi Web parts for SharePoint > Bizagi Web parts for SharePoint On Premises > Styles in Web parts >

Customizing the layout

Overview

You may customize certain aspects of Bizagi Web parts 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

Before you move on, make sure you have previously read the Web parts styles article on how to override the default styles.

Note that the location of the files to do this is the same one as involved in the color and themes described at the link above (by default at 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:

 

 

07inspect

 

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 (instead of adding them into pre-assigned Web part zones which are identified automatically by SharePoint).

 

Inbox customization

For all of the Web parts which show 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;

}

 

06customlayout

 

note_pin

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.

 

Start Process button customization

Specifically for the Start Process button Web part, you may customize both the width and height of the button to start new processes, by including  these lines:

 

//Adjust size for the button

#btnNewCase {
  width: auto;
  height: auto;
}

 

//Adjust size of the button's container (its div)

.ui-bizagi-sharepoint-createNewCaseButton{

   min-height:0px;

  min-width:0px;

  overflow:hidden;           

}

 

 

note_pin

Customized styles of the buttons can be specified at the file found at C:\BizAgi\Projects\[YOUR_PROJECT]\WebApplication\jquery\overrides\css\desktop\sharepoint\common\bizagi.webpart.override.css.

This is so because the button Web part is not included inside of an iFrame.

 

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 ensure 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 SharePoint content.

 

3. Consider which styles can generate conflicts between those you want to override in Bizagi and those from the master page at SharePoint.

 

4. It is strongly recommended including Web parts into Web part zones of your pages content.

In this way, SharePoint 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

My Inbox, Case summary, Activity form

264 px

400 px

Start process list, Start process button

264 px

40 px