I’m familiar with showing and hiding groups that are actually part of a reusable element to create the experience of multiple pages within an app, but what I’m asking is a little different.
Is there a way to make the workflows of a reusable element, manipulate or affect an element or group that exists on a completely separate page?
For example, let’s say I have a Reusable Footer Element that just has a user icon and I place the footer on a page called “User Accounts” that has like a hidden element or something.
Is there a trick/hack that if I click the user icon on the Reusable Footer Element that I can make the workflow show the hidden element on the “User Accounts” page?
As you’ve discovered, reusable elements don’t play well with other elements when you need to pass data to the page or trigger elements. But it can be done.
One way to do this is create a custom state on the root element of your reusable element. Your page can access a custom state such as Reusable Footer Element’s Custom State on a reusable element.
An example would be to create a custom yes/no state on your reusable called Show User. Then set the workflow in your reusable so that when the user icon is clicked it sets the state to Yes.
You can then run a Do when condition is true workflow to show the hidden element on the User Accounts page. I.e. When Reusable Footer Element’s Show User is Yes then show this hidden element.
An alternative way to pass data across pages and reusables is using the BDK ‘Env’ plugin. If you need to pass a lot of data back and forth, it would likely be worth it to use the plugin.
But the custom state will work just find if all you are doing is show/hiding an element.
Thank you for this. I was only able to skim, but already found it super useful.
Does it cover the following situation?
I’m trying to build a one page web app. I’m making progress figuring out how to do this through reusable elements along with hiding and showing groups as a substitute for pages.
Right now I have a Reusable Element that is a Footer. The groups, substituting for pages, are positioned above the footer by setting negative Y axis values. The footer is made into a FloatingGroup at the bottom of the Index page. Whenever a button in the footer is clicked, it shows one group and hides the rest to create the experience of moving between pages.
Here are the issues that I’m having;
When a group is visible the whole group is not visible on laptop or desktop. It’s cut off.
When a group is visible, you cannot scroll up or down the page to see what is cut off.
When a group is visible, the scroll starts at the bottom of the page and is inverted.
Sometimes, after a page reset or after selecting a new group to show, the footer rises higher.
Since I thought it was an issue with placing the groups above the footer, I tested out making the footer a header and placing the groups under it, like how a normal page would look. The same things happened.
This comes from having groups overlapping each other. Instead of overlapping, you want to have your groups stacked on top of each other so that the bottom of your first page container group is touching the top of your second page container group. Exactly how you would stack one box on top of another.
Make all your groups invisible by default and then make sure the Collapse this element’s height when hidden is checked.
@petter’s thread has a section on invisible, collapsible groups that is worth reading.
Initially you will feel like your page is way too tall but don’t worry about. You can have a 30000px tall page and it will function just fine.
Here’s an example of the placement of one of my page container groups.
Make sure your footer group is all the way at the bottom and is position in reference to the bottom. Good luck!
I was wondering if you could help me again. I cannot for the life of me understand how to make any of your 3 suggestions to my original question work. When my brain feels like its picking it up I end up forgetting everything.
I’ve created a test app with the specific elements that I’d need for a demonstration.
I have a testfooter which is placed at the top of the index page. The index page has three groups.
I’d appreciate it greatly if you could implement the best of the 3 methods that you had suggested for making the icons within the reusable element/floatinggroup show one of the three groups on the index page when clicked.
I tend to learn better with an example so I was hoping that you’d be so kind as to apply one of your examples for me so that I could move forward with it.
Preferably, I’d have it where if the “ticket” icon within the reusable element is clicked that it would show the “Group: Tickets” element on the index page. I would greatly appreciate it.
Hey @knocode, I made a short video showing how to do this with conditionals and also with workflows. I left the workflows in the app for you to play around with.
Hello again Eli, dont worry, I just wanted to say thanks again.
Your video helped a ton. I’ve even figured out how to make it so that your method could work for a page that is hiding and showing different groups that are all responding to an action from the reusable element. Though there is still a slight bug, I can definitely move forward for now.
Speaking of the bug, I’m just wondering if you’ve encountered this as well.
Perhaps it just has something to do with how my workflows are set up, but when I press an icon in the reusable element that is meant to show/hide a group, sometimes I have to double tap it for it to run. This mostly happens when one of my hidden groups are already visible, but I’m pressing another icon to show another group.
Was wondering if you’ve encounter something like that before. If not, no biggie. I probably just have to clean up my workflows and conditions.
I’ve build a similar solution you suggested in the video, but it’s not working for me.
Same structure, I have a reusable element on a page. Setting a custom state value with a workflow on the reusable element and expecting a conditional workflow to run on the page. The problem is that I see two instances of the reusable element when I debug the page (wedding wizard and wedding wizard organizer). The reusable element is writing the first one but the page workflow reads the “page instance” so it’s not kicking in as the trigger is not there. Do you have a tip why I have the two instances?
Thanks!
There are a couple of problems with the BDK plugin. The big one is it doesn’t work with lists. It’s also not great for events (like detecting a button click in a reusable element). I really like the idea of it though so I’ve written the Shared State plugin to get around these problems. The basic principles are very similar to the BDK plugin.
Edit:
I think I answered my own question here by looking at your plugin demo. I like the way you handle events and lists. Question: How does your plugin work with conditional visibility and repeating groups?
Original:
Hi there, @BubbleRocket! Came across your post and am intrigued. The fact that the BDK plugin doesn’t handle lists well is a pain point for me. That said, could you elaborate a bit on your second point? How does your plugin handle events (i.e. button click) differently than the BDK method? I’m currently using BDK to build a library of workflows on my SPA, which I can then trigger from any one of several dozen Reusable Elements in which I’m building my UI. Currently, having to change the Env Variable each time I want to trigger a workflow and having to use JSON to pass and parse lists as a workaround.
I’ll be traveling this weekend but I’ll try to respond when I get a chance. Good luck!
