Dynamic Bootstrap Tabs

Wappler General How To
#1

Is there any tutorial how to create dynamic tabs with Wappler?

I need dynamic tabs with dynamic content and can’t figure out how to this the Wappler way.

My main problem is finding out how to create the Master-Detail relationship with tabs and where to put the dmx-bind attributes.

Do I have to use the on click event to change the detail, or is not not necessary in this case?

Thanks for your help in advance.

#2

If you ARE genuinely talking about dynamic Bootstrap tabs:

<ul class="nav nav-tabs">
<li  class="nav-item" is-dmx-repeat dmx-repeat="yourData.data">
<a class="nav-link" data-toggle="tab" dmx-bind:href="'#menu' + $index" dmx-class:active="$index === 0" >{{ yourExpression }}</a>
</li>
</ul>

<div class="tab-content">
<div dmx-bind:id="'menu' + $index" class="tab-pane" dmx-class:active="$index === 0" is-dmx-repeat dmx-repeat="yourData.data" >
<h3>{{ yourExpression }}</h3>
 <p>{{ yourExpression }}</p>
</div>
</div>
#3

Thanks for your help. You lead me into the right direction.

This is the final code:

<ul class="nav nav-tabs" id="navTabstabs" role="tablist">
              <li class="nav-item" dmx-repeat:repeat1="serverconnect1.data.yourdata">
                <a class="nav-link" dmx-class:active="$index === 0" data-toggle="tab" href="#" role="tab" dmx-bind:aria-controls="'#tab' + $index" aria-selected="true" dmx-text="yourdatafield" dmx-bind:data-target="'#tab' + $index"></a>
              </li>
            </ul>
            <div class="tab-content" id="navTabscontent">
              <div class="tab-pane" dmx-class:active="$index === 0" dmx-bind:id="'tab' + $index" role="tabpanel" dmx-repeat:repeat2="serverconnect1.data.yourdata">
                <p dmx-text="yourdatadetailfield"></p>
              </div>
            </div>

@Teodor Could you please check the code, if this is the right way to do it in Wappler? Thanks!

#4

No problem.

If you want the tab panels to have the subtle fade in effect, like the orginal Bootstrap tabs just alter the ‘dmx-class’ attribute to as below:

dmx-class:active="$index === 0 ? ‘fade’ : ‘’"

Edited:

Actually not sure that will work, might have to add the fade class seperately:

dmx-class:fade="$index != 0"

after the active class on the tab panel

#5

The fade class should just be applied to the tabs content as:
<div class="tab-pane fade" .... it should not be added as a dynamic attribute.

So the code (slightly adjusted) should look like:

<ul class="nav nav-tabs" id="navTabstabs" role="tablist">
  <li class="nav-item" dmx-repeat:repeat1="serverconnect1.data.query1">
    <a class="nav-link" data-toggle="tab" href="#" role="tab" dmx-bind:aria-controls="'#tab' + $index" aria-selected="true" dmx-bind:data-target="'#tab' + $index" dmx-class:active="$index == 0" dmx-text="your_expression"></a>
  </li>
</ul>
<div class="tab-content" id="navTabscontent">
  <div class="tab-pane fade" dmx-class:show="$index == 0" dmx-class:active="$index == 0"  dmx-bind:id="'tab' + $index" role="tabpanel" dmx-repeat:repeat2="serverconnect1.data.query1">
    <p>{{your_expression}}</p>
  </div>
</div>

Of course, in the UI select your expressions for the repeat regions: serverconnect1.data.query1 :slight_smile:

1 Like
#6

Well you either bind the fade class or bind -
dmx-class:show="$index == 0" which is not really necssary.

What is more interesting is why add to the already bloated Bootstrap code by using ‘data-target’ when you could just use the href=’’" which is recommend by Bootstrap in their examples:

dmx-bind:data-target="’#tab’ + $index"

1 Like
#7

Found this topic when searching for how to create dynamic tabs. Can this concept be used to add partials, includes or routes to the tab content? Basically replace {{your_expression}} with content from another file.

#8

I have reworked my previous example using the concepts from this thread (instead of jQuery) and an array, to leverage the power of App Connect.

The concept here is that the page loads with the first tab rendered (and it can’t be removed), then as the user selects menu choices, a tab is added for each menu choice. If a tab already exists, I’d like that tab to be selected. All added tabs can be removed by clicking the close icon.

Each menu choice adds a unique value to the array and the tabs are bound to the array. The close icon removes an entry from the array, so that tab and it’s contents disappear.

I have a prototype here, and it’s working for the most part, but it has a couple problems.

  1. The tabs are not automatically selected. I’d like them to be selected automatically as they are added or if the tab already exists.
  2. When you click the close icon, it closes the wrong tab. It closes the first tab instead of the selected one. (Probably an index or value issue.)
  3. The contents of the tabs do not always show correctly. If you add one tab, then select it, nothing happens. You can’t select any tab. If you add another tab, you can select it and the original one (Dashboard), but not the first added one. If you add another tab, now you can select all of them correctly.
  4. This is just a visual thing, but the selected tab does not show as selected. It would be nice if the selected tab would be a different color to show it’s the currently selected tab.

The project is here: dynamic-tabs.zip (351.1 KB)
Could someone please take a look and see how these issues might be resolved.
Thanks, Dan

#9

Has anyone done anything like this in Wappler? I’ve worked with other platforms that had this kind of work environment and users really like it, so was hoping to be able to do it using Wappler. If it’s not possible, what other approach can be taken to allow the user to have work (tabs) open and still navigate to other parts of the system without losing their place in the open tabs?