如何修改sap.ui.comp.filterbar.FilterBar的显示/隐藏筛选栏按钮文本？

问题核心 #

直接修改按钮的text或tooltip属性会被FilterBar内部的状态绑定逻辑覆盖，因为按钮文本默认绑定到组件的visible状态，每次切换时都会从默认资源包读取文本。

方案1：自定义资源包（推荐，符合SAP最佳实践） #

FilterBar的显示/隐藏按钮文本默认从UI5官方资源包中读取，键值为FILTERBAR_SHOW和FILTERBAR_HIDE。通过自定义资源包覆盖这两个键的文本即可：

1. 在项目中创建自定义i18n文件（如i18n/custom.properties），添加：

   FILTERBAR_SHOW=Anzeigen
   FILTERBAR_HIDE=Verbergen
   

2. 在manifest.json中配置该资源包，设置bundleOverwrite: true以覆盖默认UI5资源：

   "models": {
     "i18n": {
       "type": "sap.ui.model.resource.ResourceModel",
       "settings": {
         "bundleName": "your.project.namespace.i18n.custom",
         "bundleOverwrite": true,
         "fallbackLocale": "en"
       }
     }
   }
   

3. 确保FilterBar使用该i18n模型（默认已关联，无需额外配置）。

方案2：修改按钮的绑定逻辑 #

直接替换按钮的文本绑定，使用自定义逻辑根据FilterBar的visible状态切换文本：

onInit() {
  const oFilterbar = this.getView().byId("filterBar");
  const oHideShowBtn = oFilterbar._oHideShowButton;
  
  // 移除原有绑定
  oHideShowBtn.unbindProperty("text");
  oHideShowBtn.unbindProperty("tooltip");
  
  // 绑定自定义文本逻辑
  oHideShowBtn.bindProperty("text", {
    path: "visible",
    model: oFilterbar.getModel(),
    formatter: (bVisible) => bVisible ? "Verbergen" : "Anzeigen"
  });
  
  oHideShowBtn.bindProperty("tooltip", {
    path: "visible",
    model: oFilterbar.getModel(),
    formatter: (bVisible) => bVisible ? "Filterleiste verbergen" : "Filterleiste anzeigen"
  });
}

注意：直接访问_oHideShowButton属于私有属性，SAP官方不推荐，版本升级可能导致兼容性问题。

方案3：监听官方visibilityChange事件 #

利用FilterBar公开的visibilityChange事件，在状态变更后更新按钮文本，避免与内部逻辑冲突：

onInit() {
  const oFilterbar = this.getView().byId("filterBar");
  // 初始设置文本
  this._updateHideShowBtn(oFilterbar);
  // 监听状态变更事件
  oFilterbar.attachVisibilityChange(() => this._updateHideShowBtn(oFilterbar));
},

_updateHideShowBtn(oFilterbar) {
  const oBtn = oFilterbar._oHideShowButton;
  const bIsVisible = oFilterbar.getVisible();
  const sText = bIsVisible ? "Verbergen" : "Anzeigen";
  const sTooltip = bIsVisible ? "Filterleiste verbergen" : "Filterleiste anzeigen";
  oBtn.setProperty("text", sText);
  oBtn.setAggregation("tooltip", sTooltip);
}

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