IBM Digital Experience Version 8.5. WebSphere Portal V8.5. Lab Manual. Script Portlet Lab

Transcription

1 Author: Jan Smolenski IBM Ecosystem Development Last Updated: June 22, 2014 WebSphere Portal V8.5 Lab Manual Script Portlet Lab Prerequisites: IBM WebSphere Portal/WCM v8.5 IBM Script Portlet for WebSphere Portal V1.0 (Update 4) or V1.1 IBM Social Business Toolkit SDK (for Part 2), IBM Connections (for Part 2) 1

2 Table of Contents Introduction:...3 Description:...4 Objective:...4 Procedure:...5 Part 1 - Create Script Portlets Using Using Publicly Available Web Based Resources...7 Part 2 - Create Script Portlets Using IBM Social Business Toolkit API

3 Introduction: IBM Script Portlet for WebSphere Portal is a tool that enables a script developer to quickly develop portlets for WebSphere Portal without having the need to know anything about Java, portlets or the JSR 286 portlet specification. Simply put, this tool allow users to develop portlets using just their knowledge of scripting languages like JavaScript, CSS and HTML. While the script developer doesn't need to know anything about WebSphere Portal or portlets, key WebSphere Portal/ Web Content Management features are available for consumption when and if they are needed: Content targeting based on devices or geographies. Access to user login info. Adaptive design using conditional rendering. Access to shared render params, portlet preferences, live text etc. Key benefits of using IBM Script Portlet for WebSphere Portal: Enables the Line of Business to have more autonomy and less dependencies on Central IT for portlet development, speeding time to market. Dramatically reduces the skill requirements and training needed for script developers to become productive Portal developers. Suited for enterprise by respecting access control and work flow processes and creating reusable assets and contents. Existing portlets developed using IBM Web Experience Factory or IBM Rational Application Developer can be rendered on the page with the portlets developed using IBM Script Portlet for WebSphere Portal. 3

4 Description: In this lab, we will demonstrate some basic techniques for using the IBM Script Portlet for WebSphere Portal to quickly create some meaningful portlet examples. The lab consists of independent parts illustrating creation of script portlets using various JavaScript techniques. One of the goals of this lab is to demonstrate how to use the IBM Social Business Toolkit (SBT) JavaScript APIs in the context of Script Portlet to easily create portlets working with IBM Social Platform. This API comes with the SBT SDK which provides a set of extensible tools and resources for developers who want to incorporate social capabilities into their applications and business processes. Social capabilities include features and functionality that tap into the power of social interactions, business networks, community-based problem solving, and more. The Social platform chosen for this Lab is an existing IBM Connections (v4.5) instance hosted on a separate server and pre-configured for single sign-on (SSO). Both, the WebSphere Portal 8.5 and the IBM Connections share a common user registry based on the TDS LDAP. Objective: This lab will explain the following tasks: How to create simple Script Portlets from the existing free content publicly available on the Web (the Thomson Reuters News web site, for example). How to use the IBM Social Business Toolkit JavaScript APIs to create Script Portlets Note: How to configure the IBM Social Business Toolkit SDK (downloadable from ibmsbt.openntf.org) for use in WebSphere Portal v8.5 is only outlined in this Lab. Please, check the SBT Wiki for more details. 4

5 Procedure: CLIENT SETUP The IBM Softlayer cloud (IaaS) based server environment has been provisioned for you. This is the Linux server environment running WebSphere Portal 8.5. To access the server from your Windows client machine, the browser (either Firefox or Chrome) is required. Most of the lab steps will be performed through the browser. However, for some of the administrative tasks you might also need a direct access to the Linux console (a command line terminal window) such as one provided by PuTTY for example. It is also very helpful to install the SCP client for Windows, such as WinSCP which provides file transfer and basic file management functionality in Explorer like fashion. Both, the PuTTY and the WinSCP tools are free and can be downloaded from the Web. SERVER SETUP IBM WebSphere Portal v8.5 and IBM HTTP Server will need to be running in order to complete this lab. IBM Connections must also be running (on a separate server) to complete scenarios involving accessing this social platform. The WebSphere Portal and IBM Connections have been preconfigured for SSO. In addition, the IBM Social Business Toolkit SDK will need to be downloaded and installed on the server. Specifically, the SBT provided sample web application (EAR) will need to be deployed to the WebSphere Portal server before any IBM SBT JavaScript based APIs can be used inside the Script Portlet. In order to demonstrate the capabilities of the SBT SDK, you will need to seed the IBM Connections server instance with some data. This will allow you to see some tangible results from your SDK API calls in later exercises. Step 1 If you haven't done so already, start IBM WebSphere Portal server. Verify that the server has started by waiting for open for e-business messages before continuing. This may take a few minutes. Step 2 Start IBM HTTP Server 5

6 The Websphere Portal admin user and the WebSphere Application Server admin user is shown below. Field Value User name virtuser Password <password> as provided 6

7 Part 1 - Create Script Portlets Using Using Publicly Available Web Based Resources In a web browser, navigate to URL: Step 1 Step 2 Log in with a user who is also an IBM Connections user. Use the following credentials: Field Value User name fadams Password passw0rd Step 3 In the Portal page top toolbar section, click the icon to open the site menu and select Home from the pulldown to navigate to the Home page. Step 4 The Portal Welcome page should now be shown. In the Portal Toolbar section activate the page Edit Mode by clicking the Edit Mode: OFF/ON switch on the toolbar's right-hand side. Step 5 The Edit Mode should now be active as shown below. 7

8 Step 6 If not open, click the icon in the toolbar to open additional toolbar section containing additional menu options, as shown. Step 7 Click the Create menu option and supply the following information to create a new page titled My Script Page a sibling of the Welcome page. Click the Create Page button when finished. Field Value Page/Application/Content Page Templates Basic Page Settings: - Page title My Script Page - Page insertion point Next sibling of current page 8

9 Step 8 A message confirming successful page creation should appear at the top of the create panel window. Step 9 Keep the create panel open and create another page titled Example 1 this time a child of My Script Page that was just created. Provide the following information and click the Create Page button when finished. Field Value Page/Application/Content Page Templates Basic Page Settings: - Page title Example 1 - Page insertion point Child of current page 9

10 Step 10 A confirmation message should be displayed inside the panel. Keep the panel open. Observe that you can change the page layout, add content to the page or edit the page information directly from the links displayed in the message. By default the new page layout consists of two equally sized columns arranged vertically. Accept the default layout. Proceed to add applications to the Example 1 page. Click the Applications to see all the available applications to choose from. Step 11 To narrow down the choices, type script in the Search area and submit the search (click the magnifying glass icon). Step 12 The Script Portlet application should now be displayed as the only choice. Hover the mouse over the Script Portlet icon and drag it onto the left-hand side column of the page layout while holding the left mouse button down. Alternatively click the + control in the top right corner to add the Script Portlet application to the page. Step 13 A confirmation message should be displayed inside the panel. Dismiss the panel. 10

11 Step 14 The Script Portlet should now be visible on the Example 1 page. Click the Edit link inside the portlet to open the Script Portlet Editor allowing you to add your code on the fly. Step 15 The Script Portlet Editor panel is divided into 4 sections supporting 5 panes: HTML, Head, JavaScript, CSS and Preview panes. The first 4 panes let you add code while the Preview pane displays the results after you save your editing. The HTML and Head panes share the same space and you can switch between them by selecting one of the displayed links. Each of the panes can be maximized to take up the full Editor panel. The Preview pane can be popped out into a separate window. In addition, there is the Dependencies pane that is accessible through the Dependencies button. In the Dependencies section you can specify external resource names for both the JavaScript and the CSS resources, such us third party libraries that would be added to the Portal page HTML markup. 11

12 Step 16 Click the <head> link of the HTML <head> pane (section). It will allow you to enter the markup that will be placed above the markup entered in the JavaScript and HTML panes. We will do this in the next few steps. Step 17 In the first scenario we will demonstrate how to adapt some existing widget to display its content inside the Script portlet. To make this interesting, the content we want to display is about the current news. Instead of using news feeds, we are going to use an existing freely available widget that is posted by one of the leading news organizations. To proceed, open another browser window or a browser tab. Step 18 If you ran an internet search using search terms such as news widget (in Google search, for example), you would find a set of free news related widgets on the Thomson Reuters website at Navigate to this URL. From the list of available Reuters' widgets pick the Top News link found in the Video column. Step 19 The Reuters Latest Top News Video widget should now be displayed with the Get This Widget instructions displayed underneath. Copy all the code shown under the Embed Code: label to the clipboard. 12

13 <script src=" buzzid=81520&apitoken=05a8533ddd6644a5a19b33588d41e8f5&trkp=&trkm=49870a db c38ef06" type="text/javascript"></script> Step 20 Paste the copied code, including its <script>...</script> surrounding tags into the <head> pane of the Script Portlet Editor panel that was opened earlier, starting from line 1. Step 21 Click File Save at the top of the Script Portlet Editor panel. Step 22 Observe the Preview pane of the Script Portlet Editor panel. Wait a couple of seconds results of executing this external JavaScript code should be displayed there. 13

14 Step 23 Close the Script Editor panel and switch to the page View mode to make sure the Top News widget is still correctly displayed (note the latest news videos change frequently and the displayed content can be different even from what's been shown in the Preview). Note: You need to have the Flash Player installed in order to be able to play videos. 14

15 Step 24 In the earlier editions of the Script Portlet when running the above scenario you could encounter an error about jquery not defined (see below). If you see this error, continue with the following steps. Otherwise skip this section and go to the second portlet creation steps (in or around the step 34). Step 25 To find out more details about this error, switch to a full screen Preview mode by clicking the full screen icon in the upper right corner of the Preview pane. Step 26 If using Firefox browser, click F12 to activate the Firebug debugging tool and reload the page. Click Firebug's Console Errors to get the more refined error description. As you can see, the error indicates that the jquery library resource pointed to by the indicated URL was not found or could not be loaded. Step 27 Close the Firebug section and click Preview icon to go back to the Script Editor. 15

16 Step 28 In the Script Portlet Editor's HTML <head> pane, click the <head> link. Step 29 Insert the following <script> element in front of the previously inserted code. <script src=" The above <script> tag element will load the missing jquery library from the indicated site. The jquery library is a single JavaScript file that can be downloaded and hosted locally or can be accessed from the jquery Content Delivery Network (CDN) as specified in this example. Click Save to save your changes. Step 30 You should now see the Reuters widget displayed in the Preview pane. Note that you need to have the Flash Player installed in order to be able to play videos. Step 31 Close the Script Editor panel and switch to the page View mode to make sure the widget is still correctly displayed (note the latest news videos change frequently and the displayed content can be different even from what's been shown in the Preview). 16

17 Step 32 Activate the page Edit mode again. Step 33 Add another Script Portlet instance to the Example 1 page. To do that, click the Create tab in the toolbar to open the panel. Step 34 Click Applications to get the available applications to choose from. 17

18 Step 35 The Script Portlet application icon should be displayed (the previously issued search result is still in effect). Step 36 As before, hover the mouse over the Script Portlet icon and drag it onto the right-hand side column of the page layout while holding the left mouse button down. Alternatively click the + control in the top right corner to add the Script Portlet application to the page. Step 37 Step 38 If the new portlet instance appears in the left-hand side column, underneath the existing Reuters Top News portlet then use the portlet Display menu to move it to the right. Click the portlet Display menu to open a list of available selections. 18

19 Step 39 Select Move Right to move the new portlet to the right-hand side column. Step 40 Click the Edit link inside the Script Portlet to start adding the code. Step 41 This time we will insert one of the free finance widgets available on the Web. Open another browser window (or a tab) and navigate to 19

20 Step 42 Click the Stock Quotes widget link, as shown. Step 43 Click the Stock Quotes Widget link 20

21 Step 44 On the Google Add this gadget to your webpage, set the gadget's display width to 360 pixels and click the Get the Code button at the bottom. 21

22 Step 45 Copy the generated HTML code fragment displayed at the bottom (below the Get the Code button. <script src="// url= %5EFTSE%2C%5EGDAXI%2C %5EFCHI&up_chart_bool=1&up_font_size=12&up_symbol_bool=0&up_c hart_period=0&up_refresh_secs=30&synd=open&w=360&h=300&ti tle=stock+quotes&border=%23ffffff%7c3px%2c1px+solid+ % &output=js"></script> Step 46 Go back to your Portal session browser window and paste the code into the <head> pane of the Script Portlet Editor panel, as shown below. Click File Save. 22

23 Step 47 The Stock Quotes widget/gadget should now appear in the Preview pane. Step 48 Dismiss (close) the Script Portlet Editor and observe two Script portlets displayed side by side. Step 49 Switch to the page View mode to make sure the page is rendered properly. 23

24 Step 50 This concludes the Part 1 of the lab where we demonstrated the use of some publicly available and free of charge JavaScript based widgets that could be used inside the Script Portlet. 24

25 Part 2 - Create Script Portlets Using IBM Social Business Toolkit API In the Part 2 of this Lab we will use the IBM Social Business Toolkit (SBT) JavaScript APIs to easily build functional portlets utilizing the Script Portlet technology provided in WebSphere Portal/WCM v8.5. The Toolkit provides a rich set of high level Social APIs that are wrappers for the existing lower level REST based services (APIs) supported in IBM Connections and IBM SmartCloud For Social Business. The Toolkit provides both the JavaScript and Java based language support and the higher level APIs are much easier to use than the native APIs, thus relieving programmers from dealing with more tedious aspects of using REST services directly, parsing XML documents, strings, etc. The SBT environment has already been prepared for you so that you can concentrate on writing the code. The prerequisites and SBT configuration steps are highlighted below. The latest IBM Social Business Toolkit SDK (SBT SDK) must be downloaded from ibmsbt.openntf.org and unzipped to a separate directory The SBT sample web application named sbt.sample, packaged in the EAR file supplied with the SBT SDK and located in the sbtsdk/samples/ear/sbt.sample-<version/date>.ear, where <version/date> is the SDK build specific suffix, must be installed and deployed to the WebSphere Portal server. The sbt.sample EAR consists of 5 web modules (.war) files with the following default context root values: /sbt.sample.web (SBT SDK samples module ) /sbt (SBT core module) /sbt.dojo180 (Dojo Toolkit module) /sbt.bootstrap211 (Bootstrap module) /sbt.jquery182 (jquery module) Note: Both the Dojo Toolkit and jquery JavaScript libraries are supported as indicated by the modules listed above. However, as of the SBT SDK build version dated March 2014, the jquery support is not yet provided for certain UI related SBT functions (Controls/Views). If the HTTP (Web) server is configured for accessing WebSphere Portal, the above listed context root values must be specified in the plugin-cfg.xml file for this Web server (see the URIGroup section in the plugin-cfg.xml ). 25

26 A J2EE URL resource for the SBT properties configuration file must be defined in the WebSphere Application Server using JNDI name of url/ibmsbt-sbtproperties. This definition must point to an external sbt.properties configuration file with properly configured SBT endpoints. Note: The sbt.properties configuration file used in this Lab has been prepared for using two endpoint types: the Basic authentication and the LTPA token authentication for SSO. The basic authentication endpoint name is connections and it is the SBT default. The SSO endpoint name is connectionssso and it must be explicitly specified to override the default. Both endpoints have been configured to access the IBM Connections platform that the WebSphere Portal was configured with. As noted earlier, the SSO has been setup between Portal and Connections. The sbt.sample application must be started on the WebSphere_Portal Portal server and be active before any of the SBT JavaScript APIs can be used. Note: To verify the sbt.sample web application is running, open the browser and specify the following URL to access the application: Step 1 Before using the SBT JavaScript API inside your Script Portlet, you should review some of the SBT JavaScript code snippet samples provided with the sbt.sample application. If you are new to the SBT technology, it would give you an idea as to what can be done with the Toolkit and how much (or rather how little) efforts are required to build complex and visually appealing applications. To explore the SBT, open another browser window and use the following URL to access the application: Step 2 The SBT sbt.sample application organizes code snippets in the explorer-like interface. You can pick a code snippet from various categories listed in the left-hand side navigation panel. The code will be displayed in the top panel on the right and results of running it in the panel beneath it. You can modify the code to suit your needs. After testing the code you can then use it often 'as-is' in your applications. Navigate to Social Communities Get My Communities. 26

27 Step 3 Since the sbt.sample application was configured to interface with the IBM Connections instance, you will be prompted to enter Connections user credentials first. After a successful login, the list of communities the user is a member of should be displayed in the results panel (a sample output is shown below). Note the JavaScript source code is displayed on the JavaScript tab and the HTML code used for this sample is displayed on the HTML tab. Use the following credentials: Field Value User name fadams Password passw0rd 27

28 28

29 Step 4 Feel free to explore other categories, especially those samples that should return some nonempty results for your user id. Check the Controls sub-folders for code examples utilizing the Toolkit provided UI controls that can help you produce advanced HTML/CSS formatting with very few lines of JavaScript code. Step 5 Leave the sbt.sample web application session browser window open and go back to your existing WebSphere Portal browser window/tab. Step 6 Activate the page Edit Mode if not active. Select My Script Page tab (created in Part 1) and create SBT Example 2 page using the Last child of current page insertion point, as shown. Click Create Page button. Field Value Page/Application/Content Page Templates Basic Page Settings: - Page title SBT Example 2 - Page insertion point Last child of current page 29

30 Step 7 A confirmation message should be displayed inside the panel. Keep the panel open. Proceed to changing the page layout by clicking the Change the page layout link. Step 8 From the available page layouts, select the 1 column layout. Step 9 A message confirming changing of the layout should be displayed. Keep the panel open and click the Create tab. Step 10 Proceed to add applications to the SBT Example 2 page. Click the Applications to add the Script Portlet to the page. 30

31 Step 11 The Script Portlet application icon should be displayed (the previously issued search result is still in effect). Hover the mouse over the Script Portlet icon and drag it onto the dotted area on the page while holding the left mouse button down. Step 12 Click the Edit link inside the Script Portlet to open the Script Portlet Editor. Step 13 Start adding your code. In this scenario we will take advantage of the existing code snippets provided by the sbt.sample application. To get the code, switch back to the sbt.sample browser window ( and navigate to Social Communities Get My Communities 31

32 Step 14 This is the same code that you inspected earlier. Copy all the code displayed in the JavaScript tab as-is. To do that, right-click inside the panel and click Select All from the pop-up menu. Right-click again and select Copy. This code will be pasted into the Script Portet Editor JavaScript pane in the next step (for your convenience the code is included below and can be copied from this document instead). 32

33 require(["sbt/connections/communityservice", "sbt/dom"], function(communityservice,dom) { var createrow = function(title, communityuuid) { var table = dom.byid("communitiestable"); var tr = document.createelement("tr"); table.appendchild(tr); var td = document.createelement("td"); td.appendchild(document.createtextnode(title)); tr.appendchild(td); td = document.createelement("td"); td.appendchild(document.createtextnode(communityuuid)); tr.appendchild(td); }; var communityservice = new CommunityService(); communityservice.getmycommunities().then( function(communities) { if (communities.length == 0) { dom.settext("content", "You are not a member of any communities."); } else { for(var i=0; i<communities.length; i++){ var community = communities[i]; var title = community.gettitle(); var communityuuid = community.getcommunityuuid(); createrow(title, communityuuid); } } }, function(error) { dom.settext("content", "Error code:" + error.code + ", message:" + error.message); } ); } ); Step 15 Go back to the WebSphere Portal browser window and Paste the code into the JavaScript pane of the Script Portlet Editor panel. The code added here will be surrounded by <script> </script> tags that are automatically inserted by the Editor when the pane is saved. Hint: For better clarity expand (maximize) the pane by clicking the JavaScript Click Save and click icon: icon to restore the default size. 33

34 Step 16 Switch back to the sbt.sample browser session window. Click the HTML tab and copy all the displayed code. This HTML markup will be pasted into the Script Portet Editor HTML pane in the next step (for your convenience the code is included below and can be copied from this document instead). <div role="main"> <table class="table table-bordered" id="communitiestable"> <tr class="label label-info"> <th>title</th> <th>id</th> </tr> </table> </div> 34

35 Step 17 Go back to the WebSphere Portal browser window and Paste the copied markup into the HTML pane of the Script Portlet Editor panel. Make sure to select the HTML input focus (not the <head>). Click File Save. You should not see results in the Preview area yet, because required SBT JS files (resources/libraries) have not been loaded on that page. 35

36 Step 18 To finish coding you need to specify all the required resources the SBT code is dependent upon that should be loaded before your HTML markup can be rendered properly. Those resources should be loaded and become available before the rest of the page (DOM) is loaded. Those resources include required JavaScript files (modules) and links to external style sheets (CSS) documents used in the samples. Tip: For any SBT code sample found in the sbt.sample application, the easiest way to determine the required external JavaScript and CSS style sheets resources is to execute the code in a separate browser page and use the View Page Source browser functionality to examine the generated HTML's <head> section. To execute the function in a separate page, click the javascriptpreview.jsp link that is present under the results panel of the sbt.sample application. The code shown below lists the required SBT dependencies for this particular example. The code consists of <script> and <link> tags. The Dojo toolkit is being used for the JS library and several CSS resources are also needed. We will add those dependencies in the following steps. <script type="text/javascript" src="/sbt.dojo180/dojo/dojo.js"></script> <script type="text/javascript" src="/sbt.sample.web/library? lib=dojo&ver=1.8.0"></script> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojox/grid/enhanced/resources/claro/enhancedgrid.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojox/grid/enhanced/resources/enhancedgrid_rtl.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.bootstrap211/bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.bootstrap211/bootstrap/css/bootstrap-responsive.css"> Step 19 The Script Portlet version used in this lab provides two ways of dealing with external CSS resources and JavaScript resources/dependencies containing scripts that are called (i.e. composed of functions) or triggered by events. One way is to add them in bulk using the Editor's <head> pane. If you do that, the inserted markup will end up in the Portal page <body> section, above all the other markup added by the Script Portlet Editor. The other approach is to add them using the Dependencies section, found here: This approach results in the same markup placement as the <head> pane approach. It differs only in the way those resource references are entered into the Editor. The latter approach is more convenient for adding them one-by-one, because all you need to type is a resource reference itself. All the necessary HTML tags and attributes are automatically generated by the Editor. Another words you don't need to be concerned about using the proper syntax of the <script> and <link> tags as the Editor takes care of it. 36

37 Note: It is not recommended to mix those two approaches. If the <head> pane and the Dependencies sections are used in the same portlet, the current Script Editor's implementation ignores the entries provided in the Dependencies section. In this scenario we will use the former, <head> pane approach. It will save us the typing time because we already have a valid HTML markup containing the list of all external CSS and JavaScript references needed by this portlet. To proceed, copy the list shown in the preceding step as-is to the clipboard. Step 20 Click the <head> link in the Script Portlet Editor HTML <head> pane to open the pane (click the icon to maximize the pane for easier viewing). Step 21 Paste the copied markup starting with line 1. The resulting <head> pane is shown below. When done, click File ->Save and click icon to restore the default size. 37

38 Step 22 You should now see results displayed in the Preview area. The results should be similar to the output returned from running this code inside the sbt.sample application at the beginning of the Part 2. Tip: If the Preview pane remains empty, you should activate the browser's debugging tools, such as Firebug for the Firefox browser to help you isolate the problem. Note: Before any results are displayed in the Preview pane you may be prompted to login to IBM Connections. The login prompt will be displayed if you had not yet logged in to Connections with this user ID using the sbt.sample app. This is because the default SBT endpoint (named connections ) is a basic authentication endpoint that is not aware of the SSO configuration between Portal and Connections it does not support SSO LTPA. If you are prompted, enter fadams/passw0rd for the credentials and click the Log in button. In the later part of this Lab we will switch endpoints to use the connectionssso endpoint making this issue to go away. The first iteration of our SBT based Script Portlet is now finished. From now on, we will refer to this portlet as My Communities portlet. Step 23 Close the Script Portlet Editor and switch to the page View Mode to make sure the My Communities portlet is still rendered properly. 38

39 Step 24 Switch back to the page Edit Mode and open the Script Portlet Editor again by clicking the Edit link inside the portlet. Step 25 Expand (maximize) the JavaScript pane and take a closer look at the code. 39

40 Lines provide the main logic for accessing the Social platform (IBM Connections) using the IBM SBT API. The code instantiates the CommunityService object and issues getmycommunities() API call to obtain a list of communities a current user is a member of. By default a maximum of 10 communities are returned. The code iterates through returned results and for every community from the list, it extracts the community title and the community UUID. Finally, it invokes a local 'createrow' function (declared in lines 3-13) to dynamically modify the DOM by appending new table rows (table id= communitiestable ), a skeleton of which was declared in the HTML (see the HTML pane of the Script Portlet Editor). It is essential to mention that SBT supports the JS Promises pattern to deal with the asynchronous nature of underlying lower level services and for reasons of code readability and maintainability. Asynch calls return a JS Promise object which implements the 'then()' method taking two arguments. The first argument passed to then() is a function called for a success and the second argument is a function called for an error. In the line 16 of the code, you can see the then() method invocation in the context of the Community Service SBT service. If the call to get communities was successful, the first function would be executed. If it was a failure, the second function would be invoked. 40

41 Step 26 Let us modify the code to return communities sorted by the number of community members in a descending order. Another words, the most popular in terms of membership would be at the top of the list. Also, expand the list size to 15 entries. Modify line 16 by passing a JSON style argument to the getmycommunities() SBT method, as shown. Save your changes and check results in the Preview area. communityservice.getmycommunities({ps:15,sortby:"count",sortorder:"desc"}).then( Step 27 You will now make a few more changes to the JavaScript code and the HTML markup of this portlet. Our ultimate goal is to demonstrate a multi-portlet page consisting of at least two instances of Script Portlet portlets implementing the Public Render Parameters for inter-portlet communication. The My Communities portlet that was just implemented will be used to generate render parameters and some other, not yet created Script Portlet would be consuming those parameters. First, modify the My Communities portlet to display an HTML FORM containing a 2 column table with radio buttons in the first column and community titles in the second. When a user selects a radio button next to a community title, the selected community UUID would be used as a public render parameter, thus allowing other portlets to receive this UUID and act accordingly. In the Script Portlet Editor that should still be opened, expand (maximize) the HTML pane and replace the code with the following HTML code. Click File Save when done. <h2>my Most Popular Communities</h2> <span id="_sbtmessage_1"></span> <div role="main"> <form id="radioform1" action='[plugin:renderurl copycurrentparams="true"]' method="post"> <table class="table table-bordered" id="communitiestable"> <caption>make a selection:</caption> <tr class="label label-info" > <th></th> <th>community Title</th> </tr> </table> </form> </div> 41

42 Line 4 creates a FORM element. Inside the form (line 4 12 ) is a skeleton of a table with just a header. The table rows and table data elements will be created dynamically (as before) by the JavaScript code. The form action element: action='[plugin:renderurl copycurrentparams="true"]' specifies the render URL plug-in that is used to set render parameters. The attribute copycurrentparams determines whether the current state and the parameters that are encoded in the state are to be copied into the new URL. The default is false which is not suitable in our case. The value of this attribute must be true for our scenario to work properly. 42

43 Step 28 Restore the default size of the Script Portlet Editor panels and expand (maximize) the JavaScript pane. Replace the current code with the code shown below. Click File Save when done. require(["sbt/connections/communityservice", "sbt/dom"], function(communityservice, dom) { var createrow = function(title, communityuuid) { var table = dom.byid("communitiestable"); var tr = document.createelement("tr"); table.appendchild(tr); var td = document.createelement("td"); var input = document.createelement("input"); input.type = "radio"; input.name = "CUSTOM_CONTEXT"; input.value = communityuuid; var uuid = '[Plugin:RenderParam key="custom_context" defaultvalue=""]'; if( uuid == communityuuid ){ input.checked = true; //alert("checked=" + uuid); } input.setattribute('onclick',"rowsubmit();"); td.appendchild(input); tr.appendchild(td); td = document.createelement("td"); td.appendchild(document.createtextnode(title)); tr.appendchild(td); }; var communityservice = new CommunityService(); communityservice.getmycommunities({ ps: 10, sortby:"count", sortorder:"desc" }).then( function(communities){ if (communities.length == 0) { dom.settext("content", "There are no public communities."); } else { for(var i=0; i<communities.length; i++){ var community = communities[i]; var title = community.gettitle(); var communityuuid = community.getcommunityuuid(); createrow(title, communityuuid); } } }, function(error){ dom.settext("content", "Error code:" + error.code + ", message:" + error.message); } );} ); function rowsubmit(){ var myform = document.getelementbyid('radioform1'); myform.submit(); return false; } 43

44 The main logic for accessing the Social Platform to get a list of 'My' communities using SBT API has not changed. It has just moved to lines The createrow() function (line 3 23) was modified to dynamically create radio buttons (html <input type= radio > ) in the first column of the communities table. The community titles are now created in the second table column. The community UUIDs are not displayed anymore. They are added to the radio button values so that when a given radio button is selected the onclick function named rowsubmit() would be triggered to submit the form. 44

45 Below is a snapshot of one of the html table row <tr>...</tr> element that the createrow() function has generated in a sample run. The critical piece of code that allows for accessing public render parameters is the render parameter plugin. It is referenced in the line 12 of the JavaScript code: The render parameter plug-in tag: [Plugin:RenderParam key="custom_context" defaultvalue=""] coded above, uses the key attribute to specify the name of the render parameter to be retrieved and the defaultvalue attribute to specify the value that you want to be returned if the addressed render parameter does not exist or has a value of null. The CUSTOM_CONTEXT is the custom context public render parameter of Web Content Manager predefined ( in the portlet.xml ) and ready for use in the Script Portlet. Step 29 Restore default size and observe the Preview pane. Returned results should now be displayed differently. The table will consist of rows containing radio buttons and community titles. 45

46 Step 30 Close the Script Portlet Editor to see results on a portal page. Select any of the radio buttons and notice the page refresh resulting from the form being submitted. Step 31 Let us now introduce another instance of the Script Portlet on the same page. Change the page layout, by clicking Page Layout in the toolbar and select 2 column equal for the new layout. Step 32 A layout change confirmation message should appear in the panel. Click Create Applications to insert another instance of the Script Portlet to the right-hand side column. The Script Portlet application icon should be displayed (the previously issued search result is still in effect). Hover the mouse over the Script Portlet icon and drag it onto the dotted area in the right-hand side column on the page while holding the left mouse button down. 46

47 Step 33 Click Edit inside the newly added portlet to open the Script Portlet Editor. Step 34 Our second Script Portlet is also going to be modeled after one of the SBT samples available in the sbt.sample application. We will refer to this portlet as Community Members portlet. To get the code, switch back to the sbt.sample browser session window ( and navigate to Social Profiles Controls Community Members 47

48 This code displays community members. We will adapt the code to display community members of a community with a given UUID. This UUID would be obtained from the public render parameters created by the My Communities portlet. Step 35 Copy all the code displayed in the JavaScript tab as-is. To do that, right-click inside the panel and click Select All from the pop-up menu. Right-click again and select Copy. This code will be pasted into the Script Portet Editor JavaScript pane in the next step (for your convenience this code is also included below). require(["sbt/dom", "sbt/connections/controls/profiles/profilegrid","sbt/connections/communityservice"], function(dom, ProfileGrid, CommunityService){ var id = ""; var communityservice = new CommunityService(); var promise = communityservice.getpubliccommunities({}); var self = this; promise.then( function(communities) { if(communities.length < 0){ dom.settext("content", "There are no public communities"); }else{ var id = communities[communities.length-1].getcommunityuuid(); var grid = new ProfileGrid({ type : "communitymembers", communityuuid : id }); dom.byid("griddiv").appendchild(grid.domnode); grid.update(); } }, function(error) { dom.settext("content", error); } ); }); 48

49 Step 36 Go back to the WebSphere Portal browser window and Paste the code into the JavaScript pane of the Script Portlet Editor panel. Hint: For better clarity expand (maximize) the pane by clicking the JavaScript: Click File Save and click icon displayed next to icon to restore the default size. 49

50 Step 37 Switch back to the sbt.sample browser session window. Click the HTML tab and copy all the displayed markup (it should just contain one <div></div> tag). This markup will be pasted into the Script Portet Editor HTML pane in the next step. <div id="griddiv"></div> Step 38 Go back to the WebSphere Portal browser window and Paste the copied code into the HTML pane of the Script Portlet Editor panel. Make sure to select the HTML input focus. Click File Save. Step 39 To finish coding you need to specify all the required external references for resources the SBT code is dependent upon, similarly to what you did in the first Script portlet. In this case you can use the same markup that was already added into the <head> pane of the My Communities portlet already defined on this page. Those dependencies are in both cases the same and are shown below again for your convenience. Copy the code and add it to the <head> pane of the current portlet. Click File Save and close the Script Portlet Editor. Important: Since all required resources were already specified in the first portlet, the second portlet should function properly without adding anything. This is because both portlets are deployed to the same portal page and the resources supporting the first portlet would have been already loaded by the time the second portlet is rendered. Those resources would be available to all Script portlets placed on that page. Once Script portlets are completed, you should cleanup the <head> pane to avoid loading duplicate resources. Also have in mind that in production environment you would move those resources into the Portal theme module used for displaying your page. 50

51 <script type="text/javascript" src="/sbt.dojo180/dojo/dojo.js"></script> <script type="text/javascript" src="/sbt.sample.web/library? lib=dojo&ver=1.8.0"></script> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojox/grid/enhanced/resources/claro/enhancedgrid.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.dojo180/dojox/grid/enhanced/resources/enhancedgrid_rtl.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.bootstrap211/bootstrap/css/bootstrap.css"> <link rel="stylesheet" type="text/css" title="style" href="/sbt.bootstrap211/bootstrap/css/bootstrap-responsive.css"> Step 40 The results displayed in the Community Members portlet show members of a Public community returned by the SBT API call. We will modify this code in the next few steps. 51

52 Step 41 You will now make a few changes to the JavaScript and the HTML code of the Community Members portlet. As mentioned before, our goal was to demonstrate a multi-portlet page consisting of instances of Script Portlet implementing the Public Render Parameters for the inter-portlet communication. The My Communities portlet that was deployed earlier implemented the 'Community UUID' as the public render parameter. The Community Members portlet which you are about to change will be modified to receive this render parameter and use it to return community members for the selected UUID. First, we will modify the Community Members portlet HTML section, to include the title as well as placeholders for the community title and for the error message (if any) that could be returned. Open the Script Portlet Editor for the Community Members portlet, expand (maximize) the HTML pane and replace the code with the following HTML code. Click File Save when done. <h2 >Community Members</h2> <span id="_sbtmessage_2"></span> <span id="communitytitle" ></span><br> <div id="griddiv"></div> Step 42 Restore the default size and (optionally) insert a CSS styling elements in the CSS pane, as shown. The style affects the element with the communitytitle id. Click File Save. 52

53 Step 43 Restore the default size of the Script Portlet Editor panels (if needed) and expand (maximize) the JavaScript pane. Replace the current code with the code shown below. Click File Save when done. require(["sbt/dom", "sbt/connections/controls/profiles/profilegrid", "sbt/connections/communityservice"], function(dom, ProfileGrid, CommunityService){ var uuid = '[Plugin:RenderParam key="custom_context"]'; //alert("uuid:" + uuid); if(uuid == ''){ dom.byid("griddiv").innerhtml=''; dom.settext("communitytitle", "Community not selected"); return; } try { var communityservice = new CommunityService(); var promise = communityservice.getcommunity(uuid); promise.then( function(community) { dom.settext("communitytitle", community.gettitle()); var grid = new ProfileGrid({ type : "communitymembers", communityuuid : uuid }); dom.byid("griddiv").appendchild(grid.domnode); grid.update(); }, function(error) { dom.settext("_sbtmessage_2", error); } ); }catch(err){ dom.settext("_sbtmessage_2", "Error code:" + err.code + ", message:" + err.message); return; } } ); 53

54 The modified version of the Community Members portlet main javascript code receives the CUSTOM_CONTEXT render parameter containing the community UUID (line 4) that was selected in the My Communities portlet and uses this UUID to invoke the SBT getcommunity() API call, passing the UUID for the method's argument (line 13). After the community is retrieved, the community title is extracted and the most importantly, the SBT grid (ProfileGrid) UI control is invoked to build a list of the community members. The grid containing this list includes paging and sorting controls for easy and flexible viewing. Finally, the grid is inserted dynamically into the DOM using the griddiv <div> anchor that was included in the HTML. 54

55 Step 44 Close the Script Portlet Editor to see the page with both portlets. Test the interaction by selecting different communities. Switch to the page View Mode to test the portlets again. Note the Community Members portlet reacting to the radio buttons selected in the My Communities portlet. A radio button must be selected in order to see any results. Step 45 One of the easily spotted issue with the Community Members portlet code is that the members photos are not displayed. In their places you see gray silhouettes. This is caused by a bug in the SBT SDK build used in this lab. To make these silhouettes disappear, open the Script Portlet Editor and insert an additional CSS styling into the CSS pane. The shown below CSS selector and styling will hide the visibility of every <img> element whose src= attribute value contains the substring "photo.do". Click File Save and close the editor to see the changes taking effect. Note: Hiding <img> elements using the CSS style, as coded below, could cause undesirable effect of potentially hiding other images that met the same criteria. You can always refine your selector if such a possibility exists. The selector used here is just an example of what could be done. img[src*="photo.do"]{ visibility: hidden; } 55

56 Step 46 Although both portlets are working as expected, there is one more change that should be made in the SBT JavaScript code. As stated earlier, the default SBT endpoint named connections supports the Connections Basic authentication. This does not provide the single sign-on (SSO) support and forces Portal users to enter their credentials when they access our SBT portlets for the first time, despite the fact that the SSO has been configured between Portal and Connections. For the SSO support to work properly when using SBT API, the endpoint type used must be changed. The endpoint that supports SSO is named connectionssso. In the sbt.properties configuration file this endpoint's URL was set to the hostname of our IBM Connections server. Changing the endpoint involves adding a JSON style argument to some of the SBT JavaScript methods. The format of this argument is shown below. {endpoint: "connectionssso"} Step 47 Switch to the page Edit Mode and click Edit inside the My Communities portlet to open the Script Portlet Editor. Step 48 In the Editor's JavaScript pane, edit line 24 to include a JSON style argument in the CommunityService() constructor method, as shown. Click File Save and close the Script Portlet Editor. 56

57 Step 49 Click Edit inside the Community Members portlet to open the Script Portlet Editor. Step 50 In the Editor's JavaScript pane, edit line 12 to include a JSON style argument in the CommunityService() constructor method, as shown. Step 51 In the same JavaScript pane, insert a line after the current line 17 containing a JSON style argument, as shown. Click Save and close the Script Editor. Step 52 The page should display both portlets as before. To test the SSO, log out from the Portal and clear the browser cache/cookies. Re-login using fadams/passw0rd credentials. Step 53 Navigate to the SBT Example 2 page and test the portlets. You should not be challenged to enter user credentials. Step 54 Congratulations! The lab is now concluded. 57

58 Summary: In this lab, you had an opportunity to familiarize yourself with the latest WebSphere Portal Script Portlet technology. You also learned how to use the IBM Social Business Toolkit JavaScript API in the context of a Script Portlet to build portlets accessing the IBM Social Platform, such as IBM Connections. 58

59 Copyright IBM Corporation 2014 The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. This information is based on current IBM product plans and strategy, which are subject to change by IBM without notice. Product release dates and/or capabilities referenced in these materials may change at any time at IBM s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, and ibm.com are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at Copyright and trademark information at