Oracle bpm WorkListDecorator

Hands-On BPM Labs

Diving deep into the Workspace – of 13

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

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

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”

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)

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 it’s your time … let’s 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

Hands-On BPM Labs


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

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! Let’s 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!

Hands-On BPM Labs


Changing the labels

Why don’t 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. Let’s change the message “You’re 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

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. Don’t worry, you won’t 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

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:

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).

Let’s 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

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

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

Oracle bpm WorkListDecorator

Documents

Transcript of Oracle bpm WorkListDecorator