Page 1 of 1
Tabbed Detail view
Posted: 2016-01-02 04:23
by shkdxb
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.
Re: Tabbed Detail view
Posted: 2016-01-03 17:13
by a.gneady
Thanks for sharing this tip
Re: Tabbed Detail view
Posted: 2016-04-02 07:30
by ymuhyi
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
Re: Tabbed Detail view
Posted: 2016-04-04 04:26
by peebee
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
Re: Tabbed Detail view
Posted: 2016-06-28 20:37
by grimblefritz
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
Re: Tabbed Detail view
Posted: 2016-08-24 07:53
by peebee
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.
Re: Tabbed Detail view
Posted: 2016-08-24 13:15
by grimblefritz
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.
Re: Tabbed Detail view
Posted: 2018-06-03 14:53
by R Scott
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.