如何基于SAPUI5技术在SAP Fiori Elements概览页隐藏Smart Filter Bar

Great question! Let’s walk through the exact SAPUI5-level steps to configure a Dynamic Page Variant (DPV) that hides the Smart Filter Bar for your Fiori Overview Page.

1. Enable Dynamic Page Variant Support in Your Manifest #

First off, you need to make sure your Overview Page’s manifest.json is set up to support DPVs. Locate the relevant target section for your Overview Page under sap.ui5 -> routing -> targets, and add the enableDynamicPageVariants flag:

"targets": {
  "overviewPage": {
    "type": "Component",
    "id": "overviewPage",
    "name": "sap.ovp.app",
    "options": {
      "settings": {
        "enableDynamicPageVariants": true,
        // Keep your existing settings here...
      }
    }
  }
}

This tells SAPUI5 to activate variant management for the page’s underlying Dynamic Page control.

2. Define a Custom Variant to Hide the Smart Filter Bar #

You’ve got two solid options here: predefine a default variant via code, or let users create and save their own variant manually. Let’s cover both:

Option A: Predefine a Default Variant (Code-Based)

In your Overview Page’s main controller (usually OverviewPage.controller.js), add this code to the onInit method to create a variant that hides the Smart Filter Bar and sets it as the default:

onInit: function() {
  // Grab references to the Dynamic Page and Smart Filter Bar
  const oDynamicPage = this.getView().byId("dynamicPageId"); // Replace with your actual DP ID
  const oSmartFilterBar = this.getView().byId("smartFilterBarId"); // Replace with your actual SFB ID

  // Create the custom variant configuration
  const oHideFilterVariant = {
    key: "HideFilterBarVariant",
    text: "Hide Smart Filter Bar",
    content: {
      filterBarVisible: false
    }
  };

  // Add the variant to the Dynamic Page's variant manager
  oDynamicPage.getVariantManager().addVariant(oHideFilterVariant);

  // Set this variant as the default one to load on page init
  oDynamicPage.getVariantManager().setCurrentVariantKey("HideFilterBarVariant");
}

Option B: Let Users Create the Variant Manually

If you want users to set up their own variants, hook into the variant save event to store the Smart Filter Bar’s visibility state. Add this to your controller’s onInit:

onInit: function() {
  const oDynamicPage = this.getView().byId("dynamicPageId");
  const oSmartFilterBar = this.getView().byId("smartFilterBarId");

  // Listen for when a user saves a new variant
  oDynamicPage.getVariantManager().attachSaveVariant(function(oEvent) {
    const oVariant = oEvent.getParameter("variant");
    // Save the current visibility state of the Smart Filter Bar into the variant
    oVariant.content.filterBarVisible = oSmartFilterBar.getVisible();
  });
}

Now when users toggle the Smart Filter Bar’s visibility (via its built-in toggle or your custom logic) and save a variant, that visibility state will be stored with the variant.

3. Apply Variant Settings on Load/Change #

Finally, make sure the Smart Filter Bar updates its visibility whenever a variant is selected—either on page load or when the user switches variants. Add this code to your controller’s onInit:

onInit: function() {
  // ... (keep your existing code from steps 2A or 2B)

  const oDynamicPage = this.getView().byId("dynamicPageId");
  const oSmartFilterBar = this.getView().byId("smartFilterBarId");

  // Listen for variant selection changes
  oDynamicPage.getVariantManager().attachVariantChanged(function(oEvent) {
    const oCurrentVariant = oEvent.getParameter("currentVariant");
    // Apply the saved visibility state to the Smart Filter Bar
    if (oCurrentVariant.content.hasOwnProperty("filterBarVisible")) {
      oSmartFilterBar.setVisible(oCurrentVariant.content.filterBarVisible);
    }
  });

  // Trigger the logic on initial page load
  const oInitialVariant = oDynamicPage.getVariantManager().getCurrentVariant();
  if (oInitialVariant && oInitialVariant.content.filterBarVisible !== undefined) {
    oSmartFilterBar.setVisible(oInitialVariant.content.filterBarVisible);
  }
}

Quick Tips #

• If you’re using the standard OVP template, the default Smart Filter Bar ID is usually ovpFilterBar—no need to guess!
• Replace dynamicPageId with the actual ID of your Dynamic Page control from the view.
• For extra convenience, you can add a custom toggle button in the Dynamic Page header to switch between variants directly.

内容的提问来源于stack exchange，提问作者Jonathan Benn