Table-Images for “child-link” buttons

Available since April 2020.

By default, the so called "child link" buttons appear at the top right of detail views, if configured. The new replaceIcon function changes the look of that toolbar.

Default

They all have identical glyphicons and have been pulled right which gives a reverse order in comparison to your model:

Model on AppGini
Reverse order in detail view

Modified Detail View

Using the new replaceIcon function you can replace the default glyphicon by the matching table-image automatically with one line of code. Additionally the buttons will be moved left which leads to an identical order according to your model.

Javascript Code

// file: hooks/TABLENAME-dv.js
AppGiniHelper.Defaults.dv_childrenLinks_replaceIcons = true; // enables this feature

var dv = AppGiniHelper.DV;
dv.getChildrenLinks().replaceIcons();

Pro-Tip

If you, like me, want to have identical design in all detail views, instead of applying the changes per detail view, you can also change it in global hooks/header-extras.php for all detail views at once.

<!-- file: hooks/header-extras.php -->
<script>

  AppGiniHelper.Defaults.dv_childrenLinks_replaceIcons = true; // enables this feature
  AppGiniHelper.DV.getChildrenLinks().replaceIcons();

</script>

Please note
If you place Javascript code in a PHP file (like hooks/header-extras.php) you will have to wrap your javascript code in <script>...</script> tags.

Hide/Show child-link buttons

You can enable/disable them by checking/unchecking them in AppGini.

Known Limitations

Please note that AppGini Helper Javascript Library is a pure client side library which can only work on elements being loaded into the browser. For this function it means that we can only replace the default glyphicon by table-images which are available in the browser when the page has been loaded.

There may be situations in which you have a child-link for a table which is not being shown as a child-tab at the bottom. In this case the lib-function will not be able to get and use the image of the tab-caption as image for the child-link.

If we cannot find the table-image in the tab-captions, we are searching the them in the navigtion-bar-items. If we find a unique image there, we can use this for the tab-link.

If we still do not find a matching table-image, the glyphicon will just be removed and only available images will be inserted.

Do you like it?