IBM BPM 8.5.7 Theme Support Overview
Key Points
- IBM BPM 8.5.7 introduces “theme support,” a centralized way to update the look‑and‑feel of all UI components in a process app without republishing a new app version.
- Themes are built on LESS, an open‑source CSS pre‑processor that allows developers to define reusable variables which are compiled into standard CSS for browsers.
- Each process‑app/toolkit can have one active theme; coach views that are theme‑enabled reference these variables via dynamic LESS code, ensuring consistent styling across all code views.
- In the designer, users create or edit a theme (e.g., a “dark theme”) by adjusting variable values in a design pane that instantly previews the impact on UI elements such as backgrounds, buttons, and headers.
- Variable hierarchy lets designers modify a single base variable (like BPM‑color‑primary) to propagate changes throughout multiple UI components, simplifying broad visual updates.
Sections
- IBM BPM 8.5.7 Theme Support Overview - The demo explains how BPM 8.5.7 introduces centralized theme support using LESS variables, enabling UI look‑and‑feel updates across deployed process apps without republishing new snapshots.
- Customizing UI Themes with Variables - The speaker shows how to modify UI elements—such as colors, fonts, and border radii—by editing theme variables, previewing changes, adding new variables with metadata, and then applying the customized theme to a process app where CSS is generated server‑side.
- Centralized BPM Theme Update Demo - The speaker demonstrates installing a dark‑theme toolkit on a process server, executing the BPM update‑theme command, and instantly seeing the new look applied to a running process app without redeploying it.
Full Transcript
# IBM BPM 8.5.7 Theme Support Overview **Source:** [https://www.youtube.com/watch?v=x369D_VLsJ4](https://www.youtube.com/watch?v=x369D_VLsJ4) **Duration:** 00:07:53 ## Summary - IBM BPM 8.5.7 introduces “theme support,” a centralized way to update the look‑and‑feel of all UI components in a process app without republishing a new app version. - Themes are built on LESS, an open‑source CSS pre‑processor that allows developers to define reusable variables which are compiled into standard CSS for browsers. - Each process‑app/toolkit can have one active theme; coach views that are theme‑enabled reference these variables via dynamic LESS code, ensuring consistent styling across all code views. - In the designer, users create or edit a theme (e.g., a “dark theme”) by adjusting variable values in a design pane that instantly previews the impact on UI elements such as backgrounds, buttons, and headers. - Variable hierarchy lets designers modify a single base variable (like BPM‑color‑primary) to propagate changes throughout multiple UI components, simplifying broad visual updates. ## Sections - [00:00:00](https://www.youtube.com/watch?v=x369D_VLsJ4&t=0s) **IBM BPM 8.5.7 Theme Support Overview** - The demo explains how BPM 8.5.7 introduces centralized theme support using LESS variables, enabling UI look‑and‑feel updates across deployed process apps without republishing new snapshots. - [00:03:21](https://www.youtube.com/watch?v=x369D_VLsJ4&t=201s) **Customizing UI Themes with Variables** - The speaker shows how to modify UI elements—such as colors, fonts, and border radii—by editing theme variables, previewing changes, adding new variables with metadata, and then applying the customized theme to a process app where CSS is generated server‑side. - [00:06:29](https://www.youtube.com/watch?v=x369D_VLsJ4&t=389s) **Centralized BPM Theme Update Demo** - The speaker demonstrates installing a dark‑theme toolkit on a process server, executing the BPM update‑theme command, and instantly seeing the new look applied to a running process app without redeploying it. ## Full Transcript
[Music]
Welcome to the IBM BPM8570
demonstration on theme support. I have
open in front of me a clientside human
service called travel request. Let's say
that this client side human service
along with several others have been
deployed in production for a certain
amount of time. Our organization would
like to upgrade the look and feel of all
the UIs within this process app. In the
past, this would have been accomplished
by changing the CSS that is attached to
the various code views and redeploying a
new snapshot of the process app. In 857,
a new mechanism called theme support
allows a simple centralized mechanism to
update the UIs across the process app.
This mechanism also allows the look and
feel to be updated after a process app
has been deployed without the need to
republish a new version of the process
app.
Theme support in BPM is based on less.
Less is an open-source CSS pre-ompiler.
It adds the ability to define variables
and use those in your CSS declarations.
Here's a simple example of some less
code. We have BPM button primary BG
defined as a variable with a value set
to it. We also have two CSS rules
beneath it. My button and my section
header. In their definitions, we can see
the usage of the variable. Browsers do
not understand less. It is compiled into
CSS. Beneath we can see the variable
being substituted to create the standard
CSS that we're all used to.
In BPM, there's a new artifact called a
theme, which has all the variable
declarations in the system. Coach views
that are theme enabled have a dynamic
style set on them, and this is less code
that leverages the variables defined in
the theme. There is one active theme per
process apper toolkit, and all code
views within the scope share that
styling. Back in the designer, we're
going to get started by creating a new
theme.
Our new theme, it's going to be called
dark theme. When the editor opens, we're
taken to the design tab. The design tab
shows all the variables on the left
grouped together
and a preview on the right showing the
result and look and feel of the coach
views with the current settings.
To change an aspect of the UI, I can
hover over the different regions in the
preview pane. Here we can see that the
background color is BPM bodyb for this
area. finding that variable on the left,
I can click on the color swatch, which
will invoke a dialogue for me to pick a
new color.
As soon as I set a new value for the
variable, we can see the preview is
updated on the right hand side. Let's
say we want to change the color for this
primary button. The background color is
BPM button primary BG. If we find that
on the left side,
we can see that BPM button primary BG is
referring to another theme variable
called BPM color primary.
We can choose to change the button
background color alone or we can choose
this more general variable which will be
applied to numerous other spots within
the UI.
Here
we see that the section header and the
switch have been updated as well. I can
continue using this technique to set
other aspects of the UI. For example, I
might change the text to be larger. Here
we can see that font size is going from
BPM font size base.
We can also change some of the border
radiuses to soften the look of things.
I have adjusted a few more variables to
achieve the look that I'm after. Before
I close this editor, I'm going to go to
the source tab. In the source tab, we
can see all the variables on the left.
And on the right, we can see some
metadata. This is what contributes the
variable to the design tab. It is
possible to add new variables to the
theme and use those variables in your
custom coach views. You can also
leverage the same metadata to achieve
the easy to use controls for setting the
values such as the color pickers and
font pickers.
Now that we have our theme defined,
we're going to save the editor and set
this theme on the process app.
In the process app settings,
there's a theme field here. Here we will
select the dark theme we just authored
and save this editor.
If we switch back to the travel request
and we wait a few moments,
we can see the theme is applied. The CSS
generation happens on the server from
the theme artifacts.
Running the client side human service,
we can see the theme is applied at
runtime as well.
To complete this demonstration, I'm
going to show how to update the theme on
process apps that are already deployed
to a process server. This slide shows
what we're going to do. We have a number
of process apps that are deployed to the
process server. Each one depends on the
system toolkit and each one is using the
default BPM theme. We're going to create
a new theme toolkit which has the dark
theme inside of it and we're going to
create a new dummy process app that
depends on the theme toolkit. We're
going to deploy the dummy process app
and then use the BPM update theme
command to dynamically set the theme on
the running process apps without
redeploying them.
I am in process portal where we can see
I have the employee travel process
deployed. If I launch an instance of
this process, I can see the work item.
If I accept that work item, we can see
the default theme is applied to the
coach. Let's update this theme to the
dark theme that we just created.
In process center, we can see the dummy
process app that I created. This
references the toolkit that contains the
dark theme.
I'm going to install this new process
app onto that process server.
I am logged into the was admin console
for the process server on which our
process apps are deployed. I'm going to
run the BPM update theme command with
the proper parameters.
We can see that the command is
successful. So let's go back and rerun
our process. Back in the same process
portal as earlier, we'll relaunch that
process.
Claim the work item. We can see that the
theme is updated even though we did not
redeploy a new version of the travel
request process app. This concludes the
demonstration on theme support in BPM
8570.
Theme support provides a simple
centralized mechanism for controlling
the look and feel of all UIs within your
BPM process apps. Thank you.
[Music]