Skip to content

Additional buttons for lookups

Version

Available since April 2020.

By default and depending on settings and permissions AppGini renders two buttons next to lookup fields. With these you can open up the parent record or open up a form for creating a new record in the master-table.

TODO JSE restore picture (not found) or take a new one

Lookup with additional buttons

If you would like to beautify the look, change icons or add text to the default buttons, read about those features here and here.

Now you can add additional buttons to your lookups which execute your own javascript function on click.

Syntax

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var dv = AppGiniHelper.dv;
var field = dv.getField("fieldname");
var dropdown = field.dropdown();

dropdown.addButton("name", onButtonClickFunction, "iconName", "buttonText", "buttonTooltip", buttonVariation, onDropdownChangeFunction)

// button-onClick callback
function onButtonClickFunction(value) {
    console.log(value);
}
// dropdown-onChange callback
function onDropdownChangeFunction(value) {
    console.log(value);
}

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var fieldname = "partner_id";
var btnName = "btnPartnerId";
var icoName = "cog"; 
var btnText = "My Button";
var btnTooltip = "Click me and watch console output";
var btnVariation = Variation.primary;

var dv = AppGiniHelper.dv;
var field = dv.getField("fieldname");
var dropdown = field.dropdown();

dropdown.fix().addButton(btnName, btnPartnerId_click, icoName, btnText, btnTooltip, btnVariation);

// onClick callback for button 1
function btnPartnerId_click(value) {
    alert(value.id);
}

Full code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var dv = AppGiniHelper.dv;
var field = dv.getField("partner_id");
     .dropdown()
     .addButton("btn1", btn1_onClick, "cog", "Custom Button #1", "OnClick I am going to show the selected id", Variation.primary, btn1_onChange)
     .addButton("btn2", btn2_onClick, "flash", "Custom Button #2", "OnClick I am going to show the text of the selected dropdown item")
     ;

// onClick callback for button 1
function btn1_onClick(value) {
    alert(value.id);
}

// onChange callback for button 2
function btn1_onChange(value) {
    console.log(value);

    dv.blink("#btn1,#btn2");
}

See also: