Customizing Visual Discovery Applications With JavaScript

When running a Visual Discovery application, several functions are automatically available through the context menu. Chart properties are also available by selecting Properties from the context menu and then navigating through the Properties tab of the control. You can also use JavaScript to code functions and properties inside your application, activating them based on the click of a button or a change in a combo box selection. Options set for one Visual Discovery control are applied to all charts on the page.

The following table provides a few of the most commonly used Visual Discovery JavaScript functions. A complete list of commands is available in the Visual Discovery Online Help file.

Command

Description

7111 HIDEUNSELECTED

Exclude (delete) unselected rows. All selection state changes affect all views.

7112 SHOW ALL

Restore excluded (deleted) rows.

7115 SELECT

Select all rows.

7116 UNSELECT

Unselect all rows.

7117 TOGGLE

Toggle (reverse) selection state on all rows.

7118 UNDO

Undo last operation.

7119 REDO

Redo last operation.

Note: The Exclude and Restore Excluded, also known as Show All, are provided as options in the hyperlink properties of an HTML Composer control.



Example: Adding Undo and Redo Button Controls

You can add the JavaScript code for Undo and Redo controls at design time. After adding an HTML Composer control, such as a button or combo box to the Visual Discovery page, click Events from the Properties pane, and double-click the ellipsis button for the event you wish to use. The examples below use the onclick event. This brings you to the event function code in the Embedded JavaScript tab of the HTML Composer window.

You can add JavaScript code to functions and properties inside your application at design time, after adding an HTML Composer control, such as a push button or combo box. You must first add a Visual Discovery component. The examples below use a button control and refer to a Visual Discovery bar chart. These functions can also be applied to combo boxes.

To add an undo control:

  1. Open an HTML page containing a Visual Discovery component, in HTML Composer.
  2. From the Menu bar, click Insert, click Controls, and then click Push Button.
  3. Edit the attributes of your button as desired.
  4. With the button selected, click the Events tab on the Properties menu pane and click the onclick ellipsis button.

    This opens the Embedded JavaScript tab in HTML Composer.

  5. Add the following code between the opening and closing braces:
    activex1.command(7118,"",0,0);//***Undo Last Operation

    where:

    activex1

    Is the name of your Visual Discovery control. If you named your Visual Discovery bar chart control VBar1, that is the name you should use.

  6. Save your work and run the page.

To add a redo control:

  1. Repeat steps 1-4 from above.

    The Embedded JavaScript tab opens and the cursor appears under the code for the second button.

  2. Add the following code between the opening and closing braces:
    activex1.command(7119,"",0,0);//***Redo Last Operation

    where:

    activex1

    Is the name of your Visual Discovery control. This should be the same name you used for the undo control.

  3. Save your work and run the page.

The complete JavaScript coding for the undo and redo controls should look similar to the following image.

JavaScript Code Example

Note: The buttons are identified in the code as vzUndo, and vzRedo. This will be different if you identify the buttons by different Unique Identifiers. The same is true for the Visual Discovery control.


Top of page

Example: Setting Color Properties

You can also use JavaScript coding to set properties of Visual Discovery charts at run time. The following example sets two of the color properties in an event handler for a button.

This example uses the same procedure outlined in the Undo and Redo Button controls. The code shown below sets the background color to yellow and the selected color to sky blue, using the six-digit hexadecimal codes for RGB color values.

To add color controls:

  1. Open an HTML page containing a Visual Discovery control, in HTML Composer.
  2. From the Menu bar click Insert, click Controls, and then click Push Button.
  3. Edit the attributes of your button as desired.
  4. With the button selected, click the Events tab on the Properties menu pane and click the onclick ellipsis button.

    This opens the Embedded JavaScript tab in HTML Composer.

  5. Add the following code between the opening and closing braces:
    activex1.BackgroundColor='0xFFFF00'; //Yellow
    activex1.SelectedColor='0x3299CC'; //Sky Blue

    where:

    activex1

    Is the name of your Visual Discovery control. If you named your Visual Discovery bar chart control VBar1, that is the name you should use.

  6. Save your work and run the page.

For more information on setting colors through the Visual Discovery Online Help, and accessing additional Help topics, see Accessing Visual Discovery Online Help.


WebFOCUS