Title says it all. Tried it. Can’t figure it out.
Hello, from the top of my head. I’m not sure this is the most conventional way.
- Design a reusable element of type group, lets call it “Alert” Design the element however you want your alert to look like.
- Give the reusable element three custom state; of type image, text and boolean (yes/no) respectively.
A. Alert images: image
B. Alert text: text
C. Alert is showing: Yes/No
- On the group, put two elements. Text and image, set their source to the reusable elements states A and B above.
- In reusable element workflow, Do every “5” seconds, set a conditional on the work for onlywhen “Alert is visible”
- Add an action to set the alert’s is showing state to “no”.
- Place the reusable element on the page on which it will be shown to users, uncheck this element is visible on page load, and then give it a condition “this customdefination state is yes”, set property “this element is visible” checked.
- In your workflow to show an alert, simply set the state of the alert is showing to yes.
- You can also set the State A, B above.
N:B you can increase or reduce the Seconds on the Do every 5 seconds workflow depending on how long you wanna show your alert.
I hope that helps. Let me know otherwise
3 Likes
@fuhclifffuhche This is a smart answer. Thank you so much. How did you get this good?
Here’s what I did. I just created a pop-up because I only needed it for one “alert” and placed the image in there.
Thanks!
You are welcome. I have been using bubble for some time now.
Hi, thankyou for this! I followed the steps and have almost achieved my goal. One place I’m getting stuck at is: I wanted to add different images and text in each alert, and not a default image and text in all. After I set the state to a particular alert as showing - any idea how I can add a specific image and text to each different alert?
- Make sure the elements inside the reusable group all get their data from the custom state.
- Make sure the states are on the reusable element itself not a group inside ( doing so will ensure that you can access (set state) from within the reusable element and from outside the reusable element.
- After you place the reusable element on any page of your app, you will be able to set all the state each time you show it.
If you need me to design that in an app so you see let me know.
Just type in that dynamic value space.
Check to make sure the Alert text custom state is of type text
Updated to the Alert.
For those who are familiar with option sets,
-
You can create option sets that have your predefined alert messages.
-
Change the Alert text custom state from text to the option set you create above.
-
Each time you show the alert element, set the Alert text state to the corresponding option value.
To take this even further,
Changing the reusable element from a normal group to a floating group gives a better user experience.
I think I’ll do a step by step guide with pictures,
Another solution, an easier one if you want…
There’s a plugin called “openToast”, it will show an alert the way you want when you run a workflow.
What happens is that the “text” runs html, so you can use the img src, like:
You just can’t let the “title” empty, I put an space
I just made a topic about this for anyone still facing difficulties
Hello, apologies for the multiple doubts: still stuck on the uploading an image part - do I have to upload the image first in my data set?
Else I’m unable to find an image upload button
Yes. If you want dynamic images you need to upload it to the database.
If you have a fixed and specific amount and image type, I’d recommend upload it as option sets
Thankyou so much! I have been able to create the entire flow! The step by step guide with pictures helped a lot - You saved my day! Thanks again!
1 Like
This topic was automatically closed after 70 days. New replies are no longer allowed.