Using Web parts for other portals

<< Click to Display Table of Contents >>

Navigation:  Bizagi Studio > Bizagi from external applications > Portals integration >

Using Web parts for other portals

Overview

Bizagi's architecture offers a powerful UI service which promotes easy reusability and integration with other applications.

This reusability is enhanced by the capabilities provided by Bizagi Web parts.

 

This section describes how to easily reuse the Web parts Bizagi provides, so that these can be integrated in any portal.

Through this approach, end users can directly access to the corporate portal and from there, work in their Bizagi cases.

 

 

PortalFinal

 

What you need to do

The following steps are carried out to integrate Bizagi Web parts into your portal:

 

1. Ensure you have a SSO mechanism for your portals.

You will need to rely on a Single Sign-On mechanism to share authentication between your portal and Bizagi's Work portal.

You will need to configure in Bizagi one integrated type of authentication to support SSO.

Examples of such integration types in Bizagi are: Windows authentication or Federated authentication.

 

2. Edit your portal's content so that you instantiate Bizagi Web parts.

You will need to include code in the portal's content, so that Bizagi Web parts are instantiated from JavaScript code.

 

 

Before you start

Consider the following for the integration approach presented below:

 

Integrating Bizagi directly into your portal's content through Web parts, needs to be strictly done inside HTML iframes (or in pages which only have Bizagi in its content).

 

This is so, because Bizagi Web parts enable you to embed Bizagi's user interfaces which have a specific behavior of their own. Including these Web parts into content which is subject to be altered by the behavior and styles of the page which embeds it, is not recommended.

 

note_pin

If you are using HTTPS on your Bizagi server, ensure that its server certificates are valid and up-to-date. Otherwise the web parts will not be able to connect to Bizagi services.

 

Procedure

To integrate Bizagi Web parts, follow these steps:

 

1. Ensure you have a SSO mechanism for your portals.

You will need to rely on a Single Sign-On mechanism to share authentication between your portal and Bizagi's Work portal.

 

For the approach and guide provided in this section, a Windows authentication setting covers this aspect for Bizagi, provided that your other portal supports Windows authentication.

In your Bizagi project, making sure you use Windows authentication, this is done at the Security module:

 

WindowsAuthentication

 

2. Edit your portal's content so that you instantiate Bizagi Web parts.

Edit your portal's content (you may do this through an IDE or editor of your choice, or done directly in the Administration Module of your portal if it has that option). While editing the portal's content, follow these steps:

 

2.1 Invoke Bizagi Web parts by using the following code in JavaScript:

function ManageIframe() {

   var loc = window.location.toString();

   var params = loc.split('?')[1];

   var iframe = document.getElementById('internaliFrame');

   var bizagiRenderUrl = "http://[BIZAGI_SERVER]/[BIZAGI_PROJECT]/jquery/webparts/desktop/portal/pages/webpart.htm?type=[WEB_PART]";

   iframe.src = bizagiRenderUrl + '&' + params;

}

 

window.onload = function () {

   ManageIframe();

};

 

Notice that in the code above, you should consider assigning values to:

[BIZAGI_SERVER]: The server on which Bizagi Engine runs.

[BIZAGI_PROJECT]: Your Bizagi project.

[WEB_PART]: The internal name of the Web part. To use Bizagi's work portal this value should be specified as workportal or you may specify from the options described at Web parts types and parameters.

 

note_pin

The code presented, could be added inside a page created in your Corporate Portal or through a JS File, to do the first option, add the code between the corresponding HTML tags as following:

 

<script language="javascript" type="text/javascript">

       // Add your javascript code here

       // ..

</script>

 

To do the second option, create a file using a Text Editor and save it in your Javascript Corporate Portal's folder with .js extension.

 

2.2 Add the HTML iframe element, which corresponds to the container of the content displayed by Bizagi Web Parts.

To do this, edit the web page's code where you will want to display Bizagi.

 

Set the location inside your web page where Bizagi content will be rendered and add there the following HTML code:

<div>

   <iframe id="internaliFrame" style="width: 100%; height: 100%" frameborder="0" src="">

   </iframe>

</div>

 

note_pin

If you want to change the id of the iframe presented in code above, you must set the same name in the js code to instantiate Bizagi presented in step 1.1, specifically, at the line var iframe = document.getElementById('internaliFrame');

 

Example

In order to illustrate how to instantiate Bizagi Web parts from an external portal, we will use a sample Intranet Portal.

We are already using Windows authentication for our .NET Bizagi project, and for the sample Intranet portal, which is set up with BlogEngine.NET.

For more information about setting Windows authentication in Bizagi, refer to Windows Authentication.

 

In this portal, notice we create and manage web pages directly in the administrator module.

 

For the example, we create a sample page, and we will instantiate Bizagi through web parts in it.

 

The first step as presented above, is to edit the portal's content to display the Bizagi Web part.

In our case, from the Administration Module, we have to edit this sample page. In the image below, you will see both parts of this step.

 

WebPartCode

The part 1. in the image above, corresponding to the code in js which instantiates Bizagi directly in the portal, we selected workportal as type of Web Part. The part 2. corresponding to the HTML element where the Bizagi Web Part will be rendered, you are free to customize the width and height and also, the position of the iframe. In this example, the page will look as a page with only a title (Bizagi BPM) and the iframe.

 

Keep in mind that you need to enter the URL address of your Bizagi project so that its rendering services are instantiated.

 

 

Once this step is successfully completed, our Corporate portal with Bizagi Web Part, should be looked like this:

 

PortalFinal

 

As we selected the workportal in the type of Web Part, we have available the same options than in Bizagi Work Portal, depending on the type selected, this look will have different ways to be rendered.

 

note_pin

Web parts do not currently support:

Admin options (administrators access Bizagi Work portal directly instead).

Graphical view of cases.

The ECM control.