Creating a Report That Drills Through to an InfoWindow in an HTML Page


Using the App Studio JavaScript drilldown functionality and the IbComposer_triggerExecution function, you can use links in a report on an HTML page to open a second chart or report with additional information in an InfoWindow, allowing you to quickly perform further data analysis within the page. To do this, perform the following steps: 

  1. Create two reports. One is a source report that will contain drill-down links, and the second is a target report. The sort field from the source report should be used to filter the target report using a dynamic parameter.
    For example, if the sort field in the source report is Business Subregion, the target report should be filtered by a dynamic parameter for Business Subregion.
  2. Open the source report, and select the data in the sort field on the canvas.
  3. On the Appearance tab, in the Links group, click Drill Down.
    The Drill Down dialog box opens.
  4. In the Drill Down dialog box, click the New button.
    A new drill menu item appears in the list.
  5. Optionally, change the name in the Drill Menu items column. This name is used in the menu that appears when you click a drill-down link at run time.
  6. In the Drill Down Type column, select JavaScript.
  7. In the Source colulmn, type parent.IbComposer_triggerExecution.
    This will use the IbComposer_triggerExecution function to execute a task in the HTML page in which the report will be embedded.
  8. Set the Target Frame to _parent, which runs the drilldown in the HTML page containing the report.
  9. Double-click the cell in the Parameters column.
    The Parameters dialog box opens.
  10. Click the New button to specify the following parameters, in order, for the drilldown. There are six total, constituting three name-value pairs.
    1. Add a new parameter, set the Parameter Type to Constant Value and, in the Parameter Value column, type task2.
      This is the name of the task in the HTML page that the drill-down link will execute.
    2. Add a new parameter, set the Parameter Type to Constant Value and, in the Parameter Value column, type 1.
      This is the sequential index value of the action we want to perform from the task. Since the drill-through action will be the first action in the task, it has an index value of 1.
    3. Add a new parameter, set the Parameter Type to Constant Value and, in the Parameter Value column, type the name of the dynamic parameter in the target report. Do not include the ampersand (&).
    4. Add a new parameter. Set the Parameter Type to Field and select the sort field from the source report. The value selected from this field will be used as the value for the dynamic parameter in the target report.
    5. Add a new parameter. Set the Parameter Type to Constant Value and, in the Parameter Value column, type ib_frameName.
      This is the keyword for the object type when specifying a frame name in a JavaScript function, and defines the location of the drill-down on the HTML page containing the report.
    6. Add a new parameter. Set the Parameter Type to Constant Value and, in the Parameter Value column, type report1.
      This is the name of the frame containing the source report.
  11. Click OK to accept your changes and close the Parameters dialog box, then click OK again to finish creating the drilldown.
  12. Save the source report.
  13. Create a new HTML page.
  14. On the Components tab, in the Reports group, click Report, and draw a new report component on the canvas.
  15. Right-click the report component and click Reference existing procedure.
    The Open File dialog box opens.
  16. Select the source report with the drill-down links, and click OK.
  17. Open the Requests & Data Sources panel.
  18. Click the down arrow next to the New button, point to External Request, and click WebFOCUS Procedure.
    The Open File dialog box opens.
     
  19. Select the target report, which is filtered by a dynamic parameter using the sort field in the source report, and click OK.
    This references the target file without creating a container for it directly on the HTML page.
  20. Open the Tasks & Animations panel.
  21. Create a new task. It should be the first task after the automatically created load task, and should be called task2, in order to match the drill-down parameters that you specified previously.
  22. Change the Trigger Type to TBD.
    The drill-down links are already set to act as triggers, so you do not need to explicitly specify a new one in the HTML page.
  23. Click the down arrow next to the Requests selections button, point to Run Request, and select the target report.
  24. Change the Target type to InfoWindow.
  25. Run the HTML page.
    When you click a drill-down link in the source report and then click the drill-down menu item that you created using the JavaScript option, an InfoWindow opens, displaying the target report, filtered by the selected value. You can click another drill-down link to apply a different filter value to the target report in the InfoWindow.