Button element

Views Views: 25,306
Last updated Last updated: Jun 13, 2018

Page

Contents
Introduction
Options
Bootstrap icons
Examples
Another example from Hugh
For Fabrik 3.1 this would be
Introduction
Creates an html <button> in form view (does not display in list view).

The button text is derived from the label setting, and Javascript actions can be added from within the Javascript tab.

Note that a submit button is automatically added to the form, so creating an element to do the same function is not required.

Options

Bootstrap class - Button class to assign.

Bootstrap icon - E.g. 'icon-user'. Places a Bootstrap icon inside the button

Bootstrap icons
Bootstrap reference (http://getbootstrap.com/components/) shows icons, but they are not all included in Joomla Bootstrap.

Protostar template includes some Glyphicons

Joomla includes Icomoon. (List at http://kyleledbetter.com/jui/icons/)

Glyphicons are built from a simple png-file, while Icomoon is a font. This means that Icomoon icons are scalable and will always look good, while the Glyphicons will look bad when made bigger.
Icomoon will look better on high pixel density smartphones displays.

Examples
Link to URL. Add a Javascript event on 'click', which does

Javascript:

window.location.href = 'your.url';

To open in New Window

Javascript:

window.open ('your.url');

Another example from Hugh
From this forum post. To get a URL from another element called some_element and open it in a new window.

Javascript:

var url = form_123.formElements.get('yourtable___some_element').getValue(); window.open(url);

Or to open it in the same window.

Javascript:

window.location.replace(url);

For Fabrik 3.1 this would be

Javascript:

var url =Fabrik.getBlock('form_123').formElements.get('yourtable___some_element').getValue(); window.open(url);

Button element

Navigation

Wiki index

Contents

Introduction

Options

Bootstrap icons

Examples

Another example from Hugh

For Fabrik 3.1 this would be

Button element

Navigation

Wiki index

Contents

Introduction​

Options​

Bootstrap icons​

Examples​

Another example from Hugh​

For Fabrik 3.1 this would be​

Introduction

Options

Bootstrap icons

Examples

Another example from Hugh

For Fabrik 3.1 this would be