Displaying count of child records on the tab title

HEADS UP! Since AppGini 22.11, the count of child records is displayed on the tab title by default, and there is no need to add the JavaScript code below. This article is kept for users of older versions of AppGini.

AppGini supports displaying a list of child records in the detail view of the parent record. For example, here is the detail view of an employee record from the online Northwind demo:

(Ignore the weird cartoons for now!) So … It would be nice if the count of subordinates is displayed on the ‘Subordinates’ tab, as well as the count of ‘Initiated orders’ on its tab title. One way of doing this is through JavaScript. Add the following code to the generated hooks/footer-extras.php file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<script>
  $j(function() {
    setInterval(function() {
      $j('.children-tabs tfoot td').each(function() {
        var txt = $j(this).text().trim();
        // The line below assumes your app is in English language .. modify if it's in a different lang.
        var pattern = /Records [0-9]+ to [0-9]+ of ([0-9]+)/g;
        var match, recs;
        match = pattern.exec(txt);
        recs = (match !== null ? match[1] : 0);
        var id = '#' + $j(this).parents('.tab-pane').attr('id').replace(/^panel/, 'tab');

        if(!$j(id + ' .badge').length) {
          $j('<span class="badge hspacer-md"></span>').appendTo(id);
        }
        $j(id + ' .badge').html(recs);
      })
    }, 1000);
  })
</script>

Afterwards, all child tabs for all tables would display a count of child records. Here is how this looks for our employee above:

The count would auto-update if you add or remove any child records. We might implement this functionality in future releases of AppGini. For now, I hope this helps 🙂