UI Builder Tab loses content

Hi

Hope this isn’t a dumb question and is a bug (apologies if not).
I have a UI builder page. It uses Sematic-ui as a react library (Tab - Semantic UI React). Most things work fine.

But on creating a tab element (as shown in a BL video, thanks) the following happens.

Initial state :

Then select Results tab, with expected behaviour:

But then reselect the 'Campaigns tab, and the behaviour is not expected as it does not show the content which was loaded into that tab on page load, only the headers to the table:

Is there some behaviour I’m not handling ? I have dropped the default styles.

Thanks
Paul

hello @paul-barnes

could you please create a test page with minimum UI and logic just to reproduce the issue?

Regards, Vlad

Hi

I recreated the page with minimum behaviour and also removed the classes : https://backendlessappcontent.com/A603AF06-3DDD-6D47-FF01-D559C4DF9300/2F5D244B-421F-7DF6-FF7C-89DE2065ED00/files/ui-builder/containers/default/index.html?page=TabsOnly

But the outcome is the same. Enter the page:

Click ‘Results’, expected behaviour:
image

Then click ‘Campaigns’, and the loaded data table disappears:
image

Curiously also, on the original page, I’m now having an issue where the block with class ‘ui segments tab’ is out of view on the page top left. But I remove the ‘tab’ class, it is visible in the correct place:

With class ‘ui segments tab’:

With class ‘ui segments’:

That issue has not happened before this evening ( I had not changed any code ).

Hope that helps?
Paul

The solution seems to be to have to reload the data from table when you click the ‘campaigns’ tab. Is that intentional ? If so, what happens to that block when it is made to not display, and then display again ? Thanks.

I assume the reason is you set your items to repeater manually

image

what happens to that block when it is made to not display

You unmount it, and all data stored in the component was cleared. You can avoid reloading data by storing items in Page/App Data and getting them using Repeater Logic

image

What about classes - I think that issue is not clearly related to Backendless, but to CSS and styles which use the library that you choose.

Regards, Dima.

Thanks Dima - yes, adding to page data was my next option. Though on a large data set, does that cause problems ? I presume paging of data would have to be done.

Though on a large data set, does that cause problems ?

Depends on the size of the data set. In any case, just storing this data is not so big problem. Performance issues in most cases caused by approaches to work with data.

1 Like