Integrate the Communities business card 

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

Before starting

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

Note: 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 you are integrating the business card in to your web application and you want to prevent JSONP data from being transmitted by IBM Connections, use an Ajax proxy.

For information about how to configure the Communities business card on a Lotus Domino 8.5 server, see Configuring the Communities business card on a Domino server.

About this task

The Communities business card displays basic community information, such as the 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 your web application, you enable users to access a community directly from your application using the links in the card.

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

Procedure

1. Include the following reference to the semanticTagService.js file in your code:

<script type="text/javascript" src="/profiles/ibm_semanticTagServlet/javascript/semanticTagService.js?inclComm=true"></script>


Notes

• 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 your 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 your 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="/profiles/ibm_semanticTagServlet/javascript/semanticTagService.js?inclComm=true&inclDojo=false"></script>

  
  

• The business card can be loaded with or without CSS. If you already have the Lotus Connections CSS files loaded in your 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="/profiles/ibm_semanticTagServlet/javascript/semanticTagService.js?inclComm=true&loadCssFiles=false"></script>

  
  

2. 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 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.


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>


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

Note: This step only applies when you 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, you need to manually specify the DOM elements that the code rescans for business card vcard class attributes. If you are developing a completely static page, you 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;




Configure the Communities business card on a Domino server
If you are adding the Communities business card to a web application that is deployed on an IBM Lotus Domino 8.5 server, perform the following steps to configure the card so that it works correctly.

Parent topic

Use Profiles and Communities business cards

Related concepts
Administer Communities

Related tasks

Integrate the Profiles business card

+

Search Tips   |   Advanced Search