Add a note to a specific child tab

Purpose of this recipe

You have a child tab under one of your AppGini app forms. You want to display some note or instructions inside that tab. For example, below is a screenshot showing the orders child tab under the employee form, from the Northwind demo. And we want to add some notes/instructions in the blank area to the right of the refresh button.

Files to edit

hooks/tablename-dv.js

(where tablename is the name of the parent table, employees in this example)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$j(function() {
  setInterval(function() {
    if($j('#my-child-note-1').length) return;
    
    var tabIndex = 1; // first tab is 0, second one is 1, ... etc
    var btn = $j('.children-tabs .tab-pane').eq(tabIndex).find('a.btn-default').eq(0);
    
    // Change the message below as desired.
    $j('<span class="text-success hspacer-lg" id="my-child-note-1">Special note here!</span>').insertAfter(btn);
  }, 500)
})

The reason we’re using setInterval is that child tabs are loaded into the page via an ajax request after page load, and are reloaded on any refresh, removing the message. So, we need to make sure that whenever the child tab is reloaded, the message is added back. Here is how the child tab looks after applying the above code: