Customizing text styles in the Web Assistant

You can change a great deal about the appearance of the SAP Enable Now Web Assistant, from the tile color, to hotspot colors, to icon colors, and so on, through the use of Web Assistant parameters. You can also change the font – and font formatting – used in Web Assistant help content. However, this can’t be done using parameters. Instead, you need to define the required text styles in a specific Text Styles Resource, from Producer. So in this blog post, we’ll look at how to define a new character style that can be applied to Bubble Text during editing, and that will then be used at display time.

First, it’s important to know that (currently?) you cannot create your own customized Text Styles Resource for use by Web Assistant; you can only use the predefined ones – and you may need to update more than one of these. You can find the predefined Web Assistant Text Styles under Resources > Adaptable Resources, where they all have a name in the format Text Styles: Web Assistant – <theme>.

You’ll notice there is one resource for each of the major Web Assistant Themes. You should identify the theme that is being used in your application, and then edit this to match your requirements. Important: Make sure you are doing this in the Workarea from which Web Assistant is retrieving the help content. In an SEN set-up, this will be the Workarea specified on the dataUrlSEN parameter; in an EXT set-up, this will be the Workarea specified on the dataUrlSEN2 parameter.

To edit a Resource, you first need to Start Editing the resource (you can’t just double-click on it to open it in edit mode like you can for content objects). Once you have it ‘checked out’ for editing, double-click on it to open it in the Text Style Editor.

Within the Text Editor, create or change the styles as required. In the example above, I’ve created a new character style of Script. (I’ve also edited the Search Hit style to use a different background color, just to show how the default styles can be overridden.) Here’s the New Text Style dialog box for the new character style definition:

Once you’ve made your changes, save the Text Style Resource, Finish Editing, and Publish it.

If you create a new style you should consider creating the same style – and (this is very important!) using the exact same CSS Class Name – in all of the Text Style: Web Assistant Resources. This is because although the theme can be specified in the Web Assistant parameters in the application, the theme used could change at display time – for example, if a user chooses a high-contrast theme in Windows, SAP Enable Now can match this and choose an appropriate high-contrast theme for Web Assistant (currently available only for Microsoft IE or Edge browsers). In this situation, if a theme is used that does not include your new style, any text to which you have applied this style will simply be displayed using the default text formatting – ignoring all your hard work!

Once you have set up the Text Style resource(s) the way you want them, the next step is to tell Web Assistant to use these custom Text Styles. This is done by specifying the parameter customTextStyles=true. Web Assistant will then use the appropriate Text Styles Resource based on the theme currently being used for Web Assistant, as follows:

Now let’s look at applying our customized text styles to the text in a Help Tile or Guided Tour Step bubble. Puzzlingly, the Tile Editor only allows you to apply paragraph styles to your text:

This means that if you want to apply a character style (which will likely be the most common scenario) or block style, you can only do this in the Web Editor (from the Carousel, click on the Options button and select Edit in Manager Web Editor from the pop-out menu):

Note that you can’t apply a table, list, or link style in either of these editors – although if you know the HTML code you can enter this in the Source View of the Web Editor (Tip: Use <span class="styleID">text</span>), where styleID is the CSS Class Name [see Figure 3]). Or you could use the Project Editor in Producer.

Now let’s look at the finished result, where our Help Bubble is displayed to the application user, using our updated (Quartz) Text Styles Resource, with character styles applied to selected text as shown in the editor examples above.

One last thing to watch out for: SAP Enable Now will sometimes use a different theme during editing to the one used in the application. A good example of this is the Manager Web Editor, which uses the Light theme (see Figure 5, above), regardless of what is specified in the application or on the theme parameter. This re-emphasizes why it is important to make your changes in each of the available Text Styles resources – just in case the theme used changes. You could use the theme parameter to force the use of a particular theme but as noted, this could be overridden by the user at display time, or by SAP Enable Now itself, during editing. (I have seen situations where the Tile Editor used the default Text Styles Resource and not the appropriate custom one for the specified theme, but this resolved itself so may have been a caching or timing issue.)

That’s all there is to know about using custom Text Styles for Web Assistant. It’s not really too different from defining Text Styles for any other purpose – just with a couple of additional things to be aware of.