Displaying count of child records on the tab title

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:

<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 🙂

Published by Genedy

I'm the founder of BigProf Software. We're a tiny team of developers who create tools that make it easy (and affordable) for anyone to create connected business applications that work from any device with a browser.

Join the Conversation

4 Comments

  1. Hello Ahmed,
    when i change child records the counter still result 0.

    Best regards

    1. Hi Christian 🙂
      Is there any error reported in the console? (press F12 in your browser to open the console window)

      1. Hello Ahmed,
        i can’t see an error.
        I will send you an screenshot.

        Thank’s a lot and best regards

        1. Turned out the cause of this error is the pattern matching code, which assumes the application language is English. If you use a different translation file, you need to modify that line. I added a comment in the code of this post to reflect that.

          For example, if your application is in German, replace this line:
          var pattern = /Records [0-9]+ to [0-9]+ of ([0-9]+)/g;
          With:
          var pattern = /Datensatz [0-9]+ bis [0-9]+ von ([0-9]+)/g;

Leave a comment

Your email address will not be published. Required fields are marked *