Download - IBM Connections 5 UI Customization

IBM Connections 5.0 Workshop

Author: Paul GodbyIBM Ecosystem DevelopmentLast Updated: July 29, 2014Duration: 60 minutes

IBM Connections Workshop

Lab Manual

IBM Connections UI Customization

NOTE: In this lab you will be writing code. If you are not a developer (or if you don't feel like typing everything)you can choose to copy/paste the code from the Lab_files solutions located at:

/labs/solutions/ecod.ui.custom

COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED.IBM Ecosystem Development

1


Introduction:IBM Connections supports changing many aspects of the user interface without altering the content of theinstalled web applications. You customize the user interface by overriding the installed files and saving files under a directory named "customization" (that exists outside the application source directories). These files in the customization directory override the corresponding installed files in the application source directories. This customization process uses the WebSphere extended document root facility to allow IBM Connections applications access to files outside of the application web archive (WAR) directory.Separating the customized files from the installed files helps you identify what you have customized, allows you to revert to the default data, and means that updates to default files do not overwrite your customizations.

Description:In this lab, you will learn how to prepare and configure a server for user interface (UI) customization. You will then step through the process of updating HTML, JavaServer Pages, and the default strings used throughout the product. Finally, you will learn how to publish your changes using the wsadmin tool to ensure your customizations are propagated throughout the environment.

Objective:This lab will explain the following tasks:

Server configuration

UI customization

Publishing UI changes for a deployment

.


2

Procedure:

SETUP

Step 1 Review the workshop setup document for instructions on how to ensure all required servers have been started on your SoftLayer device.

Step 2 You may choose to complete this lab on your local machine. However, the instructions will assume you are working locally on the SoftLayer device using a VNC client.

Step 3 Important! Any time you open a new terminal window (Applications → System Tools → Terminal), you should first enter the following commands to switch to the root user. All of the steps documented in this lab will assume you are running with root privileges!

su – root

(Enter <<SSH Password>>)

SERVER CONFIGURATION

Enable the customization debugging capability so that you can view your changes without having to restart theIBM Connections server. Enabling this environment variable forces the application to reload files each time arequest is made, therefore, you see your changes immediately. Because this process is extremely resourceintensive, you should not enable debugging on production systems.

Step 4 In a web browser, navigate to URL: https://<< Host Name >>:9043/ibm/console

Step 5 (If prompted, accept the certificate) Log in with the following credentials

Field Value

User ID wasadmin

Password iBmC0nn3ti0ns

Step 6 On the left, click Environment → WebSphere variables. On the right, from the scope drop-down list, set the scope to the cell where IBM Connections is installed: “Cell=connectionsCell”


3


Step 7 Click New.

Step 8 Enter the following information:

Field Value

Name CONNECTIONS_CUSTOMIZATION_DEBUG

Value TRUE

Step 9 Click OK. After returning to the WebSphere variables page, click Save.


4


Step 10 The directory path declared in another WebSphere variable identifies the base location of the customization directory used by IBM Connections. This variable is set during installation of IBMConnections. Files under this path are processed by IBM Connections to override the installed files. Review this variable to find the location where your customizations should reside.

Field Value

Scope Cell=connectionsCell

Name CONNECTIONS_CUSTOMIZATION_PATH

Value /opt/IBM/Connections/data/shared/customization

Step 11 Click Logout.

Step 12 In a terminal window, restart IBM Connections with the following commands:

service wasservice stop

service wasservice start

Step 13 Continue with the lab to setup your Eclipse project while waiting for the servers to start!

PREPARE A PROJECT USING THE ECLIPSE IDE

The Eclipse IDE for Java EE Developers is free and contains tools for creating Web applications, including editorsfor JavaScript, HTML, CSS, and XML. In this lab, you will use Eclipse to develop your customizations beforecopying them to the appropriate location on the IBM Connections server.

Step 14 In a terminal window, enter the following commands to start Eclipse:

/labs/eclipse/eclipse

Step 15 In the Workspace Launcher window, you will select a location for your development workspace.Enter the following information and click OK.

Field Value

Workspace /labs/workspaces/connections_web

Step 16 If you see the Welcome page, click the “Go to the Workbench” button.


5


Step 17 From the Eclipse file menu, choose File → New → Project...

Step 18 In the New Project dialog window, choose Web → Static Web Project. Click Next.

Step 19 Enter the following information and click Finish.

Field Value

Project name ecod.ui.custom

Step 20 If asked to open a Web perspective, click Yes.

Step 21 From the Eclipse file menu, click Window → Preferences

Step 22 Expand General → Editors → Text Editors

Step 23 On the right, place a check next to the option “Show line numbers” and click OK.


6


The common files used by the Connections UI are installed in the WAR file for each of the Connectionsapplications. You can find the original copies of the UI files you will modify in any of the WAR files.

For example, to modify the Connections footer you could obtain a copy of the file fromC:\IBM\WebSphere\AppServer\profiles\AppSrv01\installedApps\connectionsCell01\Activities.ear\oawebui.war\nav\templates\footer.jsp

The Connections server will use any customized files it finds in the customization directory. See previous stepsfor instructions on how to locate this directory.

The customization directory has sections for each of the individual Connections applications. There is also acommon directory for customizations that are global in scope. There is also a strings directory for modifyingproduct strings and a themes directory for changing style information using Cascading Style Sheets.

Step 24 In the “WebContent” folder of your new project, you can create a sub-directory structure that corresponds to the directory layout required by the Connections customization folder. In this step, you will create corresponding directories in your Eclipse project so you can easily keep track of and manage your customizations. This will also allow you to easily copy your customizations to the server in later steps. Right-click the “WebContent” folder and select NewFolder as appropriate to create the following sub-directory structure:

Step 25 Copy the files that will be customized by importing the files from one of the Connections WAR files into your Eclipse project. In your Eclipse project, right-click the “WebContent/common/nav/templates” folder and select Import...

Step 26 In the Import window, choose General → File System and click Next.


7


Step 27 Browse to the following directory and click OK: /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionsCell/Activities.ear/oawebui.war/nav/templates

Step 28 Place a check mark beside the following files and click Finish.

Field Value

Files header.jsplogin.jsp

Step 29 Repeat the previous steps to import the following files from

/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionsCell/Activities.ear/oawebui.war/nav/templates/menu

to

WebContent/common/nav/templates/menu

Field Value

Files people.jsp

Step 30 In the Eclipse project, right-click “people.jsp” and rename it to “intranet.jsp”

Step 31 Repeat the previous steps to import the following files from

/labs/solutions/ecod.ui.custom

to

WebContent/themes/gen4Theme/images

Field Value

Files toolbar_logo.gif

Step 32 Right-click the “WebContent/themes/gen4Theme” folder and select New → File

Step 33 In the New File window, enter the following information and click Finish.

Field Value

File name custom.css


8

Step 34 Your WebContent directory in the Eclipse project should look like the following. If it does not, review the previous steps and perform the appropriate actions for your project to match.

ADD NEW LINKS TO THE NAVIGATION BAR

Matching the navigation bar to your brand often involves changing the logo image, adding or modifying links, andchanging the colors. You make these changes by adding and copying files to the customization directory andchanging the files to match your brand. Files in the customization directory override the default files.

Step 35 In a web browser, navigate to URL: http://<< Host Name >>/homepage

Step 36 Log in with the following credentials

Field Value

User name dmisawa

Password passw0rd


9

Step 37 Review the default UI links in the upper right

Step 38 Return to your Eclipse project and double-click “header.jsp” in the “WebContent/common/nav/templates” folder to open it in the JSP text editor

Step 39 Modify the links on the right to include a link to some internal support forums. You should placethis link between the user name drop-down menu and the Share box. In the “header.jsp” code,create 3 blank lines starting at line 131. When finished, lines 131,132,133 should all be blank.

Step 40 At line 132, paste the following code. When finished, click Save.

***********************************Begin Modification: MM/DD/YYYY, Author NameDescription: link to support forum***********************************--%><li><a target="_blank" href="http://www.lotus.com/ldd/lcforum.nsf?OpenDatabase">Support Forum</a></li><%--***********************************End Modification***********************************

Step 41 Notice that you have included comments. As a best practice, you should indicate who made the change and when. You should also indicate where the change begins and where it ends. This will help you locate and review your changes in the future.


10


Step 42 In a terminal window, copy the entire contents of the “WebContent” folder in your Eclipse workspace to the customization directory with the following commands (Note: The line ends in a “space” followed by a “period”!):

cd /opt/IBM/Connections/data/shared/customization

'cp' -rf /labs/workspaces/connections_web/ecod.ui.custom/WebContent/* .

Step 43 Leave this terminal window open. You can reuse it in future steps to recopy files and leverage the Linux history feature (press the UP/DOWN key(s) to cycle through the command history) and not have to retype the command each time.

Step 44 Return to the web browser and refresh the page. Usually, you can hold down the “Shift” key while clicking refresh to load an uncached version of the page from the server.

Step 45 View the new link on the right to the support forums

ADD A NEW FLY-OUT MENU

IBM Connections has evolved over time and now uses fly-out menus for navigation. This change to the menusystem provides a cleaner look, conserves screen real estate, and allows IBM to provide more links in the menu.You can easily customize the existing fly-out menus, or add new ones, to provide additional links that areimportant to your organization.

Step 46 In your Eclipse project, double-click “intranet.jsp” in the “WebContent/common/nav/templates/menu” folder to open it in the JSP text editor. As you'll recall, this is a copy of “people.jsp” that you renamed. You will be using the original menu as a template for your new fly-out menu. The screenshot below will help you visualize what was contained in the original file:


11

Step 47 Modify “intranet.jsp” to include company intranet links. Delete lines 21 – 61 to remove the old Profiles application links. Lines 20,21,22 should all be blank. When finished, the code should look like the following image.

Step 48 Paste the following lines into the code starting at line 21. When finished, click Save.

--%><tr><%--

--%><th scope="row" class="lotusNowrap lotusLastCell"><%-- --%><a target="_blank" href="http://www.ibm.com" />IBM</a><%-- --%></th><%-- --%><td class="lotusNowrap lotusLastCell"><%-- --%><a target="_blank" href="https://www.ibm.com/social-business"/>Social Business</a><%-- --%></td><%-- --%></tr><%-- --%><tr><%-- --%><th scope="row" class="lotusNowrap lotusLastCell"><%-- --%><a target="_blank" href="http://www.ibm.com/software/lotus/" />Social Software</a><%-- --%></th><%-- --%><td class="lotusNowrap lotusLastCell"><%-- --%><a target="_blank" href="http://www.ibm.com/software/lotus/products/connections/" />IBM Connections</a><%-- --%></td><%-- --%><td class="lotusNowrap lotusLastCell"><%-- --%><a target="_blank" href="http://www.ibm.com/software/lotus/sametime/" />IBM Sametime</a><%-- --%></td><%-- --%></tr><%--

Step 49 Now that you have created your new fly-out menu, you must link to the menu from the header. Double-click “header.jsp” to open it.


12

Step 50 You will place your new company menu to the right of the default IBM Connections menus. Near the bottom of the file, at line 357, at 2 blank lines so that lines 357,358,359 are all blank.

Step 51 Paste the following code at line 358. When finished, click Save.

***********************************Begin Modification: MM/DD/YYYY, Author NameDescription: link to company intranet fly-out menu

***********************************--%><li id="lotusBannerRenovations" class="lotusFirst"><%--

--%><a onmouseover="dojo.require('lconn.core.header');lconn.core.header.menuMouseover(this);" onclick="dojo.require('lconn.core.header');lconn.core.header.menuClick(this);" onfocus="dojo.require('lconn.core.header');lconn.core.header.menuFocus(this);" role="button" aria-owns="lconnheadermenu-renovations" aria-label="Renovations" src="<lc-cache:uri template="{contextRoot}/nav/templates/menu/intranet.jsp" />" ><%-- --%>Renovations Intranet<%-- --%> <img role="presentation" alt="" src="<lc-cache:uri template="{staticRoot}/nav/common/styles/images/blank.gif" />" class="lotusArrow lotusDropDownSprite">▼<%-- --%></a><%-- --%></li><%-- --%><c:set var="first" value="false" scope="page" /><%-- <%-- ************************************************************************** END Modification **************************************************************************

Step 52 Copy the entire contents of the “WebContent” folder in your Eclipse workspace to the customization directory with the following commands. If you use the same terminal window you used before, you can press the UP arrow to retrieve the command from the history. (Note: The line ends in a “space” followed by a “period”!):

'cp' -rf /labs/workspaces/connections_web/ecod.ui.custom/WebContent/* .


13

Step 53 Refresh the page in your web browser and view the changes.

(OPTIONAL) HOW TO LOCATE CSS STYLES USED BY IBM CONNECTIONS

You can change the look and feel of IBM Connections using Cascading StyleSheet (CSS) modifications. With aproduct this size, there are a large number of CSS rules in place. In this section, you will learn how to identifywhich CSS rules should be modified to change the user interface.

Step 54 All of the style rules can be found in a file called “defaultTheme.css”. Use the Linux file browser to navigate to the following location:

/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionsCell/Activities.ear/oawebui.war/nav/common/styles/defaultTheme

Step 55 Double-click “defaultTheme.css” to open it with a text editor. Review the available style rules. When finished, close the file.

Step 56 There are different ways to identify the style rules used by specific elements in a page. In the following steps, you will learn how to use the Firebug extension in the Firefox web browser.

Step 57 If you do not already have Firefox installed on your workstation, install it from here.

Step 58 Start Firefox. If you do not already have the Firebug extension installed, install it from here.

Step 59 If not already there, navigate to URL: http://<< Host Name >>/homepage

Step 60 Log in with the following credentials (if necessary)

Field Value

User name dmisawa

Password passw0rd

Step 61 Once Firebug is installed, click the bug icon in the upper right portion of the browser.


14

http://www.getfirefox.com/

https://getfirebug.com/


Step 62 This should open the Firebug panel at the bottom of the browser. Next, you will locate the CSSrules that apply to the IBM Connections logo in the upper left portion of the page. In the Firebug console, locate the Inspect icon and click it.

Step 63 The Firebug window should automatically switch to the HTML tab. You also now have the ability to click on any element in the page to select it from the DOM. Click the IBM Connectionslogo in the upper left portion of the page. When it is selected, it should be outlined in blue.

Step 64 In the HTML tab, you should notice that this element has been selected in the HTML DOM.

Step 65 On the right, there should be another series of tabs. If it's not already selected, choose the Style tab. In this window, you will see the CSS style rules that have been applied to the IBM Connections logo. That was easy!


15


Step 66 In the next section, you will learn how to override these style rules using a custom stylesheet.

CHANGE THE LOGO

In most cases, you will want to display your company logo in the IBM Connections user interface. You can easilychange the logo that is used by uploading your new image and providing a few simple Cascading StyleSheet(CSS) modifications.

Step 67 In your Eclipse project, double-click “custom.css” from the “WebContent/themes/gen4Theme” folder to open it with a text editor.

Step 68 Add the following CSS style rules. When finished, click Save.

/* Replace the standard logo with the Renovations logo (a custom image) */

.lotusui30 .lotusBanner .lotusLogo, .lotusui30 .lotusLogin {background-image:

url("/com.ibm.lconn.core.styles.oneui3/gen4Theme/images/toolbar_logo.gif"); height: 33px; width: 153px; margin-top: 10px;

}.lotusui30 .lotusBanner .lotusLogo .lotusAltText {

display: none; }

Step 69 Using the same steps as before, copy the entire contents of the “WebContent” folder in your Eclipse workspace to the customization directory.


16


Step 70 Unlike JSP customizations, you can't simply refresh the page to pick up style changes. You willneed to restart the “common” application in order to see the CSS changes. In a new terminal window, restart the common application with wsadmin using the following commands. In order to save you some typing, and to potentially eliminate errors due to typos, we've provided a workshop script to automate this process for you.

Note: By default, the wsadmin utility in Linux does not give you the ability to leverage the terminal window historyfeature (recycle commands using UP and DOWN arrows). This can make working with this utility in Linux afrustrating experience... The rlwrap readline utility is a free utility for Linux that will enable this functionality for you! Touse it, you simply precede your wsadmin tool invocation with the word “rlwrap” (as seen on line 2 below).

cd /opt/IBM/WebSphere/AppServer/profiles/Dmgr01/bin

rlwrap ./wsadmin.sh -lang jython -user wasadmin -password iBmC0nn3ti0ns

sys.argv = ["Common"]

execfile("/scripts/restartApp.py")

Note: You can view the script, and the wsadmin commands it invokes, by opening a terminal window and issuingthe folowing command(s): gedit /scripts/restartApp.py

Step 71 Leave the terminal open. You will need to restart the common application again...

Step 72 Refresh the page in your web browser and view the changes. (You may need to clear the browser cache)

Note: The ability to use CSS images is broken in the IBM Connections 5.0 eGA code. You MUST apply the 30-day fixes to enable this functionality. This fixes should eventually be rolled into the upcoming CR releases.

Visit the following link for more details: http://www-01.ibm.com/support/docview.wss?uid=swg21676719


17

http://www-01.ibm.com/support/docview.wss?uid=swg21676719


MODIFY THEME COLORS

When matching your corporate brand, you are likely to want to change the overall look of the user interface in IBMConnections, for example, by changing the colors and font styles. As with other user interface customizations, youmake changes to style sheets in the customization directory. Changes made to the styles in the customizationdirectory override the main default theme style rules. In our example, we copy style rules from defaultTheme.cssand add them to the custom.css file, changing some background colors, gradients, and borders. You can find thefull set of colors used in IBM Connections in the defaultTheme.css file.

Step 73 In your Eclipse project, double-click “custom.css” from the “WebContent/themes/gen4Theme” folder to open it with a text editor.

Step 74 Add the following CSS style rules. When finished, click Save.

/* Make the title bar red */

.lotusui30 .lotusTitleBar { background: -moz-linear-gradient(#e9787c 0, #e9787c 1px, #e66166 1px,

#dd292f 50%, #d01d22 50%, #af181d 100%) repeat scroll 0 0 transparent; border-bottom: 1px solid #000000;

}.lotusui30 .lotusTitleBar2 {

background: -moz-linear-gradient(#e9787c 0, #e9787c 1px, #e66166 1px, #dd292f 50%, #d01d22 50%, #af181d 100%) repeat scroll 0 0 transparent;

border-bottom: 1px solid #000000;}


Step 76 Return to your wsadmin terminal window and restart the common application with the following commands:

execfile("/scripts/restartApp.py")

quit

Step 77 Close the wsadmin terminal window. You are finished making CSS changes in this exercise.


18


Step 78 Refresh the page in your web browser and view the changes.

CUSTOMIZE THE LOGIN PAGE

To support a requirement in your organization that each person who logs into IBM Connections agrees to acorporate policy before getting access to the site, you can customize the login page. For example, you mightdisplay a link to the agreement on the login page, include a check box on the page that indicates agreement withthe policy, and configure the log in button to be disabled until the user selects the check box. In addition, youmight want to add informational messages to the left side of the login page, such as maintenance schedules.

Step 79 Log out of IBM Connections by clicking Dan's image (in the upper right) and choose Log Out from the drop-down menu.

Step 80 Review the existing login page and text.

Step 81 In your Eclipse project, double-click “login.jsp” from folder “WebContent/common/nav/templates” to open it with a text editor.


19

Step 82 Review line 60 directing you to use this section to display information.

Step 83 At line 59, add 2 additional blank lines so that lines 59,60,61 are all blank.

Step 84 At line 60, paste the following code to display information to your users. Click Save.

***********************************Begin Modification: MM/DD/YYYY, Author NameDescription: Maintenance schedule notice, important info, etc.

***********************************--%>Next Scheduled MaintenanceFriday, June 1st 2020 11:00PM EST to 11:59PM

EST<%--***********************************End Modification***********************************


Step 86 Refresh the page in your browser and view the changes.

Step 87 You can also perform more advanced customizations to add form validation or some other JavaScript based actions. In the following steps, you will add a click-through agreement that forces the user to acknowledge a particular piece of information before logging in.

Step 88 In the Eclipse project, return to “login.jsp”


20

Step 89 At line 104, add 2 additional blank lines so that lines 104,105,106 are all blank.

Step 90 At line 105, paste the following code. When finished, click Save.

<%--

***********************************Begin Modification: MM/DD/YYYY, Author NameDescription: Maintenance schedule notice, important info, etc.

***********************************--%>

Content uploaded to this site must conform to Renovation's guidelines regarding disclosure of customer information. You must certify you understand these guidelines before logging in.



<input id="confirm" class="lotusCheckbox" onclick="acceptedAgreement(this);" type="checkbox">

<label for="confirm" class="lotusCheckbox">I understand the corporate guidelines regarding disclosure of customer information</label>

<script>

function acceptedAgreement(checkbox) {var button = document.getElementById('submitButton');if (checkbox.checked) {

button.className = "lotusBtn lotusBtnSpecial";button.disabled = false;

}else {

button.className = "lotusBtn lotusBtnSpecial lotusBtnDisabled";

button.disabled = true;}

}</script><%--***********************************End Modification***********************************

--%>


21


Step 91 Now that you have the JavaScript for the click-through agreement in place, you will need to make one more modification for the code to execute as desired. If you review the “acceptedAgreement” function above, you'll notice it looks for a button with an ID of “submitButton”. That ID does not currently exist in the page, so you will need to add it. You willalso want to set the initial state of the log in button to disabled. Add the following attributes to the submit button HTML tag on line 138.

id="submitButton" disabled="true"

Step 92 Click Save. When finished, the first portion of line 138 should look like the following image:


Step 94 Refresh the page and view the changes. Attempt to log in to IBM Connections without the box checked. After failing, check the box and log in. Use the following user credentials.

Field Value

User name dmisawa

Password passw0rd


22


MODIFY DEFAULT PRODUCT STRINGS (OPTIONAL)

In IBM Connections, many strings in the user interface are stored as separate resources in text files. There aretwo categories of string files in IBM Connections: key-value pairs defined in property files (also known as resourcebundles) that are stored in the application JAR file, and strings stored in JavaScript files. To change these userinterface strings in IBM Connections, you find where the string is stored and override the default string.

Step 95 You will need to obtain a copy of the file containing the strings you would like to modify. In this exercise, you will modify some of the Common strings. Those strings can be found in the following JAR file:

/opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionsCell/Common.ear/connections.web.resources.war/WEB-INF/lib/lc.util.web-3.0.jar

Step 96 Inside this JAR file, you can find the common strings in a file named “templates.properties” in directory com → ibm → lconn → core → strings

Step 97 The location of the strings file in this JAR is very important. The location will be used to rename your customized version of the strings properties file so that IBM Connections can loadyour changes and override the default strings. In this lab environment, we've already copied the default strings properties file from the JAR and renamed it appropriately. So, you can just import this file into your project.

Step 98 In your Eclipse project, right-click the “strings” folder and select Import...

Step 99 In the Import window, choose General → File System and click Next.

Step 100 Browse to the following directory and click OK: /labs/solutions/ecod.ui.custom

Step 101 Place a check mark beside the following files and click Finish.

Field Value

Files com.ibm.lconn.core.strings.templates.properties

Step 102 Open the properties file in Eclipse. Take a moment to review the existing strings. This will giveyou a better understanding of some of the types of strings that can be changed in the IBM Connections UI. (Tip: Other “.properties” files contain strings for specific applications.)


23


Step 103 In this example, you will modify the default strings for the login page. Enter the following information and feel free to remove the rest of the key-value pairs. Click Save.

login.connections.heading=Renovations Sociallogin.legal=Licensed Materials - Please see the About page for more information.login.password.label=Intranet Password:login.title=Welcome to Renovations Sociallogin.windowtitle=Log In to Renovations Sociallogin.user.label=Renovations Intranet ID:

Step 104 As in previous steps, copy the contents of your WebContent folder to the Connections customization directory.

Step 105 Return to IBM Connections in your web browser and log out. Review the default UI strings.

Step 106 In the beginning of the lab, you configured the server to allow you to refresh the page to pick upUI changes. Unlike other UI changes, modification of the default UI strings will require a serverrestart regardless of the server configuration.

Step 107 In a terminal window, enter the following commands to restart the server:




24


Step 108 After the servers have restarted, refresh the page in the browser to view the changes.


25

PUBLISH CUSTOMIZATIONS (OPTIONAL)

Customization debugging adversely affects server performance. Now that your customizations are in place, youwill need to disable the debugging capability.

Web pages in IBM Connections are usually cached by the browser to improve performance for users. After youmake your customization, override the cache and force web browsers to download the new copies of thechanged files. By overriding the cache, others will see the customization changes you have made. Using theWebSphere Application Server wsadmin tool, update the version stamp on the appropriate configuration files. Thewsadmin tool and the scripts that you need are included with IBM Connections.

Step 109 In a web browser, navigate to URL: https://<< Host Name>>:9043/ibm/console

Step 110 Log in with the following credentials

Field Value

User name wasadmin

Password passw0rd

Step 111 Click Environment → WebSphere variables. From the scope drop-down list, set the scope tothe cell where IBM Connections is installed: “Cell=connectionsCell01”

Step 112 Click the link for variable: CONNECTIONS_CUSTOMIZATION_DEBUG

Step 113 Set the value to “FALSE”

Step 114 Click OK. After returning to the WebSphere variables page, click Save.


26


Step 115 Logout of the Integrated Solutions Console.

Step 116 Now that you have disabled debugging, you will want to update the configuration timestap to force users browsers to download your new customizations. You can override the cache by updating the timestamp in LotusConnections-config.xml

Step 117 Open a terminal window and update the configuration timestamp with wsadmin using the following commands:

cd /opt/IBM/WebSphere/AppServer/profiles/Dmgr01/bin

rlwrap ./wsadmin.sh -lang jython -user wasadmin -password iBmC0nn3ti0ns

execfile("/scripts/synchNodes.py")

quit

Note: You can view the script, and the wsadmin commands it invokes, by opening a terminal window and issuingthe folowing command(s): gedit /scripts/synchNodes.py

Step 118 Close the terminal window.

Step 119 In order to apply your changes, you will need to restart the server. Issue the following commands:



Summary:

In this lab, you learned how to configure a server for customization. You then walked through the steps ofmodifying various parts of the default IBM Connections UI. Finally, you learned how to publish your changes forall end users. Now that you know how to customize IBM Connections, use these new skills in your next demo,sales engagement, or development project!

Access FREE education on the IBM Collaboration Solutions portfolio of products today!

1. Visit the IBM Greenhouse and create a free account.

Link → http://greenhouse.lotus.com/

2. Visit the IBM Collaboration Solutions Ecosystem Development Community

Link → https://greenhouse.lotus.com/communities/community/icsecod

3. Learn new skills and share these links with your friends and colleagues!


27

https://greenhouse.lotus.com/communities/community/icsecod

http://greenhouse.lotus.com/

Download - IBM Connections 5 UI Customization

Top Related