Page 1 of 1

TAB View Transition

Posted: 2020-07-01 03:23
by jrcervantest
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

Posted: 2020-07-01 05:21
by jsetzer
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

Image

Re: TAB View Transition

Posted: 2020-07-01 15:56
by pbottcher
Hi,

please post plugin related question in the plugin subforum.

Re: TAB View Transition

Posted: 2020-07-01 20:33
by jrcervantest
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

Re: TAB View Transition

Posted: 2020-07-06 11:00
by jrcervantest
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,

Re: TAB View Transition

Posted: 2020-07-06 11:17
by jsetzer
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

Re: TAB View Transition

Posted: 2020-07-06 11:56
by jrcervantest
Will do. Thank you Jan!

Re: TAB View Transition

Posted: 2020-07-06 12:35
by jrcervantest
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,

Re: TAB View Transition

Posted: 2020-07-06 12:36
by jsetzer
By the way: If...

Code: Select all

.detail_view { display: none; } 
...causes the problem you are facing, you can replace the CSS selector by a different one which suits your requirements better, for example:

Code: Select all

.table-YOURTABLENAME.detail_view { display: none;}
(replace YOURTABLENAME)

Re: TAB View Transition

Posted: 2020-07-06 12:48
by jrcervantest
logic. I lack it.
Thank you Jan! Will try.

Re: TAB View Transition

Posted: 2020-07-06 12:52
by jsetzer
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.

ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif.gif (152.91 KiB) Viewed 8869 times

Are you sure there are no errors in console which could stop javascript from executing code?

Re: TAB View Transition

Posted: 2020-07-06 20:43
by jrcervantest
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,

Re: TAB View Transition

Posted: 2020-07-06 20:52
by jrcervantest
IT WORKED!!!

Thank you again for the support Jan!

Re: TAB View Transition

Posted: 2020-07-06 21:19
by jsetzer
Good to hear. Can you please tell us what was the problem?

Re: TAB View Transition

Posted: 2020-07-06 21:42
by jrcervantest
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.

Re: TAB View Transition

Posted: 2020-07-06 21:48
by jsetzer
Thanks, I will have a look next weeks if there is something special/different with the lookup's "add new" buttons.

Re: TAB View Transition

Posted: 2020-07-06 21:56
by jrcervantest
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,