Table-Images for “child-link” buttons issue

[iwilliams]

Hi I have just started using the Appgini Helper Javascript Library(version 2020.10.26.1) to smarten up my website. I am trying to use the above feature to a) use original icons on the child tables and b) move the buttons to the top left of the screen and in the order that they are defined in the AppGini app. Unfortunately, none of the above seem to be working. I have followed the code to the letter in the documentation by copying/pasting it into hooks/header-extras.php. The section that changes the title on all screen is working fine.

I don't appear to be receiving any error messages in inspect/console, only confirmation that it has recognised the AppGini Helper Jacascript library. When compared to the "before" situation the only difference seems to be that I have lost the icons that were there.

My hooks/header-extras.php currently looks like this (The company name has been redacted):-

Code: Select all

<script src="hooks/AppGiniHelper.min.js"></script>
<script>
//	Set header on all screen in the system
  new AppGiniCommon()
    .setIcon("time", "text-danger")
	.setTitle("<b>XXXXXXXX XXXX</b> Time Sheet System");
</script>
<script>
// new since 2020/10 - Tidy up Child Icons and move from top right to top left on all screens
  var dv = AppGiniHelper.DV;
  dv.getChildrenLinks().replaceIcons();
  // ...
</script>
<script>
  const currentMemberID = '<?=getLoggedMemberID()?>';
  const currentGroupID = '<?=get_group_id()?>'
  const currentGroupName = '<?php $mi = getMemberInfo(); echo $mi['group']; ?>';
</script>

This is the result of the change is shown in the screen image attached

I have cleared cache (several times) and am using AppGini 5.92. I'm obviously doing something wrong.

Can anyone help please?

[jsetzer]

Do those tables exist in the main navbar?

[jsetzer]

https://appgini.bizzworxx.de/products/j ... k-buttons/

I'm asking because there are "known limitations" described in the documentation page.

[iwilliams]

Firstly, thanks for coming back to me so quickly.

You are correct, the parent table is in the navbar but the child tables are not. I did that as I did not want someone accessing the child table directly. Is there a way of having tables in the navbar but preventing them from accessing them directly?

However, I have tried it with tables that are in the navbar but unfortunately it doesn't seem to be fully working for me. As previously mentioned, I placed the code in the hooks/header-extras.php file (which didn't appear to work) and in addition have placed it into the parent table js file (hooks/Student-dv.js), without the script commands, which seems to work partially. The console log was clear of errors and I cleared cache beforehand. Just to clarify, I have the commands in both files now.

When I say partially working, an icon is now appearing in the button at the top right for one table but not the other. The buttons have not moved to the top left and displayed in the order set in the AppGini app.

Please see an image showing the situation and the list of tables in the navbar.

[jsetzer]

Please send the following to [email protected]:

(1) your ordernumber
(2) your email addres which has been used on purchase

Gonna send a workaround by email.

[iwilliams]

Thank you. I have done that

[onoehring]

Hi,

even though Jan is on it already, I am wondering if

You are correct, the parent table is in the navbar but the child tables are not. I did that as I did not want someone accessing the child table directly. Is there a way of having tables in the navbar but preventing them from accessing them directly?

is not simply done on AG by setting the appropriate checkbox:

l22.png (111.71 KiB) Viewed 7527 times

Olaf

[jsetzer]

@Olaf: If we hide it from nav menu, then the table-image for that specific table will not be available in DOM after load.

[onoehring]

Hi,

ok. As far as I understood, he want's no links in the navbar to the pages, but want's to show them as register-children.
Like in the image: Not show the one in the drop down menu, but the register. Of course, I might be wrong.
This idea does not seem to strange for me, so I wonder why this should not be possible.

l21.png (30.3 KiB) Viewed 7517 times

Olaf

[jsetzer]

@Olaf:
We are talking about this icon ...

chrome_p0hvBmZUYG.png (15.14 KiB) Viewed 7515 times

... which has not been replaced by .replaceIcons() function call due to the "known limitations" documented here: https://appgini.bizzworxx.de/products/j ... k-buttons/

[jsetzer]

Workaround which I have already added to the docs and already sent to him by email:

Code: Select all

<script>

    AppGiniHelper.Defaults.dv_childrenLinks_replaceIcons = true;
    AppGiniHelper.dv.getChildrenLinks().replaceIcons();
     
</script>

Docs: https://appgini.bizzworxx.de/products/j ... k-buttons/

[onoehring]

Hi,

I am sorry, I put in a little confusion. Pleas appoligize.
Great, the problem is solved and you posted a workaround.

Olaf

[iwilliams]

Many thanks. My problem has been solved.

[rpierce]

Is there a way to show tool tips when a use hovers over the button?

[jsetzer]

Well, there is no tooltip by default. At least I don't have tooltips...

chrome_cY1ZyngPIF.png (3.26 KiB) Viewed 5472 times

...nor can I see any title-attribute in generated HTML code:

Code: Select all

<a class="hidden-xs btn btn-default btn-lg pull-right hspacer-sm vspacer-sm" href="notes_view.php?filterer_project_id=1&amp;" id="notes_link"><img src="resources/table_icons/note.png"> Notes</a>

But if you know the link's id, you can use Javascript and easily add a title-attribute:

Code: Select all

jQuery('#notes_link').attr("title", "My custom tooltip");

chrome_6PssEpLANF.png (9.34 KiB) Viewed 5472 times

[rpierce]

Thank you for the quick reply Jan! Can you tell me which file I need to add the above code to?

Thanks for your help. I love the Appgini Helper by the way.

Ray

[jsetzer]

Can you tell me which file I need to add the above code to?

Any auto-loaded file which can execute javascript should work.

For example inside a <script>-tag on document.ready in hooks/header-extras.php or in hooks/TABLENAME-dv.js. Both should work. I've tested with hooks/header-extras.php

Remember to change the selector #notes_link to your needs. In my example 'notes' is the table name.

I love the Appgini Helper by the way.

Thank you! I appreciate your feedback!

[rpierce]

Hi again Jan,

I'm doing something wrong. Can you let me know what I need to do differently?

I have entered the following (two separate attempts at getting the ID correct) code into the header-extras.php file:

Code: Select all

<script>

jQuery('#audit_hclink').attr("title", "Workplace Audits");

</script>

Code: Select all

<script>

jQuery('#xs_audit_link').attr("title", "Workplace Audits");

</script>

I based the button ID on the console clip below:

console1.JPG (31.83 KiB) Viewed 5453 times

[jsetzer]

Code: Select all

<script>
// file: hooks/header-extras php
jQuery(function() {
  jQuery('#xs_audit_link').attr("title", "Workplace Audits");
});
</script>

Assuming the id of the button equals "xs_audit_link"

[rpierce]

Jan,

Still no luck. Thanks for your efforts.

Ray

[jsetzer]

Check for errors in console!

It should work. It is working in my example app.

[rpierce]

Maybe there is a way to include text on the buttons?

[rpierce]

This console error makes no sense considering the Appgini Helper is working on my app??

Capture.JPG (35.07 KiB) Viewed 5444 times

[jsetzer]

That error has nothing to do with AG Helper lib.

There is a picture missing.

[rpierce]

Jan,

My bad on the screen shot. I fixed the reference to a PNG file.

Now my console looks like this when I load my app along with the code modifications to header-extras.php for adding tooltips which you provided earlier. I've tried every button ID that seems appropriate based on the results of the inspect tool in Chrome:

Capture.JPG (58.86 KiB) Viewed 5428 times

I've tried the following code to get Tooltips. Chrome Inspect element tool shows 3 different ID's to choose from. Since I'm not certain which is which, I tried all of them The only change in the three snippets is the button id name:

Code: Select all

<script>
// file: hooks/header-extras php
jQuery(function() {
  jQuery('#xs_audit_link').attr("title", "Workplace Audits");
});
</script>

And

Code: Select all

<script>
// file: hooks/header-extras php
jQuery(function() {
  jQuery('#audit_hclink').attr("title", "Workplace Audits");
});
</script>

And

Code: Select all

<script>
// file: hooks/header-extras php
jQuery(function() {
  jQuery('#audit__link').attr("title", "Workplace Audits");
});
</script>

One thing I've learned, it's usually something I did. But figuring out what I did (or didn't do) is the hard part.