Seamless User Experience with IBM SmartCloud for Social Business

I work with many partners to integrate with IBM Collaboration Solutions products and projects – IBM Domino, IBM Sametime, IBM Connections, IBM Social Business Toolkit, IBM Collaboration QuickStart for Social Business.

Recently, I have been focusing on integrating with the IBM SmartCloud for Social Business. Many partners ask how they can make a seamless experience between IBM SmartCloud for Social Business and their custom application. This article introduces the IBM SmartCloud for Social Business, the Trials you can use to prototype your integrations, and how to make the seamless experience.

Overview

IBM SmartCloud for Social Business is a suite of business networking and collaboration cloud-based services hosted by the IBM Collaboration Solutions division of IBM. The integrated services include social networking for businesses, online meetings, file sharing, instant message, data visualization and e-mail.

Trials

You can use various trials. Customer Trials are:

No charge, 60 day trial, 25 accounts
Anyone can sign up
Once Per Domain
Available at http://ibm.co/1coI7gP

Partner Trials are:

No charge, 1 year trial, 30 accounts
Use the account to demonstrate and develop solutions for your clients
Must be a PartnerWorld Member
Available at http://ibm.co/1kbh7eL

Starting Point and Extensions

When you first log in with your trial, you see a great starting point, your dashboard.

Dashboard

Click the Apps Menu

Apps Menu

You can add your own application here.

Let’s add our own extension.

Click the Admin Menu

Click Manage Organization

Manage Organization

Click Organization Extensions

Click Add Extension

Add Extension

Select Top Navigation Bar

Type Name : Demo

Enter Icon Url: http://www-03.ibm.com/ibm/history/ibm100/images/icp/D562347I16459C79/us__en_us__ibm100__sustainable_cocoa__icon__540x324.png

This is for the image that you want displayed to the left of the entry on the Apps Menu. You can use any icon that is web accessible by the User’s browser.

Enter Url:  http://bastide.org/wp-content/uploads/2014/03/demo-seamless1.html

You can point to any webpage that your user can access via their web browser (internal or external to a corporate network).

Click Save

Extension-Save

Click The Apps Menu

Notice the Demo is added.

New Apps Menu

You have completed the first step of the seamless experience.

Making your App Seamless

Making an application seamless is a multiple step process,
add the linked styles, so you can take full advantage of the styles.

<link rel="stylesheet" href="https://apps.na.collabserv.com/theming/theme/css/3" type="text/css" />

Next, you want to add a class and div to add the menu bar.

<div class=”lotusui30 lotusui30_body lotusui30_fonts scloud3“> <div id=”smartcloudExt” class=”scloud3” > <script src=”https://apps.na.collabserv.com/navbar/banner/notes9/smartcloudExt?displayName&orgName=Demo Org&oneui=3” language=”javascript“></script> </div>

Notice, smartcloudExt exists as the div id and is the last component in the URL, they must exist, the javascript loads the banner in the div in a specific div based on that component.  It can be anything as long as they agree.   Notice also, that the div is surrounded by the div with class – that’s the theme/User Interface specific definitions necessary to render the menu bar.

Next, if you want to take advantage of the styles from IBM, called OneUI, you can navigate and find the elements of the style and use the sample as a starting point http://infolib.lotus.com/resources/oneui/3.0/docPublic/components

Copy and paste it in place.

Save

Launch in Firefox .

Result

You can inspect each element, and find the CSS you want to override. Look to the right…

CSS_Inspector_Firebug

Copy the CSS and inline the CSS with your own definition.

For instance, I wanted to increase the size of the cloud table.

<style type="text/css">
.scloud3 table, .scloud3_gecko input, .scloud3_gecko select, .scloud3_webkit input, .scloud3_webkit select {
    font-size: 1.5em;
}
</style>

This results in expanded font sizes.

Result with Expanded Font

Note, you might see an issue with no banner, such as this image. This means you have not previously logged into the SmartCloud, login to activate the banner.

Screen Shot 2014-03-09 at 8.01.34 AM

The source for the demo is available here

You now know how to take advantage of the IBM SmartCloud for Social Business to build a seamless experience for your users.

References

Copied Detailed Table Information http://infolib.lotus.com/resources/oneui/3.0/docPublic/components/tableSummaryDetails.htm
OneUI 3.0 Documentation http://infolib.lotus.com/resources/oneui/3.0/docPublic/index.htm
Linked CSS https://apps.collabservnext.com/theming/theme/css/3
CSS Formatter  http://www.codebeautifier.com/

Leave a Reply

Your email address will not be published. Required fields are marked *