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
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…
… and if I delete the top two alerts, you have this…
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.
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?
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.
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!
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.
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!
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.
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”
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!
