Today is the beginning of a new professional experience. Not only do I switch job, I also switch city, country and language! At the moment I am fighting against the German keyboard which will eventually overcome.
Expect some more frequent tech updates on this blog…
Here is another example for accessing LinkedIn’s API’s in XPages. This example contains code for performing a people search within your network.
I will include the example later in the next release of LinkedIn controls.
<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”
xmlns:xc=”http://www.ibm.com/xsp/custom” createForm=”false”>
<head>
<title>LinkedIn JavaScript API Sample Application</title>
<xc:ccLinkedInAPIKey key=”//your domain key here”></xc:ccLinkedInAPIKey>
<script type=”IN/Login”></script>
<xp:scriptBlock id=”scriptBlock3″>
<xp:this.value><![CDATA[function PeopleSearch() {
// Call the PeopleSearch API with the viewer’s keywords
// Ask for 4 fields to be returned: first name, last name, distance, and Profile URL
// Limit results to 10 and sort by distance
// On success, call displayPeopleSearch(); On failure, do nothing.
var keywords = dojo.byId(“#{id:searchBox}”).value;
IN.API.PeopleSearch()
.fields(‘firstName’, ‘lastName’, ‘distance’, ‘siteStandardProfileRequest’)
.params({‘keywords’: keywords, ‘count’: 10, ‘sort’: ‘distance’})
.result(displayPeopleSearch)
.error(function error(e) { /* do nothing */ }
);
}]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id=”scriptBlock4″>
<xp:this.value><![CDATA[function displayPeopleSearch(peopleSearch) {
var div = document.getElementById(“peopleSearchResults”);
div.innerHTML = “<ul>”;
// Loop through the people returned
var members = peopleSearch.people.values;
for (var member in members) {// Look through result to make name and url.
var nameText = members[member].firstName + ” ” + members[member].lastName;
var url = members[member].siteStandardProfileRequest.url;// Turn the number into English
var distance = members[member].distance;
var distanceText = ”;
switch (distance) {
case 0: // The viewer
distanceText = “you!”
break;
case 1: // Within three degrees
case 2: // Falling through
case 3: // Keep falling!
distanceText = “a connection ” + distance + ” degrees away.”;
break;
case 100: // Share a group, but nothing else
distanceText = “a fellow group member.”;
break;
case -1: // Out of netowrk
default: // Hope we never get this!
distanceText = “far, far, away.”;
}
div.innerHTML += “<li><a href=\”” + url + “\”>” + nameText +
“</a> is ” + distanceText + “</li>”
}
div.innerHTML += “</ul>”;
}]]></xp:this.value>
</xp:scriptBlock></head>
<h1>Find People on LinkedIn</h1>
<xp:inputText id=”searchBox” defaultValue=”xpages”></xp:inputText>
<xp:button value=”Search” id=”button1″>
<xp:eventHandler event=”onclick” submit=”false”>
<xp:this.script><![CDATA[
PeopleSearch();]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<div id=”peopleSearchForm”></div>
<div id=”peopleSearchResults”></div>
</xp:view>
Custom control ccLinkedInAPIKey you can find in the LinkedIn controls project.
Without any styling your result could look something similar like this:
Here is another example for accessing LinkedIn’s API’s in XPages. This example contains code for a custom control that will present the users network stream:
<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”
dojoParseOnLoad=”true”>
<xp:this.resources>
<xp:styleSheet href=”/stream.css”></xp:styleSheet>
</xp:this.resources>
<head>
<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value><![CDATA[function loadData() {
// we pass field selectors as a single parameter (array of strings)
IN.API.NetworkUpdates()
.params({type:”SHAR”})
.result(function(result) {
var streamHTML = “”;
for (var update in result.values) {
var thisupdate = result.values[update]// Build each individual stream update item
person = thisupdate.updateContent.person
var thisHTML = “<div>”;// Person’s picture, linked name, and status
thisHTML += “<div>” ;
thisHTML += “<img align=’left’ height=’50’ src='” + person.pictureUrl + “‘></a>”;
thisHTML += “<a href='” + person.publicProfileUrl + “‘>”;
thisHTML += “<span>” + person.firstName + ” ” + person.lastName + “</a></span>”;
thisHTML += “<p>” + person.currentShare.comment + “</p></div></div>”;// Slap this onto the HTML we’re building
streamHTML += thisHTML;
}
dojo.byId(“stream”).innerHTML = streamHTML;
});
}]]></xp:this.value>
</xp:scriptBlock>
</head>
<body>
<div id=”stream”></div>
<script type=”IN/Login” data-onAuth=”loadData”></script>
</body>
</xp:view>
Also here remember to include the LinkedIn domain API key. The result could like something as this:
Applying some oneUI classes could improve the presentation… 😕
I will add some more examples to work with the LinkedIn API in the next release of LinkedIn controls.
Here is an simple custom control example to work with user’s connections:
<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”
dojoParseOnLoad=”true”>
<head>
<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value><![CDATA[function loadData() {
IN.API.Connections(“me”)
.fields([“pictureUrl”,”publicProfileUrl”])
.params({“count”:30})
.result(function(result) {
profHTML = “”;
for (var index in result.values) {
profile = result.values[index]
if (profile.pictureUrl) {
profHTML += “<a href=\”” + profile.publicProfileUrl + “\”>”;
profHTML += “<img height=30 align=\’left\’ src=\'” + profile.pictureUrl + “\’></a>”;
}
}
dojo.byId(“connections”).innerHTML = profHTML;
});
}]]></xp:this.value>
</xp:scriptBlock>
</head>
<body>
<div id=”connections”></div>
<script type=”IN/Login” data-onAuth=”loadData”></script>
</body>
</xp:view>
(don’t forget to include your API domain key)
As result you would get:
I have released a new project on OpenNTF called LinkedIn Controls. The goal for this project is to deliver plugins to LinkedIn in the form of reusable custom controls.
With this you should be able to easily ‘linkify’ an XPages application. For example you can extend the discussion database with calls to linkedin (members, companies).
Ultimate goal would be to make mash-up applications for LinkedIn with XPages. We’ll see how for we will come…
Kwintessential Notes 