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🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s