WebFOCUS Designer > Creating and Editing Pages in WebFOCUS Designer > Using a JavaScript Function to Drill to a Panel

Using a JavaScript Function to Drill to a Panel

Topics:

You can use a JavaScript function to dynamically navigate to panels within a Designer page and pass parameters from content in one panel to the content in other panels. This makes it possible to create an interactive page where the user can explore the data in different ways.

To create the Navigate to Panel function, you need to perform the following steps:

  1. Create Hyperlinks. Create hyperlinks within a chart or report, which you will later configure to point to parameterized content.
  2. Create Parameterized Content. Create charts and reports to which the links will point.
  3. Determine the CSS Class for the Target Content Panel. Inspect the target content item inside the Designer page and determine its CSS class.
  4. Configure Hyperlinks with the CSS Class. Specify the output location for the links.

Note: The entire example of the content and the page that we create in this section can be found in your Retail Samples domain, in the Portal folder, under Advanced Features.

Step One: Creating Hyperlinks

How to:

In this step, you will create a simple report with hyperlinks, which you will later configure to point at a specific output in a portal.

Procedure: How to Create Hyperlinks in a Report

  1. Sign in to WebFOCUS as a developer or administrator.
  2. Launch in Report mode.
  3. Select a data source file and click OK. In this example we are using wf_retail_lite.
  4. Drag fields from the Data pane onto the canvas or into the Query pane to create a report.

    For more information on how to create a basic report, see the Creating and Customizing Reports chapter, in the WebFOCUS InfoAssist User’s Manual.

  5. Click the field that you want to use for the Navigate to Panel function to highlight it.
  6. On the Field tab, in the Links group, click Drill Down.

    The Drill Down dialog box opens.

  7. Select the Refresh BI Portal radio button.
  8. Click the Add Parameter button.
  9. Type a name for the parameter.

    Note: Remember the name of the parameter. You will use it in the subsequent steps.

  10. In the Type list, click Field.
  11. In the Value list, click the field that you have highlighted, and then click OK.

    The following image shows the example of the Drill Down dialog box, where TIME_YEAR is the name of the parameter.

  12. Click OK.

    The hyperlinks are added to the entries of the highlighted field.

    Note: The links remain inactive and evoke no error messages until the target value is configured.

  13. Follow the steps 5-12 to create more hyperlinks, if needed.
  14. Save the report.

Step Two: Creating Parameterized Content

How to:

In this step, you build parameterized reports and charts that will serve as the target content for the parameters coming from your JavaScript function..

Procedure: How to Create Parameterized Content for Hyperlinks

  1. From InfoAssist, click the application button, then click New.
  2. Click Build a Report or Build a Chart.
  3. Select the same data source file that you used for the initial report, and then click OK.
  4. Drag fields from the Data pane onto the canvas or into the Query pane to create a report or chart.
  5. On the Data tab, in the Filter group, click Filter.

    The Create a filtering condition dialog box opens.

  6. Double-click the Double-click or press F2 to edit! text.
  7. Set the following values:
    1. In the Field drop-down list, click the same field for which you have created hyperlinks in the previous report.
    2. Keep the Equal To default value.
    3. In the Value dialog box, set Type to Parameter, keep the Simple radio button selected, and type the name of the parameter that matches the parameter in the initial report, select the Optional check box, and then click OK.

    The following image shows an example of the filtering condition, where TIME_YEAR is the name of the parameter.

  8. Click OK.
  9. Save the second report and close WebFOCUS InfoAssist.
  10. Repeat steps 1-8 to create more content.
  11. Close WebFOCUS InfoAssist.

Determine the CSS class for the Target Content Item

How to:

In this step, you create a Designer Page, inspect the target content item inside the page and determine the CSS class for this item.

Procedure: How to Determine CSS Class for a Content Item

  1. Open a web browser.
  2. Launch WebFOCUS Designer, as described in Creating Pages in WebFOCUS Designer.
  3. Add the parameterized content item to the page.
  4. With the content item selected on the canvas, open the Properties panel.
  5. Copy the unique CSS identifyer in the Content ID field to the clip editor.

    Note: Alternatively, you can populate the Classes field under the Content section to assign a custom CSS class to this content item. You can assign the same CSS class to two or more content items and apply a JavaScript function to all of them simultaneously.

    The following images shows an example of CSS Classes, a default one in the ID field and the custom one in the Classes field.

  6. Optionally, repeat steps 3-5 for other content items that you want to refresh.

Configure Hyperlinks with the CSS Class

How to:

In this step, you edit the report containing hyperlinks to specify the output location and test the Navigate to Panel function.

Procedure: How to Configure Hyperlinks

  1. On the Home Page, open the initial report in the Text Editor.
  2. Navigate to the line that contains the following code: 
    JAVASCRIPT=drillRefresh
  3. Change drillRefresh to portalDispatch, place drillRefresh after the parenthesis, change AMPERS_PAGE_ONLY to self, and paste the CSS class that you copied from the web browser debugger interface. Ensure that you enclose these entries in single quotation marks.

    An example of modified syntax should look similar to this:

    JAVASCRIPT=portalDispatch('drillRefresh' 'self' 'CONTENT-JBZUI1RV13DHPPP9A778' 'TIME_YEAR' WF_RETAIL_LITE.WF_RETAIL_TIME_SALES.TIME_YEAR)

    where:

    portalDispatch

    Is the JavaScript function.

    self

    Is an indication that the current page will be refreshed.

    CONTENT-JBZUI1RV13DHPPP9A778

    Is the CSS class that you copied from the web browser debugger interface.

    If you want to refresh two or more items on the page, paste their CSS classes separated by spaces and enclose them all in single quotation marks, like so: 

    'CONTENT-JFJUGXYX1LHV08Z5T210 CONTENT-JFJUJUDL12XKUUHTX291'

    Alternatively, you can paste the single custom CSS class that you assigned in the Classes field in the Properties panel.

    TIME_YEAR

    Is the name of the parameter that is being passed from the hyperlinks.

    WF_RETAIL_LITE.WF_RETAIL_TIME_SALES.TIME_YEAR

    Is the database entry which is tied to the parameter alias.

    The following image shows an example of the modified syntax for a single parameter using the unique CSS class assigned by WebFOCUS Designer.

    The following image shows an example of the modified syntax for a single parameter using the custom CSS class that you assigned in the Classes field.

    When working with more complex content items, such as matrix charts or reports, you might want to pass more than one parameter to your target content. An example of syntax for passing two parameters using unique CSS classes assigned by WebFOCUS Designer is shown in the following image.

    The following image shows an example of syntax for passing two parameters using the custom class that you assigned in the Classes field.

  4. Click Save and close the Text Editor.
  5. In WebFOCUS Designer, add the report that you just modified to the canvas.
  6. Click the Preview button.

    The preview mode opens.

  7. Click any link in the initial report.

    Your content refreshes to reflect the correct data, as shown in the following image.

 WebFOCUS

Feedback