Skinning BPM Worklist & Humantasks fig1

Skinning BPM Worklist & Humantasks

In this post I will describe how to create a custom skin and how to apply this skin to the BPM Worklist and the accessory humantasks.

Before I start explaining how to do this, I will first explain the relation between the worklist and humantasks. The BPM WorklistApp is a ‘stand-alone’ application that is deployed on the WebLogic Application Server. The same is true for the different Humantask projects. This means the Humantask projects are also deployed as ‘stand-alone’ application on the WebLogic Application Server. Every application is using a skin on it’s one. Using a custum skin means you have to apply the skin to every application separately.

I will first describe how to create a Custom skin and how to apply it to the BPM worklist.  After that I will describe how to re-use this skin in the separate Humantask projects.

Skinning the BPM Worklist

To get the best tooling help currently available use JDeveloper This version has full skinning support, while 11.1.1.x does not. You can use the Studio Edition Version or the Skin Editor Version.

Skinning BPM Worklist & Humantasks fig4

          Skinning BPM Worklist & Humantasks fig14


In the rest of this post I describes the steps using the Studio Edition Version (I think this version is used more often because of it’s richer functionality). If you use the Skin Editor Version the step are more or less the same.


Create a new Skin

For a start, create a New Application (or extend an existing application with the project).

Skinning BPM Worklist & Humantasks fig1


Specify the application name and the associated package prefix. Press Next.

Skinning BPM Worklist & Humantasks fig2


Give the project a name (MidOfficeSkin). Press Next.

Skinning BPM Worklist & Humantasks fig3


Define the default package. Press Finish.

Skinning BPM Worklist & Humantasks fig8


The next step will be the creation of the ADF Skin.

Choose New from the ‘File Menu’ and select ADF Skin in de ‘New Gallery’.

Skinning BPM Worklist & Humantasks fig9


Specify a name for the Skinning StyleSheet.

At this point, you have to pick the skin you like to extend. I choose for the default BPM Worklist skin

(fusionFx-v2.desktop). Press OK.

Skinning BPM Worklist & Humantasks fig10


After pressing OK a number of files is generated.

Skinning BPM Worklist & Humantasks fig11

For now only the both trinidad files and the css file are interesting.

The trinidad-config.xml file contains the name of the new ‘skin-family’.

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="">


trinidad-skins.xml contains the implementation of this new ‘skin-family’.

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="">


The css file contains the customizations. Initially this file is empty because no custom changes are made.

Skinning BPM Worklist & Humantasks fig12


By default taskfield labels are aligned to the right side and taskfield values to the left. We will align both to the left by making a custom change to the skin.

Open the css file. Select the ‘Panel Form Layout’ component underneath the ‘Faces Component Selectors’. Open the component and select ‘label-cell’.

Skinning BPM Worklist & Humantasks fig13

Our customization: Change ‘Text Align’ to ‘left’ in the property window at the right side of the screen.


Deploying the new Skin

From JDeveloper, deploy the Skin to a Jar file (create a deployment profile if this is not done already).


Skinning BPM Worklist & Humantasks fig17


After that, deploy the jar file to WebLogic. For this: Logon into the WebLogic Console. Select Deployments in the ‘Domain Structure’. After that, select Install.

Skinning BPM Worklist & Humantasks fig18


Upload the jar file and then press Next.

Skinning BPM Worklist & Humantasks fig19


WebLogic assumes you want to deploy a library. This is correct. Press Next.

Skinning BPM Worklist & Humantasks fig20


The ‘Install Application Assistant’ appears. Leave all defaults and press Finish.

Skinning BPM Worklist & Humantasks fig21


Congratulations, the new skin is installed.

But to actually use it in the BPM Worklist we need to do one more thing. Restart the WorklistApp. Yoe can do this also from the WebLogic console (Deployments –> worklistapp).

And the final result in the Worklist (left versus right alignment):

Skinning BPM Worklist & Humantasks fig24



Skinning Humantasks

To re-use this skin in Humantask projects is very easy. You only need to copy a number of directories and files from the skinning project to the Humantask project.

– directory         public_html\skins

– directory         public_html\META-INF

– file                  public_html\WEB-INF\trinidad-config.xml

– file                 public_html\WEB-INF\trinidad-skins.xml


After deploying the Humantask the new skin is used.

Skinning BPM Worklist & Humantasks fig25