I would like to offer an alternative. This is a tough problem, as these snackbars take a lot of logic to implement, using timers (after  seconds), conditions (close page/click) etc. I have tried this many times using basic Mendix components, but the system is clunky and will result in a lot of maintenance. E.g. what if you close the page – should the timed-out logic still close your snackbar? Will it still even be there? What if you click the message? And should this be context dependent or independent? Using standard Mx components, this is virtually impossible to develop without having over-extensive maintenance, just of a simple snackbar.

Therefore, I'd like to offer considering adding a JavaScript action with the code below (it's ready to use). This single block of code is all you need to trigger you snackbar, and it will self-destruct after the time-out. If you place it in the right parent (class), a page-reload will automatically mean that the content in the parent-class is binned, and your snackbar will be binned along with it. Here is the code for the snippet:

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import { Big } from "big.js";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * JavaScript actions that creates a Snackbar div in the dom as first child in the input parent class. The snackbar contains a p with the input sourceText. It can be given a className that will allow it to be styled in any way, e.g. including an image. You can also set how long the SnackBar will be shown.
 * 
 * WP 26-8-21
 * @param {Big} timeOutLength - the time of length the snackbar needs to be shown in ms.
 * @param {string} sourceText - the text to display in the snackbar
 * @param {string} parentClass - the class the snackbar should be appended to, starting with a full stop: e.g. '.class'. The first element in the document with said class will be used. The snackbar will become the first child.
 * @param {string} classNameToGive - the classname that will be given as attribute to the snackbar, without full stop, e.g. 'snackbar'; this sets the styling of the snackbar. Only add 1 class, or the clickToClose action will not work. Add images to the class in question by using '&:before{}' to the p element in the snackbar, within your style class.
 * @param {boolean} clickToClose - do we want the snackbar to have an onclick function to hide itself?
 * @returns {Promise.<void>}
 */
export async function JsA_Snackbar_CreateAndShow(timeOutLength, sourceText, parentClass, classNameToGive, clickToClose) {
	// BEGIN USER CODE

	// constant needed for asynchronous (waiting time) call below
	const delay = ms => new Promise(res => setTimeout(res, ms));
	

	//function that creates and removes the snackbar
	async function showSnackbar(){
		//create div for the snackbar, with the proper id and with the right class
		let snackbar = document.createElement('div');
  		snackbar.setAttribute('id', 'snackbar');
  		snackbar.setAttribute('class', classNameToGive);


		
  		//do we want to set an onclickto close the snackbar? If so, set the right on click action
  		if (clickToClose){
  			snackbar.setAttribute('onclick', `document.querySelector('.${classNameToGive}').style.display = 'none';console.log('Snackbar hidden');`);
  		}
  
  		//create p with the source text.
  		let paragraph = document.createElement('p');
  		paragraph.innerHTML = sourceText;
  
  		//add the p to the snackbar
  		snackbar.appendChild(paragraph);
  
  		//find the element to place the Snackbar in
  		let parentElement = document.querySelectorAll(parentClass)[0];
		parentElement.insertBefore(snackbar, parentElement.firstChild);
  		console.log('Snackbar appended');
 
  		//wait for a bit
 		await delay(timeOutLength);
		
  		parentElement.removeChild(snackbar);
  		console.log('Snackbar removed');
	}

	//run the code
	showSnackbar();
	
	// END USER CODE
}

The input parameters are visible above, but they should look like this in your JavaScript Action settings:

To use this JavaScript action, make sure you ACT_Object_Commit is a Nanoflow, first call on the Microflow to save your object. Return a boolean Success → if true, call on this action. It will show a snackbar that will look like this:

This snackbar will close itself after the time you put in the JavaScript action, e.g. 3000ms, or upon click if you set clickToClose to true.  Here is the CSS you can use to style your snackbar; make sure to apply the '.snackbar-javascript’ class as well as an input parameter in your JsA.

.snackbar-javascript {
  position: absolute;
  top: 100px;
  left: calc(50% + 50px);
  height: 0px;
  background-color: $form-text-gray;
  color: $white;
  height: 56px;
  font-size: 16px;
  font-weight: 200 !important;
  line-height: 24px;
  border-radius: 8px;
  border: none;
  z-index: 999;
  opacity: 0.8;
  padding: 16px;
  cursor: pointer;
  @extend .fade-in-snackbar;
}


//class that makes the snackbar fade in.
.fade-in-snackbar {
  animation: fadeIn 0.5s;
  -webkit-animation: fadeIn 0.5s;
  -moz-animation: fadeIn 0.5s;
  -o-animation: fadeIn 0.5s;
  -ms-animation: fadeIn 0.5s;
}

And here is an example of the JsA in a Nanoflow, including the preferred parentClass (using this class will mean an auto-close of the snackbar upon page refresh, and a centrally-aligned snackbar on your page).

Hope this helps. If it did, please mark as correct ;-)

Best regards,

Wouter

If you are saving your data using a microflow, you can use Show message activity.
Look the next example, on the CreatePostPage on the On Click option of the save button, I call a microflow that creates the Post object and sends it to an API.

Inside the activity I put the message:

And the result is:

Hope it helps.

Hi Preethi Paramesh,
 

You can call a pop up which display the Success Message at the end of your save microflow . There should be a close page before the pop up page so that you will be navigated to the Home page. In your Success Pop up page you can put a Microflow timer widget and Configure a microflow which has two activities – Delay Java Action (You can set how many seconds the pop up should be there ) and a close page( Which closes the Success popup Page) .

Note : Delay java action is part of the community commons Module from market place .

You can design your pop up like a toaster message using custom styling.
Hope this helps!!