ShowTable of Contents
Previous |
Next
Integrating Communities business card in web application
Integration of IBM Connections Communities business card in web application enable web application users to obtain information about the community quickly. The Communities business card displays basic information about the community such as name, photo, and links to widget associated with the community.
Before you begin
The CSS files loaded with Communities business cards does not include any font style information. You should define the font style globally to the application so that the font style that is applied to the application also appears for Communities business card when integrated. Defining font style globally makes the integration seamless in web application with visual perspective. The procedure below does not include how to define font style information globally.
Procedure
To integrate Communities business card in web application, perform following steps:
- Add the following code snippet at the bottom of the web page source code before the tag. Replace actual values according to your environment with place holders before putting code in your web application. This code defines variable SemTagSvcConfig in the source code of your web application.This variable contains information about IBM Connections server address, Ajax proxy server address, and whether to load the CSS file that loading business card or not.
<script type="text/javascript">
var SemTagSvcConfig = {baseUrl: "community_service_URL>", proxyURL: "<ajax_proxy_URL>" };
</script>
The following table lists the properties that are available for the SemTagSvcConfig variable:
| Property | Description |
| baseUrl | Used to download resource strings and CSS files for the business card from the Communities application.
The baseUrl parameter must be provided for the CSS to load. For example http://myserver.com/communities
This property is required. |
| proxyURL | Used to channel the HTTP request using an Ajax proxy. This proxy URL is required to avoid cross-domain issues. It is used to channel data from the IBM Connections server to your web site.
The value of the proxyURL parameter must be a link to your own Ajax proxy. The Ajax proxy must reside in the same domain as the application that integrate business card. For example, if your application resides at http://myserver.com/myCustomApp, the value of the proxyURL might be http://myserver.com/myCustomAppProxy.
This property is required. |
| isBidiRTL | Used to provide support for bidirectional languages. This property takes a Boolean value. This property is optional. |
| loadCssFiles | Used to download a CSS file for the business cards. This property takes a Boolean value. This property is optional. By default, it is set to true. |
- Communities business card uses Dojo, hence, you have to provide Dojo support to your web application for integrating business card. To add Dojo support to your web application, add the following code snippet into your web application source code. This code snippet adds Dojo library from IBM Connections server to your web application. Apart from adding Dojo library, the following code also add the semantic_TagService.js JavaScript file to your web application which is required for business card.
<script type="text/javascript" src="<community_service_URL/javascript/dojo_1.4.1/dojo/dojo.js"></script>
<script type="text/javascript" src="<community_service_URL>/javascript/dojo_1.4.1/dojo/semanticTagService.js"></script>
If your application is already using Dojo 1.0 or above, then the first line of your code cannot be <script type="text/javascript" src="<community_service_URL/javascript/dojo_1.4.1/dojo/dojo.js"></script>.
- Add the following code piece to your web application source code where the Communities business card is required to be displayed.
<span class="vcomm X-community-display-inline">
<span class="name" style="display:none;"><community_name></span>
<span class="uuid" style="display:none"><community_uuid></span>
<span class="selectedWidgetId" style="display:none;"><widget_id></span>
</span>
Where:
- is the name of the community. This parameter is a text string.
- is the UUID of the community.
- is a text string that corresponds to the widgetDefId of the widget that has been added to the community. This text string is used to highlight the menu item in the navigation bar. The element is optional, and must only be provided for iWidgets that are integrated into Communities. The widget ID is defined by the iWidget developer, and you need to request it from your administrator or the iWidget developer.
The following example is the source code of the sample web page that integrates the Communities business card in it using the procedure described above.
This figure shows the business card integrated inside sample web application.
Optional step
The following code example shows how to integrate the Communities business card when web application is constructed dynamically using Ajax. This code can be ignored for static pages. Follow steps 1 and 2 in the previous procedure before completing it.
Here, the "containerId" is a preexisting dome object name in web application where the community business card will be inserted. You should change it accordingly to your web application.
var htmlContent = "<span class="vcomm X-community-display-inline">"+
"<span class="name" style="display:none;"/><community_name></span>"+
"<span class="uuid" style="display:none"><community_uuid></span>"+
"<span class="selectedWidgetId" style="display:none;"><widget_id></span>"+
"</span>";
document.getElementById("containerId").innerHTML += htmlContent;
setTimeout("SemTagSvc.parseDom(null, 'containerId')", 500 );
Integrating the Communities business card in Domino client application
Integrating Communities business card in Domino 8.5 web application has slightly different procedure. You have to modify Ajax proxy of Domino 8.5 before using it for integrating the community business card. You can also use Dojo library of Domino 8.5 server while integrating the community business card.
Procedure
The following steps are required when integrating the Communities business card in application that is deployed on Domino Server 8.5 Server:
- Add a new rule to Domino Ajax proxy using the following steps:
- Open proxy-config.properties file from following location:
\data\properties\proxy-config.properties
- Add the following rules to the property file:
http://<myConnectionsServer.mycompany.com>/service/json/communityview*
policy2.context=/xsp/proxy/BasicProxy/
policy2.actions=GET
policy2.cookies=
policy2.headers=*
policy2.mime-types=*
- Save your changes and close the file.
- Add the following code snippet to your application. Following code adds Ajax Proxy of Domino server dojo support from Domino Server and sementicTagService.js from IBM Connections server.
<script type="text/javascript">
var SemTagSvcConfig =
{
baseUrl: "http://<myConnectionsServer.mycompany.com>",
proxyURL: "http://http://<myDominoServer.mycompany.com>/xsp/proxy/BasicProxy",
loadCssFiles: true
};
</script>
<script type="text/javascript" src="http://<myDominoServer.mycompany.com>/domjs/dojo-1.1.1/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.i18n");
dojo.require("dojo.cookie");
</script>
<script type="text/javascript" src="http://<myConnectionsServer.mycompany.com>/javascript/build/dojo/semanticTagService.js"></script>
- Add the following code piece inside the source code of your web application where the Communities business card is required to be displayed. The following code will add business card to you application where ever it will be used in the source code of the web application.
<span class="vcomm X-community-display-inline">
<span class="name" style="display:none;"><community_name></span>
<span class="uuid" style="display:none"><community_uuid></span>
<span class="selectedWidgetId" style="display:none;"><widget_id></span>
</span>
where
- is the name of the community. This parameter is a text string.
- is the UUID of the community.
- is a text string that corresponds to the widgetDefId of the widget that has been added to the community. This text string is used to highlight the menu item in the navigation bar. The element is optional, and must only be provided for iWidgets that are integrated into Communities. The widget ID is defined by the iWidget developer, and you need to request it from your administrator or the iWidget developer.
Parent topic:
6.0 Customizing the Profiles and Communities Business card