Web Applications - Action Buttons Feature Pack

To purchase this Feature Pack, please click here.


Watch Videos - Part 1

Watch Videos - Part 2

Watch Videos - Part 3


The Action Buttons Feature pack allows you to add buttons to the following parts of a Grid component:


Unlike buttons that you can place in the Grid rows, and which therefore repeat for every row in the Grid, Action buttons don't repeat for every row in the Grid, and therefore result in a much cleaner looking page.

Action Buttons can also be animated so that their appearance and the image that they display change when the user hovers over, or clicks the button, or when the button is disabled.


For example, here is how a Grid looks when you put buttons in the Grid rows:

Grid show that buttons placed in Grid rows repeat for every row, resulting in cluttered screen.


On the other hand, if you put buttons in the Grid toolbar, for example, you end up with a less cluttered screen, while still offering the user the same functionality.


When you click an Action Button, the event handler knows what row in the Grid is selected. So, in the screen shown above, customer id '00000002' has focus. So, when you click the 'Open Related Invoices' button, the invoices for this customer will be shown.

Different Action Button Styles

You can create action buttons in many different layouts. An Action Button can be a button, a hyperlink, or simply an image.

You can define any Javascript you want to execute when the Button is clicked. You can also use Action Javascript to define the Javascript for the button.

Here are examples of different button styles:



Button Text Only
  Image Only
  Image followed by Text
  Text followed by Image
  Image over Text
  Text over Image
Hyperlink With image
  Without image
Image (contrast the 'Image' button shown here with
the 'Button - Image Only' style (2nd row) )


How to Define Action Buttons

You can open the Action Button builder from several places. The two most obvious places are in the Grid and Detail View Properties pane. You will notice that if the Feature Pack is installed a new property is shown.

Notice the 'Action Buttons' category shown below in the Grid's 'Properties' section..



When you click the smart field associated with the 'Action buttons' property, the Action Button builder is opened.

You can also define new Action Buttons, and edit existing Action Buttons at the same time that you are inserting them into the Grid or Detail View toolbar, or into a free-form edit region.

For example, the screen below show the editor for the Free-form region below the Grid. Notice the 'Add/Edit/Delete Action Buttons' button. Clicking this button will open the Action Button Builder.




The Action Button Builder

When you open the Action Button Builder this dialog is shown:


Most of the properties in this dialog a self explanatory. Some of the properties are explained in more detail below:

Control type - can be either Button, Hyperlink or Image

Trailing separator - when you place multiple Action Buttons next to each other, you can either add spaces between the Action Button placeholders in the HTML template, or if the above property is checked, a trailing ' ' is automatically placed after the HTML generated for the Action Button. So, for example, if you did not check this property and you placed two Action Buttons in the Grid toolbar, you would have to use this HTML markup to place a space between the buttons:

{ActionButton:B1} {ActionButton:B2}

However, if this property is checked, you can simply insert the Action Buttons into the HTML template as follows, and there will still be a small space between the two buttons:


Javascript - this is where you define the button's action. When you click the smart field button, the builder allows you to define the action using Action Javascript or you can define your own Javascript action.

Button Class Names - You can specify class names for the button's four states: normal, hover, pressed and disabled. The default class names shown are mapped to physical class names when the button is rendered.

If you specify your own class name for one of the button states, you can prefix the name with + to use your class name in addition to the default class. For example, if you specify that the class name for the Hover state is +hoverRed, then when the mouse is over the button, the actual class used will be:  [class.GridButtonHover] hoverRed. If the hoverRed class sets the font to red, then when you are hovering over the button, the buttons background color will still change (because that's the behavior that the [classGridButtonHover] class implements), but the text on the button will turn red.

Security Groups - if the Security Framework is enabled, you can specify which Security Groups can see this button. If the logged on user is not a member of one of the specified Security Groups, the button will not be shown when the Grid is run.

Server-Side Properties - Show/hide expression - this allows you to specify an expression that is evaluated on the Server. If the expression it true, the button will be shown. Otherwise, the button will not be shown. You can refer to session variables in this expression. You cannot, however, refer to field values from the Grid in the expression. If you want to show/hide the button based on field values in the current row of the Grid, use the client-side show/hide expression.

Client-side Properties - Show/hide and Enable expressions - this allows you to define an expression that referenced data from the current row with focus that controls whether the Action Button is shown or disabled.

When you define a client-side expression, in addition to referring to field values from the current row, you can also use the following system fields in your expression:


NOTE ABOUT DISABLED HYPERLINKS - If you define an Enable expression for a Hyperlink button, you will notice that only Internet Explorer will correctly render the Hyperlink as disabled when the Enable expression is false. In all other browsers, the visual appearance of the hyperlink will not change. However, clicking on the hyperlink will NOT execute the Javascript event handler.




How to Place an Action Button on the Grid

Inserting Buttons in a Free Form Section or Master Template

To place an Action Button in one of the Free-form sections that surround the various Grid parts, or in the Master template, open the free-form editor, or Master template editor, and place the free form placeholder in the HTML template.

A list of the available placeholders for the Action Buttons you have defined will be shown.

For example, here is the Free-form editor for the Free-form section below the Grid:


Inserting Buttons in the Grid or Detail View Toolbar

To insert Action Buttons in the Grid or Detail View Toolbar, you have two choices.

The simplest approach is to click the click the smart field for the 'Toolbar Action Buttons' property (shown in the image below). The other approach is to customize the entire toolbar template, by clicking the smart field for the 'Customize Grid toolbar template'.

If you click on the 'Toolbar Action Buttons' smart field, a dialog is opened in which you can select the Action Buttons that you want to appear on the toolbar.


The easiest way to put Action Buttons on the Grid or Detail View toolbar is to set the 'Toolbar Action Button' property.


When you click the smart field for the 'Toolbar Action Buttons' property, this builder opens:


Putting Action Buttons on the Toolbar.


In effect, the dialog shown above allows you to customize a portion of the toolbar. The HTML that you define in the dialog is inserted into the toolbar automatically by Alpha Five.

However, if you want more control over the entire toolbar, then you can customize the entire toolbar template. In that case you will notice that the template has a placeholder called {grid.ActionButtonHTMLTemplate}, (or in the case of the Detail View template, {grid.DetailViewActionButtonHTMLTemplate}).

This placeholder will contain the HTML markup defined in the 'Toolbar Action Buttons' property. You can remove this placeholder from the toolbar template, and place the Action Button placeholders directly in the toolbar template.


Using Action Buttons in Detail View

Action Buttons can be placed in the Detail View toolbar. But they can also be placed in the body of the Detail View as well.

Note: Putting buttons in the body of the Detail View has always been possible by simply clicking the Insert... button when you are selecting the Detail View fields, and then selecting a button. The only advantage of an Action Button over a button inserted using the 'Insert..' button is that the Action Button implements animation when the user hovers over the button, or clicks it.

To place an Action Button in the Detail View body, make one of the fields in the Detail View a free-form layout field, and then manually type the Action Button placeholder into the HTML template.


Javascript Automation at Run Time

You can write Javascript code to set properties on an Action Button at run time.

To get a pointer to the button object, you would use this code:

var myPointer = {grid.componentName}_BUTTONS_<buttonName>;


where <buttonName> is the name that you assigned to the button when you created it in the Action Button Builder.

Once you have a pointer to the button you can:

Enable/disable the button with this code:


Or show/hide the button with this code:



You can dynamically change properties of the button object as well. For example:


myPointer.html = 'New Button Text';
myPointer.onClick = function() {alert('now say hello');}
myPointer.layout = 'icon text';
myPointer.icon = 'images/$$application.alpha.png.a5image';


Note that you must execute the button object's .refresh() method before any of the changes take effect.

The options for the layout property are:

To fire the button event, you would use this code: