Skip to Content
Author's profile photo Leandro Cardoso

Notify – A prettier way to display alerts on Design Studio

Hi all,

On my current client, I had to develop a better looking notification system, for alerts, information, error showing and so on.

The one provided by Design Studio is not really user friendly (My boss’s words), so I developed one using a nice little library I found, here is the link if anyone is interested.

noty – a jQuery Notification Plugin

So the Notify SDK is pretty simple, all you have to do is add to component to your application, and set some properties that are as follows.

PrtScr capture.jpg

Delay, is how many seconds you want the note to stay on the screen.

Layout is where you want it to be shown.

Modal, if you set it to true the user will have to click on it in order to be able to do anything else.

Here is what It looks like with the settings above.

PrtScr capture_2.jpg

On your bial code you will have the following options.

NOTIFY.error(“text”);

NOTIFY.alert(“text”);

NOTIFY.information(“text”);

NOTIFY.notification(“text”);

NOTIFY.success(“text”);

NOTIFY.warning(“text”);

The diferente beteween them is just the collor that it’s used to show the note.

PrtScr capture_3.jpg

If you display more than one at a time they will stack like the image above.

Here is the code.

olafecorcam/com.leandro.notify · GitHub

Let me know if you have any questions, and hopefully this is usefull to some of you.

Best

Leandro

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mike Howles
      Mike Howles

      This is really cool.  I like that they are unobtrusive and configurable for the type of message as well as positioning.  Code is lean and readable, too!  (You should release it for use in the deployable Utility Pack 😉 )

      Author's profile photo Leandro Cardoso
      Leandro Cardoso
      Blog Post Author

      You have my permition. =D

      Author's profile photo Mike Howles
      Mike Howles

      Thanks, I've added it to the Utility Pack github repo and listed it in this blog post:

      Design Studio 1.2/1.3 SDK - Design Studio Utility Pack

      Github Repo:

      entmike/DesignStudio1.3UtilityPack · GitHub

      Author's profile photo Xavier Polo
      Xavier Polo

      Great!

      Thank you.

      Author's profile photo Henrique Pinto
      Henrique Pinto

      Hi Leandro,

      great initiative.

      It'd be great if you could create a step by step guide on how to activate the notify sdk for not-so-techie Design Studio users, as well as provide some printscreens to show how this works in a real scenario.

      Abs,

      Henrique.

      Author's profile photo Alex Cruickshank
      Alex Cruickshank

      HI Leandro

      This is excellent work! Do you have it as a deployable plugin for Design Studio?

      Thanks

      Author's profile photo Mike Howles
      Mike Howles

      Check my link to the Utility Pack in earlier comments. It has it in a deplorable form.

      Author's profile photo Alex Cruickshank
      Alex Cruickshank

      I've just seen that and deployed it! Thanks Michael

      Excellent work!

      Author's profile photo Leonhard Gisser
      Leonhard Gisser

      Hi Leandro,

      thanks for this great feature.

      Is it possible to make the NOTIFY-expansion the default for all Messages from Backend (BW), instead of using the example bial code provided(e.g. "NOTIFY.error("text");")?

      I would like to have all messages displayed in the notify container and not the standard message container. So I would have to "intercept" all messages coming from BW.

      Do you think this is possible?

      Thanks again and best regards,

      Leo

      Author's profile photo Leandro Cardoso
      Leandro Cardoso
      Blog Post Author

      Leonhard,

      I don't know if that is possible. I don't think you can intercept the msgs comming from BW.

      If you ever find out, let us know.

      Best

      Leandro

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi,

      current official SDK API is not providing any functions to access the messages produced on server. This means it is not possible w/o breaking API agreement on SDK level.

      You could place an Idea to extend SDK API for Messages in next releases.

      Sorry, Karol