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>

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

4 replies on “Displaying count of child records on the tab title”

christian gülland says:

2019-01-05 at 6:34 pm

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

Best regards
1. Genedy says:
  
  2019-01-06 at 11:16 am
  
  Hi Christian 🙂
  Is there any error reported in the console? (press F12 in your browser to open the console window)
  1. Christian Gülland says:
    
    2019-01-08 at 10:59 am
    
    Hello Ahmed,
    i can’t see an error.
    I will send you an screenshot.
    
    Thank’s a lot and best regards
    1. Genedy says:
      
      2019-01-10 at 3:00 pm
      
      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;

Comments are closed.

Published by Genedy

4 replies on “Displaying count of child records on the tab title”