AppGini Community Forums

Posted: **2021-01-11 13:48**

Hi,

currently afaik only Jans AG Helper allows some changes.
I would likt to be able to change the order of the child-links and tabs in AG more easily.
Even better: Please also make a hook which allows setting the order on runtime.
This could even allow the programmer to disable display of a tab (maybe order position 0).

: l10.png (24.61 KiB) Viewed 9216 times

Thanks already
Olaf

Posted: **2021-01-11 16:57**

Hi Olaf,

why cant you just use the TABLENAME-dv.js (or the TABLENAME.php -> header, footer, dv functions) to change the layout as you need? You can do everything you want in there.

Posted: **2021-01-11 16:59**

Hi pbÃ¶tcher,

thanks for pointing this out. JS is not really my field, so it's sometimes out of mind

I will take a look.

Olaf

Posted: **2021-03-02 16:29**

Hi pbÃ¶tcher,

to move the child registers I think I would need a unique ID of them. I can not find any IDs, they are just list items in the HTML, which I am not sure how to grab and push/pull them into a differnet sort order.
I would appreciate a hint how to do this.

Thanks already
Olaf

Posted: **2021-03-02 16:43**

Hi,

I can not edit my previous post anymore. Just wanted to let you know, I will be trying this https://stackoverflow.com/a/36778789

Olaf

Posted: **2021-03-04 08:15**

Hi,

just wanted to post an update on how I changed the sort order. I see this as an intermediate option only. Sorting directly within AG would be much better!

I am using the code suggested here: https://stackoverflow.com/a/36778789
So, my problem was, how I can keep the JS code simple and in one place, but make it usable for different AG tables.
I decided for now to go this way:
In the parent table file /hooks/tablename.php I added to the _footer function

Code: Select all

$child_sort_start = (file_get_contents ("hooks/child_sort_start.js"));
$child_sort_end = (file_get_contents ("hooks/child_sort_end.js"));
$child_sort_order = (file_get_contents ("hooks/child_sort_PARENTTABLENAME.js"));
$child_sort = $child_sort_start . $child_sort_order . $child_sort_end;

thus breaking the code from the suggested source into 3 parts.
In the switch part of the function I insert it into the footer like so:

Code: Select all

case 'detailview':
	$footer= $child_sort . '<%%FOOTER%%>';
	break;
	
case 'tableview+detailview':
	$footer= $child_sort . '<%%FOOTER%%>';
	break;

Performance should be fine (for me at least). According to

file_get_contents() is the preferred way to read the contents of a file into a string. It will use memory mapping techniques if supported by your OS to enhance performance.

(src: https://www.php.net/manual/en/function. ... ntents.php )
I did try to include the file like

Code: Select all

<script> src=... </script>

but doing so, I was unable to include the jquery. The jquery is needed for the include (at least when trying at localhost, even though it's read already in the header.php from the /resources folder).

The first file (child_sort_start.js) is the "header"

Code: Select all

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>// src: https://stackoverflow.com/a/36778789
$.fn.orderChildren = function(order) {
	this.each(function() {
		var el = $(this);
		for(var i = order.length - 1; i >= 0; i--) {
			el.prepend(el.children(order[i]));
		}
	});
	return this;
};
</script>

<script>
$(function() {
		var cnter = 0;
		var childinterval = setInterval(childtabs, 1000); 		
		function childtabs (){					
			var n = $j('#children-tabs').find('.nav-tabs').length;
			if (n = 1) {

The second part is the part which defines the order - and it is this part, that I will need to change for different AG tables.
The parts docs, jobs and orders are the AppGini table names and the child-registers that are shown below the parent record.

Code: Select all

$(".nav-tabs").orderChildren([																				
	".child-table-docs",
	".child-table-jobs",
	".child-table-orders"
]);

The last part (child_sort_end.js) makes sure, the script does end after a certain period and closes the JS/jquery:

Code: Select all

			cnter++;
			if (cnter > 20){
			  clearInterval(childinterval);
			}			
		} 
	};
})	
</script>

I am sure it can be done much nicer - but at least it works. Usually the sort is done before or right after the registers appear on screen (after the loading icon vanishes).

Using Jan's AG Helper and the possibility to activate a custom tab (https://appgini.bizzworxx.de/products/j ... child-tab/) putting the code below into hooks/tablename-dv.js it's possible to activate a tab/child-register I want. The activation though happens only after the page has fully loaded (and for example the badge counts are done) both can take a while.

Code: Select all

var dv = AppGiniHelper.DV;
dv.getChildrenTabs().activate("CHILDTABLENAME");

Looks like this:

: childsort2.gif (153.25 KiB) Viewed 8093 times

I want to thank pbÃ¶tcher again for keeping me on track, that it can be done with JS.

Olaf

Posted: **2021-03-04 08:46**

Hi,

currently there seems to arise a huge problem: The "New" and "Reload" buttons on in the child tabs are not working anymore

The just take me to the top of the page ... grrr.

Olaf

Posted: **2021-03-04 17:10**

Hi Olaf,

just a dumb question. Why dont you rearange the child order within the AppGini App itself? The App shows the child order just as you defined the order in the tabledefinition.

But anyways,

if you want you can give this a try.

Add to your hooks/header-extras.php:

Code: Select all

<script>
var _0x394f=["\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x65\x6E\x67\x74\x68","\x23\x70\x61\x6E\x65\x6C\x5F\x74\x61\x73\x6B\x69\x74\x65\x6D\x2D\x74\x61\x73\x6B\x72\x65\x66\x3E\x2E\x72\x6F\x77","\x23\x63\x68\x69\x6C\x64\x72\x65\x6E\x2D\x74\x61\x62\x73\x3E\x2E\x6E\x61\x76\x2D\x74\x61\x62\x73\x3E\x6C\x69","\x2E\x74\x61\x62\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x3E\x64\x69\x76","\x63\x68\x69\x6C\x64\x2D\x74\x61\x62\x6C\x65\x2D","\x20","\x69\x6E\x64\x65\x78\x4F\x66","\x63\x6C\x61\x73\x73","\x61\x74\x74\x72","\x72\x65\x6D\x6F\x76\x65","\x61\x70\x70\x65\x6E\x64","\x23\x63\x68\x69\x6C\x64\x72\x65\x6E\x2D\x74\x61\x62\x73\x3E\x2E\x6E\x61\x76\x2D\x74\x61\x62\x73","\x2E\x74\x61\x62\x2D\x63\x6F\x6E\x74\x65\x6E\x74"];function g_wait_for(_0xba43x2,_0xba43x3,_0xba43x4){_0xba43x4= ( typeof _0xba43x4!== _0x394f[0])?_0xba43x4:100;if($j(_0xba43x2)[_0x394f[1]]!= 0){_0xba43x3();return}else {setTimeout(function(){g_wait_for(_0xba43x2,_0xba43x3,_0xba43x4)},_0xba43x4)}}function reorder_child_tabs(_0xba43x6){g_wait_for(_0x394f[2],function(){var _0xba43x7=[];var _0xba43x8=[];var _0xba43x9=$j(_0x394f[3]);var _0xba43xa=$j(_0x394f[4]);for(i= 0;i< _0xba43x6[_0x394f[1]];i++){for(j= 0;j< _0xba43x9[_0x394f[1]];j++){if($j(_0xba43x9[j])[_0x394f[9]](_0x394f[8])[_0x394f[7]](_0x394f[5]+ _0xba43x6[i]+ _0x394f[6])!=  -1){_0xba43x7[i]= _0xba43x9[j];_0xba43x8[i]= _0xba43xa[j];break}}};for(i= 0;i< _0xba43x6[_0x394f[1]];i++){_0xba43x9[i][_0x394f[10]]();_0xba43xa[i][_0x394f[10]]()};for(i= 0;i< _0xba43x6[_0x394f[1]];i++){$j(_0x394f[12])[_0x394f[11]](_0xba43x7[i]);$j(_0x394f[13])[_0x394f[11]](_0xba43x8[i])}})}
</script>

now you can add to you tablename-dv.js file :

Code: Select all

var child_order=['childtablename1','childtablename2','childtablename1'];
reorder_child_tabs(child_order);

replace the childtablenameX with your tablenames.

Just a warning. This code works without any other library.

Posted: **2021-03-05 07:14**

Sorry Olaf,
there was a type,

please use

Code: Select all

var _0xd144=["\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x65\x6E\x67\x74\x68","\x23","\x63\x75\x72\x72\x65\x6E\x74\x54\x61\x62\x6C\x65\x4E\x61\x6D\x65","\x2D\x63\x68\x69\x6C\x64\x72\x65\x6E\x3E\x2E\x74\x61\x62\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x3E\x5B\x69\x64\x5E\x3D\x22\x70\x61\x6E\x65\x6C\x22\x5D\x3E\x2E\x72\x6F\x77","\x23\x63\x68\x69\x6C\x64\x72\x65\x6E\x2D\x74\x61\x62\x73\x3E\x2E\x6E\x61\x76\x2D\x74\x61\x62\x73\x3E\x6C\x69","\x2E\x74\x61\x62\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x3E\x64\x69\x76","\x63\x68\x69\x6C\x64\x2D\x74\x61\x62\x6C\x65\x2D","\x20","\x69\x6E\x64\x65\x78\x4F\x66","\x63\x6C\x61\x73\x73","\x61\x74\x74\x72","\x72\x65\x6D\x6F\x76\x65","\x61\x70\x70\x65\x6E\x64","\x23\x63\x68\x69\x6C\x64\x72\x65\x6E\x2D\x74\x61\x62\x73\x3E\x2E\x6E\x61\x76\x2D\x74\x61\x62\x73","\x2E\x74\x61\x62\x2D\x63\x6F\x6E\x74\x65\x6E\x74"];function g(_0xdd38x2,_0xdd38x3,_0xdd38x4){_0xdd38x4= ( typeof _0xdd38x4!== _0xd144[0])?_0xdd38x4:100;if($j(_0xdd38x2)[_0xd144[1]]!= 0){_0xdd38x3();return}else {setTimeout(function(){g(_0xdd38x2,_0xdd38x3,_0xdd38x4)},_0xdd38x4)}}function reorder_child_tabs(_0xdd38x2){g(_0xd144[2]+ AppGini[_0xd144[3]]()+ _0xd144[4],function(){var _0xdd38x6=[];var _0xdd38x7=[];var _0xdd38x8=$j(_0xd144[5]);var _0xdd38x3=$j(_0xd144[6]);for(i= 0;i< _0xdd38x2[_0xd144[1]];i++){for(j= 0;j< _0xdd38x8[_0xd144[1]];j++){if($j(_0xdd38x8[j])[_0xd144[11]](_0xd144[10])[_0xd144[9]](_0xd144[7]+ _0xdd38x2[i]+ _0xd144[8])!=  -1){_0xdd38x6[i]= _0xdd38x8[j];_0xdd38x7[i]= _0xdd38x3[j];break}}};for(i= 0;i< _0xdd38x2[_0xd144[1]];i++){_0xdd38x8[i][_0xd144[12]]();_0xdd38x3[i][_0xd144[12]]()};for(i= 0;i< _0xdd38x2[_0xd144[1]];i++){$j(_0xd144[14])[_0xd144[13]](_0xdd38x6[i]);$j(_0xd144[15])[_0xd144[13]](_0xdd38x7[i])}})}

Posted: **2021-03-05 09:10**

Hi pbÃ¶tcher,

thank you very much for the code. Unfortunately it does not work (for me). Even when I enter

Code: Select all

reorder_child_tabs('tablename1','tablename2','tablename3');

directly into the console (after placing the first code in header-extras.php (of course, outside of php) the console simply tells me "undefined".
I appreciate your help very much.

Yes, indeed, simply sorting the tables in AG is an option - at the first glance. But it's not really an option:
The order in AG is fix and results in the same order of links in the homepage and menu and links on top of the detailsview and registers. All mashed up and the same. But this is too easy: For different users (for example because of permissions) this order has "holes". Also, for different users, different orders might be usefull.
Let's assume, I have 3 navigation groups 1, 2 and 3. in 1 I have tables A,B,C (in this oder), in 2 M,N,O and in 3 X,Y,Z. The groups will show up in this order with this order of tables.
But maybe in DV of 1 I want Z,X,N,A,O (in this order as children) ...this can not be done right now: Z before X, then another group (N) and then another group (A) before back to group 2.

I absolutely see no reason, why AG does not allow setting the order as we want it on table-level.

Now you may ask why the ... does some one want such a mixed order? Well: different usergroups have different tasks at hand. One works more on Z, the other more on A. This would be one reason.
When we have a backlink to the main table it get's confusing:
Let's say a box is the first table in the application, as it's the most important.
A table holds data for a box. Each box has an exatly 1 owner (field in table).
The box has also N-customers (child table customers_boxes). Mostly owners are (also) customers and for this reason they are held in one table "companies".
Now, when I want to see the "companies" table it has 2 children: boxes (all boxes where company X is customer) and owners (all boxes where company X is owner).
Right now it's impossible to switch the order of the children as the "boxes" is the first table in the project. If one is more interested in the "owner" part, it might be useful to have this child always first.

I understand, that asking for the option to reorder may sound strange, but I hope I made it a little more obvious, why I think this would be good enhancement of AG. If the order (for links above DV and child-pages) can be set in AG and still manipulated later by code it would be great. For this I think it should be possible to intercept the order in the hooks/tablename.php -> _init function. Why? Simply, because we can for example draw userspecific settings from the database and use those to order according to those before the page even reaches the browser.

Olaf

Posted: **2021-03-05 10:33**

Hi Olaf,

please note the the function reorder_child_tabs takes an array as paramter and not multiple parameters.

So if you want to call it directly in one shot use

reorder_child_tabs(['childtablename1','childtablename2','childtablename1'])

If you run it through the console, the output undefined is just fine as there is no output produced.

Make sure that you address the correct child table names where childtablename1 is the tablename of the child table from your db defintion.

Posted: **2021-03-05 11:54**

Hi pbÃ¶tcher,

amazing! I did not see your second post where you wrote the first had a typo.
Now, using your code from 2021-03-05 08:14 everything seems to work as expected...
But: If a user had no access to a certain child table, all registers vanish. The error in the console is "Uncaught TypeError: Cannot read property 'remove' of undefined" (well, this could be handled in the backend and creating JS that only holds the registers that are actually visible already).

PS. Jan told me he might implement a sorting feature in the next version of his AG helper (so we do not need to invest too much time right now)

.

Thank you
Olaf

Posted: **2021-03-05 17:37**

Hi Olaf,

true, if you pass data t(=non existing table) to the function it will fail. But as you stated you have different combinations to get hold of, so you should handle that in the backend before calling the function.

Posted: **2021-03-06 08:28**

Hi pbÃ¶tcher,

thank you very much for your code and time.
Olaf

AppGini Community Forums

Change order of tabs / child-links

Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links

Re: Change order of tabs / child-links