Forum Documentation Showcase Pricing Learn more

How Create Toast Alerts Behavior

Hi I have created a draggable group where I want to place elements to be used as toast alerts. The group within the draggable group has three colour conditions to go with my three test buttons - RED, YELLOW and GREEN.

I can make the group appear with the appropriate colour condition, but how do I do the following:

  • Each time I press a test button, a duplicate group appears directly beneath the one above it.
  • When I remove an alert, all the rest beneath it should move up
  • The grey topbar should remain throughout, unless there are no alerts

Expanded

Collapsed
image

I have no idea if this idea will work for you, but I think I have created what you have described by using a repeating group. So, you have something like this…

alert1

… and if I delete the top two alerts, you have this…

alert2

If that seems at all interesting to you as a solution, let me know and I will be happy to provide the details on how I implemented it.

Best…
Mike

Hi @mikeloc, thank you for taking the time to look into coming up with a solution to my problem.

Youre certainly along the right lines.
So the above alerts could be triggered to pop up and stack by using red yellow and green test buttons?
Could they all be put within a draggable group with grey “top bar” ?
On my alerts pictured above, you will see that there is a group with Range/Bearing/Position text that can be collapsed when hidden. Could this be done on your version too?

Sorry for all the questions :slight_smile:

No need at all to apologize for the questions, @AlexKehoe… happy to answer them. Everything else you are looking to do can be done with my suggested solution… it would just all be done within the context of a repeating group, and the repeating group itself could exist within the draggable group with the grey top bar.

The reason I focused on a very specific piece of your initial post is because the most interesting part of the problem is getting new alerts to stack as the buttons are pressed as well as getting them to “move up” when alerts are removed. The repeating group makes that part very simple, so that’s why I went that route. As I mentioned, if you think it’s a path you want to go down, I can provide the details.

Best…
Mike

Yes, thats the part I am struggling with.

If you could provide further details that would be much appreciated.

Sure thing, @AlexKehoe… here you go…

The repeating group idea starts with an Alert data type, which in my simple example only has two fields…

With the Alert data type in place, your red, yellow, and green test buttons would simply create a new thing in that data type, and each button would set the color field to an appropriate value (in my example, I literally used the words red, yellow, and green as the values for that field).

Now, the repeating group itself is just a search for alerts where the active field is set to yes

To get each row’s background to have the appropriate color, I added a shape that covers the entire row, and I color the shape with the following conditions…

Finally, to get an alert to be removed from the list, I added the delete icon that, when clicked, simply sets an alert’s active field to no, and that automatically removes the alert from the list because the repeating group’s search is only looking for alerts with a value of yes in that field…

Anyway, that’s what I’ve got, and I think it should be enough to get you going down this path. If you have any questions as you go, I’d be happy to answer them. Hope this helps!

Best…
Mike

Hi Mike,

After your great advice, I was able to create the 95% of the alerts functionality I was hope for and I am mega pleased with the results so far! See image below.

The remaining bits that I am struggling with which you may be able to help with are:
1.
Im using the X icon on the grey topbar with the workflow shown below to clear all the displayed alerts. It does the trick but its pretty slow and theres a loading bar at the top of the browser. Perhaps there is a more efficient method?


2.
When alerts are selected, the bright coloured sidebar changes colour by changing the state. When I use the X to clear all alerts, I should also reset the state of the side bar but I cant because the X is not in the repeating group…
3. Similar to problem two. I have a focus group that I want to link to some text in the repeating group to position it the left. However, I cant link it to this text because the focus group is not in the repeating group. The best I can do is to link it to the overarching group but that changes position depending on how many alerts are visible.

95% of the functionality, eh? Ship it! :slight_smile:

I’m really happy to hear that the path I suggested is working out for you. About your questions, I will have to think about #2 and #3 a bit, but I would be doing the same thing you are for #1. I don’t know if there is a more efficient way to do it, but I never rely on users seeing the loading bar at the top of the screen when a process takes more than a couple of seconds to complete. Instead, I show a spinner near where the user initiated the action so they know something is happening. True, we want every action to complete immediately, but that’s just not realistic. In my experience, users are much more receptive to waiting a handful of seconds or more if it is abundantly clear to them that something is actually happening.

Anyway, I will get back to you if I can come up with something for #2 and #3, and again, it’s great to hear that your app is coming together!

Best…
Mike

Hey there, @AlexKehoe… I’m not sure I completely understand #3, but I do have an “idea” for #2, and I want to caveat this response by saying this might be an astonishingly bad idea.

So, focusing on what you said about the X not being in the repeating group, I made an assumption that things would be easier if it was in the repeating group, and there is a way to make that happen. You could create the entire grey bar in a group inside the first row of the repeating group. Then, you could conditionally hide the grey bar group with the condition when Current cell's index is not 1, the element is not visible, and that would make the grey bar visible only in the first row of the repeating group. If you did it “right” (design-wise), it could look very similar to what you have now, I think.

Anyway, like I said, this idea might be really terrible, but it’s just food for thought… or perhaps, more accurately, stale leftovers for thought. You be the judge. :slight_smile:

Best…
Mike

Hi Mike, it was certainly worth a shot but sadly I don’t think we’re onto a winner. See photo below. It hides it (and I had it set to collapse when hidden) but there is still a space where the grey bar would have been.

Re. Point 3. Sorry I meant to add a photo on the original post
Because the focus group with the two extra buttons is outside of the repeating group, i cant give it a position that is relative the the word “Notify”

Thanks again for helping out and don’t worry about these small issues as Ive taken up enough of your time as it is :slight_smile:

Aw, bummer… I knew putting the grey bar inside the repeating group would cause that gap, but I thought collapsing it (like you tried) would do the trick.

It’s been my pleasure to try to help along the way, @AlexKehoe… best of luck with your app!