Hands-On BPM Labs

Diving deep into the Workspace

Scenario
As part of the User Experience Team working on this conference, you are required to customize AquaLogic BPM Workspace to match the conference website look and feel. You must create a new style and apply it to the Workspace.

Your Role
You are a web developer and administrator with skills in CSS stylesheets and AquaLogic BPM Workspace.

Objectives
In this exercise you will learn how to customize the out of the box Workspace. You will walk through many of Workspace's customization capabilities: CSS Images customization Labels Decorators Layout

Materials
The list of materials for this exercise is: AquaLogic BPM Studio 6.1 A distributed project with a simple flow Tool for editing CSS Tool for editing property files

Diving deep into the Workspace Page 1 of 13

Hands-On BPM Labs

Task List
Getting Started ...............................................................................................................................................3 Watching the out of the box Look and Feel .........................................................................................................3 Changing the CSS............................................................................................................................................5 Changing the images .......................................................................................................................................7 Changing the labels .........................................................................................................................................8 Applying a Custom WorkList Decorator...............................................................................................................9 Creating Layouts ........................................................................................................................................... 11

Diving deep into the Workspace Page 2 of 13

Hands-On BPM Labs

Getting Started
Start AquaLogic BPM Studio for this exercise: Use the desktop shortcut Exercise 5 Studio

Watching the out of the box Look and Feel

1. Once Studio finish loading, you will be presented with workspace with a single BPM project 2. On the Project Navigator panel on the left side, select the ExpenseReimbursement project node 3. Start the engine 4. Launch the Workspace

5. Log in as Alex (administrator user)

6. Click on Create Sample Instance

Diving deep into the Workspace Page 3 of 13

Hands-On BPM Labs

7. Logout 8. Log in as Sally (supervisor user) 9. You should have a lot of work to do! (12 work items)

Diving deep into the Workspace Page 4 of 13

Hands-On BPM Labs

Changing the CSS
To make your life easier we already built a Participate CSS file 1. We put the CSS file in the css folder of the Studio Workspace web application: a. C:\bea\albpm6.1\studio\webapps\workspace\css\participate.css

2. So the only thing you have to do is register it in the workspace.properties a. Open workspace\WEB-INF\workspace.properties using the desktop shortcut Edit workspace properties b. Edit fuego.workspace.stylesheet property and change its value to participate.css c. Save the file

3. Stop/Start the Engine 4. Reload the Workspace from browser 5. That was easy, now its your time lets change the login/logout button style a. Open workspace\css\participate.css using the desktop shortcut Edit CSS b. Edit bpmWorkspaceLoginFormButton CSS class c. Set a background-image (buttonBg.gif) d. Change the text color to white e. Change the font weight to bold f. Save the file

Diving deep into the Workspace Page 5 of 13

Hands-On BPM Labs

6. Reload the Workspace from browser (empty cache just in case) 7. It should look like:

Diving deep into the Workspace Page 6 of 13

Hands-On BPM Labs

Changing the images
Now you are going to customize the panel header icons: reload and help

1. Again, we already built a participate image bundle file a. C:\bea\albpm6.1\studio\webapps\workspace\WEB-INF\classes\participateImages.properties 2. Register it in the workspace.properties a. Open workspace\WEB-INF\workspace.properties using the desktop shortcut Edit workspace properties b. Edit fuego.workspace.imageBundleFile property and change its value to participateImages c. Save the file

3. Stop/Start the Engine 4. Reload the Workspace from browser 5. Ouch! The help icon is wrong! Lets fix it!

a. Open workspace\WEB-INF\classes\participateImages.properties using the desktop shortcut Edit Images b. Edit the HELP property, change its value to /img/participate/help2.gif c. Save the file 6. Stop/Start the Engine 7. Reload the Workspace from browser (empty cache just in case) 8. Problem fixed!

Diving deep into the Workspace Page 7 of 13

Hands-On BPM Labs

Changing the labels

Why dont customize a message of the Workspace? 1. This time we built an empty message bundle file, so you are on your own a. C:\bea\albpm6.1\studio\webapps\workspace\WEB-INF\classes\participateMessages.properties 2. Lets change the message Youre logged in as for Welcome to BEA Participate

3. First you have to register the bundle file in the workspace.properties a. Open workspace\WEB-INF\workspace.properties using the desktop shortcut Edit workspace properties b. Uncomment the property fuego.workspace.customMessageBundle (remove the first character #) c. Change its value to participateMessages

4. And now you have to change the message a. Open workspace\WEB-INF\classes\participateMessages.properties using the desktop shortcut Edit Messages b. Add the following line to the top of the file: i. LOGGED_AS=Welcome to BEA Participate

c.

Save the file

5. Stop/Start the Engine 6. Reload the Workspace from browser

Diving deep into the Workspace Page 8 of 13

Hands-On BPM Labs

Applying a Custom WorkList Decorator
Did you know that you could customize the style and values of the work items shown by the WorkList panel? Your goal will be highlight the work item with the highest priority and put a link n the description column to search using google the work item. To customize the panel you need a Java class that implements the fuego.workspace.WorlistDecorator interface. 1. Dont worry, you wont have to compile anything, we already did it for this exercise. Our decorator adds an image link to the description column to google the instance and highlights the instances with the highest priority. a. C:\bea\albpm6.1\studio\webapps\workspace\WEB-INF\lib\participate.jar b. We implemented the getValue method to change the HTML of the description column

c.

And the getRowStyle method to change the style of the rows for the work items with the highest priority

2. So as usual, you have to register the decorator in the workspace.properties a. Open workspace\WEB-INF\workspace.properties using the desktop shortcut Edit workspace properties b. Uncomment the property fuego.workspace.styleResolverClassname (remove the first character #) c. Change its value to participate.ParticipateWorklistDecorator

d. Save the file

Diving deep into the Workspace Page 9 of 13

Hands-On BPM Labs

3. Stop/Start the Engine 4. Reload the Workspace from browser 5. Log in using Sally, the workList panel should look like:

Diving deep into the Workspace Page 10 of 13

Hands-On BPM Labs

Creating Layouts
Our goal is to introduce you to the layout management. From the BPM Studio you can create layouts and assign them to abstract roles. But to see them in action you have to use an enterprise environment (out of the scope for this exercise). Lets create a layout for process owners. You will create a new page with a dashboard inside! 1. Log-in to the Workspace (user layoutManager) 2. Enter to edition mode

3. Add a new page

4. Add a dashboard panel to the new page

Diving deep into the Workspace Page 11 of 13

Hands-On BPM Labs

5. Setup dashboard panel a. Select View Team Productivity Dashboard b. Click Apply button

6. Turn off panel edition mode to see the dashboard

7. Save the layout a. Click the Save Layout button

b. Enter the name of the layout c. Select Process Owner role d. Click Ok button

Diving deep into the Workspace Page 12 of 13

Hands-On BPM Labs

So when you put the project in production you will be able to map the layouts to the real roles. These are the steps that you should follow (out of the scope for this exercise): 8. Export the project 9. Start Administrator Center 10. Start web applications 11. Open Process Administrator 12. Deploy the process (assign the layout to roles) 13. Open Workspace 14. Log in with different roles

Diving deep into the Workspace Page 13 of 13