Integrate the Communities business card

Overview

Include the Communities business card in the web application so that users can quickly navigate to a community from the application.

The CSS files loaded with the Communities business card do not include font style information. To ensure the business card appears fully integrated with the web application from a visual perspective, define our own font styles globally so the styles used in your application are also applied to the business card

The use of JavaScript Object Notation with padding (JSONP) technology in the business card will be deprecated in future releases. Although JSONP will continue to be supported, if we are integrating the business card in to the web application, and to prevent JSONP data from being transmitted by IBM Connections, use an Ajax proxy. We can configure the Communities business card on a Domino server

The Communities business card displays the name name of the community, the image associated with the community, and the links for the widgets associated with the community. By including the card in the web application, you enable users to access a community directly from the application using the links in the card. 

The CSS files loaded with the Communities business card do not include font style information. To ensure the business card appears fully integrated with the web application from a visual perspective, define our own font styles globally so the styles used in the application are also applied to the business card.

Add the Communities business card to the web application

1. To use an Ajax proxy, add the following code to the web page before the </body> tag:

   <script type="text/javascript"> 
       var SemTagSvcConfig = {baseUrl: "community_service_URL", proxyURL: "Ajax_proxy_URL"};
   </script>
   

   The following properties are available for the SemTagSvcConfig variable:

   Property	Description
   baseUrl	Download resource strings and CSS files for the business card from the Communities application. Required. Required for the CSS to load. Example: http://myserver.com/communities
   proxyURL	Channel the HTTP request using an Ajax proxy. Required to avoid cross-domain issues. Used to channel data from the Connections server to the web site. Value be a link to our own Ajax proxy residing in the same domain as the application that includes the business card. For example, if the application resides at... http://myserver.com/myCustomApp ...the value of the proxyURL might be... http://myserver.com/myCustomAppProxy
   isBidiRTL	Provide support for bidirectional languages. Boolean. Optional.
   loadCssFiles	Download a CSS file for the business cards. Boolean. Optional. Default is set true.

   For example:

   <script type="text/javascript"> 
      var SemTagSvcConfig = 
      { 
         baseUrl: "http://myConnectionsServer.mycompany.com", 
         proxyURL: "http://myDominoServer.mycompany.com/xsp/proxy/BasicProxy", 
         loadCssFiles: true 
      }; 
   </script> 

2. To configure the semantic tag service, include the following code:
   <script type="text/javascript" src="protocol://connections_server/profiles_app/ibm_semanticTagServlet/javascript/semanticTagService.js"></script>

   The body element must exist and be instantiated before the script's JavaScript executes, thus if the script resource is included within the head element of the html code, it must use the defer attribute (defer="defer") so that it executes after the page is loaded. Otherwise, the script resource request must be included within the body element.

   The business card uses Dojo 1.4. If Dojo 1.4 is already included in the application, add the ?inclDojo=false URL parameter to the JavaScript include as follows, otherwise the business card will not work.

   <script type="text/javascript" src="protocol://connections_server/profiles_app/ibm_semanticTagServlet/javascript/semanticTagService.js?inclDojo=false"></script>

   The business card can be loaded with or without CSS. If we already have the Connections CSS files loaded in the application, and do not want to include the CSS again, add the loadCssFiles=false parameter to the JavaScript include like this:

   <script type="text/javascript" src="protocol://connections_server/profiles_app/ibm_semanticTagServlet/javascript/semanticTagService.js?loadCssFiles=false"></script>

3. Use and modify the following code to render the card with community details:

   <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:

   • <community_name> is the name of the community. This parameter is a text string.

   • <community_uuid> is the UUID of the community.

   • <widget_id> 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 <widget_id> element is optional, and must only be provided for iWidgets integrated into Communities. The widget ID is defined by the iWidget developer, and request it from the administrator or the iWidget developer.

   For example:

   <span class="vcomm X-community-display-inline">
   <span class="name" style="display:none;">Snowboarders</span>
   <span class="uuid" style="display:none">b307369e-7e60-403b-b850-206a28d6c19e</span>
   <span class="selectedWidgetId" style="display:none;">HelloWorldExtFullpage</span>
   </span>

4. If we are building a web application that constructs its user interface using Ajax, we can make the business card user interface available by adding LiveName programmatically using JavaScript. Use the following API example:

   This step only applies when we are building an application that constructs its user interface using Ajax. The business card code only scans the HTML when the page is first loaded so, if you dynamically alter the page, manually specify the DOM elements the code rescans for business card vcard class attributes. If we are developing a completely static page, we can ignore this step.

   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 ); 

Parent topic:
Use Profiles and Communities business cards

Related:
Configure the Communities business card on a Domino server

Administer Communities
Integrate the Profiles business card