Tabs Component Instructions

Hi There,

Are there any instructions available to understand the mechanics and how to use the Tabs component from the Marketplace?

Hello, @Aaron_Alpeter,

if you click on the Documentation link here, you will see a doc for this component:

https://github.com/Backendless/ui-builder-library/tree/main/components/bl-tabs-component

Regards,
Stanislaw

Hi Stanislav,

Thanks for sharing the documentation. I have a few follow up questions.

The Tab component doesn’t come as a data container out of the box and it appears that the logic associated with the Tabs is looking for named blocks instead of properties inside the data table.

I’ve named the blocks in question appropriately, but I think the crux of my question is if I should be able to edit/add blocks from inside the Tab Component? If so, I am only unable to edit the logic and not the actual component itself.

Hi @Aaron_Alpeter

The Tabs component is a container component which renders tabs according to the passed list of tabs (see the Tabs Logic/Settings in the doc)
It allows you to put anything into the component and then control what exactly components/blocks you want to show according to the current tab

In case you want to compose tabs dynamically you can build a list of tabs and use Repeater render blocks inside, since each Repeater has access to the RepeaterItem DataModel and to the Tabs Component Data Model you can control what block is visible

Hi @vladimir-upirov — unrelated question but related to the Tabs component: on page load, no tab is selected. Even if we put the tabs inside of a block which has this logic:

it doesn’t seem to matter, no content is shown until user actually clicks on a tab. Even worse, when user clicks on the first tab… nothing happens (the content in tab1 is still not visible). Only when clicking tab2 and then tab1 do we see the content for tab1. How to make tab1 content appear by default when the page or parent container loads?

Hello @Alex_Klein

Unfortunately, I can’t achieve the behavior that you described. Could you please create a minimal reproducible example, and share an App ID and Page Name where I could find it?

Regards, Dima.

Hi @Dima sure — APP ID is AE4235E1-DBB7-C6F0-FF4A-E0378B0B2B00, there is a container “AK_Playground” and there the page is called “tabsComponent”. Thanks for having a look :grinning:

It’s really inconvenient to handle it. I have created an internal ticket to improve some things there and we will notify you when it will be implemented.

As for now, you could check the workaround that I created for you(located in the same place of logic).

Thank you for informing us!

@Dima thanks a ton… we’ve decided to build our own tabs component according to the recipe by @Hanna_Syniavska, this way we have more control over various things

Hi, @Alex_Klein !

We are happy to announce that the “Tabs” component has been updated to the 1.1.0 version with a new Setting, Events and Readme Usage changes. You already can try it on the Marketplace or Update your actual component to the last version in your App.

Happy Codeless Coding!