Integrate 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 starting
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 Connections, 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 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...
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:a. The body element must exist and it must be instantiated before the script's JavaScript executes. So, if the script resource is included within the head element of your HTML code, it must use the defer attribute (defer="defer") so that the JavaScript executes after the page is loaded. Otherwise, the script resource request must be included within the body element.
b. 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="/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.
c. The business card can be loaded with or without CSS. If you already have the IBM 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>
When loadCssFiles is set to true (default), the business card code will trigger requests to get stylesheets to style the business card.When loadCssFiles is set to false, you can still bring the stylesheets used to style the business card separately, by using an html link element on the page with the following resource URLs:
href:
/profiles/nav/common/styles/base/semanticTagStyles.css - contains styling for the yellow popup box and a few other things
href:/profiles/nav/common/styles/base/standaloneVcard.css - contains styling for the business card itself, based on the OneUI version of the Lotus Connections release Note - if your application uses OneUI styles from a different version than that of the Lotus Connections business card's OneUI version, the standaloneVcard.css may override your application's OneUI styles.
If this is the case, just request the semanticTagStyles.css to get the styles for the yellow popup box (if desired; as you can always style that in your flavor) and let your application's OneUI stylesheet version address the business card styling.
This way, the business card will adopt the styling based on your applications OneUI styles.
d. The business card cannot be run from the file system; your HTML file must reside on a web server. This server does not need to be in the same domain as Profiles.
<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;- 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;To make the business card user interface and a person's profile data available on your server: a. 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
b. 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
Use Profiles and Communities business cards
Related concepts
Administer Profiles
Related tasks
Integrate the Communities business card