Genie Hyperlink

A hyperlink in Genie is a text link that can be used to fire a JavaScript function.  Its purpose is similar to that of a button. The JavaScript function can of course be used to perform a vast array of tasks including hiding or revealing other elements on the page, initiating a series of keystrokes (including function keys and/or the Enter key), executing server code through AJAX, etc.  It can also be used to perform the traditional hyperlink function of taking the user to a new URL or opening a URL in a new browser window.

Creating a New Hyperlink

To create a Hyperlink, drag a Hyperlink element to the screen from the Widgets Toolbox.

Changing the value property will change the text in the Hyperlink

The onclick property of a Hyperlink must be changed to the call a JavaScript function, which will perform the necessary task(s) when the link is clicked.  It can also be a direct JavaScript expression.

For example, we can call a custom function called showHelpScreen() and pass it the id (HTMLContainer1) of the HTML Container which is pre-loaded with out help text but made invisible.  Our function will display the HTML Container using the visibility property.

The function should be added to the end of the custom.js file located in your Skin directory on the IFS. The default location is /www/profoundui/htdocs/profoundui/userdata/genie skins/MYSKIN, where MYSKIN is the name of your custom theme.

Here is the the new function we can add to the end of custom.js :

Clicking the hyperlink will reveal the help HTML container text on a page:

Changing an Output Field to a Hyperlink

Many menus (made with output fields) are automatically converted to hyperlinks.  You can also manually convert any output field to a hyperlink by right clicking on the field and selecting Change to Hyperlink.

By changing the onclick event property, the hyperlink can be used to send a function key or a menu option to the green-screen application.  In the example below, pressKey('option9') will enter 9 into the menu option field followed by the Enter key.  Other commands that could also be used are: pressKey('Enter'), pressKey('F3'), pressKey('PageDown'), etc.

If you require a specific value to be entered into an input field, followed by the Enter key, you can use multiple commands separated by a semicolon.  For example:

changeElementValue('D_3_8', '9'); pressKey('Enter')

To open a web page in a new window, you would use the window.open() command.  For example, to open a page named myPage.pgm in a new window, you would use:

window.open('myPage.pgm', '_blank')

Open