Dynamic tabs

Todor

December 16, 2015 at 9:30 am #1061

Hello,

We have a requirement for showing multiple tabs with the same content – the content would be a complex CV which will show many fields (e.g. Order). So if I want to show many Order in tabs, I would have a list of Orders as a service variable which I would like to bind to the Tab control. Is there something that can help?

 

Thanks!

SPARK Support

December 16, 2015 at 12:58 pm #1067

Thanks for the question. Unfortunately, the Tab Section control cannot dynamically set the tabs by binding a list variable to it. You can achieve the functionality you need by using multiple controls in conjunction with one another.

The Horizontal Layout control allows a list to be bound to it to act as a repeating section. Bind the order list to the Horizontal Section, then place a button within it which will serve as the clickable tabs. Using a Data control, bind a single order object (own private variable) to it to be the current order object in the list the user is seeing. Place the coach view underneath the tabs and bind the same order object as the Data control to it. Within the On Click event of the button within the repeating section place this code:

${Data_Control_ID}.setData(${Horizontal_Layout_Id}.getData().items[me.ui.getIndex()]);

When a button is clicked the coach view will be populated with order index in the order list that is the same index as the button selected. So if I click the second button, the second order in the list will be shown. Images attached show setup and results.

Thanks,

Elliot P.

Todor

December 18, 2015 at 11:58 am #1094

Thanks, this is a nice workaround.

In order to make it work however, i need to:

• name the button as some of the attributes of the list item. I’m setting this on the Label Formula of the button, but it is not working: ${Horizontal_Layout1}.getData().items[me.ui.getIndex()].type – type is a business attribute from the listed items.
• Need to make the selected button visible somehow – need to make it distinct from the other buttons.

Another thing I  noticed with the JS doc is it is not very clear to me what methods you can call to what objects. In your example:

me.ui.getIndex() – getIndex is not a method of Button, it is in View. I suppose all CV inherit View , but this is just a guess I make based on an example code. There would be hundreds other occasions where there would be an inheritance but I cannot link it. Is there actually a way to find this inheritance from the JS docs? Probably I will find something later but would help if you could give some directions.