Integrate the Profiles business card

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

The CSS files that are loaded with the Profiles business card do not include font style information. Define the custom font styles globally so the styles used in the application are also applied to the business card. Defining global styles ensures the business card appears integrated with the web application.

The use of JavaScript Object Notation with padding (JSONP) technology in the business card will be deprecated in future releases. Use an Ajax proxy to prevent JSONP data from being transmitted by IBM Connections.

We can integrate the Profiles business card with the web application based on one of the following parameters:

• User ID, with the x-lconn-userid parameter

• Email address, with the email parameter

• LDAP distinguished name, with the DN parameter

  The lookup by distinguished name requires that Profiles include the DN as an attribute of the profile. Specifically, the DN parameter must be mapped to the Profile database column EMPLOYEE.PROF_SOURCE_UID. See Map fields and Attribute mapping for Profiles for related information.

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. 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 Connections. Hiding email is a way to protect user privacy. We can design the 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 the web application:

• Inline. This type of business card is embedded in the user interface. Only one inline card can be displayed at a time on the page.

• Pop-up. This type of business card displays when users click a link in the user interface. Only one pop-up card can be displayed at a time.

Complete these steps to integrate the Profiles business card with the web application:

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

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

   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 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 we use the ?inclDojo=false setting, ensure that you include the Javelin JavaScript after you include Dojo on the web page.

   3. The business card can be loaded with or without a CSS. If the Connections CSS file is already loaded in the 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; the 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 the 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. For 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. If the application constructs its user interface with Ajax, either to make the business card user interface and a person's profile data available.

   This step applies only when we 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 we dynamically alter the page, we must manually specify the DOM elements the code needs to rescan for business card vCard class attributes. If we are developing a static page, we can ignore this step.

   Do one of the following:

   • For applications that construct HTML dynamically, we 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 the server:

     1. Verify 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 the profile service reference in LotusConnections-config.xml 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"/>

   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)

Parent topic:
Use Profiles and Communities business cards

Related:

Administer Profiles

Related:

Integrate the Communities business card

Map fields

Related reference:

Attribute mapping for Profiles