What's the best solution to set the state of a page from a Reusable element

I believe I did my best searching the forums and googled it up. But from what I understand there isn’t a simplistic way to have a reusable element effect the state of another reusable element or page.

Here’s my current scenario.

I have a dashboard site with a sidebar. The sidebar is a reusable element. On the sidebar there’s a dropdown select for a list of Companies the current user would be associated with.

The interaction I’m going for is that the user can ‘switch’ companies from the sidebar and the dashboard would reflect what’s being display based on the company selection.

I’m not currently looking for a solution that requires for me to pass data through the url, though that may be an option for me to explore later.

My current go-to solution that I believe would work is…
Create a state ‘company-selected’ on the sidebar element.
Create a state ‘company-selected’ for the dashboard ‘page’
Create a workflow on the dashboard ‘page’ that says…Run this every time, When sidebar.company-selected state is not company-selected state.
Run Set state of dashboard.company-selected state to sidebar.company-selected state

As a bonus discussion…The actual scenario is a dropdown list of the current user’s associated companies AND locations (Stored as separate datatypes), ideally the user would be able to select both company or location. and the data shown on the dashboard would display accordingly and I’ve just realized it might be a pain in the butt for me to pass the selection of either location or company through a state because they’re different datatypes. Hmm, I’ll probably have to settle on having a state for the company and the location, on both the sidebar and the dashboard.

Yep seems fine.

Don’t want to use URL parameters? Would be easy and clean. Only thing that might be weird is you have to do the Go to page action so you have specify a certain page, if this reusable is on a bunch of pages it might have to take them to a main dashboard when they pick from the dropdown.

Otherwise I think there’s a plugin to “add” the parameters to the current page, and I saw in the February community update they mentioned something about more dynamically adding parameters in the near future

1 Like

I think I actually ended up figuring it out and it seems to be working for now…It feels a bit messy because I actually have two separate reusable elements that has the company selector(depending on whether you’re viewing on mobile or desktop). So I had to have multiple listeners for the change in state for each one.

I currently have one dashboard page as a ‘single page app’ and a few other odd pages that may need the sidebar. Honestly, I think I mostly did it just so it feels more organized. Each ‘page’ within the dashboard is a re-usable element. I’m hoping this setup is sustainable and I won’t run into the whole 'the editor can’t handle all the stuff thrown into a single-page-app.

Sneak peak…

1 Like

I suppose the dropdowns on each reusable could autobind to some field like the Current user's selected-company, then on page refresh it would keep the selection.

And your dashboard references the Current user's selected-company

Multiple ways to go about it of course :+1:

2 Likes

Probably a good way to go about it as well… If not better. As I was thinking I’d need to probably store the latest selected company. For the next login or page load/open. It originally just seemed odd to me to do a push(to user’s selected company) AND fetch(grab associated company data) . Instead of just a fetch on selection.

You really get around Tyler. Much appreciated.

1 Like

Yep storing the selected-company in the database will survive logins/logouts/refreshes/etc. URL parameter will survive refresh. Custom state won’t survive if they refresh

The push/fetch is a non issue it’s just one field

Just thought I’d add if anyone is following along. Depending on your use-case, a potential downside of auto-binding to a user’s field of selection would be that, it limits the user’s interaction to one company at a time. For example, if anyone is like me, when dealing with apps like this. I sometimes like to have two windows open, one for one company, one for another company, to view data separately. I’m assuming if you auto-bind, it’ll push that update among all the windows.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.