Skip to content

NEW 2023/05/13

Add custom panels

Allows us to add custom panels ( <div/> ) above or below the ChildrenTab-table:

1
2
3
4
5
// file: hooks/TABLENAME-dv
AppGiniHelper.DV.getChildrenTabs().waitForTab("task_resources", "task_id", (tab) => {
    var panel_above = tab.addPanel(VerticalPosition.top);
    var panel_below = tab.addPanel(VerticalPosition.bottom);
});

You can directly access and manipulate the panel's <div/> -element by calling getElement() function on the panel object, added before.

Example

1
2
3
4
5
// file: hooks/TABLENAME-dv
AppGiniHelper.DV.getChildrenTabs().waitForTab("task_resources", "task_id", (tab) => {
    var panel = tab.addPanel(VerticalPosition.top);
    panel.getElement().addClass("well").append("Hallo Welt!");
});

Note that your custom panels will remain even after reloading the table or after adding/removing records.

Another example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// file: hooks/TABLENAME-dv.js

// wait for the tab bein loaded
dv.getChildrenTabs().waitForTab("task_resources", "task_id", (tab) => {

    // add panel above table
    var panel_above = tab.addPanel(VerticalPosition.top);
    // access the panel's div-element by calling .getElement() function

    panel_above.getElement()
        .css("border", "2px dashed blue")
        .css("padding", "10px")
        .append("Panel above");

    // add another panel below the children-tab-table
    var panel_below = tab.addPanel(VerticalPosition.bottom);
    panel_below.getElement()
        .css("border", "2px dashed blue")
        .css("padding", "10px")
        .append("Panel below");

});

Example using AppGiniHelper UI-Helper

1
2
3
4
5
6
7
8
// file: hooks/TABLENAME-dv.js
// ...
tab.addPanel(VerticalPosition.bottom).getElement()
    .append(AppGiniHelper.UI.h1("Heading 1").toString())
    .append(AppGiniHelper.UI.h2("Heading 2").toString())
    .append(AppGiniHelper.UI.h3("Heading 3").toString())
    .append(AppGiniHelper.UI.h4("Heading 4").toString())
    .append(AppGiniHelper.UI.h5("Heading 5").toString());

See also