Let's recap IBM Connections at IBM Connect 2014

Tweet

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

I think @jaybaer summed up MailNext perfectly in one word: #amazeballs #IBMConnect pic.twitter.com/4aEDD0hg7a

— Paige Sandhu (@paige_sandhu) January 27, 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):

ID400 - What's New and Coming in IBM Connections 2014 #IBMConnect from Luis Benitez

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!

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

Tweet

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 !

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

Tweet

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.

The Code Behind My IBM Connect 2014 Keynote Demo

Tweet

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:

• IBM Mail Next ( check out what Twitter had to say)
• New features in IBM Connections
• Customizing IBM Connections for an intranet portal

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!

Mark Your Calendars: Webcast - Engage Your Customers with Exceptional Digital Experiences

Tweet

Next week, we'll be hosting a can't miss webinar on building Exceptional Digital Experiences. While the pace of business and the speed of content continue to accelerate, so does the demand to reach your audiences through a rich and robust digital experience on multiple devices. Customers and Employees alike expect the same high quality experiences whether externally on the web or internally on the company intranet.

Cars.com, for example, increased web site traffic by 145 million visits using an Exceptional Digital Experience.

Retailers, on the other hand, lost about $44 Billion in sales due to online customer experience problems:

At the webinar, Larry Bowden (VP of IBM Digital Experience Software), Nicole Carrier ( Chief Strategist of IBM Digital Experience Software), David Apanovich (Sr. Analyst of Forrester Research) and Aaron Pickrell (Director of Online Systems for Performance Bicycle) will share strategies to listen to your customers, deliver exceptional service and engage individuals and customers.

The webinar is on July 17th @ 11am ET. To register, go here.

New Government 2.0 Template Powered by IBM Connections Now Available

Tweet

Governments are challenged to deliver services to their constituents (citizens and visitors) efficiently and cost effectively in a world that is increasingly social and web enabled. Through interactions with commercial businesses they have become accustomed to on-demand service that is available 24 X 7. To meet these demands, governments are developing citizen portals to provide their constituents with access to information and government services. The social aspects of this template are powered by IBM Connections.

To that end, we have released a new template to to enable government entities to get started quickly with a citizen portal. The template provides best practice examples for the many design patterns which are common for citizen portals. All content, layouts, forms and apps can be customized and configured to meet specific requirements. The template assets can be integrated with existing systems and content to provide an exceptional user experience for Governments and their citizens.

Here's a video that shows the template in action such as a Mayor's blog.

You can download this new template directly from our App Catalog here.

Activity Stream portlet for IBM Connections 4.5 Now Available

Tweet

The IBM Connections portlets for IBM WebSphere Portal have been updated and are now ready for download!

With this new release you can:

• Bring the Activity Stream experience from IBM Connections into portal - this means you can surface the microblogging capability of IBM Connections in the portal, including @-mentions !
• OpenSocial Embedded Experiences are now available in Portal
• Enhancements to support ideation
• Support for Portal 8.0.0.1 CF4
• Support for IBM Connections 4.5

With this release, there are now 13 portlets that bring the power of social to the portal making it extremely easy to socialize an existing site.

Here's a screenshot of the new Activity Stream portlet in Portal:

To download, go out to our catalog and get it from here and the installation instructions are here.

How To Create a Social Portal for Exceptional Web Experiences

Tweet

This video takes a deep dive on how to create a Social Portal for Exceptional Web Experiences. The social layer is provided by IBM Connections and using the new social rendering portlets you can create a great and compelling experience with a few clicks and, most importantly, with no coding skills required.

This is very useful when you want to open up Connections to users outside of the organization and/or you want to socialize an existing web front.

All of these capabilities are available today so there's no need to wait!

Update on 27/Mar/2013: I've embedded part 2 of the series and thanks to Ken Krause for doing this!!

Enjoy

Announcing IBM Connections Hypervisor Edition

Tweet

Today, IBM announced the availability of IBM Connections on PureSystems. PureSystems allow Ability to maintain and update through a single console with zero downtime. The same capability was released for WebSphere Portal earlier in the year (to learn more click here ).

A social business recognizes that people do business with people and optimizes how people interact to accomplish organizational goals. IBM Connections empowers people to easily connect with employees, partners, and customers, helping businesses, government agencies, educational institutions, to optimize collaboration. The new IBM Connections pattern for use with PureSystems allow organizations to focus critical resources on value add activities by significantly reducing installation and configuration times.

If you are not familiar with PureSystems, check out this video to learn more:

WebSphere Portal has also been available for PureSystem since earlier this year. In this demo you can see how easy and fast it is to deploy Portal and now you have the same capability for IBM Connections:

Using IBM Connections Hypervisor Edition 4 can help enable better utilization of hardware and faster response to demands for newly deployed systems. This can help to reduce both hardware and software operation costs, and maintenance costs. By deploying virtual images, businesses can also leverage a known, stable, and tested configuration, which can help reduce the potential for errors and reduce time to deployment of a working system, whether for development, test, or production. By making the deployment easier, organizations can focus their investment on social business adoption.

The Benefits of Becoming a Social Business

Tweet

A quick video that was shared at the opening keynote of the Leadership Alliance conference two weeks back.

Are you ready to reap the benefits of becoming a social business ?

Go ahead and share and this video with your network.

Grow Revenue By Using the IBM Social Collaboration Platform [VIDEO]

Tweet

And the demo movies for IBM Connections v4.0 keep coming in.  Let me tell you a little about this one.

Before using IBM's Social Collaboration Platform, Greenwell's profits were not growing and they were losing market share.

Greenwell's marketing manager decided to leverage the IBM's Social Collaboration Platform and from that point on, the successes kept piling in.

Check out the success story:


The ROI of using IBM's Social Collaboration Platform is clear. Greenwell was able to:

• Discover new opportunities
• Rebuild brand recognition
• Increase market share
• Invigorate its customer base

Congrats to the team at Greenwell! (By the way, in case you didn't attend our conference earlier this year, Greenwell is a fictional company).

This is a great video that you can use to drive adoption and clearly understand the business value of using a Social Collaboration Platform powered by IBM Connections.

What do you think? If you are not using the IBM Social Collaboration Platform, you should start today!

Build Communities In Your Portal with IBM Connections

Tweet

Last week, I talked about some of the new releases around IBM Connections. Most notably, the new portlets to bring IBM Connections into Portal. With these portlets you can now create community pages in portal which allow you associate a portal page with a community in Connections to enhance your portal's social collaboration capabilities.

You integrate Communities from Connections by simply associating a set of portal pages with them. These types of portal pages are called Community Pages. By associating a set of portal pages with a community in Connections, all of the Connections portlets on those pages will automatically render their content within the context of that Community.

Of course, you can create as many pages as you want for all your communities. You can even associate existing sets of pages in your portal site with the appropriate community. And this works for all types of communities: public, moderated or private.

This is critical for organizations with portal because now it's easier than ever to bring social to the user: a critical factor to drive adoption for a social business platform.

Want to see it in action ? Check out this demo which illustrates the capabilities:

What do you think?

How To Extend Search in IBM Connections

Tweet

I'm currently making modifications to my IBM Connections server to record a demo that I've been wanting to do for a week or so now. As I was making some changes, I realized that there was a new feature that was introduced in IBM Connections 3.0.1 that I may have not talked about.

Basically, the IBM Connections search box is extensible so that you can add 3rd party search providers. Say, for example, that you have deployed IBM Connections inside of the firewall and you want to give your users not only the ability to search within Connections, but perhaps integrate with your intranet search engine (e.g. Omnifind, Google Search Appliance, Fast, etc). Or maybe you have deployed Connections outside of the firewall and you want to integrate with your extranet search or provide the ability to do a Google search (or Bing, Yahoo, Quora, etc.).

Well, there's an extension for that and it's pretty easy to set up and no coding is required. Once you set it up, the additional search capability is made available to the end users and now from IBM Connections they can do searches that are handled by 3rd party providers. Very cool, huh?

Here's how it looks:

To set it up, simply follow the instructions here and off you go: http://www-10.lotus.com/ldd/lcwiki.nsf/dx/Adding_thirdparty_search_options_to_the_search_control_ic301 . In my demo environment, my intranet search is provided by Portal, so here's the URL format that I used to search Portal from IBM Connections: http://showcase1.demos.ibm.com/wps/myportal/SmarterPlanet/?uri=searchCenter%3Aquery&layoutNode=ibm.portal.Search%20Center%20Portlet%20Window&contentNode=ibm.portal.Search%20Center&query=social (of course, you'll have to update the URL based on your server name and address).

If you weren't aware of this, take advantage of it today!

Enjoy!

New Portlets Available for Connections 3.0.1

Tweet

Because Mac Guidera is out of the office and is probably not able to share these great news (he's the Product Manager for the awesome Connections plugins), I figured I would do so. Today we made available new portlets for Connections 3.0.1. As I mentioned earlier, we had 9 portlets for: Wikis, Activities, Profiles, Bookmarks, Tag Cloud, and Blogs.

Today, we've released new portlets that support Ideation blogs and add support for 3rd party authentication providers (TAM / Siteminder).

Even though the portlets are called Connections 3.0.1 Portlets, they support:

• IBM Lotus Connections 2.5
• IBM Lotus Connections 3.0
• IBM Connections 3.0.1
• IBM WebSphere Portal Server 6.1.5.2*
• IBM WebSphere Portal Server 7.0.0.1*
• Microsoft Windows XP SP3
• Microsoft Windows 7 SP1 (32-bit, 64-bit toleration)
• Mac OS X 10.4, 10.5
• Microsoft Internet Explorer 6, 7, 8
• Mozilla Firefox 3.5, 3.6
• Apple Safari 4

You can download the portlets, for free as usual, from the Lotus App Catalog here: https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=511C128045FCD5D1852577B60055AD81

Thanks to the plugin team for making this available!

Calling IBM Social Business Partners

Tweet

One of the things that I've been working on in my new role, along with many colleagues, is on a new program for our business partners.

On Friday, IBM started to offer a Social Business Authorization where Business Partners can certify as Social Business partners. I thought this was interesting because the authorization (or certificaions, depending on how you want to call it) is focused more on demonstrated skills than on actual certifications (i.e. passing tests). There is, however, a requirement to pass certain mastery tests.

The authorization also includes offerings from different brands in the IBM portfolio for a complete Social Business offering. The idea is that a partner must know how to work with Connections but also with the complementary offerings from Cognos and/or SPSS.

If you would like to be part of this new authorization, or want to learn about the benefits, you can find out more about in PartnerWorld here. The list of mastery tests is included here.

How To Build a Status Update application for Facebook, Twitter and Connections using Portlet Factory

Tweet

Because I've shared so many Connections coding tips and how-to's, I'm often asked to help provide some guidance on how to create an application from scratch that integrates Connections with product X.

This video came to my attention last week and it's pretty cool. It starts with a demo of what the application is (a portlet that can simultaneously update your status in Connections, Twitter and Facebook, if enabled by the end user).

There are several things that really stand out in this demo. First, I really liked how the video shows that you can use the standard Java library provided by Twitter. Second, the demo shows how this same application looks like from an iPhone (or any mobile device) with no additional coding. The only thing that had to happen was to add the 'mobile theme' in portlet factory and voilá.

Enjoy!

Evangelizing Social Software in Argentina

Tweet

This has been an amazing week in Argentina. I got in on Tuesday morning after taking the red eye in. On Tuesday, I had several customer meetings that went very well. They asked about where other customers are seeing value in social software and potential ROI.

I also got a chance to meet a bunch of IBMers from Argentina from various places within IBM: Sales, Services, Hardware, Software, etc. They all came in to a BlueIQ session where I presented the value of social software from my perspective as an IBMer and the value they can get from social software. I even talked about how to grow their careers at IBM using social software.

For those of you who don't know, the BlueIQ program at IBM aims to create ambassadors in every area of IBM to help evangelize the value of social software. With their help, the program aims to get as many IBMers as possible using social software to collaborate and make their lives easier (using Connections, of course).

Here's the presentation that I used:

BlueIQ Argentina - Using Social Software at Work

View more presentations from Luis Benitez

Wednesday I had more customer visits and they also wanted to more about referenceable customers and ROI. I shared some of the success stories that IBM customers have shared with the world. Thursday was a lot of fun because it was the IBM Software Solutions Forum. Think of it as Lotusphere, but with all the brands mixed in. I got tasked to do the collaboration keynote. The session was titled "Smarter Collaboration: Anytime, Anywhere through portals, social, and mobile". I've also shared the presentation and you can find it here (though the demo is not included):

Smarter collaboration anywhere anytime-portals social and mobile-public

View more presentations from Luis Benitez

After the event was done, it was time to pack up and head back home. There was some bad planning on my part because Thursday was St. Patrick's Day and it turns out there was going to be a huge street party that I had to miss. In all, it was a great trip. Argentina, let me know when you need me back

How To Add Lotus Connections Search to Portal Navigation

Tweet

I recently stumbled upon a quick interesting tip in one of our internal blogs which I thought would be extremely valuable to share externally. The tip documents how to embed the Lotus Connections search into the navigation for WebSphere Portal. And by looking at the code snippet below, this could also serve as a launching pad to embed Connections search into other pages regardless of the technology behind them.

So here's our goal:

The following code snippet was added into the Portal JSPs:

<%-- Renders the search widget in the banner --%> <div class="lotusSearchContainer"> <div id="themeSearchBoxContainer" class="wptheme-searchBoxContainer"> <div id="themeSearchBox"></div> </div> <script type="text/javascript"> dojo.addOnLoad(function() { var c = {}; c.connectionsUrl = "${wp.themeConfig['resources.urls.connections_base']}"; c.proxiedConnectionsUrl = "${wp.themeConfig['resources.urls.connections_base.proxied']}"; dojo.registerModulePath("lconn.core.SearchBar", c.proxiedConnectionsUrl + "/homepage/script/lconn/core/SearchBar"); dojo.registerModulePath("lconn.core.TextBox", c.proxiedConnectionsUrl + "/homepage/script/lconn/core/TextBox") dojo.require("lconn.core.TextBox"); dojo.require("lconn.core.SearchBar"); var fileref = document.createElement("link"); fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", c.proxiedConnectionsUrl + "/homepage/nav/lconn/styles/sprite-lconn.css"); document.getElementsByTagName("head")[0].appendChild(fileref); var searchBar = new lconn.core.SearchBar( { globalOptions : [ { label : "Activities", feature : "activities" }, { label : "Blogs", feature : "blogs" }, { label : "Bookmarks", feature : "dogear" }, { label : "Communities", feature : "communities" }, { label : "Files", feature : "files" }, { label : "Forums", feature : "forums" }, { label : "Profiles", feature : "profiles" }, { label : "Wikis", feature : "wikis" } ], searchContextPath : c.connectionsUrl + "/search", lblSearch : "Search", lblSelectScope : "", lblAllConnections : "All Connections", lblAdvanced : "Advanced", _blankGif : c.proxiedConnectionsUrl + "/homepage/static/20101018.200549/nav/common/styles/images/blank.gif", onSubmit : function() { return true; } }, dojo.byId("themeSearchBox")); }); </script></div>

In this case, c.connectionsUrl and c.connectionsUrlProxied point to the absolute URL of the connections server and the same but proxied through the WPS AJAX proxy. We generate the values of these at JSP execution time from a config variable in WAS admin console, but of course you can hard-code these if you wish. In our case the URLs look something like this:

c.connectionsUrl = "http://connections.company.com"

c.connectionsUrlProxied = "/wps/proxy/http/connections.company.com"

Thanks to the guys at ISSL for doing this.

Call For Abstracts: Exceptional Web Experience

Tweet

Abstracts are now being accepted for the Exceptional Web Experience conference which is happening May 16-19 in Orlando, FL. An Exceptional Web Experience is what all companies must strive for as it deliver real business results. In fact, Larry Bowden, VP of Portals at IBM, recently wrote this article on 7 Ways to Get Lucky Online where he highlights results such as 75 percent reduction in the time to roll out new customer-oriented applications. An Exception Web Experience is a must!

Abstracts are now being accepted for breakout sessions (60 minutes) and hands-on labs (75 minutes). The conference is divided into 6 tracks (listed below), where 3 tracks are focused on the Business Impact, and the other 3 tracks are focused on the technology side. Abstracts will be submitted until March 4th, 2011 so put your thinking caps on and submit your abstract! (Note: you need an account in Greenhouse to submit an abstract).

Business Impact Program

Track 1: Customer Case Studies and Industry Solutions

Detailed presentations of client solutions,including Project Goals and Analysis,Industry Specific Approaches,Implementation and Governance Techniques, Best Practices.

Track 2: Accelerating Solution Time to Value and ROI

Proven Strategies to Build the Vision and Value of an Exceptional Web Experience; Building a Portal Delivery Roadmap: Paths to Success; How to Successfully Justify and Deploy Portal and Social

Software in Your Organization; The Real Scoop on Understanding the Portal Competitive Landscape.

Track 3: Optimize Customer Experiences to Build Brand and Generate Revenue

You are What You Market: Leveraging New Rules of Marketing; Getting Smart with Retail Portals to Address the Accelerated Shift in Buyer Behavior; Delivering Your Portal Solutions to Mobile Audiences: Best Practices; User Experience Optimization Initiative: Understanding and Applying Web Analytics.

Technology Program

Track 4: Web Experience Platforms and Solutions

Getting Started with IBM WebSphere® Portal and IBM Web Content Management; WebSphere Portal 7

Technical Overview and Strategy; Leveraging Portal NOW to Deliver Exceptional Web Experiences; IBM

Forms Technical Deep Dive; What’s New in Lotus® Quickr™?; Extending your Portal to Mobile Devices; IBM Mashup Center Overview; Exceptional Web Experience in the Cloud – How to Use IBM WebSphere Portal; IBM Web Content Management; Forms and Mashups in the Cloud.

Track 5: Developing Exceptional Web Experiences

Improving the Online Experience: Building Next Generation Web sites;Using Adobe FLEX to Deliver IBM

WebSphere Portal and Collaboration Services; Developing Web Applications using IBM WebSphere Portlet Factory, IBM Rational® Application Developer and IBM Lotus Widget Factory; Powering Exceptional Web Experiences Using Industry Toolboxes; Leveraging WebSphere Commerce and IBM Web Content Management; Deliver Operational and Real-time Business Intelligence with Cognos® Business Intelligence; IBM Forms Technical Deep Dive.

Track 6: Best Practices and Implementation

Managing the Portal Deployment Project: Best Practices, Effective Portal Governance; High Availability Designs and Implementation with WebSphere Portal, Virtualizing Portals, Successfully Managing Your WebSphere Portal, Virtualizing Portals; Successfully Managing Your IBM Web Content Management Solution; Hands On Lab; Administrating WebSphere Portal.

New Lotus Connections 3.0 Plugins Are Now Available

Tweet

For all of you celebrating Thanksgiving, I hope you had a wonderful weekend. Personally, I ate a lot of stuffing, turkey, and pumpkin pie/flan (though the pie was my favorite). My two year old woke up on Friday, Saturday, and Sunday and the first thing he asked for each day was turkey. And he didn't even want it reheated. It had to be cold. Check out the picture here.

This week I'm in Littleton, MA getting to know the new team and working on the planning for next year's stuff. I'm excited to be here and even see some of my past teammates when I used to be a developer.

Anyway, I wanted to make you aware of the new plugins that are now freely available from our App Catalog for download:

• Widget for Microsoft SharePoint - Bring the capabilities of SharePoint directly into a community hosted by Connections. The plugin allows you to upload/download/check-in/check-out files to/from SharePoint without leaving the Connections interface.
  
• Plugin for Microsoft SharePoint - Expose the Connections tag cloud, business card, and search capabilities directly in SharePoint. (Also remember, there's a separate plug-in for managing Connections files directly from SharePoint)
• Plug-in for Microsoft Word, Excel, PowerPoint, Outlook and Windows Explorer - Post a Word document directly to a blog, Create to-do's directly from Word, search Connections directly from Office, collaborate on Wikis, and more!
• Portlets for WebSphere Portal - 9 portlets to bring the Lotus Connections services into your existing portal. The portlets include: Wikis, Profiles, Bookmarks, Tag Cloud, Blogs, and more!!
• Microblogging plugin for Lotus Notes - Update your status and comment on the status of your colleagues.

There are also other plugins and widgets available, so make sure to visit the catalog often: http://catalog.lotus.com.