Action Buttons

Examples

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

Groups

Groups without title

For technical reasons all buttons have to be grouped.

// file: patients-dv.js
// get container
var dv = new AppGiniDetailView();
var actionbuttons = dv.actionbuttons;

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

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 with title
var group = actionbuttons.addGroup("R/W");

Groups with title and icon

since 2019/10

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

// 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");

Pro-Tip:
Groups with some extra styling

since 2019/10

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 -->
<style>
    .highlight {
        padding: 4px;
        border-bottom: 2px solid gray;
        color: gray;
        font-weight: bold;
    }
</style>

Links

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

Buttons

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

Pass a function as 2nd parameter.

Variations

group = container.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);

Variations are available for both, links and buttons.

Compact buttons

The .compact() method will expand space for data by reducing the buttons’ width. This function is a wrapper for several other functions.

Default layout


Compact layout

// file: hooks/patients-dv.js
new AppGiniDetailView().compact();

Please note: the method name .compact() may be changed in future versions and there are additional modifications when executing that methods, not only shrinking the buttons but for example also widening the children tabs.

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

Size.lg (default)

var container = new AppGiniDetailView().ActionButtons();
container.sizeButtons(Size.lg);
var container = new AppGiniDetailView().ActionButtons();
container.sizeButtons(Size.md);
var container = new AppGiniDetailView().ActionButtons();
container.sizeButtons(Size.sm);
var container = new AppGiniDetailView().ActionButtons();
container.sizeButtons(Size.xs);

Actionbutton container width

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

new AppGiniDetailView().ActionButtons()
container.width(1);

Attention: buttons’ text may be cut depending on the width of the container and the width of the localized button text.

You can combine .width() function with .sizeButtons() and .hideText() functions.

.width(3)

new AppGiniDetailView().ActionButtons().width(3);

.width(2) (default)

new AppGiniDetailView().ActionButtons().width(2);

.width(1)

new AppGiniDetailView().ActionButtons().width(1);

In this screenshot the button labels got cut.

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 down below.

new AppGiniDetailView().ActionButtons()
    .width(1)
    .sizeButtons(Size.lg)
    .hideText();
Social media & sharing icons powered by UltimatelySocial