TAB View Transition

This sub-forum is for discussing all topics related to AppGini Helper JavaScript Library, provided by bizzworxx as a third-party AppGini plugin.
Post Reply
jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

TAB View Transition

Post by jrcervantest » 2020-07-01 03:23

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.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-01 05:21

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
Kind regards,
<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 readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: TAB View Transition

Post by pbottcher » 2020-07-01 15:56

Hi,

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.

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-01 20:33

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

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 11:00

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,

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-06 11:17

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
Kind regards,
<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 readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 11:56

Will do. Thank you Jan!

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 12:35

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,

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-06 12:36

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)
Kind regards,
<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 readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 12:48

logic. I lack it.
Thank you Jan! Will try.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-06 12:52

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 4394 times

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 [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 20:43

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,
Attachments
Capture.PNG
Capture.PNG (86.75 KiB) Viewed 4383 times

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 20:52

IT WORKED!!!

Thank you again for the support Jan!

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-06 21:19

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 [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 21:42

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.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TAB View Transition

Post by jsetzer » 2020-07-06 21:48

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 [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Re: TAB View Transition

Post by jrcervantest » 2020-07-06 21:56

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,

Post Reply