I have an SPA with 18 Reusable Elements.
Everything is a RE.
I have a problem with showing a RE (home) on page load when the index page is first loaded.
I have searched every video and forum post I could find about this situation and some come close to answering it, but stop short of the complete answer.
I’m just not understanding how Bubble handles this.
I have all the group navigation in an option set (Nav).
I’m using a custom event in my workflows to create a custom event when a link is clicked.
From what I’ve been able to figure out when everything is a RE, every time a link is clicked the page is reloaded.
So, setting a workflow to ‘when page is loaded’ create a custom event ‘get option home’, doesn’t work because when another link is clicked, the page is reloaded and the workflow ‘when page is loaded’ is triggered.
I have set the home RE to visible on page load, but since every link clicked is a new page load, home is shown and the value of the link clicked is shown below it.
I have tried to use a custom state ‘first load’ set as a boolean, and reset the value to no, but that doesn’t work because every time a link is clicked it resets everything as though it is a first load.
Maybe I’m overthinking this too much. Maybe I have been trying to figure this out for so long that I’m overlooking something simple.
Does anyone know what I’m doing wrong?
For starters, don’t use the link for the user to click to navigate to another view, since as you know it causes the whole page to reload, which for an SPA is terrible UX. You can very easily make the change to the URL to show the different reusable element by using the Go to Page action, which when navigating to the same page it is already on (ie: SPA) it does not reload the page and also it does not lose the existing custom state values.
Then, to the issue of a Index page showing the ‘home’ reusable element, as you are already aware, you have conditions on each reusable element that are referencing the URL to change the property of the reusable element for ‘this element is visible’…so, since the index is not going to on first load have the necessary values in the URL to show the ‘home’ reusable, add another condition (or use the OR operator to extend the expression) to say, when URL and whatever parameter value you use to denote which reusable should be visible, you would say ‘is empty’ and make the home reusable visible, because, if the the URL parameter is not in the URL it is the same as it is empty.
2 Likes
The page is not reloaded if you use “Go to page…” on the same page, changing parameters… I mean the Condition “When the page is loaded” will be executed just at the beginning .
You can use States between elements and conditionals related to this states to trigger workflows or show things
1 Like
Thank you @boston85719 for your response.
By ‘link’ I mean clicking on a link in the menu, ‘blog’ etc.
The menu is in the header which is also a reusable element.
Although I had previously tried the ‘go to page’ but still had the same issue with the page reloading since it was navigating to another reusable element.
The other option I had been considering was using javascript to save session storage but it seems there has to be an easier way.
It is not possible for the ‘go to page’ action to navigate a user to a reusable element, for one, the ‘go to page’ is for navigating to pages, and two a reusable element can only be viewed when it is placed on a page.
The fact that your menu is in a header which is a reusable element itself does not make it impossible to follow the instructions I provided on how to make the functions you want to occur. I have been doing it in my apps for 6 years now.
Yes, the easier way is the way I outlined. Give it a try and you should be able to get things working as you want them to. If not, report back with screen shots of how you have things set up and I’ll let you know what you need to fix.
1 Like
Thank you @boston85719. I was using ‘go to page index’ (same page) and sending URL parameters.
All of my RE are on the index page.
I’ll relook at the setup I have and implement your advice.
I always read your comments in this forum because I know you know what you’re talking about.
Later today I’ll take another look at my setup and report back.
Thank you again.
1 Like
There’s another way to achieve this same setup and it is using the option sets. Setting different options set inside of the options menu and then calling that option in a workflow to either show or hide elements with conditionals for that element.
1 Like
Thank you for all the helpful comments.
I went back and took a look at everything again.
I had been working on this so long I had a couple of things I had to delete that I had added to try and get things to work and had forgotten to delete.
I did away with using a custom event in the workflows and just used ‘go to page index’ and then got the option that related to the link the user was clicking (send more parameters to the page).
On my index page I have a ‘when page loads’ to show the home page.
Everything is working now.
@boston85719 thank you for your help. I had been working on this so long that my mind was getting confused. Your post helped me stop and get my focus again.
Forgot to add: On my ‘when page loads’ I added a conditional 'only when get v from URL is empty"
That is not really the same setup. The best approach for an SPA to have ‘views’ visible or not is to use URL parameters or URL path with conditionals on the elements (either groups or reusable elements) whose conditional expressions reference either the URL parameter or path list item to determine if the property to change (ie: this element is visible) is met or not.
Each group or reusable should have on page load is visible not checked, so nothing on page load is visible, then each should have a single conditional to determine when to make it visible based on the URL parameter or path list item.
This way, you have URLs that can be shared and navigated to and have the right elements visible. Additionally, as much as possible, and in this situation it is possible, you want to avoid using workflow actions to hide or show an element and instead use the reactionary functionality of Bubble (ie: conditionals to make an element visible or not). For SPAs this is definitely an area to make use of that, because when you hide something with workflow action to make it visible again you have to show it with workflow action, so for the purposes of changing views you would need to hide an element and show an element, whereas with the use of conditionals to make an element visible, you just need to change the URL parameter or path list item.
But, the use of option sets as a list of menu navigation choices is a good way to ensure your conditions are setup properly as you don’t need to remember spelling or anything for the URL parameters or path list and can use the option set values.
2 Likes
