[UI5] Things that Demo Kit didn’t tell you. <MessageToast>

For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.

Interaction with MessageToast

We all know that MessageToast is used to show a short message, and it could fade in and out automatically. But actually we could have interaction with it more than that. Basically during a message toast is showing we could have two interations:

1. If you hover the mouse pointer on the MessageToast, it will keep showing. This is quite useful when user want to read the message for a longer time.
2. If you click on the page, the MessageToast will fade out immediately (default behavior).

Options of MessageToast

Technically you could have many options on your MessageToast. Including size, duration and many others:

1. Duration. The default duration of MessageToast is 3000ms. But for a quite long text this time might be not enough. So you could give a longer duration.
2. Width. The default width of a MessageToast is 15em. But if the text is getting longer maybe a wider message Toast looks better.
3. Position. You could set the positon of the MessageToast with three attributes: my, at and of. The default opition is showing it at the center bottom of the window.
4. Additional function. You could have additional function invoked when the MessageToast is closed.
5. Auto close: when setting this to true, if user clicks on the page, the MessageToast will be closed.
6. Animation duration: this will influence the fading speed of the MessageToast.
7. CloseOnBrowserNavigation: this will influence if the MessageToast will be closed on browser navigation.

Guidelines

Now we know we could have so many opitions for the MessageToast, we need some general guidelines:

1. Normally use MessageToast to show a short success message. Do not show error message or if you need user’s further action.
2. If you want to show a MessageToast and navigate to another page, do the navigation first and show the MessageToast on the new page.
3. If user need to copy the message on the MessageToast, then use MessageBox insteadly.
4. The message should be short and descriptive.
5. It’s not recommanded to change the position setting.
6. The initial duration is 3000ms. Do not set a time shorter than this. If the message is long, set a larger duration to it.
7. The initial width is 15em. Do not use a width wider than 35em.