Action Buttons

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.

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

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.

// file: patients-dv.js
// get container
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;

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

Groups with title and icon

You may pass an icon-name as second argument. If, for example, the icon-name is “glyphicon-pencil”, just pass “pencil”. see also: Glyphicons.

// file: patients-dv.js
// get container
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;

// group with title and icon
var group = actionbuttons.addGroup("R/W", "pencil");

Groups without title

// file: patients-dv.js
// get container
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;

// 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:

var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;
// group with title, icon and css-class
var group = actionbuttons.addGroup("R/W", "pencil", "highlight");

hooks/header-extras.php

<!-- hooks/header-extras.php -->
<style>
    .highlight {
        padding: 4px;
        border-bottom: 2px solid gray;
        color: gray;
        font-weight: bold;
    }
</style>

Buttons

Links to other pages

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

Buttons executing javascript functions

// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;
var group = actionbuttons.addGroup("Additional Buttons");
group.addButton("Click me!", function () {
  alert("Clicked!")
});

Button Variations

// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;
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);

See also

Variations

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.

AppGiniHelper.DV.ActionButtons().hideText();

Button size

The .sizeButtons() method accepts the following values:

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

Container width

You can change the width of the action button container using the following code:

// file: patients-dv.js
var dv = AppGiniHelper.DV;
var actionbuttons = dv.actionbuttons;
actionbuttons.width(2);

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

Combining .width() with .sizeButtons() or .hideText()

Button texts may be cut if width is too small. Then, sometimes it helps to combine .width()-function and .sizeButtons()-function. If sizing buttons to minimum size (which is Size.xs) is not enough, you can additionally use the .hideText()-method as shown here:

AppGiniHelper.DV.ActionButtons()
    .width(1)
    .sizeButtons(Size.lg)
    .hideText();

Tip: Additional parameters

There is a blog post here showing a couple of samples for additional Action Buttons with parameters.

Do you like it?