Up and Running with IBM Script Portlet

In this article, I’ll describe how to install the IBM Script Portlet on IBM WebSphere Portal 8.5 and create scripts that leverage some of the key features of the Script Portlet.  The script portlet allows developers with primarily client-side development skills (HTML/CSS/JavaScript) to develop portlets rapidly, both offline on their favorite editors/IDEs and within WebSphere Portal itself with a jsfiddle-like experience.  To find out more information about it, visit the IBM Greenhouse Solution Catalog and the IBM Knowledge Center.

Pre-requisites:

Install IBM Script Portlet

The instructions on how to install are well documented by IBM in the Knowledge Center.  Below are my notes on how to install.

  1. Start WebSphere_Portal server
  2. Unzip “IBM Script Portlet for WebSphere Portal V1.1.zip” to a temp location
  3. Install PAA: From your shell, navigate to <wp_profile>/ConfigEngine and run the following command
    C:\IBM\WebSphere\wp_profile\ConfigEngine> ConfigEngine.bat install-paa -DPAALocation=C:\temp\ibm\scriptportlet-app-1.0-SNAPSHOT.paa -DWasPassword=<password> -DPortalAdminPwd=<password>

    Depending on how WebSphere Portal was installed you may or may not have different accounts for WAS administration and Portal administration.  Make sure to have the correct passwords.

  4. Deploy PAA: From the same location, run the deploy-paa task
    C:\IBM\WebSphere\wp_profile\ConfigEngine> ConfigEngine.bat deploy-paa -DappName=scriptportlet-app -DWasPassword=<password> -DPortalAdminPwd=<password>
    

    Note: On IBM WebSphere Portal 8.5 there’s no need to modify the theme per the readme.  That step only applies to IBM WebSphere Portal 8.0.0.1 with CF11.

  5. Verify installation and setup a test portlet:
    1. Open up a browser and navigate to your portal server.  In my case it’s http://localhost:10039/wps/portal
    2. Login with as the Portal administrator
    3. Enable Edit Mode
    4. Click Create -> Page -> Choose a template -> Enter page details -> Click Create Page
    5. Click Create -> Applications -> ‘Web Content’ tab -> Select Script Portlet -> Click Add to Page or Drag it to the desired location ScriptPortlet
    6. Click on the Edit link inside the Script Portlet and Verify it comes up

Notable WCM Tags in Script Portlet Development

The IBM Script Portlet components (HTML/JavaScript/CSS) are all stored within WCM, which means script portlets can be included as part of projects, deployed to other environments as part of syndication, and developers can leverage many of the WCM tags available.  I used a few tags in combination with the AngularJS TodoMVC sample application  to showcase how it can be used on common portlet development tasks, as well as other interesting use cases.  To see a list of all the tags available, please visit the IBM WebSphere Portal Product Documentation.

Data Management

Private/Public Render Parameters

Plugin to retrieve portlet render parameters. In the example below, the private portlet render parameter allTodos is retrieved.

[Plugin:RenderParam key="allTodos"]

Request Attributes

Retrieves/sets request attributes. Useful for temporary variables.

[Plugin:RequestAttribute key="key1" defaultValue="value1"]

Session Attributes

Plugin useful for managing data in the portlet session. The example below gets a render parameter and sets it as a value for the session attribute “todosInSession

[Plugin:SessionAttribute scope="servlet" key="todosInSession" defaultValue="" mode="set" value="[Plugin:RenderParam key="allTodos"]"]

Portlet

Retrieves portlet information including portlet preferences.

[Plugin:Portlet key="preferences" preference="favoriteColors" separator=";"]

URL Generation

Render URLs

Plugin to generate portlet render URLs. See documentation on how you can set parameters within the plugin itself. In the example below I use a FORM GET to add the parameter as query strings in the URL which sets it as a private render parameter by default.  In general the approach below works well for parameters with small values, since there’s a limitation of how large URLs can get.  The example below is for illustration purposes only, you may not want a large amount of Todos as part of the URL or to store Todos in Session 😉

<form id="form1" action="[Plugin:RenderUrl copyCurrentParams="true"]" method="get">
<input name="allTodos" type="hidden" value="{{todos}}" /> 
<button id="persist-todos" type="submit">Save</button>
</form>

Please note that the ActionURL rendering plugin is not available within the Script Portlet.

Resource URLs

This plugin allows you to construct URLs with query parameters as well as proxy the resources through WebSphere Portal’s AJAX proxy. This is very useful when consuming external REST services while complying with the browser’s same origin policy.

[Plugin:ResourceURL url="http://todomvc.com/architecture-examples/angularjs/bower_components/todomvc-common/base.js" proxy="true"]

Others

There are many other tags available, so I highly recommend reading the IBM documentation to find out all you can do.  It’s also possible to create your own custom rendering plugin, which can then be used by the script portlet.   Other personal favorites are the conditional plugins:  EqualsNot EqualsMatchesOtherwise

TodoMVC Code in JSFIDDLE

Click here to see the modifications made to the TodoMVC app.  You should be able to copy/paste into your own Script Portlet and test out some of the features.

Advertisements

One thought on “Up and Running with IBM Script Portlet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s