Float messages in my XAF web application

Aim

XAF misses any kind of in-build message box functionality for the web UI (e.g. some embedded toast control contained in the DevExpress DevExtreme control suite):

toast

So lets try to embed such functionality on our own…

Realization

One easy way to do so is to use the DevExpress.ui.notify helper (a wrapper for the toast control). You could use it directly or wrap it into a custom js function into your default.aspx page…

<head runat="server">
    <title>Main Page</title>
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" type="text/css" href="/css/dx.light.css" />
</head>
<body class="VerticalTemplate">
    <form id="form2" runat="server">
    <cc4:ASPxProgressControl ID="ProgressControl" runat="server" />
    <div runat="server" id="Content" />
    </form>
</body>
</html>

<script>
    function showToast(message, type, of) {
        DevExpress.ui.notify(message, type, 1000);
    }
</script>

Dont forget to add the corresponding css as well (e.g. “dx.light.css”).

This js function can be called (like any other js function) anytime on server-side with the following expression:

((WebWindow)this.Frame).RegisterStartupScript("SensorDefinitionBaseControllerExtended", "showToast('Sensor triggered...', 'success', '#viewSite');");

Sample

A corresponding sample can be found under the following URL:

https://github.com/wolfhermann/XAF.sample.toast.messaging/tree/master