Custom control to display a My Communities list

In the managed bean I described in an earlier post there was a method to return a list of communities in IBM Connections where the authenticated user is member of (getMyCommunities()). So what can you do with it?

In IBM Connections when you section Communities \ I’m a Member you get to see a list with communities you particpate in, along some sub data for each community:

Screenshot_4

 

Social Business Toolkit API

I find the following link the best resource to discover the details of the SBT API. For all the classes their methods are described (at least I hope so).

So for example the Community class I have created a dataTable component and added a column for all it’s methods. When I bind this dataTable to my getMyCommunities method I get an overview of what information I can re-use. If you know an easier way to check this then please drop a comment how to perform this.

dataView control

You have several options to display information from a Community list in XPages. First you have the dataTable control but this control gives you very little control about the layout. The repeat control gives you probably the greatest freedom to define your layout. But in this example I have chosen the dataView control because it has already so predefined layout structure from which you can deviate (facets). To complete the presentation I have wrapped the dataView control in a widgetContainer control.

Here is the code:

<xe:widgetContainer
id=”widgetContainer1″
titleBarText=”My communities”>
<xp:panel>
<xe:dataView
id=”dataView1″
value=”#{javascript:ServiceBean.getMyCommunities();}”
var=”comm”
rows=”5″
expandedDetail=”true”
columnTitles=”true”>
<xp:this.facets>
<xe:pagerSizes
id=”pagerSizes1″
xp:key=”pagerBottomLeft”
for=”dataView1″>
</xe:pagerSizes>
<xp:image
url=”#{javascript:return comm.getLogoUrl();}”
id=”image1″
xp:key=”icon”
style=”height:64px;width:64px”>
</xp:image>
<xp:panel xp:key=”detail”>
<xp:panel>
<xp:text
escape=”true”
id=”commMemberCount”>
<xp:this.value><![CDATA[#{javascript:return comm.getMemberCount();
}]]></xp:this.value>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>
</xp:text>
people
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
Updated by:

<xp:link
escape=”true”
text=”#{javascript:return comm.getContributor().getName();}”
id=”commMemberUpdatedBy”>
<xp:this.value><![CDATA[#{javascript:
try {
var colleagueId = comm.getContributor().getUserid()
var profileService = new com.ibm.sbt.services.client.connections.profiles.ProfileService();

var profile = profileService.getProfile(colleagueId);
var profileUrl = profile.getProfileUrl().replace(“/atom/profile.do”, “/html/profileView.do”);

return profileUrl;
} catch (exception) {
println(“Colleague Profile error: ” + exception);
return null;
} }]]></xp:this.value>
</xp:link>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:text
escape=”true”
id=”commUpdatedBy”
value=”#{javascript:comm.getUpdated();}”>
<xp:this.converter>
<xp:convertDateTime
type=”both”
dateStyle=”full”
timeStyle=”short”>
</xp:convertDateTime>
</xp:this.converter>
</xp:text>
<xp:span
role=”presentation”
styleClass=”lotusDivider”>
|
</xp:span>
<xp:repeat
id=”repeat1″
rows=”30″
value=”#{javascript:comm.getTags();}”
var=”rowData”
indexVar=”rowIndex”
disableTheme=”true”
disableOutputTag=”true”>
<xp:link
escape=”true”
text=”#{javascript:rowData}”
id=”link1″
styleClass=”tagLink”>
</xp:link>

</xp:repeat>
</xp:panel>
<xp:panel tagName=”div”>
<xp:text
escape=”true”
id=”commSummary”
value=”#{javascript:comm.getSummary();}”>
</xp:text>
</xp:panel>

</xp:panel>
<xp:panel
id=”titlePanel”
style=”white-space:nowrap;”
xp:key=”summary”>
<h4>
<xp:link
escape=”true”
id=”link6″
target=”_blank”
value=”#{javascript:return comm.getCommunityUrl();}”
text=”#{javascript:return comm.getTitle();}”>
</xp:link>
</h4>
</xp:panel>
</xp:this.facets>
<xe:this.extraColumns>
<xe:viewExtraColumn
value=”#{javascript:comm.getCommunityType();}”
columnTitle=”Type”>

</xe:viewExtraColumn>

<xe:viewExtraColumn
value=”#{javascript:comm.getForumTopics().length;}”
columnTitle=”Topics”>
<xp:this.converter>
<xp:convertNumber
type=”number”
integerOnly=”true” />

</xp:this.converter>

</xe:viewExtraColumn>

</xe:this.extraColumns>
<xp:this.facets>
<xp:pager
xp:key=”pagerBottomRight”
pageCount=”5″
partialRefresh=”true”>
<xp:pagerControl
type=”Previous”
id=”pagerControl4″>
</xp:pagerControl>
<xp:pagerControl
type=”Group”
id=”pagerControl5″>
</xp:pagerControl>
<xp:pagerControl
type=”Next”
id=”pagerControl6″>
</xp:pagerControl>
</xp:pager>
</xp:this.facets>

</xe:dataView>
</xp:panel>
</xe:widgetContainer>

(If you know how to paste indented code proper in WordPress than drop a comment)

The result is as followed:

Screenshot_5

I have not finished the filtering option when clicking a tag (link control). Sorting options by Date, Popularity, Name are also not in place.

Nevertheless I have a starting point to mash up this dataView control with data inside Domino 🙂

Working with LinkedIn in XPages – People Search

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&#8221;
xmlns:xc=”http://www.ibm.com/xsp/custom&#8221; 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:

Working with LinkedIn in XPages – Presenting a User’s Network Stream

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&#8221;
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… 😕