Filtering Data on Designer Pages

In this section:

WebFOCUS Designer filter controls are versatile and allow you to facilitate multiple filtering scenarios. Depending on the needs of your enterprise and on the specifics of the data that you are using, you can configure filter controls to fit your unique needs. Examples below show you different types of controls and how to use them.

Adding Filters to Pages in WebFOCUS Designer

How to:

Creating a page filter in WebFOCUS Designer is a quick and intuitive process. Whenever you add parameterized content item to the canvas, such as a report with parameters or chart with parameters, Designer recognizes the parameters and creates filters for them automatically. The tool then notifies you of any available filters with a notification, and a badge count is overlaid on the Quick Filter button, as shown in the following image.

After you add filters to a page, you can edit filter parameters, customize your filter grid, and change the types of your filter controls.

There are three ways to add filters to a page in WebFOCUS Designer:

Procedure: How to Automatically Add Filters to a Page Using the Quick Filter Button

  1. In the Resource selector, drag a parameterized item of your choice from the Resources tree to the canvas.

    The Quick Filter button appears on the toolbar with the badge icon showing the number of unbound filters.

  2. Optionally, add more content.

    Note: The quickest way to create parameterized content featuring the same set of parameters is to start by creating a Reporting Object with desired parameters, and then using the Reporting Object to create content. To do so, right-click your Reporting Object, point to New, and then click Chart or Report.

  3. Click the Quick Filter button.

    The filter bar with all available filters appears above your content.

  4. Optionally, customize your filter bar as described below.
    • Right-click a cell to access shortcut menu options, as shown in the following image.
      The available options are:
      • Add filter controls. Opens the Add Filter Controls dialog box, where you can choose from the list of available controls and add them to the filter grid.

        Note: If all available filters display on the page, the Add Filter Controls setting is inactive.

      • Insert row above. Inserts an empty row above the current row in the filter grid.
      • Insert row below. Inserts an empty row below the current row in the filter grid.
      • Style. Opens the Properties panel, where you can customize the grid style and cell alignment.
      • Delete cell. Deletes the current cell.
      • Delete grid. Deletes the entire filter bar.
    • Right-click a control to access shortcut menu options, as shown in the following image.
      The available options are:
      • Edit label. Makes the label of the control an editable text.

        Note: Another way to edit a control label is to double-click the field, type the new text, and press Enter.

      • Convert. Opens the Convert Control To dialog box, where you can choose between various control types.
      • Settings. Opens the Properties panel, where you can customize label position, label alignment, and control object width.
      • Style. Opens the Properties panel, where you can customize cell styling options.
      • Delete control. Deletes the current control.
    • Drag any filter cell to a new location in the grid.
    • Multi-select two controls, right-click one of them, and then click Combine to combine the two controls into one. An example of two combined controls is shown in the following image.

      The Combine option only applies to dates and sliders.

    • Drag a control into a cell with other controls. This action puts two separate controls into one cell. The drag marker is shown allowing you to position one controls in front or behind another control. You can separate the controls again by dragging one control out of the cell.
  5. Save your changes.

Procedure: How to Add Filters to a Page Manually

  1. In the Resource selector, drag a parameterized item of your choice from the Resources tree to the canvas.

    The Filter button appears on the toolbar, with the badge icon showing the number of available filters.

  2. Optionally, add more content with the same set of parameters.
  3. Click the Page filter configuration button .

    The Page Filter Configuration dialog box opens.

  4. Click Create empty filter bar, as shown in the following image.

    Note: If you prefer a floating modal window instead of a filter bar, click Create empty filter modal window.

  5. Right-click inside any filter cell, and then click Add filter controls.

    The Add Filter Controls dialog box opens, and lists all available controls selected by default, as shown in the following image.

  6. Clear the controls that you want to exclude.
  7. Optionally, change types of your controls where applicable by selecting a desired option in the Control column, as shown in the following image.

    Note: When working with button sets, keep in mind that they look best when positioned in a single line.

  8. Click Add filter controls.

    The controls are added to the filter bar.

  9. Save your changes.

Procedure: How to Add Filters to Page Using a Grid Container

  1. In the Resource selector, drag a parameterized item of your choice from the Resources tree to the canvas.

    The Filter button appears on the toolbar, with the badge icon showing the number of available filters.

  2. Optionally, add more content with the same set of parameters.
  3. In the Resource selector, click the Containers button.
  4. Drag the Grid container onto the canvas.
  5. Right-click inside the grid container, and then click Add filter controls.

    The Add Filter Controls dialog box opens, and lists all available controls selected by default.

  6. Clear the controls that you want to exclude.
  7. Click Add filter controls.

    The controls are added to the grid container.

    Note: You can also drag a control from the filter bar to a grid container directly, if the filter bar is open and populated with controls.

  8. Optionally, move and resize your grid container and content to achieve the desired alignment.

    An example of a simple layout featuring a grid container with filter controls is shown in the following image.

  9. Save your changes.

Configuring Filter Control and Filter Grid Properties

You can configure the properties of the filter grid using the Properties panel, which is context-sensitive. For example, when you click a filter cell, the cell style properties open in the Properties panel. When you click a filter control, the general and style properties for this control open in the Properties panel.

The Properties panel for a cell is shown in the following image. When you configure these properties, you modify the alignment of content within a cell or change the style layout of the filter grid.

The properties for a grid cell are:

The Properties panel for a filter control is comprised of two tabs: general and style properties. The Settings tab is displayed in the following image. Using these properties, you can view the type of filter control that shows on the page, add a tooltip or placeholder text, and set the default value.

The Settings tab contains the following properties:

The style tab is displayed in the following image. Similar to the properties of a cell, you can modify the positions of labels in a control, define the alignment, and set the object width.

The style properties are:

Choosing an Event Model for Your Page Filter

How to:

WebFOCUS Designer supports two event models for passing parameters to your page content:

Procedure: How to Use On-selection Change Filters

  1. Add filters to a page as described in Adding Filters to Pages in WebFOCUS Designer.
  2. Click the Preview button.

    The preview mode is activated, allowing you to interact with content and filters. If your page content contains default values, page filters and page content run in parallel, which results in a faster loading time.

  3. Make filter selections.

    Each time you make a selection, the content refreshes to reflect it.

    Note: Notice that the filter controls are chained in such a way that each selection automatically reflects the available choices in other filters. In our example, we set Category to Televisions. Now, the Product Model filter only shows models of televisions, as shown in the following image. WebFOCUS Designer chains controls automatically, if the parameters are defined in the metadata layer with the WITHIN keyword to relate them.

  4. Exit the preview mode and save your changes.

Procedure: How to Use Filters With a Submit Button

  1. Add filters to a page, as described in Adding Filters to Pages in WebFOCUS Designer.
  2. From the Resource selector, click the Controls tab, and then drag the Submit button onto the filter grid.

    The Submit and Reset buttons display in the filter grid.

  3. Optionally, customize the Submit and Reset buttons in any of the following ways:
    • Align the Submit and Reset buttons by selecting the cell in which the buttons reside and customize the Cell Content Alignment option on the Style tab of the Properties panel. In this example, we selected Align control bottom and Align control center.
    • Add a tooltip to the buttons by selecting each one and populating our the Tooltip field on the Settings tab of the Properties panel.
    • Customize the width of the buttons in relation to the filter cell by selecting one of the options under the Control Object Width property. In this example we selected 50%.

    Note: You can delete one or both buttons by right-clicking them and clicking Delete.

  4. Click the Preview button.

    The preview mode is activated, allowing you to interact with content and filters.

  5. Make filter selections and click Submit.

    The content refreshes to reflect all your selections upon clicking the Submit button, as shown in the following image.

  6. Click Reset.

    The filters return to their default values.

  7. Optionally, click Submit again to refresh the content with the default values.

    Note: If you deleted the Reset button in the previous step, you must select default values manually, and then click Submit to return to the default state.

  8. Exit the preview mode and save your changes.

Working With Required Parameters

How to:

When you have required parameters in your content, WebFOCUS Designer interprets them as required filter controls. Required controls are marked in red, prompting you to make a selection for the request to be processed. The image below shows an example of a required filters control.

With a required parameter in place, your content does not refresh until you select filter values.

There are two ways to create a required filter control:

Procedure: How to Add a Parameter to a Content Item

  1. On the WebFOCUS Home Page, on the actions bar, click Report or Chart.

    The Open dialog box opens.

  2. Select a data source in the Open dialog box and click Open.

    InfoAssist opens.

  3. Create a report or chart.

    To learn more about creating content in InfoAssist, see the WebFOCUS InfoAssist User's Manual.

  4. On the Data tab, click Filter.

    The Create a filtering condition dialog box opens.

  5. Double-click the Double-click or press F2 to edit text, select a field, leave the condition at Equal to, and then click Value.

    The drop-down dialog box opens.

  6. Set the Type field to Parameter and select the Dynamic radio button.
  7. Optionally, select the Select multiple values at runtime check box to create a multiple select filter control and Optional check box to create an optional filter control.

    In our example, we are creating a multiple select required control. An example of a complete configuration is shown in the following image.

  8. Save your changes and exit InfoAssist.
  9. In WebFOCUS Designer, in the Resource selector, drag your new content item to the canvas.

    The content item does not load. Instead, a blank container displays a message: A required parameter is missing. The Quick Filter button appears on the toolbar with the badge icon showing one available filter.

  10. Click the Quick Filter button.

    The filter bar with one filter appears above the content item. The filter control is marked in red and the Make a selection text displays inside the control field.

  11. Click the Preview button.

    The preview mode opens.

  12. Select one or more values from the list.

    The filter control is no longer red. It displays your selections. The content refreshes to reflect the filter values, as shown in the following image.

  13. Exit the preview mode and save your changes.

Procedure: How to Convert an Optional Filter Control to a Required One

  1. In WebFOCUS Designer, add filters to a page, as described in Adding Filters to Pages in WebFOCUS Designer.
  2. Click an optional filter control and then click the Properties button .

    The Properties panel opens.

  3. In the Settings tab, disable the Optional setting and then disable the Show All option setting.

    The filter control is marked in red and the Make a selection text displays inside the control field.

  4. Click the Preview button.

    The preview mode opens. The content does not refresh.

  5. Select a value for the required filter control.

    The content refreshes to reflect your selection.

  6. Exit the preview mode and save your changes.

Working With Single and Multiple Select Lists

There are two types of list controls in WebFOCUS Designer:

An example of a single select list control is shown in the following image.

Once you have made a selection in a single select list, your content instantly refreshes to reflect that selection.

An example of a multiple select list control is shown in the following image.

Once you have made all your selections in the multiple select list, you must click outside of the control for the content to refresh.

You can customize your list controls with the search feature by enabling the Search setting in the Properties panel. Once enabled, it adds the search field to your list and allows you to quickly navigate to a specific value. Simply start typing any word or syllable and all values that contain it will display. When a list contains 50 or more values, the search feature is enabled automatically. You can disable it at any time by disabling the Search setting in the Properties panel.

If a list contains 200 or more values, the paging feature is added to the bottom of the control. When paging is active, 10 values display per page. An example of a long list with the paging feature enabled is shown in the following image.

You can further enhance a multiple select list by enabling the Selection controls option in the Properties panel. Once enabled, it adds the Select all and Clear buttons to the list. This feature is especially useful when you need to eliminate just a few values from your results. You can click Select All, clear the values that you need to eliminate, and click outside of the control to refresh your content.

If the Selection controls and Search features are enabled at the same time, you can use the Select all button to select all search results, as shown in the following image.

Working With Slider Controls on a Page

How to:

A slider control is a horizontal track with a marker that you can slide between a minimum and maximum value. This versatile control is often used to choose a numeric value within a fixed range. An example of a slider control is shown in following image.

Procedure: How to Create a Slider Control Using WebFOCUS Designer

  1. On the WebFOCUS Home Page, on the Common tab or Designer tab of the Actions bar, click Chart.

    WebFOCUS Designer opens in Chart mode.

  2. Select a data source in the Open dialog box and click Select.

    WebFOCUS Designer opens in chart mode.

  3. Create a chart.
    To learn more about creating charts in WebFOCUS Designer, see the Creating Charts topic.
  4. Drag a measure field into the Filter toolbar.

    A control appears, allowing you to select default values for the filter parameter, as shown in the following image.

    Slider filter control in WebFOCUS Designer
  5. Set the default range of values for the filter.
  6. Optionally, right-click the control on the Filter toolbar and click Greater than or Less than to select only the minimum or maximum value for the filter.

    When a parameter using one of these options is added to a page in WebFOCUS Designer, the control is a slider with a fixed start or end point.

  7. Save your changes and exit WebFOCUS Designer.
  8. On the WebFOCUS Home Page, on the Common tab or Designer tab of the Actions bar, click Page.

    WebFOCUS Designer opens in page mode.

  9. In WebFOCUS Designer, select a page template and then, from the Resource selector, drag your new chart to the canvas.

    The Quick Filter button appears on the toolbar with the badge icon indicating that filters are available. If the parameter used the range option, the Quick Filter button indicates that two parameters are available, resulting in a slider where you can adjust both heads. If the parameter used the Greater than or Less than option, the Quick Filter indicates that one parameter is available, resulting in a slider where you can adjust either the minimum or maximum slider head.

  10. Click the Quick Filter button.

    The slider control displays in the filter grid, as shown in the following image.


    Slider control in a page

Procedure: How to Create a Slider Control Using InfoAssist

  1. On the WebFOCUS Home Page, on the actions bar, click Report or Chart.

    The Open dialog box opens.

  2. Select a data source in the Open dialog box and click Open.

    InfoAssist opens.

  3. Create a report or chart.

    To learn more about creating content in InfoAssist, see the WebFOCUS InfoAssist User's Manual.

  4. On the Data tab, click Filter.

    The Create a filleting condition dialog box opens.

  5. Create two parameters representing minimum and maximum values and make them optional.

    In this example we create the minimum and maximum parameters for the MPG field in the car report. An example of the completed filtering condition is shown in the following image.

  6. Save your changes and exit InfoAssist.
  7. One the Home Page, right-click your new content item, and then click Edit with text editor.

    The Text Editor window opens.

  8. Edit the syntax by providing the data range values.

    An example of the modified syntax is shown in the following image.

  9. Save your changes and exit the Text Editor.
  10. In WebFOCUS Designer, in the Resource selector, drag your new content item to the canvas.

    The Quick Filter button appears on the toolbar with the badge icon showing two available filters.

  11. Click the Quick Filter button.

    The slider controls display in the filter grid, as shown in the following image.

  12. Optionally, combine two controls together. Multi-select both controls, right-click one of them, and then click Combine.

    Your controls are combined. You can edit the label to reflect your new combined control. An example of the combined slider control is shown in the following image.

  13. Save your changes.

Working With Date Controls

Parameters that contain dates are recognized by WebFOCUS Designer as date controls. An example of the date controls on the page is shown in the following image.

In this example, each of the controls is associated with a distinct parameter. One parameter uses the Greater Than WHERE condition, the other parameter uses the Less Then WHERE condition.

The calendar feature inside a date control allows you to select a specific date value. Once you pick a specific date, it is always spelled out, so that it can be supported by all internationalized applications.

Optionally, you can combine two date controls into one date range control. To do so, multi-select two date controls and then click Combine. An example of a combined date range control is shown in the following image.

The user can select a custom range of dates, as shown in the image, or use any of the presents to select a more general date period.

Using Global Name to Synchronize Filter Controls

How to:

The Global Name property is a powerful tool that allows you to quickly synchronize filter control values between different pages. The Global Name property is configured on the Settings tab of the Properties panel for a filter control. Once enabled, it allows you to match your filter selections across multiple pages at run time within the same browser session.

Procedure: How to Configure Global Name Filter Control Property

  1. In WebFOCUS Designer, add filters to a page, as described in Adding Filters to Pages in WebFOCUS Designer.
  2. Click a filter control that you want to synchronize and then click the Properties button .

    The Properties panel opens.

  3. In the Settings tab, populate the Global Name field, as shown in the following image.

    Note: You can choose any text as a global name for your control. Combined controls, such as date ranges and slider controls, have a single global name property.

  4. Optionally, repeat step 3 for all the filter controls that you want to synchronize.
  5. Save the page.
  6. Create a second page, populate it with parameterized content, and add the same set of filter controls as you did in step 1.

    Note: To streamline this process, you can use the Save As option to create a new version of the existing page, leave the configured filters intact, and replace the content on the canvas. Make sure the Global Name values are identical between the filter controls on both pages.

  7. Save the second page and exit WebFOCUS Designer.
  8. Run one of your newly created pages.
  9. Select filter control values.

    An example of the filter control selections is shown in the following image.

  10. Run the second page.

    The page runs with the same filter control values as the ones you have selected on the previous page, as shown in the following image.

    Note: If your page was created prior to the WebFOCUS Release 8205 and it uses the Global Name feature and contains default content, you must save it again using WebFOCUS Designer to ensure optimal performance.

  11. Optionally, change the filter control values on the second page and see how they synchronize with the ones on the first page.

Personalizing Default Values for Filter Controls

How to:

You can personalize default values for filters in a page based on users or conditions. This feature uses the amper (&&) global variable to specify the default option for a filter control. For example, you can set the Region value for a user, using the && global variable, and link it to the filter control to show their region as the selected value.

Procedure: How to Personalize Default Values for Filter Controls

  1. Start by creating a FOCEXEC which specifies the global variable and the default values. In this example, we are setting default values for different users for the Region control.
    1. On the Home Page, in the Action bar, click the Other tab, and then click Text Editor.

      The New Text Resource dialog box opens

    2. Add the following FOCEXEC code to set the global variable:
      - &&DEFREGION
-SET &&DEFREGION= IF &FOCSECUSER EQ user1 THEN 'North America' ELSE
-IF &FOCSECUSER EQ user2  THEN 'EMEA' ELSE  'South America'
    3. Save your changes and close the Text Editor.
    4. Publish the FOCEXEC.
  2. Bring the global variable in effect by either running the FOCEXEC or mapping its path in the Administration Console for it to be run when the user signs in.

    To map the FOCEXEC you just created in the Administration console, add the focexec path to the Paths to be executed on user Sign-in field in the Other section under Application Settings. The focexec path name can be copied from the Properties panel in the Home page.

    Note: If you are setting the focexec to be executed on sign in, make sure that the WebFOCUS user credentials are passed to the server. One way to do that is to set the server connection to Trusted and select the Pass WebFOCUS User ID and other Groups radio button. For more information on how to use Administration Console, see the WebFOCUS Security and Administration technical content.

  3. Create a Designer page, as described in Creating Pages in WebFOCUS Designer.
  4. Populate your new page with the content that features the Region parameter and add the Region filter to the canvas, as described in Adding Filters to Pages in WebFOCUS Designer.
  5. Click the Region filter, open the Properties panel and, in the Settings tab, under Data Settings, type the default value variable that you created in the FOCEXEC (in this case, &&DEFREGION).

    The following image shows an example of the Default value property populated with the variable.

  6. Save, publish, and run your page.

    The default value for the Region filter control is North America, as shown in the following image.

  7. Sign in to WebFOCUS as one of the users mentioned in the FOCEXEC.
  8. Run the same page.

    The following image shows an example of the user with the username user1 running the page. The default Region value now is EMEA.

WebFOCUS