Friday, February 14, 2014

Let's recap IBM Connections at IBM Connect 2014

View Comments
Things are finally settling down 2 weeks after the "amaze-balls" IBM Connect 2014:




So what I wanted to do now was take a break and recap what we said and showed about IBM Connections during the conference.

The Keynote

The keynote demo was mostly built on the November 2013 release of IBM Connections. Therefore, you got to see some new stuff such as:
  • New IBM Connections Mail capabilities to better integrate email and social (more details in Kramer's blog)
  • New look-n-feel and user experience to better guide users to tasks
  • Optimized activity stream experience to focus on attention management and helping you get your job done
  • A new getting started capability powered by Touchpoint, an ISSC asset
  • Expertise location powered by an intelligent Question & Answer system available as Social Q&A, another ISSC asset
  • Embedded real-time web meetings powered by Sametime 9
  • Collaborating with external users in a community
  • The latest on IBM Docs
  • The upcoming release of the updated IBM Connections Mobile app also focused on attention management and personalization
  • File Sync on desktop and mobile available in the cloud
  • An awesome Portal + Connections experience built on jQuery and the existing Connections APIs 

As you can see, most of what I showed at the keynote is already available!

The What's New Session

Like last year, this year I had the opportunity to share the 2014 roadmap. If you missed it, or want to see it again, here are the slides for our session (though the actual session was pretty much all demo):



As you can see, there are three focus areas for the next release: External Collaboration, Content Sharing from Desktop and Mobile, and a Personalized Experience. These three areas respond to trends in the market were organizations feel ready to start engaging more with their customers through their social collaboration platform. Additionally, it's meant to focus on end user productivity. As an end user, I'm looking for a platform that helps ME get my job done faster, better and more effectively... you can't forget ME in social MEdia ).

As usual, all new things will be delivered to the cloud first and then sometime in the middle of the year we will do a release which will take whatever is on the cloud and provide that for our on premises customers. And, in case you missed it, we've already started delivering on the 2014 roadmap!

Now, I'm going to take 10 days off and relax. See you on the other side!

Tuesday, February 11, 2014

Announcing IBM Connections 4.5 IFR2: Advanced content editing for all!

View Comments
Now that you know how the IBM Connect 2014 OGS demo was built, let's get into the nitty gritty and recap the announcements that were made.

Shortly after the keynote, I had the opportunity to deep dive into the roadmap for IBM Connections together with our lead architect. So what did we talk about ?

Well, it turns out that a big item that we talked about was today's announcement.

Today, we are announcing our first delivery for 2014: IBM Connections 4.5 IFR2. This release provides an entitlement change to allow all of our IBM Connections 4.5+ customers to use an advanced rich text editor.

This advanced editor streamlines content creation allowing users to focus on creating and sharing content and not on formatting.  This in turn accelerates adoption and usage across the enterprise. The new advanced rich text editor adds several features such as:
  • High fidelity copy/paste from Microsoft Word or a web browser
  • Inline spell checking as-you-type, with alternatives and synonyms
  • Embedding of social media links
  • Track changes and commenting
  • Hyperlink checking
  • Content templates
  • and more... 
Here's a quick demo so you can see it in action:


The download for the new editor will be available on Thursday February 13th when we officially eGA IBM Connections 4.5 IFR2. This new editor is powered by Ephox which some of you may already be using inside WebSphere Portal and/or Domino. Update 14/February/2014: The Ephox team has put together a new video:



How's that for starting the year on a positive note ? I'll share more about the announcements from IBM Connect in upcoming posts.

Monday, February 10, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 4

View Comments
And here we come. The 4th and final post on the code that I used during the IBM Connect 2014 keynote (the OGS!). If you need to catch up, here's Part 1, Part 2, and Part 3.

The next part of code that we created for the keynote demo was the file viewer.  It's worth noting that we first did this file viewer to render IBM SmartCloud Connections files inside our portal. In the end, we ended showing this directly in the community landing page (which is one of the new features we announced -- the ability for community managers to create their own custom landing page for their community).

Here's how it looked:


Basically, in our demo community, we had 5 files and we showed the details of the file, a file preview, and when clicked, we did an animation to let you share/download the file (as you can see in the 3rd file above).

So how did we do this? The majority of the work was done using the IBM Connections SDK.  In there, we went into the JavaScript Playground and found the code snippet to generate a list of files. Sweet!!

The other piece of magic was the Flippy plugin for jQuery which is the one that provided the animation to flip the file preview and offer options to share and download.

So here's how it all came together:

1) Include the right JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dojo/dojo.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.flippy.min.js"></script>
<script src="/sbt.proxy/library?lib=dojo&amp;ver=1.8.0"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/2.1.1/js/bootstrap.min.js"></script>


2) The CSS magic:

<style>

body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
margin: auto;
width: 100%;
#background-color: #f0f0f0;
#background-image:url('cloud.jpg');
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: #1c8aae !important;
text-decoration: none !important;
}
.card {
background-image:none;
margin: 20px;
padding: 10px;
width: 150px;
background-color: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
float: left;

}

.share{
background-image:none;
margin: 20px;
padding: 10px;
width: 150px;
background-color: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
float: left;

}

.preview{

width: 128px;
height: 128px;
border-radius: 67px;
-webkit-border-radius: 67px;
-moz-border-radius: 67px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);

}
</style>

3.  The HTML placeholder where things will show up:

<body>
<div id="myGrid" class="myCommunity"></div>
...


4.  The template of how things will be rendered

<script type="text/template" id="fileRow">
<div id="share-${uid}" class="share" onmouseDown="removeDialog('${uid}');" >
<div id="fileCard-${uid}" onmouseDown="shareDialog('${uid}','${title}');">

<img class="preview" style="margin-top:20px;margin-bottom:20px" width="128" height="128" src="http://apps.na.collabservtest.lotus.com/viewer/app/lcfiles/${uid}/1/thumbnails/image.jpg" />
<br>
<a class="entry-title" rel="bookmark" target="_blank" title="${tooltip}" href="https://apps.na.collabservtest.lotus.com/communities/service/html/communityview?communityUuid=2cb8c1b5-bbd5-4379-b53d-de747b50be1a#fullpageWidgetId=W0b65f6404e4a_4c64_b0c8_ace24556bbab&file=${uid}" >${title}</a>

<div style="font-size:75%;color:#666">${authorName} ${_nls.created} ${createdLabel}</div>

<div style="font-size:75%;color:#666">${recommendationsCount} Likes &nbsp;&bull;&nbsp;${hitCount} ${_nls.downloads} &nbsp;&bull;&nbsp; ${commentsCount} ${_nls.comments}

</div>
</div>
</div>
</script>


5. Call the API!

<script>
require(["sbt/dom","sbt/lang", "sbt/connections/controls/files/FileGrid", "sbt/connections/controls/bootstrap/FileRendererMixin"], function(dom,lang, FileGrid,FileRendererMixin ) {
var grid = new FileGrid({
type : "communityFiles",
endpoint : "smartcloud",
hidePager: "true",
hideSorter: "true",
communityId : "2cb8c1b5-bbd5-4379-b53d-de747b50be1a"

});

// create custom action
grid.fileAction = {
getTooltip : function(item) {
return "Share with Non-Greenwell people";
},

execute : function(item,opts,event) {
//do something here

}
};

lang.mixin(grid.renderer, FileRendererMixin);
var domNode = dom.byId("fileRow");
var CustomFileRow = domNode.text || domNode.textContent;
grid.renderer.template = CustomFileRow;
dom.byId("myGrid").appendChild(grid.domNode);

grid.update();
});

</script>

And that's it! In the next few posts, I'll go deeper to cover the announcements from IBM Connect in regards to IBM Connections. Stay tuned !

Friday, February 7, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 3

View Comments
Alright, let's move on to the next piece shown at the OGS. If you want to know what this is, I would suggest you catch up with Part 1 and Part 2.

The next part I got ready for the keynote was people search. But I wanted to move away from the typical search results list. I wanted something more visual and easier to digest. I wanted results to be more visual, maybe like a slideshow of people cards that I could flip through.

After doing a bit of searching, I landed on another jQuery plugin, this time the Baraja plugin and it got me something like this:


So what's the magic here? Let's walk through the parts:

1. As usual, include the right JavaScript:

<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Baraja/js/modernizr.custom.79639.js"></script>
<script type="text/javascript" src="Baraja/js/jquery.baraja.js"></script>


2. Then the CSS for styling

<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
background-color: #f0f0f0;
}

a {
color: #1c8aae !important;
text-decoration: none !important;
}

.photo {
width: 100px;
height: 100px;
border-radius: 55px;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.fn
{
font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
text-decoration: none;
color: #444 !important;
font-size: 18pt;
}

.inputForm
{
border: solid 1px #e9ecef;
width: 280px;
height: 30px;
padding: 8px;
-webkit-border-radius: 15px; //For Safari, etc.
-moz-border-radius: 15px; //For Mozilla, etc.
border-radius: 15px; //CSS3 Feature
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}

.searchEntry {
text-align: center;
margin: auto;
padding-top: 20px;

}

.searchResults {
padding-top: 20px;
width: 260px;
height: 600px;
margin: 30px auto;
}

ul.baraja-container li {
border-radius: 10px;
padding: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 250px;
height: 250px;
margin: 0;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background: #f0f0f0;
font-size: 12pt;
text-align: center;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

}

ul.baraja-container li img {
margin-top: 20px;
}

ul.baraja-container li p {
line-height: 1.0px;
}

ul.baraja-container li div {
text-align: center;
}

ul.baraja-container {
list-style-type: none;
width: 260px;
height: 310px;
margin: 0 auto 30px;
position: relative;
padding: 0;
}

.score {
font-size: 18pt;
color: #1c8aae !important;
text-decoration: none !important;
}

.bullet {
font-size: 8pt;
color: #666;
}

</style>

3. The placeholder where things will show up:

<body style="margin: 0;">

<div class="homepage">
<div class="searchEntry">
<input type="text" class="inputForm" id="searchBox" />
</div>

<div class="searchResults" id="searchResults">
<ul id="baraja-el" class="baraja-container">

</ul>
</div>
...


4. Call the API!

<script>
var $el = $( '#baraja-el' ),
baraja = $el.baraja();
baraja.add( searchResults ) );
baraja.fan( {
speed : 500,
easing : 'ease-out',
range : 100,
direction : 'right',
origin : { x : 50, y : 200 },
center : true
} );
</script>

The missing piece here is the call to the People Search API of IBM Connections to generate searchResults. I'll leave that as an exercise to the reader. Once I gathered all the data, I created a searchResult which would look like this (so that it matches the CSS I shared above):
<li><img class="photo" src="http://connections.demolotus.com/profiles/photo.do?userid=3123a1db-21f9-466f-b19e-1a49383fa2db" alt="image1"/><br/><br/><div><span class="fn">Bill Ranney</span> <span class="bullet">&bull;</span> <span class="score">10</span></div><p>Sr. Business Manager</p><p>10 followers</p></li>
In terms of the score, that was work that we did based on the work with Marie Wallace. Check out her blog for more details.

Thursday, February 6, 2014

The Code Behind My IBM Connect 2014 Keynote Demo - Part 2

View Comments
Yesterday, I shared the initial piece of code that I got working in getting ready for the IBM Connect 2014 keynote demo. If you haven't seen that, take a look at that before going through this post.

As I explained yesterday, I wanted to get a Pinterest-like layout for the activity stream within the portal, and that's what I showed yesterday. I then wanted to take that example and also add that to the landing page of a community. That way, as a community manager I can not only see the latest updates  but I can also share and direct my team to the content I want them to see.  Here's a snapshot of the community landing page I showed:


Notice that in this layout, the stream shows up in a multi-column view, and the profile photo is under each card (instead of inside the card as in yesterday's post). 

The trick? Just some minor tweaks to the code from yesterday. I still used jQuery, the Waterfall plugin, and some CSS magic.  Here's the code:

1. Include the right JavaScript:

<script src="jquery-1.9.1.min.js"></script>
<script src="waterfall-master/demos/js/libs/handlebars/handlebars.js"></script>
<script src="waterfall-master/demos/js/waterfall.min.js"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>
2. The CSS magic


<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
margin: auto;
width: 740px;
background-color: #f0f0f0;

}

.newsfeed {
margin: auto;
width: 740px;
background-color: #f0f0f0;
padding-top: 20px;
}

.columnHeader {
font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold","Helvetica Neue", sans-serif;
font-weight: 600;
font-size: 90%;
}

a {
color: #1c8aae !important;
text-decoration: none !important;
}

.date {
color: #d9d9d9 !important;
text-decoration: none !important;
}

.timeago {
color: gray !important;
border-bottom: none !important;
}

.card {
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 5px;
background-color: #fff;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
width: 330px;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;

}

.leftColumn {
float: left;
}
.rightColumn {
float: left;
padding-top:29px;
padding-left: 10px;
}

.photo {
width: 65px;
height: 65px;
border-radius: 35px;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-color: #fff;
border-style: solid;
box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.attachment {
max-width: 290px;
max-height: 290px;
}

.signature {
font-size: 75%;
color: gray;
padding-top: 10px;
}

.div {
float:left;
padding-top: 10px;
}

.asentry {
width: 345px;
}

.sharkfin {
margin-top:-13px;
margin-left:25px;
}

.message {
padding: 20px 10px 20px 10px;
}

.attachDiv {
width: 299px;
height: 299px;
}
</style>

3. Create the HTML placeholder where the content will be rendered asynchronously

<body style="margin: 0;">
<div class="homepage">

<div class="newsfeed">
<div id="container" class="container"></div>
</div>
</div>
....


4. The template for how the activity stream will be rendered:

<!-- This controls how the Activity stream is rendered -->
<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#list}}
<div class="asentry">
<div class="card">
<div class="message">

{{{title}}} {{#if object.summary}} "<i>{{{object.summary}}}</i>" {{/if}}

<br/>
{{#each object.attachments}}
<div class="attachDiv">
<img class="attachment" src="{{this.url}}" >
</div>
{{/each}}
</div>
</div>
<img class="sharkfin" src="sharkfin-2.png">
<div class="signature">
<div class="leftColumn">
<img class="photo" src="{{photoId actor}}" />
</div>
<div class="rightColumn">
<a class="date" href="{{object.url}}">
<abbr class="timeago" title="{{published}}">{{makeDatePretty published}}</abbr>
</a>
&nbsp;&bull;&nbsp;<span class="action">Like ( {{object.likes.totalItems}} )</span>&nbsp;&bull;&nbsp;
<span class="action">Comment ( {{object.replies.totalItems}} )</span>
</div>
</div>
</div>
{{/list}}
</script>

5. Call the Waterfall plug-in

<script>
// Now call the activity stream API and load the stream
$('#container').waterfall({
itemCls: 'asentry',
colWidth: 345,
gutterWidth: 20,
gutterHeight: 20,
maxPage: 1,
isAnimated: true,
maxCol: 2,
isFadeIn: true,
debug: false,
checkImagesLoaded: false,
path: function(page) {
return 'http://connections.demolotus.com/connections/opensocial/basic/rest/activitystreams/urn:lsid:lconn.ibm.com:communities.community:' + params.communityId + '/@all/@all?rollup=true&shortStrings=true&&format=json&page=' + page;
}
});

</script>

And there you have it! You can now render the IBM Connections activity stream in a grid format with resizable cards.

The big changes between yesterday's post and today are mostly in step 2 (the CSS required for the rendering), step 4 (the template for the rendering of each activity stream entry) and step 5 (we now call the community stream API instead of the overall activity stream API).

Fun !!

Wednesday, February 5, 2014

The Code Behind My IBM Connect 2014 Keynote Demo

View Comments
This is probably going to be part 1 of a series. Now that IBM Connect 2014 is done, I wanted to recap and share with the community in more detail what I showed at the keynote (a.k.a OGS/Opening General Session).

First, I assume that you've seen the keynote by now. If you haven't, here's the full session. If you skip to about 1:12:00 that's where my part begins.


I divided my demo into 3 parts:
As I organized the demo, I wanted to focus on business value and encourage people to go to the breakout sessions to get all the gory details.  For some parts, I wrote some custom code (warning: when you have a product manager writing code, you could end up in weird places). Let me tackle one of the first things I got working for the demo: a Pinterest-like layout for the news feed/activity stream (as seen on the left below). This is something you can do today with IBM Connections 4.5 !

The trick to get that working was using the jQuery plugin Waterfall. Actually, this plug-in was the magic behind a lot of the things that I demo'ed: the community grid, people recommendations, notifications, etc.  (stop here if coding is not your thing)

To render the activity stream as shown above, I needed five parts:

1. Include the right JavaScript

<script src="jquery-1.9.1.min.js"></script>
<script src="waterfall-master/demos/js/libs/handlebars/handlebars.js"></script>
<script src="waterfall-master/demos/js/waterfall.min.js"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>


2. Create the proper CSS for styling

<style type="text/css">
.homepage {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
font-weight: 300;
color: #444;
line-height: 1.2;
background-color: #f0f0f0;
padding-left: 12px;
margin: 0 auto;
width: 1000px;
font-size: 14pt;
}

.columnHeader {
font-size: 150%;
padding-left: 13px;
}

a {
color: #1c8aae !important;
text-decoration: none !important;
}

.date {
color: #d9d9d9 !important;
text-decoration: none !important;
}

.timeago {
color: gray !important;
border-bottom: none !important;
}

.card {
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
padding: 5px 5px 15px 5px;
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
background: -moz-linear-gradient(45deg, #FFF, #F9F9F9);
opacity: 1;
width: 415px;

-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;

}

.newsfeed {
//padding-left: 20px;
float: left;
width: 450px;
}

.leftColumn {
padding: 10px 20px 20px 20px ;
float: left;
}
.rightColumn {
float: left;
width: 325px;
padding-top: 10px;
}

.photo {
width: 50px;
height: 50px;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .2);
}

.message {
font-size: 75%;
}

.attachment {
max-width: 320px;
max-height: 240px;
}

.attachDiv {
padding: 5px 0;
height: 240px;
}

.signature {
font-size: 90%;
color: #666 !important;
}

</style>


3. Create a placeholder for the HTML to be rendered asynchronously

<body style="background-color: #f0f0f0; margin: 0; overflow: scroll;">
<div class="homepage">

<div class="newsfeed">
<p class="columnHeader">News</p>
<div id="container" class="container"> <!-- activity stream will be rendered here --> </div>
</div>
</div>
....


4. Create a template for how I wanted it to look (that way the Waterfall plugin knows how to render the activity stream)

<script type="text/x-handlebars-template" id="waterfall-tpl">
{{#list}}
<div class="card">
<div class="message">
<div class="leftColumn">
<img class="photo" src="{{photoId actor}}" />
</div>
<div class="rightColumn">
{{{title}}} {{#if object.summary}} "<i>{{{object.summary}}}</i>" {{/if}}
<br/>
{{#each object.attachments}}
<div class="attachDiv">
<img class="attachment" src="{{this.url}}" />
</div>
{{/each}}
<br/>
<div class="signature">
<img style="vertical-align: middle;" src="{{generator.image.url}}"> <a class="date" href="{{object.url}}">
<abbr class="timeago" title="{{published}}">{{makeDatePretty published}}</abbr>
</a> &bull; {{object.likes.totalItems}} Likes &bull; {{object.replies.totalItems}} Comments &bull; Save This
</div>
</div>
</div>
</div>
{{/list}}
</script>


5. Call Waterfall against the Activity Stream API

<script>

$('#container').waterfall({
itemCls: 'card',
colWidth: 420,
gutterWidth: 20,
gutterHeight: 20,
maxPage: 1,
isAnimated: true,
isFadeIn: true,
debug: false,
checkImagesLoaded: false,
path: function(page) {
return 'http://connections.demolotus.com/connections/opensocial/basic/rest/activitystreams/@me/@all/@all?shortStrings=true&rollup=true&format=json&page=' + page;
}
});
</script>


And there you have it! This will give you the activity stream in a multi-column format with a rendering similar to what you see in Pinterest.  To change how it looks, you mostly have to look at steps 2 and 4 above and provide the layout/styling you want.

In the next few posts, I'll share the code for the other pages. But really it all came down to Waterfall! Once you learn that plug-in, there's tons you can do !!!

I hope this is helpful!

Tuesday, February 4, 2014

Kaltura Shows Off Their Video Extension for IBM Connections

View Comments
IBM Connect 2014 is now done and there's a lot for me to catch up with. My plan is that in the next few days I'll be sharing some of the code that I used during the keynote (Opening General Session). The code was all going against the IBM Connections APIs so you can start using it today against your current system.

Before going there, however, I wanted to share a bit about Kaltura's video extension for IBM Connections.  In their blog last week, Kaltura announced their new video extension and talked about why video is so important. Here are 5 reasons they offer:


  1. Video is engaging and simplifies complex ideas
  2. Video reduces cost by boosting training and 'multiplying' sales-force
  3. Videos shortens 'time to knowledge' and facilitates expertise creation and recognition
  4. Video authenticity brings people together
  5. The demand for consuming and creating knowledge on-the-go
Kaltura mentions that Forrester reported that over 27% of firms already implemented video for internal use and Gartner predicts that by 2016 organizations will stream more than 16 hours of video per employee per month.

Check out the 4 minute video here:


To learn more about Kaltura's Video Extension for IBM Connections, go here

Monday, February 3, 2014

TimeToAct Releases Their Newest Content Management Solution for IBM Connections

View Comments
To get the most out of a social software application it should be seamlessly integrated in the work environment of users. IBM Connections is strongly going into this direction with its mail and calendar integration. TimeToAct takes this trend further with their new solution out of their IBM Connections lab: Web CMS Extension for IBM Connections.

The Web CMS Extension for IBM Connections provides a seamless integration of different content into your IBM Connections platform. Through the built in applications, user groups with access to the editorial communities can create content which will then be displayed on a consolidated custom homepage. External content like a corporate newsfeed or a Google Weather widget can be offered on the custom homepage as well.

Available Features:
  • Classic website navigation with multi level pull down menu
  • News widgets fitting to different occasions
  • Simple promotion of dates thru the events widget
  • Link widgets for an easy access to important information
  • External widget implementation for a convenient user experience

Check out their 5 minute demo below which shows how to manage and create content directly within IBM Connections:



And here's a presentation so you can learn more:




To learn more, go here.