Skip to Content
Technical Articles
Author's profile photo Soraia Latif

SuccessFactors Alert Message & Message Definitions: Enhance User Experience

Introduction

User experience has become a critical part of a successful implementation of SuccessFactors projects. One way to help customers increase the user experience is by enhancing alert messages and message definitions. These two functionalities are used to throw error messages, warning messages, or info messages during HR Transactions. Alert messages are highly used to remind certain employees about a specific system event that may require their attention.

In this blog, I’ll provide some examples that you can use or adapt to your current configuration.

Details

Before jumping to the samples, it’s important to understand what can be used in both features to format the text.

  • Alert messages support HTML tags. HTML stands for HyperText Markup Language – it is the standard markup language for web pages. HTML elements are composed of opening tags, content, and closing tags.
  • On the other side, message definitions support BBCode (“Bulletin Board Code”). It is similar to HTML in the sense that BBCode also uses tags to format a specific text or word, but with a different convention.

Sample 1 – E-mail address in Alert Message:

E-mail addresses are defined as per the below tags:

<a href=mailto:”people@bestrun.com”>people@bestrun.com</a>

Let’s decode the above expression:

  • The <a> tag defines a hyperlink, which is used to link from one page to another. In our case, we want to open a new e-mail of our default mail client
  • Next we have the attribute href (stands for “Hypertext Reference”) – this attribute indicates the relationship between pages to search engines. In this case, we want to activate the default mail client on the computer for sending an email – so we use the “mailto” link.
  • The last part is the content that would be displayed in the alert message with the embedded link (marked in bold). For this example, I have used the e-mail itself, but you could have used any other text.

Image%20from%20Demo

Image from Demo

 

Sample 2 – URL in Alert Message:

HTML links are defined as per the below tags (HTML):

<a href=”https://www.google.com/” target=”_blank”>here</a>

Let’s decode the above expression:

  • The <a> tag and href element were already clarified above
  • target=”_blank” is used to open the link in a new browser window or tab

Image%20from%20Demo

Image from Demo

 

Sample 3 – Tables in Alert Message:

Tables are defined as per the below tags (HTML):

 <table style=”width:100%”>
  <tr>
   <th>Document Type</th>
   <th>Renew Start Date</th>
  </tr>
  <tr>
   <td style=”text-align:center”>Permanent Resident </td>
   <td style=”text-align:center”>6 months before exp date</td>
  </tr>
  <tr>
   <td style=”text-align:center”>Conditional Permanent Resident </td>
   <td style=”text-align:center”>90 Days before exp</td>
  </tr>
 </table>

Let’s decode the above expression:

  • <table> – this tag defines the overall table
  • width is an HTML attribute that specifies the width of the element – since I have chosen 100% – it means this table will occupy all available width within my page
  • <tr> – this HTML element defines a row of cells in a table
  • <th> – this HTML element defines a cell as the header of a group of cells
  • <td> – this HTML element defines a standard data cell in a table
  • The text-align property specifies the horizontal alignment of text in an element – since I have used center – it means my content will be displayed horizontally centered in the standard cells

Image%20from%20Demo

Image from Demo

 

Sample 4 – Background images in Alert Message:

A background message is defined per the below tags (HTML):

<p style=”background-image: url(‘https://www.sap.com/dam/application/imagelibrary/photos/291000/291639.jpg/_jcr_content/renditions/291639_homepage_3840_1200.jpg.adapt.1920_600.false.false.false.false.jpg/1644994056676.jpg’);”>

(…remaining content…)

</p>

Let’s decode the above expression:

  • The <p> tag defines a paragraph in a webpage and indicates a line change.
  • Next we have the tag <style> – this tag is usually used to define the style of the area or document that you’re currently working on.
  • The last part is the background-image (which is a property that we can define in an HTML element) and the image URL that we would like to display in our HTML element (please be aware that this image should be placed in a public directory accessible through the Public Internet).

Image%20from%20Demo

Image from Demo

Sample 5 – URL in Message Definition:

Now, let’s take a quick look at how the message definitions can be enhanced using BBCode.

In the below example, I have enhanced the message definition with the following:

  • set the risk level in bold and with a different color;
  • add links to external sites to share more information.

Here you can find the different codes that I used in my example:

Be aware that the country you are visiting has a [b][color=#FF9B4F]moderate[/color][/b] COVID-19 risk. Please check the local guidelines [xurl=https://google.com]here[/xurl] and regulations [xurl=https://www.google.pt]here[/xurl] or reach out to HR.

Tags:

  • [b] – this tag set the specific text in bold
  • [color] – this tag defines the colour of the text. I have used the hexadecimal colour value, but you can use also the colour name
  • [xurl] – this tag creates a hyperlink with the value defined, and it opens it in a new web browser. If you want to open the link on the same web page, you can use the BBCode tag [url].

Image%20from%20Demo

Image from Demo

 

Sample 6 – Dynamic Fields in Message Definition:

Another option to increase the user experience in Message Definition is by adding dynamic fields. The dynamic fields can be defined in the Parameters section of the Message Definition creation page.

In my example, I have added the country in curly brackets (since it is my dynamic field) and I have added the parameter country in the Parameters Section.

Image%20from%20Demo

Image from Demo

The next step is to create a business rule. Once you define the Then statement, the parameter defined in the message definition will be displayed in bold. You just need to select the field that you would like to display – in my case I am picking the name of the GO Country.

Image%20from%20Demo

Image from Demo

Here you can find the code that I add in the message definition text:

Be aware that {country} has a [b][color=#FF9B4F]moderate[/color][/b] COVID-19 risk. Please check the local guidelines [xurl=https://google.com]here[/xurl] and regulations [xurl=https://www.google.pt]here[/xurl] or reach out to HR.

Image%20from%20Demo

Image from Demo

 

Conclusion

This blog post shared some examples of HTML/BBCode tags that can be used in alert message/message definitions as a starting point when thinking about increasing the user experience of your employees or administrators.

Looking forward to your comments and seeing your use cases/experiences on this topic.

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Karen Perez
      Karen Perez

      Great blog, Soraia. Thanks for sharing it!

      Author's profile photo Cristiano Pinto
      Cristiano Pinto

      Well done Soraia! Thanks!