Skip to Content
Author's profile photo Emanuele Ricci

openui5-toastr a powerfull utility to generate beautiful Toast

Everyone know that sap.m.MessageToast is ugly (it’s mean to say but it’s damn true!) so when I want to deploy an app and I need to use some kind of toasts I always try to find the perfect library (that also support FontAwesome).

I’m talking about Toastr, a Javascript library for non-blocking notifications that require jQuery. Toastr is really powerful and easy to use and customize.

Links

Usage

Integration it’s pretty easy, you just need to follow a few steps. You have to bear in mind that this code is for SAP/OpenUI5 1.4x.x and it’s not tested (but it will work) for previous version.

Configure manifest.json

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.

"sap.ui5": {
    ...
	"dependencies": {
		"minUI5Version": "1.30.0",
		"libs": {
    		...
			"it.designfuture.toastr": {}
		}
	},
	"resourceRoots": {
		"it.designfuture.toastr": "./thirdparty/it/designfuture/toastr/"
	}
}

How to use it inside your code

In your Component/Controller/Control add it.designfuture.toastr.Toastr as a dependency and just call it 😉

Toastr.info('This is a call title', 'And this is a call message', {
  "closeButton": false,
  "debug": false,
  "progressBar": false,
  "preventDuplicates": false,
  "tapToDismiss": true,
  "newestOnTop": true,
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut",
  "showDuration": 300,
  "hideDuration": 1000,
  "timeOut": 5000,
  "extendedTimeOut": 1000,
  "rtl": false,
  "onShown": null,
  "onHidden": null,
  "onclick": null,
  "onCloseClick": null
});

Configurations and Methods

Toastr Config

Methods

Build

If you would like to extend and customize the control, you can easily do that but re-building the code with just a simple Grunt command:

npm install
grunt build

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Karthik Arjun
      Karthik Arjun

      Good, Keep going....

      Author's profile photo Nick Yang
      Nick Yang

      Great work, Emanuele.

      I like "Prevnt Duplicates" feature especially. This is also the feature missing in current standard sap.m.MessageToast. Also, "Progress Bar" is a great visual effect. But, for position it doesn't have "Center Center". Is there any reason you not putting this option into position?

       

      Regards,

      Nick

       

      Author's profile photo Emanuele Ricci
      Emanuele Ricci
      Blog Post Author

      Hi Nick Yang this is not a js library developed by me. I've just developed te openui5 library to wrap it. I think that the main motivation to not have a center-center is that is too much intrusive 😉

      These are notifications and not box messages. Take for example Facebook, toasts are shown in bottom left 😉