Controlling Visibility Based on Reusable Element's Loading State

[Xtine]

Hi

I want to control the visibility of certain content on my page based on the loading state of a reusable element. I’ve tried a few approaches, but I’m having trouble achieving the desired result.

Current Setup:

• Reusable Element: “REreport”
• State in Reusable Element: IsLoaded (Yes/No)
• Goal: Show or enable specific content on the page only when the IsLoaded state of the reusable element is ‘yes.’

What would be the correct workflow setup to ensure that content is displayed only when the IsLoaded state of the reusable element is ‘yes’?

[hergin]

The conditionals dont work? Because I have a similar setup and it works like a charm. Elements in the page will be visible or not conditionally based on RE’s flag.

[Xtine]

It´s probably something I´m doing wrong.

Can you share your workflow step by step ?

[hergin]

You have to do vice versa. Please share yours so we can find what is wrong with yours.

But here is what I do:

1. In the reusable, I update the custom state in some actions based on some clicks etc. This one is not new.
2. And in the page where I insert the reusable, I added some conditionals based on this reusable’s custom state.

[Xtine]

In my reusable element, I have a custom state called “Status.” This state is not on the main element but on an element inside the reusable element. This arrangement is necessary because I am utilizing embedding within this element.

When the status is set to “Rendered,” the content in the embedding is fully loaded. In my workflow, in the step following “Set state to Status = Rendered,” I have “Set State to RepatingElement isLoaded = YES.”

On my page, I hide all elements and display a spinner until various conditions are met. One of these conditions is:

When the page is loaded (Only when Page loaded entirely is yes and “the repating element”'s isLoaded is YES): Show header/Footer/Navigation/Main content.

However, my page is only loading, and the custom state isLoaded doesn’t seem to be activated.

[hergin]

@Xtine

In my workflow, in the step following “Set state to Status = Rendered,” I have “Set State to RepatingElement isLoaded = YES.”

I couldn’t get this part. Are you setting isLoaded in the reusable as well?

Because the other part you have described are working. See the demo below:

It has a reusable. The reusable has a custom state. In 3 seconds, the custom state is updated (in the reusable’s workflow).

And in the main page, there is a text that conditionally becomes visible when the reusable’s custom state is rendered.

Here you can check the details:

Bubble Editor - Tests for Forum 9

[Xtine]

Thanks! I added a rule in the workflow of my page instead of a condition on the element I wanted to hide until it was fully loaded!

But it looks like something still is missing:

This is my RE:

On the element on my page who I want to hide until its fully loaded I have this:

But it seems like the Reusable element doesn’t load as long as it’s not visible on the page? Cause my page is just loading and loading and the Condition never get true.

[hergin]

More like sonething is not working. Are you sure pbireport rendered is working successfully? Because custom states work as you see in my demo. This is definitely something related to some external event not firing or working as you expect.

[Xtine]

I have no idea! But, I actually did a workaround with a floating group on top until the RE was fully loaded.

Thank you so much for your time @hergin

[hergin]

My suggestion in these cases is try to localize the problem as much as possible. If it is complicated and in a bigger setup, you cant easily find a solution.

1. Create an empty new app and just test this pbirendered issue.
2. Do something on the page when it is rendered or loaded.
3. Then, put it inside a reusable and again doing something small.
4. Then, slowly bring it to your setup on your actual app.

You will find what is the problem at some point. Good luck.