x

In this part of the tutorial, you add JavaScript to a sample HTML file to define the properties of Visual Discovery components. The procedures assume that you know the basics of JavaScript concepts and syntax. Also see JavaScript Tags, which summarizes the use of the tags you will need to know in this part of the tutorial.

x

You can place JavaScript code anywhere within HTML code. In this part of the tutorial, you will place JavaScript code both at the beginnning and at the end of HTML code.

• JavaScript code placed at the beginning of HTML code is reserved for functions, event handling, and page interaction that occurs after the HTML page is fully loaded.
• JavaScript code placed at the end of HTML code is reserved for actions that are applied to the HTML page by default, that is, as soon as it loads. A common error is to place a JavaScript function call in the onLoad event of the BODY in the HTML. JavaScript code that changes a Visual Discovery component at this time may result in an error due to the timing between the loading of the component, and the availability of the component to the Document Object Model.

Top of page

x

1. From the Insert menu, select Controls, then click Group Box.
2. Click and drag your cursor on the canvas. The group box appears.
3. Delete the group box text area by right-clicking the middle of the group box text and selecting Delete.
4. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that groupbox1 <FIELDSET> is the selected property in the Properties menu pane, then click the Styling: Advanced (CSS) ellipsis button.

5. From the options on the left, click Background, then select Silver from the color drop-down list in the Background color section.
6. From the options on the left, click Position. Specify the attributes as follows:
   • Top: 10px
   • Left: 15px
   • Height: 55px
   • Width: 915px
7. Click OK and save your work.
8. From the Insert menu, select Components, then click Line.
9. Click and drag your cursor within the group box to draw the line.
10. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

    Make sure that line1 <SPAN> is the selected property in the Properties menu pane, then click the Styling: Advanced (CSS) ellipsis button.

11. From the options on the left, click Background, then select Gray from the color drop-down list in the Background color section.
12. From the options on the left, click Position. Specify the attributes as follows:
    • Top: 0px
    • Left: 240px
    • Height: 54px
    • Width: 2px
13. From the options on the left, click Edges. In the Borders section, specify the attributes as follows:
    • Style: Inset
    • Width: Thin
14. Click OK and save your work.
15. Create another line by repeating steps 8 through 13 in this procedure. When you create the second line, note the following:
    • The selected property in the Properties menu pane should now be line2 <SPAN>.
    • The positioning will be as follows:
      • Top: 0px
      • Left: 590px
      • Height: 54px
      • Width: 2px
    • All other values will be the same as the previous line.
16. When the second line is inserted, save your work and run the Web page.
17. Close the Web page and return to the HTML Composer.

x

This procedure will add a control to the menu bar, which can be used to set the way the mouse selects data graphically at run time. This applies to non-3D components only.

1. From the Insert menu, select Controls, then click Drop Down List.
2. Click and drag your cursor within the group box. The drop-down list appears.
3. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that combobox1 <SELECT> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:cboSelection
   • Name: cboSelection
   • Position: Left: 5px
   • Position: Top: 25px
   • Size: Width:100px
   • Styling: Font: Arial 8pt
4. Click the Parameters tab located in the lower-left corner of the HTML Composer window.

   

   The Properties and settings dialog box appears.

   Note: For the steps below, it is important that you make sure that cboSelection <SELECT> is the selected property in the Properties menu pane before you open the Parameters window. If it is not selected, you can select it from the drop-down menu at the top of the Properties menu. If it does not appear in the drop-down menu, you need to refresh the menu. You can do this by clicking anywhere on the active form, then back on the Properties window.

5. Select Static from the Data Type radio button area.
6. Click the New button, and add the following options:

   Value	Display
   0	Rectangle
   1	Polygon
   2	Circle
   3	Rectangular brush
   4	Circular brush

   

7. Return to the Design view by clicking on the Design tab located in the lower-left corner of the HTML Composer window.
8. Click the Events tab located at the bottom of the Properties toolbox pane.
9. To add an event to the drop-down list whenever you select an option at run time, select the event onchange and click the ellipsis button.
10. Add the code below to the cboSelection_onchange function and then save your work.

    //VzSelectorShapeEnum
    /*Shape	        Value   Description
    ------------------------------------
    VzSelRectangle    0       Rectangle
    VzSelPolygon      1       Polygon
    VzSelRectBrush    3       Rectangular brush
    VzSelCircleBrush  4       Circular brush
    */
    var vzBarOne             =document.getElementById('vzBarOne');
    var varSelected          =ctrl.options[ctrl.selectedIndex].value;
    vzBarOne.SelectorShape   =varSelected;

    Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

11. Return to the design view by selecting the Design tab and return to the properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
12. From the Insert menu, select Components, then click Text.
13. Click and drag your cursor within the group box. The text appears.
14. Double-click inside the text object. Enter the text Selector shape:.
15. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

    Make sure that text1 <SPAN> is the selected property in the Properties menu pane. Set these attributes as follows:

    • Unique Identifier:txtSelector
    • Position: Left: 5px
    • Position: Top: 8px
    • Size: Height:28px
    • Size: Width:100px
16. Save your work, then run the Web page.

x

An important issue to consider when designing scripted web visualizations is the communications overhead in the thin-client environment. Also, if a script is going to call several component methods or set several component properties that would cause the display to refresh, you can improve the overall performance in the thin-client environment by disabling the automatic refreshes beforehand. The following procedure adds the VzSuspendImages() routine, which disables automatic refreshes. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

1. Select the HTML tab to switch to the HTML view.
2. Locate the JavaScript code block containing the function cboSelection_onchange.

   Place your cursor before the end </SCRIPT> tag and after the closing curly bracket of the last function.

   

3. Add the following code to that section then save your work.

   function suspendThinClient(blnState) {
       if(blnState) {
          if(typeof VzSuspendImages == "function") {
             VzSuspendImages();      //save thin-client transactions
          }
       }
       else {
          if(typeof VzRefreshImages == "function") {
             VzRefreshImages();      //save thin-client transaction
          }
       }
   }

4. Return to the design view by clicking the Design tab.

x

This procedure will add a control to the menu bar, which can be used to color any table in the Data Pool by the specified field at run time.

1. From the Insert menu, select Controls, then click Drop Down List.
2. Click and drag your cursor within the group box. The drop-down list appears.
3. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that combobox1 <SELECT> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:cboColorBy
   • Name: cboColorBy
   • Position: Left: 115px
   • Position: Top: 25px
   • Size: Width:100px
   • Styling: Font: Arial 8pt
4. Click the Parameters tab located in the lower-left corner of the HTML Composer window.

   The Properties and settings dialog box appears.

   Note: For the steps below, it is important that you make sure that cboColorBy <SELECT> is the selected property in the Properties menu pane before you open the Parameters window. If it is not selected, you can select it from the drop-down menu at the top of the Properties menu. If it does not appear in the drop-down menu, you need to refresh the menu. You can do this by clicking anywhere on the active form, then back on the Properties window.

5. Select Static from the Data Type radio button area.
6. Click the New button, and add the following options:

   Value	Display
   vzstoresales Product~ Type	Product Type
   vzstoresales Region	Region
   vzstoresales Store~ Name	Store Name

   

7. Return to the Design view by clicking on the Design tab located in the lower-left corner of the HTML Composer window.
8. Click the Events tab located at the bottom of the Properties toolbox pane.
9. To add an event to the drop-down list whenever you select an option at run time, select the event onchange and click the ellipsis button.
10. Add the code below to the cboColorBy_onchange function and then save your work.

    suspendThinClient(true);
    var vzBarOne     =document.getElementById('vzBarOne');
    var varSelected  =ctrl.options[ctrl.selectedIndex].value;
    vzBarOne.ColorBy =varSelected;
    suspendThinClient(false);

    Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

11. Return to the design view by selecting the Design tab and return to the properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
12. From the Insert menu, select Components, then click Text.
13. Click and drag your cursor within the group box. The text appears.
14. Double-click inside the text object. Enter the text Color by Field.
15. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

    Make sure that text1 <SPAN> is the selected property in the Properties menu pane. Set these attributes as follows:

    • Unique Identifier:txtColorBy
    • Position: Left: 115px
    • Position: Top: 8px
    • Size: Height:28px
    • Size: Width:100px
16. Save your work, then run the Web page.

x

This procedure will add a control to the menu bar that omits unselected items from the current display.

Note: This method is different from excluding. When you hide unselected items the data is still present in other views, it would not be if excluded.

1. From the Insert menu, select Controls, then click Push Button.
2. Click and drag your cursor within the group box. The push button appears.
3. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that button1 <INPUT> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:btnHide
   • Name: btnHide
   • Position: Left: 615px
   • Position: Top: 20px
   • Size: 24
   • Size: Height:25px
   • Size: Width:120px
   • Styling: Font: Arial 8pt Bold
   • Value: Hide Unselected
4. Click the Events tab located at the bottom of the Properties toolbox pane.
5. To add an event to the button whenever it is clicked, select the event onclick and click the ellipsis button.
6. Add the code below to the btnHide_onclick function and then save your work.

   suspendThinClient(true);
   vzBarOne.Command(7111, "", 0, 0); //***Excluded Unselected
   suspendThinClient(false);

   Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

7. Return to the design view by selecting the Design tab and return to the Properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
8. Save your work, then run the Web page.

x

This procedure will add a control to the menu bar that toggles the actively selected items (selected items become unselected, and the unselected items become selected).

1. From the Insert menu, select Controls, then click Push Button.
2. Click and drag your cursor within the group box. The push button appears.
3. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that button1 <INPUT> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:btnToggle
   • Name: btnToggle
   • Position: Left: 745px
   • Position: Top: 20px
   • Size: 15
   • Size: Height:25px
   • Size: Width:75px
   • Styling: Font: Arial 8pt Bold
   • Value: Toggle
4. Click the Events tab located at the bottom of the Properties toolbox pane.
5. To add an event to the button whenever it is clicked, select the event onclick and click the ellipsis button.
6. Add the code below to the btnToggle_onclick function and then save your work.

   suspendThinClient(true);
   vzBarOne.Command(7117, "", 0, 0); //***Toggle Unselected
   suspendThinClient(false);

   Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

7. Return to the design view by selecting the Design tab and return to the Properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
8. Save your work, then run the Web page.

x

This procedure will add a control to the menu bar that refreshes all components on the page to their original state.

1. From the Insert menu, select Controls, then click Push Button.
2. Click and drag your cursor within the group box. The push button appears.
3. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that button1 <INPUT> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:btnReset
   • Name: btnReset
   • Position: Left: 830px
   • Position: Top: 20px
   • Size: 44
   • Size: Height:25px
   • Size: Width:75px
   • Styling: Font: Arial 8pt Bold
   • Value: Reset
4. Click the Events tab located at the bottom of the Properties toolbox pane.
5. To add an event to the button whenever it is clicked, select the event onclick and click the ellipsis button.
6. Add the code below to the btnReset_onclick function and then save your work.

   suspendThinClient(true);
   vzBarOne.Command(7112, "", 0, 0); //***Restore Excluded
   vzBarOne.Command(7115, "", 0, 0); //***Select All
   suspendThinClient(false);

   Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

7. Return to the design view by selecting the Design tab and return to the properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
8. Save your work, then run the Web page.

   

x

This procedure adds two controls to the menu bar. Each control generates a list of strings representing the labels displayed for the selected items. One displays an active report, and the other displays a PDF.

1. From the Insert menu, select Components, then click Text.
2. Click and drag your cursor within the group box. The text appears.
3. Double-click inside the text object. Enter the text Make Selections in the Bar and/or Pie charts.
4. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that text1 <SPAN> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:txtCollect
   • Position: Left: 315px
   • Position: Top: 10px
   • Size: Height:35px
   • Size: Width:194px
5. From the Insert menu, select Components, then click Image.
6. Click and drag your cursor within the group box. A window appears prompting you to select an image. Select icon_activereport.jpg from the VZ_ChartControl folder.
7. Access the Properties menu pane on the right (if needed, select Properties from the View menu).

   Make sure that image1 <IMG> is the selected property in the Properties menu pane. Set these attributes as follows:

   • Unique Identifier:imgActive
   • Name: imgActive
   • Position: Left: 430px
   • Position: Top: 32px
8. Click the Events tab located at the bottom of the Properties toolbox pane.
9. To add an event to the button whenever it is clicked, select the event onclick and click the ellipsis button.
10. Add the code below to the imgActive_onclick function and then save your work.

    openReport('AHTML');

11. Return to the design view by selecting the Design tab.
12. Make sure that imgActive <IMG> is the selected property in the Properties menu pane. Select the event onmouseover and click the ellipsis button.
13. Add the code below to the imgActive_onmouseover function and then save your work.

    ctrl.style.cursor='hand';

14. Return to the design view by selecting the Design tab and return to the properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
15. To insert another image (to control PDF output), repeat steps 5 through 14. Note the following differences:
    • Image name: icon_pdf.gif
    • Unique Identifier: imgPDF
    • Name: imgPDF
    • Position: Left: 455
    • Position: Top: 31
    • When adding code to the functions, make sure imgPDF <IMG> is selected in the Properties menu pane.
    • The code added to imgPDF_onmouseover is the same as the code for imgActive, however the code to be added to the imgPDF_onclick function is:

      openReport('PDF');

16. After the imgPDF image is inserted, select the HTML tab to switch to the HTML view.
17. Locate the JavaScript code block containing the function imgPDF_onmouseover.

    Place your cursor before the end </SCRIPT> tag and after the closing curly bracket of the last function.

    

18. Once you have located the end of the last function and the </SCRIPT> tag, add the following code:

    function openReport(strOutputType){
         var urlLink = 'http://localhost:8080/ibi_apps/WFServlet';
         var urlQString = 'IBIF_ex=vzdashboard' +
                          '&IBIAPP_app=VZ_ChartControl' +
                          '&OUTPUT_TYPE=' + strOutputType;
         var strStoreName   = getValues('vzBarOne');
         var strRegion      = getValues('vzBarTwo');
         var steProductType = getValues('vzPie');
         urlQString += '&' + 'STORENAME=' + formatForReportURL(strStoreName);
         urlQString += '&' + 'REGION=' + formatForReportURL(strRegion);
         urlQString += '&' + 'PRODUCTTYPE='	+ formatForReportURL(steProductType);
    window.open(urlLink + '?' + urlQString, '');
    }
    function getValues(strActiveXName){
         //VzSelectionFilter selectionMask
         /*Value             Description
         -----------------------------------------
             1               Include hidden (deleted) categories
             2               Include visible categories
             4               Include selected categories
             16              Include semi-selected categories
         */
      var vzActiveX     = document.getElementById(strActiveXName);
      var selectionMask = 4 + 16;
      var strValues     = vzActiveX.FindSelectedValues(selectionMask);
      return(strValues);
    }
    function formatForReportURL(strValues){
    	strValues = strValues.replace(/~ /g, '@@');
    	strValues = strValues.replace(/ /g, '\' OR \'');
    	strValues = strValues.replace(/@@/g, '');
    	strValues = '\'' + strValues + '\'';
    	return(strValues);
    }

    Note: The steps above added JavaScript code to the project. For more information on JavaScript standards and best practices, see Using the Visual Discovery JavaScript API.

19. Return to the design view by selecting the Design tab and return to the properties window by selecting the Properties tab at the bottom of the Properties toolbox pane.
20. Save your work, then run the Web page. The final output looks similar to this:

    

x

1. Open Developer Studio.
2. Select the Other folder in the IBI Demonstration project.
3. In the Contents pane, right-click the vzChartControl.txt file and select Add to Project.
4. Right-click the vzChartControl.txt file again and select Open in Text Editor, as shown in the following image.

   

5. Scroll down to the SECTION: Visual Discovery Dashboard Chart Control and copy the code contained there, as shown below.

   

6. Navigate back to the Explorer window by selecting Window, then Exploring on the toolbar.
7. Select the HTML Files folder in the IBI Demonstration project.
8. In the Contents pane, right-click the vzMySales.htm file and select Add to Project.
9. Right-click vzMySales.htm again and select Edit in Text Editor, as shown in the following image.

   

10. After the Text Editor has opened, scroll to the bottom of the page and place your cursor after the closing Object tag and before the first Input tag, as shown below.

    

11. With your cursor inbetween the Object and Input tags, paste the code you copied from the text file.
12. Save your work and return to the Explorer window by closing the Text Editor.
13. In the Contents pane, right-click the vzMySales.htm file.
14. Select Edit in HTML Composer.

    The code that you added in step 11 inserted the Chart Control that you see at the top of your dashboard, as shown below.

    

    Note: The code from step 11 inserted the buttons with no functionality, the following steps adds the JavaScript you will use to make the buttons active.

15. Select Window, then Text Editor VZChartControl.
16. Copy the JavaScripts contained in the file, which is all of the text above the Visual Discovery Dashboard Chart Control.

    

17. Navigate back to the dashboard by selecting Window then HTML Composer vzMySales on the toolbar.
18. Click the HTML tab located in the lower-left corner of the HTML Composer window. The HTML view will open.
19. Now scroll to the top of the page and place your cursor after all of the other JavaScript tags but before the closing Head tag.

    

20. With your cursor outside of the script tags and inside the Head tag, paste the JavaScript you copied. Save your work.

    Note: You will need to customize some of the code that you just inserted for the Chart Control to work. For step-by-step instructions, see How to Customize the Chart Control.

x

In the code that follows, you have to customize variables in order for the vzMySales project to work properly.

Note: Each piece of the following code is from the vzChartControl.txt file that you pasted into your project in How to Set Up the Sample Application. The variables that must be changed are highlighted in bold.

1. In the HTML view, find the following section of code:

   /*Global Script variables*/
   var strtActiveXGBL = 'activex1';

2. Replace the existing global variable with a variable from your project. In this example you can use vzBarOne. The code should appear as follows:

   /*Global Script variables*/
   var strtActiveXGBL = 'vzBarOne';

3. In this example, vzBarOne is being used, but to find out what values are available, click the Design tab located in the lower-left corner of the HTML Composer window. The Design view will open.
4. Select a component on the dashboard and take note of its name. Each of these components can be used as the global variable.
5. In the HTML view, find the following section of code:

   //Begin function openReport
   function openReport(strOutputType){
        var urlLink = 'http://localhost:8080/ibi_apps/WFServlet';
        var urlQString = 'IBIF_ex=VZdashboard' +
                         '&IBIAPP_app=ibidemo' +
                         '&OUTPUT_TYPE='+strOutputType;

        var strStoreName = getValues('activex1', ' ', 'vzstoresales');
        var strRegion = getValues('activex2', ' ', 'vzstoresales');
        var steProductType = getValues('activex3', ' ', 'vzstoresales');
        urlQString += '&' + 'STORENAME=' + formatForReportURL(strStoreName);
        urlQString += '&' + 'REGION=' + formatForReportURL(strRegion);
        urlQString += '&' + 'PRODUCTTYPE=' + formatForReportURL(steProductType);
        window.open(urlLink + '?' + urlQString, '');
   }
   //End function openReport

6. Use the var values to replace activex1, activex2, and activex3 with the appropriate values. For example, the first var strStoreName corresponds to the StoreName value, which is displayed on your chart with vzBarOne, Revenue by Store. As a result, activex1 should be replaced by vzBarOne. The fully edited code should appear as follows:

   //Begin function openReport
   function openReport(strOutputType){
        var urlLink = 'http://localhost:8080/ibi_apps/WFServlet';
        var urlQString = 'IBIF_ex=VZdashboard' +
                         '&IBIAPP_app=ibidemo' +
                         '&OUTPUT_TYPE='+strOutputType;

        var strStoreName = getValues('vzBarOne', ' ', 'vzstoresales');
        var strRegion = getValues('vzBarTwo', ' ', 'vzstoresales');
        var steProductType = getValues('vzPie', ' ', 'vzstoresales');
        urlQString += '&' + 'STORENAME=' + formatForReportURL(strStoreName);
        urlQString += '&' + 'REGION=' + formatForReportURL(strRegion);
        urlQString += '&' + 'PRODUCTTYPE=' + formatForReportURL(steProductType);
        window.open(urlLink + '?' + urlQString, '');
   }
   //End function openReport

   Note: The urlLink and urlQString values (bold in Step 5) should also be replaced with the proper values, depending on url of your server and the FOCUS executable file you are using. For this example, the values are correct.

7. Save your work and run the project.