Tabbed Detail view

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
shkdxb
Veteran Member
Posts: 40
Joined: 2013-06-28 18:18

Tabbed Detail view

Post by shkdxb » 2016-01-02 04:23

My details view is having lot of fields and i want it be in a tabbed view. searched and found some info from Bootstarp and just sharing it if anyone want to make tabbed view of Details page.

open the file tablename_templateDV.html inside /templates/ folder.

find the line <fieldset class="form-horizontal">

just below add this code:

Code: Select all

<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Unit Details</a></li>
  <li><a data-toggle="pill" href="#menu1">Activity Details</a></li>
  <li><a data-toggle="pill" href="#menu2">Charges & Intimations</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3 id="unit">Unit Details</h3>
    <p>... Add your contents for first tab </p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3 id="activity">Activity Details</h3>
	
    <p>... Add your contents for second tab	</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Charges & Intimations</h3>
    <p>...... Add your contents for third tab. </p>
  </div>
</div>
find the fields you want to be in the tabbed view in the same file. cut and paste them inside ".. Add your contents for first/second/third tab ". save the file.

that's it.

User avatar
a.gneady
Site Admin
Posts: 1281
Joined: 2012-09-27 14:46
Contact:

Re: Tabbed Detail view

Post by a.gneady » 2016-01-03 17:13

Thanks for sharing this tip :)
:idea: AppGini plugins to add more power to your apps:
  • DataTalk is an innovative AppGini plugin based on ChatGPT that allows you to interact with your AppGini database using natural language questions, without writing any SQL. Check the demo video
  • Mass Update plugin: Update multiple records at once and improve your workflow efficiency.
  • Check our other plugins and get a generous discount of up to 30% when buying 2 or more plugins.

ymuhyi
Posts: 1
Joined: 2016-04-02 07:26

Re: Tabbed Detail view

Post by ymuhyi » 2016-04-02 07:30

Assalamualaikum,

Hi Ahmad, thank you for your great app. And thank you for opening this question thread too. I've tried using this solution, but it seemed not to be working. The tab is always being hidden after i click it, what ever the tab is. After the tab is being active (clicked), after I click (and activate) other tab, the last active tab is missing from the page.

What is the solution for this? Ahmad probably had changed the bootstrap script? Where is the file that I must check for this? Or do I just have to use other class?

Wassalamualaikum,

Muhyi

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Tabbed Detail view

Post by peebee » 2016-04-04 04:26

I had the same problem some time ago. Under some circumstances, there is a conflict between Bootstrap 3 javascript & Prototype javascript. Fortunately, it is very simple to fix. I've found this issue still applies in AppGini V5.50.

Just add the following code to the top of resources/lightbox/js/prototype.js and the problem will be gone. The code below reflects all Bootstrap javascript functions that may conflict with prototype.js. You could just add the "pills" or "tabs" function if that is the only problem you have.

Code: Select all

var isBootstrapEvent = false;
if (window.jQuery) {  
  jQuery('*').on('hide.bs.dropdown', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.collapse', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.modal', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tab', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.pill', function( event ) {
    isBootstrapEvent = true;
  });
}
You can read more about it here: http://forums.appgini.com/phpbb/viewtop ... tabs+pills

PS: If you need it, here's a pretty decent tutorial on using Bootstrap 3 pills & tabs: http://tutsme-webdesign.info/bootstrap- ... -and-pills

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: Tabbed Detail view

Post by grimblefritz » 2016-06-28 20:37

I've posted instructions and code for a rather simple way to implement detail view tabs:

http://forums.appgini.com/phpbb/viewtop ... f=7&t=2127

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Tabbed Detail view

Post by peebee » 2016-08-24 07:53

Just resurrecting this post for an update to Appgini V5.51 for anybody having problems with bootstrap tabs/pills, etc.....

Prototype seems to be once again causing bootstrap tabs to disappear when clicked on in Appgini Version 5.51 under some circumstances, even after adding the fix code above to resources/lightbox/js/prototype.js

To fix - 2 x small edits to resources/lightbox/js/prototype.js required as follows;

Add this as the first line (as per the previous fix)

Code: Select all

var isBootstrapEvent = false;
if (window.jQuery) {  
  jQuery('*').on('hide.bs.dropdown', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.collapse', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.modal', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.tab', function( event ) {
    isBootstrapEvent = true;
  });
  jQuery('*').on('hide.bs.pill', function( event ) {
    isBootstrapEvent = true;
  });
}
Find this (around line 2144)

Code: Select all

function hide(element) {
    element = $(element);
    element.style.display = 'none';
    return element;
  }
and edit to become this:

Code: Select all

function hide(element) {
    if (isBootstrapEvent) {
      isBootstrapEvent = false;
      return;
    }
    element = $(element);
    element.style.display = 'none';
    return element;
  }
Sorry grimblefritz but I heavily edit my templates so it's easier for me to add tabs this way than with your very handy code/tutorial.

grimblefritz
AppGini Super Hero
AppGini Super Hero
Posts: 336
Joined: 2015-12-23 16:52

Re: Tabbed Detail view

Post by grimblefritz » 2016-08-24 13:15

peebee, no need to apologize. My apps are simple and I try to avoid modifying anything that would be overwritten in an update. So far, so good.

R Scott
Posts: 14
Joined: 2018-01-04 18:42

Re: Tabbed Detail view

Post by R Scott » 2018-06-03 14:53

The above fixes work for all browsers except safari on an iPad. Unfortunately I am developing specifically for iPads for a school project. Does anybody have any other possible solutions to solve the Tabs disappearing ? I am using Tabs to break a large form into manageable chunks.

Post Reply