Forum Documentation Showcase Pricing Learn more

Is there a trick to get Reusable Elements to affect elements on separate pages?

Hello,

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?

Thank you,

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.

2 Likes

Hi Eli,

You are a LIFE saver. I will try to implement this immediately!!!

Thanks so much! If I have any questions can I hit you up?

Thanks,

You bet, my friend :slight_smile: I’ll be traveling this weekend but I’ll try to respond when I get a chance. Good luck!

1 Like

I wrote a post earlier that explores some ways of transferring info between reusables that may be interesting: A guide to advanced use of reusables

2 Likes

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;

  1. When a group is visible the whole group is not visible on laptop or desktop. It’s cut off.
  2. When a group is visible, you cannot scroll up or down the page to see what is cut off.
  3. When a group is visible, the scroll starts at the bottom of the page and is inverted.
  4. 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.

I would greatly appreciate any advice on this.

Thanks,

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.

image

@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.

image

Make sure your footer group is all the way at the bottom and is position in reference to the bottom. Good luck!

1 Like

Hello Eli

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.

Thank you,

Hey @randreas, 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.

2 Likes

Thank you so much, Eli

I will start playing around with this as soon as possible. You’ve been an amazing help.

Thanks,

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.

Thanks again.