DecSoft Support - Bootstrap CSS tabs

Bootstrap CSS tabs

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Take a look at some frequently asked questions about us and our products!

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Take a look at our YouTube channel and subscribe to be notified about new videos!

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

John Clarke

If I implement tabs using bootstrap 4 (https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp) how can I get my code to load the content in the contents section from a URL?

John Clarke

The current generation of DecSoft App Builder.

DecSoft

Hello John,

In fact in both AB1 or AB2 the possible solution (one of them, since probably there is not only one way to do it) is very similar. The difference is that in the previous generation of AB we use Bootstrap CSS 4.x, and, in the current generation of AB we use the very latest release of the Bootstrap CSS framework.

By the way, the right documentation of the Bootstrap CSS framework is the official website. For example, talking about "Navs and tabs", talking about AB2, we can refer to this website.

What I do is to take some piece of HTML markup from the above linked Bootstrap CSS documentation in order to show some "pill tabs" inside an HTML control of DecSoft App Builder. This is the piece of HTML markup that I use for this sample:


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Content of home tab</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Content of profile tab</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Loading...</div>
</div>

You can copy the above HTML code and paste it directly in one app's view: when you do so AB automatically creates an HTML control for you and places it inside the proper HTML markup ready to be used.

Now, suppose that what we wanted is to show the content of the "Contact" tab from an external URL, so, we can place the below Javascript code in the app's view Show event, the same app's view who contains the above HTML control:


// Avoid to attach the tab events twice (for example, if we move to another app view and come back to this one)
if (!window.tabEventsAlreadyAttached) {

  // Look for our existing tabs (note the selector can be other, if we use other in the tabs HTML markup)
  document.querySelectorAll('button[data-bs-toggle="pill"]').forEach(tab => {

    // Attach an event to the tab which will be fired when the tab will be show
    tab.addEventListener('show.bs.tab', function (event) {

      // If the tab is what we are waiting for...
      if (event.target.id === 'pills-contact-tab') {

        // Just make an HTTP call with jQuery to easily the contents from an external URL
        $('#pills-contact').load('https://www.decsoftutils.com/Humm/Sites/Main/Views/Data/DecSoft/AppBuilder/Samples/Http/get.php');
      }
    });
  });

  // Set the flag variable to true, so we avoid to attach the tabs events twice
  window.tabEventsAlreadyAttached = true;
}

And that's all basically. Maybe you want to make a "get" jQuery call instead of a "load" one, or maybe you wanted another possible HTML markup, but, the idea will be very similar: we need an HTTP call in order to get our desired content, and then place that content (the response of the HTTP call) in our tab content DIV container.

Purchase one or more licenses of our products if they are useful to you!

John Clarke

Thanks for that. It's just what I needed.

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.