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

All buttons have to be grouped.

// file: patients-dv.js
// group without title
var group = container.addGroup();

Groups may have a title.

// file: patients-dv.js
// group with title
var group = container.addGroup("Additional Links");

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();

Shopping Cart