TAB View Transition
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
TAB View Transition
I’ve successfully created the multiple tab table view using the java script library helper. Everything is working very nicely. However, I’ve noticed that when I click on a record in the table view to view my tab detail view, the default detail view appears first for about two seconds before the modified tab detail view finally appears. Is there a way of bypassing the default detail view so that users don’t have to see the delayed transition? Thank you.
Re: TAB View Transition
Hi,
I've posted a small hack for hiding the DV in the beginning and showing after UI changes have finished:
viewtopic.php?f=13&t=3476&p=13682&hilit ... gif#p12406
Maybe this helps.
Regards,
Jan
I've posted a small hack for hiding the DV in the beginning and showing after UI changes have finished:
viewtopic.php?f=13&t=3476&p=13682&hilit ... gif#p12406
Maybe this helps.
Regards,
Jan
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
Re: TAB View Transition
Hi,
please post plugin related question in the plugin subforum.
please post plugin related question in the plugin subforum.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
JSetzer,
THANK YOU!!!
It went straight to the form without an interrupted transition. Very nice.
-------------br-----------
pböttcher,
My apologies. Will be more careful where I post next time
V/r,
~Tony
THANK YOU!!!
It went straight to the form without an interrupted transition. Very nice.
-------------br-----------
pböttcher,
My apologies. Will be more careful where I post next time
V/r,
~Tony
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
jsetzer,
I went on to the forum a while back requesting assistance for finding a syntax that would help users not see the default configuration when transitioning from the TV to the Tab DV. You replied with the link, which was very helpful. However, I just noticed that when I tried opening a subcategory DV via the “add new†buttons to add content, a blank dialog box opens up. I played around with the code, (see below) and the .detail_view {display:none} seems to be the culprit. Could I respectfully ask for your assistance? I truly appreciate it. (tried PMg, but the system wouldn't let me. v/r,
----------------------------------------------
<style>
/* hide detail view from the beginning on */
.detail_view { display: none; }
/* show spinner */
.page-header:after {
content: url('XXXX'); /* <----- you can change the filename here */
/* content: url('XXXX'); */
position: absolute; top: 200px; left: 50%;
}
/* prepare hiding spinner if page has been loaded completely */
.page-header.loaded:after {
content: '';
}
</style>
<script>
new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
----------------------
pböttcher,
I know this topic should be in the hooks category, except I wanted to include the history to help build situational awareness. I appreciate it.
v/r,
I went on to the forum a while back requesting assistance for finding a syntax that would help users not see the default configuration when transitioning from the TV to the Tab DV. You replied with the link, which was very helpful. However, I just noticed that when I tried opening a subcategory DV via the “add new†buttons to add content, a blank dialog box opens up. I played around with the code, (see below) and the .detail_view {display:none} seems to be the culprit. Could I respectfully ask for your assistance? I truly appreciate it. (tried PMg, but the system wouldn't let me. v/r,
----------------------------------------------
<style>
/* hide detail view from the beginning on */
.detail_view { display: none; }
/* show spinner */
.page-header:after {
content: url('XXXX'); /* <----- you can change the filename here */
/* content: url('XXXX'); */
position: absolute; top: 200px; left: 50%;
}
/* prepare hiding spinner if page has been loaded completely */
.page-header.loaded:after {
content: '';
}
</style>
<script>
new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
----------------------
pböttcher,
I know this topic should be in the hooks category, except I wanted to include the history to help build situational awareness. I appreciate it.
v/r,
Re: TAB View Transition
Hi,
I have just tested opening a modal "add new" dialog. In my form there is no blank dialog, but the expected dialog opens up.
So, can you please check your code for javascript errors first (console tab in dev-tools).
If there are no errors, please remove the customization code and reload (always clear browser cache when reloading), then check the modal "add new" dialog again. If this is still blank, the problem is not related to the "loader" customization.
Regards,
Jan
I have just tested opening a modal "add new" dialog. In my form there is no blank dialog, but the expected dialog opens up.
So, can you please check your code for javascript errors first (console tab in dev-tools).
If there are no errors, please remove the customization code and reload (always clear browser cache when reloading), then check the modal "add new" dialog again. If this is still blank, the problem is not related to the "loader" customization.
Regards,
Jan
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
Will do. Thank you Jan!
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
Jan,
fyi. I CTRLd-F5 to hard refresh. No change. I then removed the entire Tab customization code from the dv.js file. Seeing a normal vertical stack of the fields in the DV. Then tried opening up a modal “add newâ€. Still getting a blank dialog box. I then removed the “none†from .detail_view {display:none;} in the header-extras.php and now the modal “add new†dialog box opens normally. I also cut and paste the loader/spinner code to another project. Got the same blank effect from the “add new†modal box after placing it in the associated headers-extras.php. v/r,
fyi. I CTRLd-F5 to hard refresh. No change. I then removed the entire Tab customization code from the dv.js file. Seeing a normal vertical stack of the fields in the DV. Then tried opening up a modal “add newâ€. Still getting a blank dialog box. I then removed the “none†from .detail_view {display:none;} in the header-extras.php and now the modal “add new†dialog box opens normally. I also cut and paste the loader/spinner code to another project. Got the same blank effect from the “add new†modal box after placing it in the associated headers-extras.php. v/r,
Re: TAB View Transition
By the way: If...
...causes the problem you are facing, you can replace the CSS selector by a different one which suits your requirements better, for example:
(replace YOURTABLENAME)
Code: Select all
.detail_view { display: none; }
Code: Select all
.table-YOURTABLENAME.detail_view { display: none;}
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
logic. I lack it.
Thank you Jan! Will try.
Thank you Jan! Will try.
Re: TAB View Transition
I'm sorry if this does not work for you.
I have just checked again and for me it works even with the .detail_view style without further modification. There is no blank page when opening "add new" modal in my environment.
Are you sure there are no errors in console which could stop javascript from executing code?
I have just checked again and for me it works even with the .detail_view style without further modification. There is no blank page when opening "add new" modal in my environment.
Are you sure there are no errors in console which could stop javascript from executing code?
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
Jan,
I apologize for the delayed response, I was away from my computer throughout the day dealing with other tasking.
No, my add new buttons comes straight from the primary DV within the modified tab view form and not the DV list from the relational parent at the bottom. Also, I haven't had a chance to apply the recommended syntax yet. (e.g., .table-YOURTABLENAME.detail_view { display: none;}) Would like to give it a try. Will keep you posted Sir.
V/r,
I apologize for the delayed response, I was away from my computer throughout the day dealing with other tasking.
No, my add new buttons comes straight from the primary DV within the modified tab view form and not the DV list from the relational parent at the bottom. Also, I haven't had a chance to apply the recommended syntax yet. (e.g., .table-YOURTABLENAME.detail_view { display: none;}) Would like to give it a try. Will keep you posted Sir.
V/r,
- Attachments
-
- Capture.PNG (86.75 KiB) Viewed 4436 times
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
IT WORKED!!!
Thank you again for the support Jan!
Thank you again for the support Jan!
Re: TAB View Transition
Good to hear. Can you please tell us what was the problem?
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
I created an inline tab view using the following syntax. (For the purposes of this sample its abbreviated)
-------------------------------------BREAK-------------------------------------------------
TAB SYNTAX
// file: hooks/shiprecords-dv.js
var dv = new AppGiniDetailView().compact();
var row_1 = new AppGiniLayout([1,3,1,3,1,3,1], "<b><font color ='blue'>XXX</font color> </b>")
.add(2, ["xxx"])
.add(4, ["xxx"])
.add(6, ["xxx"])
.sizeLabels(2.2);
dv.addTab("xxx-tab", "xxx", "check")
.add(row_1);
dv.getTabs().setPosition(TabPosition.Bottom);
dv.getField("xxx").insertBelow().hr();
-------------------------------------BREAK-------------------------------------------------
I then added the following syntax to the hooks/header-extras.php
<style>
/* hide detail view from the beginning on */
.detail_view { display: none; }
/* show spinner */
.page-header:after {
content: url('xxx'); /* <----- you can change the filename here */
/* content: url('xxx'); */
position: absolute; top: 200px; left: 50%;
}
/* prepare hiding spinner if page has been loaded completely */
.page-header.loaded:after {
content: '';
}
</style>
<script>
new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
-------------------------------------BREAK-------------------------------------------------
It appears that when clicking an “Add New†button (look-up field) within an inline tab form, in the DV, it comes up blank. However, when replacing the .detail_view { display: none; } with your recommended .table-xxx.detail_view { display: none ; } it works. Hope this helps.
-------------------------------------BREAK-------------------------------------------------
TAB SYNTAX
// file: hooks/shiprecords-dv.js
var dv = new AppGiniDetailView().compact();
var row_1 = new AppGiniLayout([1,3,1,3,1,3,1], "<b><font color ='blue'>XXX</font color> </b>")
.add(2, ["xxx"])
.add(4, ["xxx"])
.add(6, ["xxx"])
.sizeLabels(2.2);
dv.addTab("xxx-tab", "xxx", "check")
.add(row_1);
dv.getTabs().setPosition(TabPosition.Bottom);
dv.getField("xxx").insertBelow().hr();
-------------------------------------BREAK-------------------------------------------------
I then added the following syntax to the hooks/header-extras.php
<style>
/* hide detail view from the beginning on */
.detail_view { display: none; }
/* show spinner */
.page-header:after {
content: url('xxx'); /* <----- you can change the filename here */
/* content: url('xxx'); */
position: absolute; top: 200px; left: 50%;
}
/* prepare hiding spinner if page has been loaded completely */
.page-header.loaded:after {
content: '';
}
</style>
<script>
new AppGiniDetailView().ready(function() { $j(".detail_view").show(); $j(".page-header").addClass("loaded"); });
</script>
-------------------------------------BREAK-------------------------------------------------
It appears that when clicking an “Add New†button (look-up field) within an inline tab form, in the DV, it comes up blank. However, when replacing the .detail_view { display: none; } with your recommended .table-xxx.detail_view { display: none ; } it works. Hope this helps.
Re: TAB View Transition
Thanks, I will have a look next weeks if there is something special/different with the lookup's "add new" buttons.
Kind regards,
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
AppGini 24.10 Revision 1579 + all AppGini Helper tools
<js />
My AppGini Blog:
https://appgini.bizzworxx.de/blog
You can help us helping you:
Please always put code fragments inside
[code]...[/code]
blocks for better readabilityAppGini 24.10 Revision 1579 + all AppGini Helper tools
-
- Veteran Member
- Posts: 32
- Joined: 2020-06-22 00:00
Re: TAB View Transition
Jan,
I wouldn't know, but as far as I'm concern, the buttons work great. Seems its' the extra logic statements that we use to make it do creative things. Thank you again.
V/r,
I wouldn't know, but as far as I'm concern, the buttons work great. Seems its' the extra logic statements that we use to make it do creative things. Thank you again.
V/r,