Integrating WebFOCUS With Maps

How to:

You can integrate WebFOCUS reports with maps by:

Latitude and longitude values can be passed as a parameter from a map to update a WebFOCUS procedure. Latitude and longitude are sent as a pair of values, and HTML Composer uses a specific parameter, &COORDINATES, to parse the value pairs correctly.


Top of page

x
Procedure: How to Update a WebFOCUS Report Based on a Map Location

By adding a drill down to a map, you can filter a WebFOCUS report by the latitude and longitude coordinates of the selected marker(s). The parameter to pass the longitude and latitude values must be called &COORDINATES. This HTML Composer parameter will parse the Latitude and Longitude as paired data sets.

The following example updates a WebFOCUS report based on a map location by:

  1. From HTML Composer, with a map created, select New Report from the Insert menu.

    The cursor changes into a crosshair.

  2. Drag the crosshair to create the report object and adjust it to the size you want.
  3. Right-click on the report object and select Open procedure viewer from the context menu.

    The Procedure Viewer opens.

  4. Join the Century Sales and Locale data sources.

    Tip: The Century Sales and Locale data sources are available from the Master Files folder in the IBI Demonstration project of Developer Studio. You may copy these source files to the project directory of your choice.

    1. Click and hold a component connector (yellow diamond) and select Join.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Join dialog box opens.

    3. Select the Add File button from the Join toolbar.

      The File Description List for the Join dialog box opens.

    4. Select locale.mas and click Open.

      Developer Studio automatically creates a Join between the data sources if they both have fields with the same formats. The Join tool displays both data sources and the default Joins, as shown in the example image below.

      For more information about using the Join tool, see the Creating Reporting Applications With Developer Studio manual.

    5. Close the Join tool to save the Join and update the procedure.

      The Join is added to the Procedure Viewer.

  5. Create a Revenue by Category report.
    1. From the Procedure Viewer, click and hold a component connector (yellow diamond) and select Report.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      Report Painter opens.

    3. Select By from the Columns toolbar and double-click CITY, PRODUCTTYPE, REGION, STATE, and STORENAME from the Object Inspector.
    4. Click the mouse after the STORENAME field to add the next field.
    5. Select Sum from the Columns toolbar and double-click LINEPRICE from the Object Inspector.
    6. Rename the PRODUCTTYPE and LINEPRICE fields:
      • Select PRODUCTTYPE, right-click and select Column Title from the context menu. Type Category in the Title dialog box and click OK.
      • Select LINEPRICE, right-click and select Column Title from the context menu. Type Revenue in the Title dialog box and click OK.
    7. Type Revenue by Category in the Page Heading.
  6. Create the &COORDINATES parameter.
    1. In the Object Inspector, expand the Variables folder, right-click on Report Variables and select the New Report Variable option.

      The Variable Editor opens.

    2. Enter COORDINATES in the Name box and click OK to exit the Variable Editor.
    3. Select Where from the Where/If menu.

      The Expression Builder opens.

    4. In the Data pane, navigate to the Report Variables folder and drag &COORDINATES to the Criteria (WHERE) pane.

    5. Click OK.
  7. Add the report to HTML Composer.
    1. The report and &COORDINATES parameter have been created. Save and close the report.

      You are returned to HTML Composer where the New Parameters dialog box appears.

    2. Clear the Create control check box for the parameter, and click OK.

      You will not need a control for the &COORDINATES parameter because the parameters will be passed by the map.

      The Revenue by Category report appears in HTML Composer.

    3. Select the report object to view the associated properties in the Properties window.
    4. Select False from the Auto Execute drop-down list in the Properties window.
  8. Change the map properties to drill down to an embedded procedure.
    1. Double-click the map object to open the Properties and settings dialog box.
    2. Click the mouse and hold the Shift key and select all marker groups.
    3. From the Drill Down section, select:
      • Embedded procedure as the Drill Down Action.
      • report1 from the Source drop-down list.
      • Keep the default selections for Target Type and Target/Template Name.
    4. Click OK to close the Hyperlink Properties dialog box.
  9. Select the Parameters tab.
  10. Bind the map control to the &COORDINATES parameter.
  11. Save and run the layout.

Click the markers on the map to update the report based on the location selected, as shown in the image below.


Top of page

x
Procedure: How to Update the Map Based on Data in a Report

A JavaScript function is used in a WebFOCUS report to update a map. The JavaScript function panToPoint automatically scrolls the map to a specified Latitude and Longitude. In addition, the zoom level of the map can be specified. This will overwrite the zoom level set by default.

The following example updates a map based on data in a report by:

  1. From HTML Composer with a map created, select New Report from the Insert menu.

    The cursor changes into a crosshair.

  2. Drag the crosshair to create the report object and adjust it to the size you want.
  3. Right-click the report object and select Open procedure viewer from the context menu.

    The Procedure Viewer opens.

  4. Join the Century Sales and Locale data sources.

    Tip: The Century Sales and Locale data sources are available from the Master Files folder in the IBI Demonstration project of Developer Studio. You may copy these source files to the project directory of your choice.

    1. Click and hold a component connector (yellow diamond) and select Join.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      The Join dialog box opens.

    3. Select the Add File button from the Join toolbar.

      The File Description List for Join dialog box opens.

    4. Select locale.mas and click Open.
    5. Close the Join tool to save the Join and update the procedure.

      The Join is added to the Procedure Viewer.

  5. Create a Regional Revenue Results report.
    1. From the Procedure Viewer, click and hold a component connector (yellow diamond) and select Report.

      The Open dialog box appears.

    2. Select centurysales.mas and click Open.

      Report Painter opens.

    3. Select By from the Columns toolbar and double-click COUNTRY, REGION, STATE, STORENAME, LATITUDE, and LONGITUDE from the Object Inspector.
    4. Hide the Latitude and Longitude fields:
      • Select LATITUDE, right-click and select Invisible and click On from the context menu.
      • Select LONGITUDE, right-click and select Invisible and click On from the context menu.
    5. Click the mouse after the LONGITUDE field to add the next field.
    6. Select Sum from the Columns toolbar and double-click LINEPRICE from the Object Inspector.
    7. Rename the LINEPRICE field:
      • Select LINEPRICE, right-click and select Column Title from the context menu.
      • Type Revenue in the Title dialog box and click OK.
    8. Type Regional Revenue Results in the Page Heading.
    9. Add a Style Sheet to the report:
      • Select the Style File Selection button from the Report menu.

        The StyleSheet Selection box opens.

      • Click the Add new item button and select defltblu.sty from the StyleSheet File Selection dialog box.
      • Click OK.

        The selected Style Sheet is added to the Include StyleSheet File section.

      • Click Finish to close the StyleSheet Selection box.

        The StyleSheet is applied to the report.

  6. Add JavaScript drill-down parameters for the (By) COUNTRY field.
    1. Select COUNTRY, right-click and choose Options from the context menu.

      The Field Properties dialog box opens at the Style tab.

    2. Click the Drill Down tab.
    3. Select Column Data from the active object drop-down list.
    4. Select JavaScript from the Drill Down Type drop-down list.
    5. Type panToPoint in the JavaScript input field.
    6. Click Add from the With Parameters section to add each required drill down parameter.

      The Drill Down Parameter dialog box opens.

    7. Add the following Drill Down Parameters:
      • With the Field Parameter value selected, select LATITUDE from the drop-down list and click OK.
      • Click Add to add the longitude parameter. With the Field Parameter value selected, select LONGITUDE from the drop-down list and click OK.
      • Click Add to add the unique identifier parameter. With the Constant Parameter value selected, type mapcontrol1 in the input field and click OK.

        Note: The name of the map object in HTML Composer is mapcontrol1.

      • Click Add to add the zoom level parameter. With the Constant Parameter value selected, type 3 in the input field and click OK.

      The following image is an example of the Field Properties Drill Down tab with these options added.

    8. Click OK to close the Field Properties dialog box.
  7. Add JavaScript drill-down parameters for the (By) STATE field.
    1. Select STATE, right-click and choose Options from the context menu.

      The Field Properties dialog box opens at the Style tab.

    2. Click the Drill Down tab.
    3. Select Column Data from the active object drop-down list.
    4. Select JavaScript from the Drill Down Type drop-down list.
    5. Type panToPoint in the JavaScript input field.
    6. Click Add from the With Parameters section to add each required drill down parameter.

      The Drill Down Parameter dialog box opens.

      • With the Field Parameter value selected, select LATITUDE from the drop-down list and click OK.
      • Click Add to add the longitude parameter. With the Field Parameter value selected, select LONGITUDE from the drop-down list and click OK.
      • Click Add to add the unique identifier parameter. With the Constant Parameter value selected, type mapcontrol1 in the input field and click OK.

        Note: The name of the map object in HTML Composer is mapcontrol1.

      • Click Add to add the zoom level parameter. With the Constant Parameter value selected, type 6 in the input field and click OK.
      • Click OK to close the Field Properties dialog box.
  8. Save and close the report and Procedure Viewer.

    The report appears in HTML Composer.

  9. Save and run the layout.

The map and the report appear in the output. Click a drill-down link from the report. The map updates according to the location selected from the report.

For example, click on a link in the Country column to zoom and navigate to the selected country at the zoom level illustrated. Or click on a link in the State column to zoom and navigate to the selected state at the zoom level specified.


WebFOCUS