Test Migration Guide For Adapt Filters Dialog With...

Overview

If you're maintaining OPA tests for applications using the Adapt Filters dialog, you'll need to update your test code to work with the revised UI structure. This guide walks you through the key changes and shows you exactly how to adapt your tests.

Prerequisites

To use the revised Adapt Filters dialog, you need to upgrade to SAPUI5 version 1.146 or a higher version. The current version is SAPUI5 1.148.

Understanding the Fundamental Changes

The revised version of the Adapt Filters dialog introduces a mode-based interaction model that separates different operations. Instead of having all functionality available in one place, the dialog now uses dedicated modes for different tasks:

Edit mode is used for adding filters, removing filters, and toggling visibility
Sort mode is used exclusively for reordering filters

This separation prevents accidental changes and makes each operation more intentional.

Key UI Changes at a Glance

The visual structure has changed significantly:

List/Group View Toggle: The icon-based toggle buttons have been replaced with text-based tabs. Instead of clicking on sap-icon://list or sap-icon://group-2, users now click on labeled “List” or “Group” tabs.

Filter Items: The old sap.m.ColumnListItem with checkboxes has been replaced with sap.m.CustomListItem, containing action buttons and filter controls.

Adding Filters: Instead of checking a checkbox in a long list of all available filters, users now select from a ComboBox dropdown labeled “Add Filter” at the bottom of the panel.

Removing Filters: Rather than unchecking a checkbox, users click an X button (with remove icon) in Edit mode.

Visibility Control: Filters can be hidden. An eye icon (with or without strikethrough) toggles visibility.

Reordering: The dedicated reorder buttons (Move Up, Down, Top, Bottom) are gone. Instead, users drag and drop filters in Sort mode. As an alternative, users can also reorder filter items with keyboard shortcuts as described under “Keyboard Shortcuts for Reordering”.

Changed: The view toggle moved from icon buttons to text-based tabs.

Filter Button (New Feature): A new “Filter” button has been added to the dialog. When clicked, the dialog closes, and the filter bar control applies the current filter values to the associated control (Table, Chart, etc.). This provides a direct way to filter without having to close the dialog separately and then trigger filtering manually.

Test Code Examples

The following sections show what your test code could look like for individual actions. You can combine these examples to create complete test workflows.

Please note: In the code samples, globals are used, for example new sap.ui.test.actions.Press()

This explanation has been included in the code sample for clarity. Please do not use globals.

Import the dependencies via sap.ui.define and use new Press() in your test code instead.

Opening the Adapt Filters Dialog

To open the Adapt Filters dialog, your test code could look like this:

this.waitFor({
    controlType: "sap.m.Button",
    matchers: new sap.ui.test.matchers.Properties({
        text: "Adapt Filters"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Adapt Filters Dialog opened");
    }
});

Closing the Adapt Filters Dialog

To close the dialog, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.Button",
    matchers: new sap.ui.test.matchers.Properties({
        text: "OK"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Adapt Filters Dialog closed");
    }
});

Switching to List View

To switch to List view, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.IconTabFilter",
    matchers: new sap.ui.test.matchers.Properties({
        text: "List"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Switched to List view");
    }
});

Switching to Group View

To switch to Group view, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.IconTabFilter",
    matchers: new sap.ui.test.matchers.Properties({
        text: "Group"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Switched to Group view");
    }
});

Switching to Edit Mode

To switch to Edit mode, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.Button",
    matchers: new sap.ui.test.matchers.PropertyStrictEquals({
        name: "text",
        value: "Edit"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Switched to Edit mode");
    }
});

Switching to Sort Mode

To switch to Sort mode, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.Button",
    matchers: new sap.ui.test.matchers.PropertyStrictEquals({
        name: "text",
        value: "Sort"
    }),
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Switched to Sort mode");
    }
});

Adding a Filter

To add a filter via the ComboBox, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.ComboBox",
    success: function(aComboBoxes) {
        const oComboBox = aComboBoxes[0];
        new sap.ui.test.actions.Press().executeOn(oComboBox);

        this.waitFor({
            searchOpenDialogs: true,
            controlType: "sap.m.StandardListItem",
            matchers: new sap.ui.test.matchers.Properties({
                title: "Country"  // Replace with your filter name
            }),
            actions: new sap.ui.test.actions.Press(),
            success: function() {
                Opa5.assert.ok(true, "Filter 'Country' added");
            }
        });
    }.bind(this)
});

Finding a Filter Item by Name

To find a specific filter item in the list, your test code could look like this:

this.waitFor({
    searchOpenDialogs: true,
    controlType: "sap.m.CustomListItem",
    matchers: function(oItem) {
        const aContent = oItem.getContent();
        if (aContent && aContent[0]) {
            const aGridContent = aContent[0].getContent();
            return aGridContent.some(function(oControl) {
                return oControl.getText && oControl.getText() === "Country:";  // Replace with your filter name
            });
        }
        return false;
    },
    success: function(aItems) {
        Opa5.assert.ok(aItems.length > 0, "Filter item 'Country' found");
        // Store aItems[0] for further actions
    }
});

Removing a Filter

Note: You must be in Edit mode and find the filter item first (see “Finding a Filter Item by Name”).

To remove a filter, your test code could look like this:

this.waitFor({
    controlType: "sap.m.Button",
    matchers: [
        new sap.ui.test.matchers.Ancestor(oFilterItem),  // oFilterItem from previous step
        new sap.ui.test.matchers.Properties({
            icon: "sap-icon://decline"
        })
    ],
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Filter removed");
    }
});

Toggling Filter Visibility (Show/Hide)

Note: You must be in Edit mode and find the filter item first (see “Finding a Filter Item by Name”).

To toggle the visibility of a filter, your test code could look like this:

this.waitFor({
    controlType: "sap.m.Button",
    matchers: [
        new sap.ui.test.matchers.Ancestor(oFilterItem),  // oFilterItem from previous step
        new sap.ui.test.matchers.Properties({
            icon: "sap-icon://show"  // or "sap-icon://hide" depending on current state
        })
    ],
    actions: new sap.ui.test.actions.Press(),
    success: function() {
        Opa5.assert.ok(true, "Filter visibility toggled");
    }
});

Important: If a filter field has no value, hiding it will cause it to be removed entirely when the panel is reopened. To keep a filter in the panel while hidden, ensure it has a value before toggling visibility to hidden.

Reordering Filters via Drag and Drop

Note: You must be in Sort mode and find both source and target filter items first.

To reorder filters, your test code could look like this:

// Drag the source filter
new sap.ui.test.actions.Drag().executeOn(oSourceFilterItem);

// Drop on the target filter
new sap.ui.test.actions.Drop({ before: true }).executeOn(oTargetFilterItem);  // Use before: false to drop after
Opa5.assert.ok(true, "Filter reordered");

Complete Workflow Examples

Now that you have the test code examples, here are complete workflow examples that combine them.

Workflow: Adding a New Filter

Steps:

Open the Adapt Filters dialog
Switch to List view (recommended)
Add the filter using the ComboBox
Close the dialog

Usage scenario: You need to add one or more filters to the filter bar.

Workflow: Removing an Existing Filter

Steps:

Open the Adapt Filters dialog
Switch to List view
Switch to Edit mode
Find the filter item by name
Click the X button (decline icon) to remove it
Close the dialog

Usage scenario: You need to completely remove a filter from the filter bar.

Workflow: Hiding a Filter Without Removing It

Steps:

Open the Adapt Filters dialog
Switch to List view
Switch to Edit mode
Find the filter item by name
Click the eye icon to toggle visibility
Close the dialog

Usage scenario: You need to temporarily hide a filter but want to keep its configuration and value. Remember: filters without values will be removed when hidden.

Workflow: Reordering Filters

Steps:

Open the Adapt Filters dialog
Switch to List view
Switch to Sort mode
Find the source filter item (the one to move)
Find the target filter item (where to move it)
Drag the source filter and drop it on the target
Close the dialog

Usage scenario: You need to change the order in which filters appear in the filter bar.

Workflow: Switching Between List and Group Views

Steps:

Open the Adapt Filters Dialog
Click on the “List” or “Group” tab
Perform your desired actions
Close the dialog

Usage scenario: You need to work with individual filters (List view) or grouped filters (Group view).

Helper Functions

You can create reusable helper functions from the building blocks:

Helper: Add Multiple Filters

const fnAddFilter = function(sFilterName) {
    return this.waitFor({
        searchOpenDialogs: true,
        controlType: "sap.m.ComboBox",
        success: function(aComboBoxes) {
            const oComboBox = aComboBoxes[0];
            new sap.ui.test.actions.Press().executeOn(oComboBox);

            this.waitFor({
                searchOpenDialogs: true,
                controlType: "sap.m.StandardListItem",
                matchers: new sap.ui.test.matchers.Properties({
                    title: sFilterName
                }),
                actions: new sap.ui.test.actions.Press(),
                success: function() {
                    Opa5.assert.ok(true, "Filter '" + sFilterName + "' added");
                }
            });
        }.bind(this)
    });
}.bind(this);

// Usage:
fnAddFilter("Country");
fnAddFilter("Language");
fnAddFilter("Genre");

Helper: Finding and Removing Filters

const fnRemoveFilter = function(sFilterName) {
    return this.waitFor({
        searchOpenDialogs: true,
        controlType: "sap.m.CustomListItem",
        matchers: function(oItem) {
            const aContent = oItem.getContent();
            if (aContent && aContent[0]) {
                const aGridContent = aContent[0].getContent();
                return aGridContent.some(function(oControl) {
                    return oControl.getText && oControl.getText() === sFilterName + ":";
                });
            }
            return false;
        },
        success: function(aItems) {
            this.waitFor({
                controlType: "sap.m.Button",
                matchers: [
                    new sap.ui.test.matchers.Ancestor(aItems[0]),
                    new sap.ui.test.matchers.Properties({
                        icon: "sap-icon://decline"
                    })
                ],
                actions: new sap.ui.test.actions.Press(),
                success: function() {
                    Opa5.assert.ok(true, "Filter '" + sFilterName + "' removed");
                }
            });
        }.bind(this)
    });
}.bind(this);

// Usage (ensure you're in Edit mode first):
fnRemoveFilter("Country");

Keyboard Shortcuts for Reordering

The new panel also introduces keyboard shortcuts for reordering filters when in Sort mode. While these aren't directly testable via standard OPA5 (they require focus and modifier keys), you should be aware of them for manual testing:

CMD + Home (Mac) / Ctrl + Home (Windows): Move filter to the top
CMD + End (Mac) / Ctrl + End (Windows): Move filter to the bottom
CMD + Arrow Up (Mac) / Ctrl + Arrow Up (Windows): Move filter one position up
CMD + Arrow Down (Mac) / Ctrl + Arrow Down (Windows): Move filter one position down

For automated OPA tests, use the drag-and-drop approach shown above.

Quick Reference Guide

Mode-Based Actions

Remember that certain operations now require switching to specific modes:

Action	Required Mode	UI Element
Add filter	No mode required (default)	ComboBox at bottom
Remove filter	Edit mode required	X button (remove icon)
Toggle visibility	Edit mode required	Eye button (show/hide icon)
Reorder filters	Sort mode required	Drag handles (:::)

Control Type Changes

Here's a quick mapping of old to new control types:

Old Control	New Control	Usage
`sap.m.CheckBox`	`sap.m.ComboBox` + `sap.m.StandardListItem`	Adding filters
`sap.m.CheckBox`	Button with `sap-icon://decline`	Removing filters
N/A	Button with `sap-icon://show`/`hide`	Visibility toggle
`sap.m.ColumnListItem`	`sap.m.CustomListItem`	Filter list items
Button with reorder icons	Drag-and-drop actions	Reordering
Button with icon	`sap.m.IconTabFilter`	View switching

Common Matcher Pattern for Filter Items

You'll use this pattern frequently to find filter items by their label:

matchers: function(oItem) {
    const aContent = oItem.getContent();
    if (aContent && aContent[0]) {
        const aGridContent = aContent[0].getContent();
        return aGridContent.some(function(oControl) {
            return oControl.getText && oControl.getText() === "FilterName:";
        });
    }
    return false;
}

Wrapping Up

The new Adapt Filters dialog represents a significant UX improvement, but it does require updating your OPA tests. The key takeaways:

Use IconTabFilter with text for view switching
Use ComboBox for adding filters
Switch to Edit mode before removing filters or toggling visibility
Switch to Sort mode before reordering filters
Use CustomListItem with custom matchers to find filters
Use drag and drop for reordering instead of button clicks

Source link