Modifying Action Javascript Code
Description
In most situations, Action Javascript is sufficient to get the job done. But what if you need to populate attributes with data from a third-party library or need to make a static setting dynamic? In these situations, it may become necessary to convert your Action Javascript to its underlying implementation.
Any Action Javascript in Alpha Anywhere can be converted into code by switching the Event Editor to Text mode. When switching from Action Javascript to Text mode, Alpha Anywhere will convert all Action Javascript actions to code. The javascript that implements the Action Javascripts can be found on the "Javascript - Attribute" and "Declarations - Global" tabs at the bottom of the Event Editor. On the first tab, "Javascript - Attribute", is where you will find the code that calls the Action Javascript. On the second tab, "Declarations - Global", you may find additional logic that implements an Action Javascript. If you had multiple Action Javascripts defined, the javascript instantiating the actions will be listed in the same order as they were defined in Action Javascript Mode.
When you convert Action Javascript to code, Alpha Anywhere will issue a warning message. Converting Action Javascript to code is a one-way street. While you gain access to the underlying implementation, you lose the friendly interface for editing the Action Javascript. Furthermore, you cannot reverse the process. Once an Action Javascript has been turned into code, you can only edit it as code.
Suppose you want to display a Hello message to the user when they click a button after entering their name. Add the "Message Box" Action Javascript to the button's click event. In the message, specify 'Hello, ' + {dialog.object}.getValue('NAME').
This gives you the message, however the message displayed doesn't use the same styling as the UX component. It's displayed using a javascript alert(), which makes the message appear like a warning when the message isn't a warning at all. Instead of using the simple message, modify the Message Box action to use an advanced message box. The popup will no longer look like a warning. A title can also be added to indicate the message is a greeting. Data from controls, however, can't be included as part of the definition for "Message box text".
The basic message box is too alarming and the advanced message box doesn't let you access data in the controls. Since the advanced message box has the desired look, it would be easiest to convert the Message Box action using the advanced message box to code---only the message box text needs to be changed. Switching the editor to Text Mode will expose the implementation so it can be modified.
The message box is shown using the A5.msgBox.show() method. A5.msgBox.show() takes 4 parameters: a title, the HTML for the message box body, the buttons to show, and a function to call when the message box is closed.
In the form generated by Alpha Anywhere, the javascript can be difficult to parse. Using a few variables and a little bit of formatting can make the javascript easier to read.
var title = 'Greeting';
var message = '<div style="padding: 15pt;">Hello, </div>';
var buttons = [{html: 'OK', value: 'ok'}];
var onClose = function(button) {
if(button == 'ok') {
setTimeout(function() {},10);
}
}
A5.msgBox.show(title,message,buttons,onClose);The final step is to get the value from the NAME control and place it in the message.
var name = {dialog.object}.getValue('NAME');
var title = 'Greeting';
var message = '<div style="padding: 15pt;">Hello, '+name+'</div>';
var buttons = [{html: 'OK', value: 'ok'}];
var onClose = function(button) {
if(button == 'ok') {
setTimeout(function() {},10);
}
}
A5.msgBox.show(title,message,buttons,onClose);Now, when the Say hello button is clicked, the message displays the desired greeting.
