Cloud Pak for Business Automation

 View Only

Usage of Themes in Application Designer and BAW

By Thanuja Tankasala posted Fri December 31, 2021 01:23 AM


When we develop complex applications  we need to provide proper visual assets, such as colors, icons, and typefaces that align the look and feel of our process applications to attract the customers. we need some core elements like Colors, Typography, Layout, Icons, etc. Once we get the core elements sorted we can move on to defining components, patterns, and templates. For any UI application it takes time for us to keep the consistency of the UI elements and if you are new to either the Business Automation tools or UI designing this custom themes save a lot of time and effort.

By default, any new process application uses the Carbon theme, which contains all the definitions that are used by the views in the UI toolkit. We can create a customized theme to be followed by 'n' number of application we develop to maintain the standards across. 

Workflow and Application Designer has the same process to create a custom theme. In this blog we will see how it is done in an application designer, when you create an application and click on the overview tab, you can see the edit option down the description on click of the edit option you can see the theme as carbon on the right panel which comes with an option to select a theme from the predefined toolkits or create a new one.

In this blog we will see how to reuse the existing carbon theme and create a new theme. 

we can see the visual assets value defined on the left side and the visual assets on the right side. Let us say we want to change the input field size all you need to either hover of click on the element and it automatically shows the values it is using,

I have picked the background value i.e"@bpm-input-bg" and changed it's value from '#f4f4f4' to '#b49d9d' , you can see the changes are reflected on the right side immediately.

​Similarly, you can make changes to the borders, line heights, font-colors etc based on the requirements and use the theme across applications. This one time effort will reduce a lot of redoing in the applications. You can try out the theme creation in BAW as well.

Happy Theming !!

#ApplicationDesigner  #baw  #theme  #color-theme