Skip to content

Custom ActionButtons

Keep action buttons visible when scrolling down

Please note that, for technical reasons, the AppGini built-in option "Keep action buttons visible when scrolling down" will not be available when using additional links or buttons.

Bug

Please note there is a bug with AppGini v5.90 and v5.91. See Bugreport and workarounds here.

1
2
var dv = AppGiniHelper.DV;
var ab = dv.getActionButtons();

Grouping buttons

Additional Action Buttons will be placed at the right hand side below the default Action Buttons (Save, ..., Cancel, Copy).

For technical reasons all additional action buttons have to be grouped.

Groups with title

Groups may have a title. You can pass the title to the addGroup() function as first argument.

1
2
3
4
5
6
7
// file: patients-dv.js
// get container
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();

// group without title
var group = actionbuttons.addGroup('R/W');

Groups without title

1
2
3
4
5
6
// file: patients-dv.js
// get container
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
// group without title
var group = actionbuttons.addGroup();

Groups with extra css-styling

If you want to give the group-header some extra styling, create a custom css class and pass the name of the css class as third parameter:

1
2
3
4
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
// group with title, icon and css-class
var group = actionbuttons.addGroup("R/W", "pencil", "highlight");
hooks/header-extras.php 
1
2
3
4
5
6
7
8
9
<!-- hooks/header-extras.php -->
<style>
    .highlight {
        padding: 4px;
        border-bottom: 2px solid gray;
        color: gray;
        font-weight: bold;
    }
</style>

Buttons

1
2
3
4
5
// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
var group = actionbuttons.addGroup("Additional Links");
group.addLink("Link 1", "my_custom_page.php");

Buttons executing javascript functions

1
2
3
4
5
6
7
// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
var group = actionbuttons.addGroup("Additional Buttons");
group.addButton("Click me!", function () {
  alert("Clicked!")
});

Variations

1
2
3
4
5
6
7
8
9
// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.getActionButtons();
group = actionbuttons.addGroup("Variations");
group.addLink("Primary", $href , Variation.Primary);
group.addLink("Info", $href, Variation.Info);
group.addLink("Success", $href, Variation.Success);
group.addLink("Warning", $href, Variation.Warning);
group.addLink("Danger", $href, Variation.Danger);

Additional features

Hide button text

You can hide the Action Buttons’ text using the .hideText() method. In combination with the .width() and .sizeButtons() methods (see below) this will help you getting more space for data. js AppGiniHelper.DV.getActionButtons().hideText();

Button size

The .sizeButtons() method accepts the following values:

Size.lg Size.md Size.sm Size.xs js // file: patients-dv.js var dv = AppGiniHelper.DV; var actionbuttons = dv.getActionButtons(); actionbuttons.sizeButtons(Size.lg);

Container width

You can change the width of the action button container using the following code: ```js // file: patients-dv.js var dv = AppGiniHelper.DV; var actionbuttons = dv.getActionButtons(); actionbuttons.width(2);

// others: // actionbuttons.width(1); // actionbuttons.width(3); ```

See also