Forum Academy Marketplace Showcase Pricing Features

Reusable Element Communicating Across Pages

Hello!

I am trying to set up a sidebar menu to help navigate my app with a reusable element. It was my understanding that I should be able to have a reusable element be available on any page of my app with consistent workflows. The issue I’m having is getting the reusable element to communicate with anything outside of itself.

I have big picture categories in the menu (Listings, People, About, etc) and sub categories under each, for example “favorites” under the Listings category. When clicked, “Listings” should navigate the user to the correct page in the app. I would like to allow the user to click on “Favorites” under the “Listings” category in order to navigate to a filtered/conditional view of the Listings page showing only favorited items.

On each page, I have set custom states to display the correct version of that page, in this example, only listings that have been added to the user’s list of favorites. This works for any buttons on the actual page, but I cannot reference the reusable element from the page or vice versa.

Is there a way for me to communicate a custom state set within a reusable element to also be reflected on the page it affects? If not, is there a better way to set up navigation like this that includes setting a state for page that is the subject of the navigation?

Thanks in advance for your help!

-M

Hey @mjwerdmuller - you can use a reusable element to communicate with the page it’s on by setting actions to change the custom state of the reusable element itself when editing it. This can then be referenced for other actions. You can also create custom workflows within the reusable element that can be accessed by other elements on the page it is on.

In answering your second question re; navigation, you may find a use for navigating with sending parameters to the page and then using that to display the information you would like. e.g. clicking a button from www.yourapp/index —> www.yourapp/listings?selection=favorites. ‘selection’ in this case would be the parameter you set up. Kind of like a custom state within your URL.

Hi @DjackLowCode , this is extremely helpful! In reading your suggestion, I think I was trying to reference the reusable element before I had placed it on the page I was working on. I’m building it to replace another element and wanted to make sure it worked as expected before I went too far. It makes sense though that I was having trouble as long as the RE was still “in the void” rather than on the page already.

I will definitely experiment with the parameters. I use them currently for the main navigation from page to page but didn’t realize I could use them for sub-navigation to each selection.

Thank you so much for your help, I really appreciate your expertise!

No worries - all the best :slight_smile: