Hacking Flash to enhance it

Need Help
#1

For a project, I need to be able to send multiple notifications to the user browser upon an action.

Right now, after the action, the user is redirected to a new page which currently displays a simple Flash::success message.

The Flash system is able to send multiple messages one after one, there is a queue bag handled by OC.

I need exactly this system to send out different notifications with a more complex design than a simple message, like I need to add 2 images and two text paragraphs.

anyone already achieved something like that by any chance?

thanks

#2

Hi Chris

we use browser events and Bootstraps stackable toasts for something like this.

Browser events: Event Handlers - October CMS - 3.x
Boostrap: Toasts · Bootstrap v5.2

It’s pretty straight forward. We send an array of messages (with content and the BS style that should be used) to the frontend and the JS eventhandler creates a toast for each message.

1 Like
#3

Thanks @marco.grueter
Defintely a great solution when the page is static but not for a dynamic scenario,

my scenario is this:

the user is on a lesson page.
he does the assignment and submits it. Its a AJAX process.

The AJAX Handler is doing its stuff, updating data and calculating points and badges.
At the end of its process, it sens a redirect value to the Javascript code ($.request) which implement a success method to handles the redirect.
Then the user is landing on the next lesson.

So the points and badges attribution are happening in between, and needs to be display in the second page. That is why I am using the Flash method because it has a queue bag while the dispatchBrowserEvent does not have.
Meaning that even if I dispatch them, the JS code on the frontend does not catch them because it is stuck in the AJAX request process I am guessing or in between pages.

Or am I missing something ?

#4

Ah I see! Yes, the redirect makes it a bit harder. But I am not sure if Flash messages are capabale of displaying multiple messages on a single return.

You could think about decoupling the badge and points display from the rest of process, so it gets a bit more flexible. E.g. whenever a user opens a lesson page or any account page, you could check if the user was recently awarded badges or points and display a notification or popup in the frontend.

That’s basically what we do, just in a more general manner. Some of our actions create notifications, and an event loop in the frontend periodically checks if new notifications are available. If an action creates a notification during it’s execution, we send the messages with browser event - just so we don’t have to check for notifications in each AJAX request handler.

If you’re set on using Flash messags, you can also customise and style them: Flash Messages - October CMS - 3.x
If you render the content as HTML in the backend, all you need to customise is to echo the messages “raw”, eg

{% flash %}
    <div class="alert alert-{{ type }}">
        {{ message|raw }}
    </div>
{% endflash %}

I personally would try to decouple the notifications from the rest of the process, with the intention of having a flexible notification system for the frontend.

Hope that helps!

#5

I could write a specific plugin attached to any layout that will dispatch all the events stored previously in the session by the different process that generate points and badges (its based on internal event as well)
Worth the idea.

My current solution is indeed to use the existing Flash {{ message | raw }} to inject some HTML inside ut I am not satisfied with that solution.