IBM Connections 5 UI Customization

Download IBM Connections 5 UI Customization

Post on 08-May-2015

2.868 views

Category:

Software

7 download

Embed Size (px)

DESCRIPTION

A hands on lab that will teach you how to customize the IBM Connections user interface. You will learn how to enable customization debugging, how to change JSPs, update the look and feel using CSS, and more!

TRANSCRIPT

  • 1.IBM Connections 5.0 Workshop Author: Paul Godby IBM Ecosystem Development Last Updated: July 29, 2014 Duration: 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

2. IBM Connections 5.0 Workshop Introduction: IBM Connections supports changing many aspects of the user interface without altering the content of the installed 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 . COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 2 3. IBM Connections 5.0 Workshop 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 ) SERVER CONFIGURATION Enable the customization debugging capability so that you can view your changes without having to restart the IBM Connections server. Enabling this environment variable forces the application to reload files each time a request is made, therefore, you see your changes immediately. Because this process is extremely resource intensive, you should not enable debugging on production systems. Step 4 In a web browser, navigate to URL: https://>: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 COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 3 4. IBM Connections 5.0 Workshop 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. COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 4 5. IBM Connections 5.0 Workshop 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 IBM Connections. 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 editors for JavaScript, HTML, CSS, and XML. In this lab, you will use Eclipse to develop your customizations before copying 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. COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 5 6. IBM Connections 5.0 Workshop 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. COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 6 7. IBM Connections 5.0 Workshop The common files used by the Connections UI are installed in the WAR file for each of the Connections applications. 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 from C:IBMWebSphereAppServerprofilesAppSrv01installedAppsconnectionsCell01Activities.earoawebui.warnav templatesfooter.jsp The Connections server will use any customized files it finds in the customization directory. See previous steps for instructions on how to locate this directory. The customization directory has sections for each of the individual Connections applications. There is also a common directory for customizations that are global in scope. There is also a strings directory for modifying product 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 New Folder 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. COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 7 8. IBM Connections 5.0 Workshop 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.jsp login.jsp Step 29 Repeat the previous steps to import the following files from /opt/IBM/WebSphere/AppServer/profiles/AppSrv01/installedApps/connectionsCell/Activiti es.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 COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 8 9. IBM Connections 5.0 Workshop 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, and changing the colors. You make these changes by adding and copying files to the customization directory and changing 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://>/homepage Step 36 Log in with the following credentials Field Value User name dmisawa Password passw0rd COPYRIGHT IBM CORPORATION 2014. ALL RIGHTS RESERVED. IBM Ecosystem Development 9 10. IBM Connections 5.0 Workshop Step 37 Review the default UI links in the upper right Step 38 Return to your Eclipse pro