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&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 • ${hitCount} ${_nls.downloads} • ${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 !