Customizing colors in the Web Assistant

18-May-2019 Leave a comment

Did you know that it’s possible to customize the colors of the Web Assistant help? (You can also customize a few other things, but that’s the subject of another post.) This is done through the use of parameters specified in the Web Assistant configuration in the application (for example, in the connected S/4HANA system). Figuring out which parameter affects what screen element can take a bit of trial and error – even with the SAP-provided documentation – and sometimes the parameters don’t affect all of the elements you think they should. So in this post, I’ve listed and described all of the color-control parameters, and identified the Web Assistant screen elements that each of them affects.

The Carousel and Help Tiles

First, here’s the main contents of the Web Assistant Carousel, Help Tiles, and Help Bubbles.

The parameters that dictate the colors of the elements identified in the image above, are listed below.

  1. uiFg: Color of text and icons in the Carousel, and in Menu List items (such as the list of Guided Tours), Oddly, this does not affect the text/icons in Bubbles, but does apply to the ‘Previous’ and ‘Next’ navigation elements in Guided Tours (this may be a bug, or oversight).
  2. uiBg: Background color of the Carousel, Bubbles (including Guided Tours), and icon backgrounds. *Note that Help Tiles and Menu List items (such as the Guided Tours list) are displayed as slightly transparent so appear slightly lighter than the specified color.
  3. bubHeadBgCol: Background color of Bubble headers (title area)
  4. accentFg: Color of text and icons in highlighted Help Tiles and buttons (e.g. on hover over or click on); also used Bubble headers (the text in the Bubble header bar) and as the basis for the color of the outer ring on hotspots.
  5. accentBg: Background color of highlighted Help Tiles (e.g. on hover over or click on) and buttons; also used as the basis for the color of the inner ring on hotspots (darker by default, and lighter when hovered over), and for the ‘custom content’ bar shown on the left of Help Tiles (when the Carousel is in vertical mode) and the Menu List items. *Note that only ‘clicked on’ Help Tiles use this color as specified; Help Tiles that are ‘hovered over’, and the tether, use a slightly lighter version of this color, and (non-focus) Menu List items use a slightly darker version.
  6. focusFg: Color of text and icons in the Menu List (e.g. Guided Tours list) item that currently has the focus (i.e. will be automatically selected if you press Enter – you can see this change if you use the cursor keys to move through the list).
  7. focusBg: Background color of the list item that currently has focus.

The What’s New view

If a user clicks on the What’s New tile (if present), they are passed into the ‘What’s New view’. A few elements have unique colors, to make sure the user realizes they are in a the What’s New view, and not the ‘standard’ view (I’m sure this was done in response to users getting all confused that most of their Help Tiles had ‘disappeared…).

There’s only two parameters available for configuring the color of elements in the What’s New view. These are:

  1. WNFg: Color of text and icons for highlighted Help Tiles (e.g. on hovered over or clicked on).
  2. WNBg: Background color of highlighted Help Tiles (e.g. on hover over or click on). * Note that hovered over Help Tiles are displayed using a slightly lighter variant of the specified color. Also (somewhat inconsistently) this color is used for Bubble headers in the What’s New view.

Learning Center (and Recommended Learning)

Finally, if enabled, there are a few things you can change in the Learning Center. These also apply to the Recommended Learning pop-up panel.

The available parameters are shown below. Note that these are a little inconsistent in their execution – again, possibly not deliberately so, but something to be aware of).

  1. LABg: Background color of the Learning Center main panel. This is not used for the background of the Recommended Learning pop-up (which you might reasonably expect it to) – that uses the standard uiBg parameter.
  2. LAAssetFg: Color of text and small icons (the feedback / edit icons; not the object type icons) in a Learning Center. Again, this is not used for the Recommended Learning pop-up.
  3. LAAssetBg: Background color of the ‘object tiles’ in the Learning Center. Inconsistently, this parameter does apply to object tiles in the Recommended Learning pop-up.
  4. LAHeadFg: Color of most of the text and icons in the Learning Center header – but not the actual title “Learning Center”, which is shown in the uiFg color. Also used for the border around the Search field and the Roles drop-down – but not the text in these.
  5. LAHeadBg: Background color of the Learning Center header.

Note that the Role list items use the accentBg parameter (all the time – the focusBg parameter doesn’t have an effect). Also, the background of the (non-focus) Roles list items seems to always be slightly-transparent white, and the text of text of these items is white, then black for focus items. (Unless there’s some hidden, undocumented parameters, somewhere…)

Using parameters in the URL

If you want to test these, before making changes to the actual application parameters, you can use any of the identified parameters via an in-URL parameter. You can do this even if you do not have write access to the application, as nothing is saved (the examples below were actually taken from SAP’s free S/4HANA Cloud Trial). When specifying a parameter within the URL, preface it with “&help-“, and specify the color as comma-separated decimal RGB values (so “255,0,0” for red). (You can specify them as hex values [e.g. #FF0000] in the application – but obviously using a # wouldn’t work in a URL.) For example: https://…s4hana.ondemand.com/ui?&help-uiBg=255,0,0#Shell-home. CAUTION: These parameters are case-sensitive; be sure to specify them exactly as shown here.