Integrating the Profiles business card

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

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

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

   Notes:

   1. The body element must exist and it must be instantiated before the script's JavaScript runs. If the script resource is included within the head element of your HTML code, it must use the defer attribute (defer="defer"). This attribute ensures that the JavaScript runs 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, add the ?inclDojo=false URL parameter to the JavaScript include as follows, otherwise the business card will not work.

      <script type="text/javascript" 
      src="src="protocol://conn_server/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 a CSS. If the IBM Connections CSS file is already loaded in your application and you, do not want to include it again, add the loadCssFiles=false parameter to the JavaScript include.

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

   4. The business card cannot be run from the file system; your HTML file must be on a web server. This server does not need to be in the same domain as Profiles. Use the following sample syntax to call your HTML file.

      <script type="text/javascript" 
      src="src="protocol://conn_server/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 stand-alone business card, include the following code to provide support for bidirectional languages:

   <script type="text/javascript">
   var SemTagSvcConfig = { isBidiRTL: true};
   </script>

4. Optional: If your application constructs its user interface with Ajax, do one of the following to make the business card user interface and a person's profile data available.
   Note: This step applies only when you are building an application that constructs its user interface with Ajax. The business card code scans the HTML only when the page is first loaded. If you dynamically alter the page, you must manually specify the DOM elements that the code needs to rescan for business card vCard class attributes. If you are developing a static page, you can ignore this step.

   Do one of the following:

   • For applications that construct HTML dynamically, you can add LiveName programmatically with 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}&amp;searchBy=email"
                person_card_service_name_js_eval="generalrs.label_personcard_profilelink"/>

   Note: When displaying in Internet Explorer Quirks mode, a user's integrated business card might display their name in a different location than when using the browser’s Standards mode. To work around this display issue, enter the following statement in the html file to force a Standards mode rendering:

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (http://www.w3.org/TR/html4/strict.dtd%27%3E)