Create tabs for multibple table views

create tabs for multiple table views in ChronoForms.

Overview

The issue is not knowing how to structure the HTML to display different CF views in separate tabs.
Use a matching div with a data-tab attribute for each tab link and place the CF view tag inside that div.

Answered
Connectivity v6
Elita- Elita- 04 Sep, 2020
Hi, all
I wanted to create the same Tab listing as in CCv6 itself -
The code I copied is as follows that would be replicated in the index view (with different names and functions of course):
<div class="ui top attached tabular menu G2-tabs">
<a class="item" data-tab="general">General</a>
<a class="item" data-tab="events">Events</a>
<a class="item active" data-tab="views">Views</a>
<a class="item" data-tab="functions">Functions</a>
<!--<a class="item" data-tab="plugins">Plugins</a>-->
<a class="item" data-tab="locales">Locales</a>
<a class="item" data-tab="permissions">Permissions</a>
</div>

So, my question is - how do I alter the code so on each tab I would have different table that I would create with Views?
e.g. Tab1 - {view:submissions_list1} ; Tab2 - {view:submissions_list2}, etc. How do I define that data-tab using CCv6? Is it possible with in-built functions? Or should I write php? Thanks!

Elita
Elita- Elita- 04 Sep, 2020
Answer
Sorry for messing up this forum - however one might use the solution -
<div class="ui top attached tabular menu G2-tabs">
<a class="item" data-tab="general">General</a>
<a class="item" data-tab="events">Events</a>
<a class="item active" data-tab="views">Views</a>
</div>
<div class="ui bottom attached tab segment" data-tab="general">
{view:general_list}
</div>
<div class="ui bottom attached tab segment active" data-tab="events">
{view:events_list}
</div>
<div class="ui bottom attached tab segment" data-tab="views">
{view:views_list}
</div>
Once again - thanks Max for all this!
Elta
This topic is locked and no more replies can be posted.