Technical Blog Post
Abstract
Customising BPM Process Applications using CSS files
Body
MDM v11.3 leverages IBM BPM technology to provide a data stewardship framework under a single UI. However, it may be desirable to modify this UI to match the look and feel of your existing solutions. While BPM Process Designer allows you to restructure page layout with the Coach designer, the best way to modify the look and feel of a Coach is with CSS.
BPM provides three ways to alter CSS out of the box from within Process Designer:
- Supplying a CSS file as an attached script, or editing the inline CSS section of a Coach View
- Adding a <style> HTML attribute on a Coach View inside a Coach
- Supplying CSS as a Custom HTML fragment inside a Coach
However, there are occasions where these approaches are not suitable:
- You may not own the Coach View so cannot directly update the attached scripts or inline CSS
- You want to use the CSS across multiple Coach Views rather than scoping it to the single instance of the Coach View. Or you want to customise multiple Coach Views without manually adding <style> attributes to each Coach View.
- You do not want to have to maintain multiple copies of the same CSS file inside each of the Custom HTML fragments.
The ideal way to insert CSS into a Coach would be to load the CSS as a managed file in BPM - that way you only need to edit the managed file and all Coaches that reference the CSS would use the latest version (pending updated snapshots). Unfortunately, BPM does not offer the mechanism out of the box.
Update 05/11 - If you upload a HTML file to BPM that consists of <style> tags wrapping the CSS, you can use the "Managed File" option of the Custom HTML component to load the "HTML" CSS into the Coach. However, this does not work if the HTML file is inside a .zip archive, or if the CSS needs to reference local resources.
A documented Javascript function in BPM holds the key: com_ibm_bpm_coach.getManagedAssetUrl. This function allows you to get a URL for a managed file. The function call is: com_ibm_bpm_coach.getManagedAssetUrl(filePath, assetType, projectAcronym);
By using this method call, you can get a relative URL to the managed file in BPM - eg /teamworks/webasset/2064.146ca826-2525-45e7-bcf5-b68b4c46eadc/J/styling.zip/css/coachstyling.css.
Using the above technique, I created a HTML file containing a <script> that would create a link to the URL for a CSS file in the document's <head> element. I then used the "Managed File" option on a Custom HTML component to load the script into a Coach. This meant that my CSS file was referenced inside the <head> element.
You can use this principle to load your own custom CSS files into a Coach. Custom CSS files can be used to override BPM Coach Views or Coaches, or alternatively CSS files can be used to override the MDM Coach Views supplied with MDM V11 onwards.
As an example, I present an updated solution to: creating a custom coach view to load CSS tree icons. Rather than producing a custom Coach View to wrapper the MDM Tree and load tree icons, the HTML script can be used to the same effect. You simply write a HTML script to link to the url for the CSS file that references the MDM Tree icons, and insert the HTML as a Custom HTML component on the same Coach as the MDM Tree. The advantage of this solution is that you do not have to create a new Coach View for every set of icons; you just use a new HTML script to link to each CSS file required for the page.
UID
ibm11142272