I need more than 5 tabs

Hello,

I’m reproducing an old Flash-based UI in React Studio. I have a tab bar with more than 5 tabs, but i’m limited to only 5 in React Studio. So i’m creating a new tabs component based on react-tabs. I’m trying to design it to work in the same way as the built-in tabs. That is, you select how many tabs you want and it creates that number of form items dynamically, one set per tab (Title,Unselected State, Selected State, Target Component). However, in mine, when the user increases the number of tabs, I don’t see my newly added form elements that I put into this.inspectorUIDefinition. I suspect i need to refresh React Studio somehow. Can anyone advise me on the correct approach? Thanks.

Regards,
Dave

Hi,

Do you mean that you’ve edited the generated code and want to reflect that back to Studio or are you working on with plugin?

If you edit the generated code then it will not reflect back to studio. Studio is not connected to generated code in any way; it would be almost impossible to reverse engineer any kind of custom code into visually editable format.

We do have new “Tab bar” feature coming in the upcoming months. New “tab bar” will be more versatile than the tab component.

I’ve wrapped npm module react-tabs and am trying to get it to behave similarly to the built-in tabs component, in that you specify how many tabs you’d like, and dynamically get a form to fill out for each tab. If you add one more tab, one more form appears in the Element tab of React Studio. If you delete one, the last one goes away. This works great in the built-in tabs component, but I can’t seem to get mine to work. I assumed that by adding/removing array elements to this.inspectorUIDefinition, for each tab the user wants, it would dynamically update the React Studio Element tab with this data. This is exactly how the built-in tab component works, but I can’t make mine work that way. When I add or remove elements to this.inspectorUIDefinition, it doesn’t show up in the Element tab for my component in React Studio. So the built-in tab component (a.k.a the one that comes with React Studio) must be doing some sort of refresh operation. I hope this is clear.

Thanks.

Dave

And I look forward to the new “Tab bar”, but can’t wait months to get a solution so I have to get this working. Thanks.

Dave

Hi, you can call refreshUI method to request inspector UI refresh.

Here’s an example plugin: https://s3.amazonaws.com/sc.neonto.com/ReactTable.plugin_v5.zip

In the example inspectorUIDefinition is a function where it builds the definition which is partially dynamic. When the user choose data sheet it calls refreshUI method in _onSelectSourceDataSheet function.

Perfect! Thank you!

Dave

1 Like