Skip to Content
Technical Articles
Author's profile photo Sainath Chavan

Implement Modern Pop-up Errors/Messages for End Users in SAP Commissions Advance Workflow

Dear all,

This blog outlines the approach to implement modern-style custom pop-ups and error messages on the UI screen within the Advance Workflow product interface, similar to web or mobile applications for enhancing the user experience.

Kindly follow the steps provided below for implementation:

1) Create an HTML Content field from the Custom fields section, deploy it in your form and make Display as Only Value in the from designer.

Setup → FIELDS & FORMS → Custom Fields

2) Write a Groovy script as shown below for your button on-click event/on change of any custom field with the validation to perform.

Setup → DEVELOPMENT → Scripts


     // Your block of code //
	// Throw the error message you want to pop up on the screen in the validation block //
	throw new Exception('Showing pop-up on screen.')
    // Your rest of code //
catch(Exception e)
  String msg=e
  if(msg.equalsIgnoreCase('java.lang.Exception: Showing pop-up on screen.'))
     String popUpMessage = "Showing pop-up on screen."
     String errorBody = GetPopup(popUpMessage)
  // Extend else conditions for other validations

def GetPopup(String popUpMessage)
  String popUp = """<!DOCTYPE html>
/* Styles for the popup container */
.popup-container {
    display: none; /* Hide the popup by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background overlay */
    z-index: 9999; /* Ensure it's above other content */
    display: flex;
    justify-content: center;
    align-items: center;

/* Styles for the popup content */
.popup-content {
    background: linear-gradient(to bottom, #FBFCFC,#FDEDEC);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
    text-align: center;
    opacity: 0; /* Start with 0 opacity */
    transform: translateY(-20px); /* Slide in from the top */
    transition: opacity 0.5s ease, transform 0.5s ease;
    width: 300px; /* Adjust the width as needed */
/* Styling for the popup */
.popup-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;

.popup-message {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;

.close-button {
    background: #3498db;
    color: #fff;
    padding: 7px 14px;
    border-radius: 7px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;

.close-button:hover {
    background: #2980b9;

<div class="popup-container">
    <!-- Popup content -->
    <div class="popup-content">
<img src="" alt="Error" width="70px" height="70px">
        <p class="popup-message">$popUpMessage</p>
        <span class="close-button" onclick="hidePopup()">OK</span>

// JavaScript functions to show and hide the popup
function showPopup() {
    const popup = document.querySelector('.popup-container');
    const popupContent = document.querySelector('.popup-content'); = 'flex';
    setTimeout(() => { = '1'; = 'translateY(0)';
    }, 100);

function hidePopup() {
    const popup = document.querySelector('.popup-container');
    const popupContent = document.querySelector('.popup-content'); = '0'; = 'translateY(-20px)';
    setTimeout(() => { = 'none';
    }, 500);

// Automatically show the popup when the script is loaded/triggered
  return popUp;

* Modify the HTML contents and styles to suit your requirements.

For instance, considering the code provided above, the resulting pop-up would appear as shown in the below snippet for example:

Thank you for taking the time to read this post. Hope you find that helpful.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Yogananda Muthaiah
      Yogananda Muthaiah

      Great blog, keep writing more and more to spread your knowledge across SAP network Sainath Chavan 🙂 Great job !

      Author's profile photo Sainath Chavan
      Sainath Chavan
      Blog Post Author

      Thank you for the encouraging feedback! Keep inspiring Yogananda.

      Author's profile photo Duc Dinh Tien
      Duc Dinh Tien

      Thanks Sainath Chavan, this is great post. I hope you can share more topics about SAP Commissions Advanced Workflow especially related to UI/UX.

      Will keep following you !!!

      Author's profile photo Sainath Chavan
      Sainath Chavan
      Blog Post Author

      Absolutely! I'll strive to provide more content related to UI/UX in Advanced Workflow. Thank you for your interest and positive feedback.

      Author's profile photo Lana Nikolic-Cvijic
      Lana Nikolic-Cvijic

      Hi everyone,

      I'm sorry, but I need to inform you that from the perspective of SAP Advanced Workflow Engineering this is not a recommended way to use HTML custom field. Only using plan HTML and CSS is recommended.

      If javascript is used inside any scripts in Workflow, engineering support for such implementations will be limited.

      Loading of external JS libraries inside scripts in Workflow is representing a security concern and we can't guarantee that such solution will always be working.


      Best regards