BPM Workspace and Webforms customization

Overview

Under the propose of a project customization customization on BPM workspace and designed webforms were applied using custom css and used as skin and as webforms theme. Its important also to highlight that a workspace skin appliance is enough to bring customization to your webforms since they will inherit the workspace skin customization, nevertheless, themes offers you the possibility to enrich that customization or even to overlap it if desired. This blog post shares my experience trying what is available today as sample from Oracle Samples site but also how I found it starting from scratch.

I have follow the following contents to achieve a full workspace and webforms customization:

https://blogs.oracle.com/bpmtech/entry/customizing_the_look_and_feel

https://java.net/projects/oraclebpmsuite11g/downloads/directory/Samples/bpm-CustomizingWorkspace/

http://docs.oracle.com/cd/E28280_01/user.1111/e15175/bpmug_ws_admin.htm

Try it !

How about trying to check one possible final result ? Try to enable the new created Skin workspace skin and new created theme !

1. Download the provided sample file in here
2. Extract custom.client.applib.jar from WorkspaceAndFormsCustomization\SampleSkin\SharedLib folder
3. Deploy it via weblogic deployment as shared library
4. Restart the applications (force stop, – Worklist (worklist-wls), Workspace(OracleBPMWorkspace) and DefaultToDoTaskFlow
5. Go to workspace, log in as weblogic
6. Go to Administration
7. Choose a skin: mySkin
8. Set branding logo to: /faces/logo.png
9. Set branding title to: BPM Workspace or other
10. Go to BPM Composer, login
11. Change the theme applied on the forms to mySkin
12. Redeploy the project

Note: Until a form is loaded for a first time the new theme will not appear on the list. So, to be able to access the webform themes you need to deploy (if there is none already deployed) a process with webforms and load a webform for the first time on your workspace. Doing that will make the theme available on webform edition back on BPM composer.

Build it !

Now, build it from scratch ! You can create your own workspace skin using Oracle ADF skin editor, apply it on workspace and all forms opened with it, and you can also change the webforms theme CSS and build your own webforms customization.

Start by downloading the latest ADF Skin Editor Application to define your custom workspace skin:

http://www.oracle.com/technetwork/developer-tools/adf/downloads/index.html
http://download.oracle.com/otn_hosted_doc/jdeveloper/111demos/ADFSkinEditor/ADFSkinEditor.html

If you have already experiences with ADF Skin Editor this will be very simple for you, if not, version 12c allows you to gain experience checking always the result of your changes on sample page. In fact, there is not much that workspace uses that you can configure visually using Skin Editor. I would say that you should focus on the headers, links and buttons behavior.

Workspace Customized Skin

1. Create a new skin project with Skin Editor
2. Make a new project deployment as ADF JAR Library
3. The deploy JAR name should be allways custom.client.applib.jar
4. Add the following META-INF/MANIFEST.MF file that must exist outside the project and be imported as append MANIFEST.MS file (get it form the sample project)
5. Deploy via weblogic as shares lib
6. Restart the application on weblogic deployments – Worklist (worklistApp), Workspace(OracleBPMWorkspace) and DefaultToDoTaskFlow
7. Access the workspace as administrator and check the preferences. Change on the drop box to your customized skin.

Just as note, the content of the MANIFEST.MF file should be:

Manifest-Version: 1.0

Ant-Version: Apache Ant 1.7.1

Created-By: 19.1-b02 (Sun Microsystems Inc.)

Implementation-Vendor: Oracle

Implementation-Title: Custom Client Applib

Implementation-Version: 1.0

Product-Name: Custom Client Applib

Product-Version: 11.1.1.4.0

Specification-Version: 1.0

Extension-Name: custom.client.applib

Note: Due to dependencies, to update the custom.client.applib.jar you will need to undeploy OracleBPMWorkspace, worklistApp and DefaultToDoTaskFlow. No worries, you can do it and deploy them again because the EAR file is available on [fmw_home]/Oracle_SOA1/soa/applications.

Webforms Customization

From the moment you apply a new workspace skin it will be applied to your webforms. Nevertheless, you can perform customization at webforms level creating a new theme to be applied on webforms design time. These themes are defined changing CSSs files and making available new themes part of custom.client.applib.jar file. Images can also be deployed together with this new theme in order to make them available on your webforms.

The webforms are based in Frevvo forms, it then necessary to change this Fevvo webforms CSS to meet your look and feel requirements. The best way is to expand WorkspaceAndFormsCustomization\SampleSkin\SharedLib\custom.client.applib\themes\mySkin.zip file available on Oracle customization sample and refer to mySkin\minimal\readme.txt to know which components you should change.

If there is images that you want to include on your css, copy all images to be used to mySkin\minimal\images

After you performed all the desired changes on CSS to reflect your needs, zip them and give them a name (e.g. mySkin.zip)

Note: Remember that the extension should be zip.

Now, this must be added to to your custom.client.applib jar file. Here they are the steps to be followed:

1. Create a folder named themes on the root of your custom.client.applib
2. Create a zip file containing the webforms folder structure css
3. Create a file named themes.txt inside the themes folder
4. Fill in with the name of the webform customization zip file created on step 2
5. Copy the folder themes to root on custom.client.applib
6. Deploy a BPM process and run until you can open a first task on workspace. Note: until a form is loaded a first time the new theme will not appear on the list.
7. On BPM Composer you should now be able to access the new theme on Style tab when editing a form. Changing the theme will apply the new CSS.

Resource Bundle Configurations

Workspace configuration can also be extended to provide label that refers to a key-value pair in the Resource Bundle. In this way, you can internationalize your workspace title for example using LABEL_WORKLIST_TITLE key.

It is possible also customize other workspace areas like link area working also with resource bundle changes. Since I didn't explore much this area, please refer to Oracle documentation.