Using JavaScript Toolbars

Release Notes > 12.1.0.0 > Updates in This Release > JavaScript Toolbars > Using JavaScript Toolbars

Introduction

This section will provide an example of how to use JavaScript toolbars to enhance your solution. In this example, we will load icons from an external file and build a toolbar with actions.

Creating Icons for the Toolbar

Firstly, we should load in some icons declared in an external file. Version 12.0.0.0 provided the ability to use PNG graphics as icons, so our external icon file can call those with declarations such as this:

icondef "eg_boldIcon",0
$24 24 0 15<>
$C:\Work\Products\APP\Releases\12.1.0.0\Documentation\ JavaScript Toolbars\Example/bold.png<>

• The first line defines the name of the icon.

• The second line specifies the size of the icon and its type

• The third line specifies the path of the graphic to use for the icon. Obviously you’ll want to set that to something appropriate to your solution.

These icons can be loaded into ALD using the fApplication.loadToolbars() method like this:

application.loadToolbars("{.}icons.3ic");

Notice that the path is relative to the template. You will want to set that one which works for your solution.

Creating Actions Using the Icons

The next step will be to create the actions we’re going to use on our toolbar. Creating the actions will follow the same pattern.

var myBoldAction;
myBoldAction = application.getToolbarAction("eg_boldAction");
if (!myBoldAction) myBoldAction = application.createToolbarAction("eg_boldAction");

myBoldAction.icon = "eg_boldIcon";
myBoldAction.text = "Make bold";
myBoldAction.greyTestString = "((?+^[window.count]):(?=^[doc.mode],2)";
myBoldAction.action = "js content.functions.makeBold()";
myBoldAction.description = "Makes text bold";

In this example, the grey test checks if there’s a document open and the working mode is text mode. The action will call the makeBold function.

This pattern would be repeated for the other actions to be created.

Creating the Toolbar

Now we have our icons and actions, we can combine the actions into our custom toolbar. So, we can use them as follows to create a new toolbar:

var myToolbar;

myToolbar = application.getToolbar("eg_toolbar");
if (!myToolbar) { myToolbar = application.createToolbar("eg_toolbar", fToolbar.LOCATION_TOP, fToolbar.DISPLAY_ICONS);}

myToolbar.clear();

var mySpace = new fToolbarSpace();
mySpace.width = 3;

var myAction = application.getToolbarAction("eg_boldAction");
myToolbar.addItem(myAction);

var myAction = application.getToolbarAction("eg_italicAction");
myToolbar.addItem(myAction);

myToolbar.addItem(mySpace);

var myAction = application.getToolbarAction("eg_textHeightAction");
myToolbar.addItem(myAction);

var myAction = application.getToolbarAction("eg_textWidthAction");
myToolbar.addItem(myAction);

myToolbar.addItem(mySpace);

var myAction = application.getToolbarAction("eg_frameToFrontAction");
myToolbar.addItem(myAction);

var myAction = application.getToolbarAction("eg_frameToBackAction");
myToolbar.addItem(myAction);

application.refreshToolbars();