Building Social Applications using Connections Cloud and WebSphere Portal: Social Portal Pages

We’re going to use Portal’s theme framework to add the necessary CSS and JS files to our social pages.  Using this approach, we’ll no longer need to include the dependencies in our script portlets.  Pages that have social script portlets on them can simply have the relevant theme profile applied.  Another benefit is that by using Portal’s profile feature, the various browser requests are centralized into a single download to reduce the time taken to load the page.

Creating the Theme Modules

Let’s begin by adding new theme modules.  The modules will include the following resources on the page:

  • The Social Business Toolkit SDK’s Javascript dependency, for example /sbt.sample.web/library?lib=dojo&ver=1.8.0&env=smartcloudEnvironment
  • CSS files from Connections Cloud, for example /connections/resources/web/_style?include=com.ibm.lconn.core.styles.oneui3/base/package3.cssstyles.oneui3/base/package3.css

You can read how to create the module framework in the Knowledge Center.  Since the CSS files are located on a remote server, I need to create a “system” module.  This is essentially creating a plugin with the relevant extensions.  It’s a web project (WAR) with a single plugin.xml file.  The contents of my plugin.xml are as follows.

<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin id="com.ibm.sbt.theme"
name="Social Business Toolkit Theme Modules"
version="1.0.3"
provider-name="IBM">
<extension
id="sbtSdkExtension"
point="com.ibm.portal.resourceaggregator.module">
<module
id="sbtSdk"
version="1.0.3">
<capability
id="sbt_sdk"
value="1.0.3">
</capability>
<title
lang="en"
value="Social Business Toolkit SDK">
</title>
<description
lang="en"
value="Social Business Toolkit SDK">
</description>
<contribution
type="head">
<sub-contribution
type="js">
<uri
value="{rep=WP CommonComponentConfigService;key=sbt.sdk.url}/sbt.sample.web/library?lib=dojo&amp;ver=1.8.0&amp;env=smartcloudEnvironment">
</uri>
</sub-contribution>
<sub-contribution
type="css">
<uri
value="{rep=WP CommonComponentConfigService;key=sbt.cc.url}/connections/resources/web/_style?include=com.ibm.lconn.core.styles.oneui3/base/package3.cssstyles.oneui3/base/package3.css">
</uri>
</sub-contribution>
<sub-contribution
type="css">
<uri
value="{rep=WP CommonComponentConfigService;key=sbt.cc.url}/connections/resources/web/_style?include=com.ibm.lconn.core.styles.oneui3/sprites.css">
</uri>
</sub-contribution>
<sub-contribution
type="css">
<uri
value="{rep=WP CommonComponentConfigService;key=sbt.cc.url}/connections/resources/web/_lconntheme/default.css?version=oneui3&amp;rtl=false">
</uri>
</sub-contribution>
<sub-contribution
type="css">
<uri
value="{rep=WP CommonComponentConfigService;key=sbt.cc.url}/connections/resources/web/_lconnappstyles/default/search.css?version=oneui3&amp;rtl=false">
</uri>
</sub-contribution>
</contribution>
</module>
</extension>

You could use the actual server’s path, for example https://apps.collabservnext.com/<some css resource> in the XML. But I’m using a substitution rule

{rep=WP CommonComponentConfigService;key=sbt.cc.url}

that will swap the corresponding keys in the plugin.xml for the values defined by WebSphere’s Resource Environment Provider.  The only reason I did this was so I could configure the URLs from WebSphere rather than hard code them into the plugin.xml.

SBT REP

The other thing I’m doing is telling the SBT SDK which environment I want configured by referencing sbt.sample.web/library?lib=dojo&amp;ver=1.8.0&amp;env=smartcloudEnvironment.  This alleviates me from having to manually specify the endpoint in the SBT scripts I write later.  And notice the ampersand symbol amp semicolon format.  You’ll need to escape the ampersands in the plugin.xml.

Create your web module and deploy to your server.  You can use the Theme Analyzer tools in Portal’s administration interface to pick up the new modules.  Just go to the Control Center feature and invalidate the cache.

Invalidate Theme

Then review the system modules to locate the sbt_sdk one.

sbtSdk Module

Profiles

To actually use the module, we need to build a theme profile.  A profile is a recipe of which modules should be loaded for a particular page’s functionality.  In addition to the sbtSdk module, we’ll need other IBM provided or custom modules loaded for pages to properly work.  Profile creation is rather straightforward.  You can use the existing profiles as a starting point.  See those in webdav for example; I use AnyClient to connect to my Portal http://127.0.0.1:10039/wps/mycontenthandler/dav/fs-type1.  Once there, you can peruse the profiles under the default theme.

I’ve created a SBT Profile that includes the SDK and Cloud modules I created earlier.

{
 "moduleIDs": ["getting_started_module",
 "wp_theme_portal_85",
 "wp_dynamicContentSpots_85",
 "wp_toolbar_host_view",
 "wp_portlet_css",
 "wp_client_ext",
 "wp_status_bar",
 "wp_theme_menus",
 "wp_theme_skin_region",
 "wp_theme_high_contrast",
 "wp_layout_windowstates",
 "wp_portal",
 "wp_analytics_aggregator",
 "wp_oob_sample_styles",
 "dojo",
 "wp_draft_page_ribbon",
 "sbtSdkModule",
 "sbtCloudModule"],
 "deferredModuleIDs": ["wp_toolbar_host_edit",
 "wp_analytics_tags",
 "wp_contextmenu_live_object",
 "wp_content_targeting_cam",
 "wcm_inplaceEdit"],
 "titles": [{
 "value": "Connections Cloud",
 "lang": "en"
 }],
 "descriptions": [{
 "value": "This profile has modules necessary for viewing pages that contain portlets written with the Social Business Toolkit SDK and Connections Cloud banner integration",
 "lang": "en"
 }]
}

This JSON file is then added to my default Portal theme using a webdav client.

SBT Profile WebDav

You’ll likely need to again invalidate the theme cache for the profile to be available for the next section.

Page Properties

To enable the profile on a page, we need to update the page properties.  The result of this process is that the aforementioned Javascript and CSS files get added to any page that has the profile enabled.

SBT Profile

And that’s it.  Now any developer can begin authoring “social” script portlets with nothing more than the page profile and a bit of web code.

 

 

 

One thought on “Building Social Applications using Connections Cloud and WebSphere Portal: Social Portal Pages”

Leave a Reply

Your email address will not be published.