Integrating the Profiles business card 

---

Include the Profiles business card in your web application so that users can access a snapshot of your profile information and contact details.

Before you begin

The CSS files loaded with the Profiles 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®Lotus® Connections, you must use an Ajax proxy.

About this task

You can integrate the Profiles business card with your web application based on one of the following:

• User ID, using the x-lconn-userid parameter
• email address, using the email parameter
  

The x-lconn-userid parameter is any unique identifier for the user defined by the administrator and originating from the corporate LDAP directory. Many LDAP directories contain users who do not have email addresses and using the x-lconn-userid parameter is a way of preemptively avoiding a dependency on the email address. In addition, administrators can edit configuration property settings to prevent email addresses from being displayed in IBM Lotus Connections. Hiding email is a way to prevent the scraping of email addresses and protect the privacy of users. You can architect your web application so that it does not rely on email addresses for retrieving user data, such as the contextual business card.

Two types of business card are available to add to your web application:

• Inline. This type of business card is embedded in the user interface.
• Pop-up. This type of business card displays when users click a link in the user interface.
  
  

To integrate the Profiles business card with your web application, complete the following steps:

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"></script>



Notes:

1. 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 the js executes after the page is loaded.  Otherwise, the script resource request must be included within the body element.
2. The business card uses Dojo. If Dojo is already included in your application, you must 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?inclDojo=false"></script>


If you use the ?inclDojo=false setting, ensure that you include the Javelin JavaScript after you include Dojo on your web page.
3. 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?loadCssFiles=false"></script>

4. The business card cannot be run from the file system using a static HTML file due to browser security issues. Your HTML file must be placed on a web server. This server does not need to be in the same domain as Profiles. If you need to show the Javelin card running on a file system for demonstration purposes, you can include a non-Dojo version of the Javelin card using the following reference:
   

<script type="text/javascript" src="/profiles/ibm_semanticTagServlet/javascript/semanticTagService201.js"></script>



This version of the Javelin card is not officially supported and has numerous bugs, but it serves to demonstrate the card being surfaced from a static HTML file. In a production environment, always use the following version for your integration:



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





2. Use and modify one of the following code examples to render the card with your personal details.
   
   
To add the inline card:


Option	Description
Based on user ID	<div class="vcard X-person-display-inline"> <span class="fn" style="display:none;"><user_name></span> <span class="x-lconn-userid" style="display: none;"><user_id></span> </div> For example: <div class="vcard X-person-display-inline"> <span class="fn" style="display:none;">Joe Todd</span> <span class="x-lconn-userid" style="display: none;">91ae7240-8f0a-1028-737f-db07163b51b2</span> </div>
Based on email address	<div class="vcard X-person-display-inline"> <span class="fn" style="display:none;"><user_name></span> <span class="email" style="display:none;"><user_email_address></span> </div> For example: <div class="vcard X-person-display-inline"> <span class="fn" style="display:none;">Joe Todd</span> <span class="email" style="display:none;">todd@mycomp.com</span> </div>



To add the pop-up card:


Option	Description
Based on user ID	<span class="vcard"> <a href="javascript:void(0);"class="fn url"><user_name></a> <span class="x-lconn-userid" style="display: none;"><user_id></span> </span> For example: <span class="vcard"> <a href="javascript:void(0);"class="fn url">Joe Todd</a> <span class="x-lconn-userid" style="display: none;">91ae7240-8f0a-1028-737f-db07163b51b2</span> </span>
Based on email address	<span class="vcard"> <a href="javascript:void(0);"class="fn url"><user_name></a> <span class="email" style="display: none;"><user_email_address></span> </span> For example: <span class="vcard"> <a href="javascript:void(0);"class="fn url">Joe Todd</a> <span class="email" style="display: none;">todd@mycomp.com</span> </span>



3. Optional: If you are using the standalone business card, include the following code to provide support for bidirectional languages:
   

<script type="text/javascript">

var SemTagSvcConfig = { isBidiRTL: true};

</script>



4. Optional: If you are building a web application that constructs its user interface using Ajax, do one of the following to make the business card user interface and a person's profile data available:
   
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 should rescan for business card vcard class attributes. If you are developing a completely static page, you can ignore this step.

Do one of the following:

• For applications that construct HTML dynamically, you can add LiveName programmatically using JavaScript. Use the following API example:

var htmlContent = 

"<span class='vcard'>"+

   "<a href='javascript:void(0);' class='fn url'>user_name</a>"+

   "<span class='email' style='display: none;'>"+

      "user_name@company.com"+

   "</span>'+

"</span>";

document.getElementById("containerId").innerHTML += htmlContent;

setTimeout("SemTagSvc.parseDom(null, 'containerId')", 500 );



• For example:

var htmlContent =

"<span class='vcard'>"+

   "<a href='javascript:void(0);' class='fn url'>Joe Todd</a>"+

   "<span class='email' style='display: none;'>"+

      "todd@mycomp.com"+

   "</span>'+

"</span>";

document.getElementById("containerId").innerHTML += htmlContent;

setTimeout("SemTagSvc.parseDom(null, 'containerId')", 500 );



• To make the business card user interface and a person's profile data available on your server:
1. Verify that the following files are in the <WAS_HOME>\profiles\<WAS_Profile>\config\cells\<Host_name>\LotusConnections-config directory:
• service-location.xsd
• LotusConnections-config.xsd
• LotusConnections-config.xml
  
  
2. Ensure that the profile service reference in the LotusConnections-config.xml file points to a running profile server. For example:
   

<sloc:serviceReference serviceName="profiles"

	href="http://localhost:9080/profiles"

	enabled="true"

      	ssl_href="https://localhost:9443/profiles"

	ssl_enabled="true"

    person_card_service_url_pattern="/html/simpleSearch.do?searchFor={email}&searchBy=email"

        person_card_service_name_js_eval="generalrs.label_personcard_profilelink"/>

Parent topic: Using Profiles and Communities business cards

Related concepts
Administering Profiles

Related tasks
Integrating the Communities business card