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.

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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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


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.

new AppGiniDetailView().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 = new AppGiniDetailView();
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 = new AppGiniDetailView();
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:

new AppGiniDetailView().ActionButtons()
    .width(1)
    .sizeButtons(Size.lg)
    .hideText();