如何自定义"sap.ui.comp.filterbar.FilterBar“控件？

Question

我使用SAPUI5开发了一个包含项目列表和搜索特性的control sap.ui.comp.filterbar.FilterBar页面。框架自动为触发搜索的按钮定义文本，并为搜索字段中显示为默认值的占位符定义文本。

我想定制它，以便更好地控制它的内容和一个更好的多语言管理与i18n设置。我如何进行这种定制？我查看了文档，但它没有提到我可以轻松地进行更改的属性。

​

​

下面是实现视图的这一部分的代码

<!-- ... -->
<fb:FilterBar xmlns:fb="sap.ui.comp.filterbar" xmlns="sap.m" xmlns:core="sap.ui.core"
  id="filterBar"
  search=".onSearch"
  showRestoreButton="false"
  showClearButton="true"
  showFilterConfiguration="false"
>
  <fb:filterGroupItems>
    <fb:FilterGroupItem
      groupName="__$INTERNAL$"
      name="A"
      label="{i18n>workstreamsOptions}"
      partOfCurrentVariant="true"
      visibleInFilterBar="true"
    >
      <fb:control>
        <ComboBox id="WorkStreamCombobox" change=".onChange">
          <core:Item key="001" text="{i18n>ws1}" />
          <core:Item key="002" text="{i18n>ws2}" />
          <core:Item key="003" text="{i18n>ws3}" />
          <core:Item key="004" text="{i18n>ws4}" />
          <core:Item key="005" text="{i18n>ws5}" />
          <core:Item key="006" text="{i18n>ws6}" />
          <core:Item key="007" text="{i18n>ws7}" />
          <core:Item key="008" text="{i18n>ws8}" />
          <core:Item key="009" text="{i18n>ws9}" />
        </ComboBox>
      </fb:control>
    </fb:FilterGroupItem>
    <fb:FilterGroupItem
      groupName="__$INTERNAL$"
      name="B"
      label="{i18n>typeOfInterface}"
      labelTooltip="Tooltip Example"
      partOfCurrentVariant="true"
      visibleInFilterBar="true"
    >
      <fb:control>
        <ComboBox id="TypeCombobox" change=".onChange">
          <core:Item key="001" text="{i18n>typeInbound}" />
          <core:Item key="002" text="{i18n>typeOutbound}" />
          <core:Item key="003" text="{i18n>typeNotClassified}" />
        </ComboBox>
      </fb:control>
    </fb:FilterGroupItem>
  </fb:filterGroupItems>
</fb:FilterBar>
<!-- ... -->

Answer 1

如果我正确地理解了它，您将寻找覆盖和自定义默认搜索的占位符。

它可以由以下代码控制。

    onToggleSearchField: function (oEvent) {
        var oSearchField = this.oFilterBar.getBasicSearch();
        var oBasicSearch;
        if (!oSearchField) {
            oBasicSearch = new SearchField({
                showSearchButton: false,
                placeholder:"Custom Placeholder"
            });
        } else {
            oSearchField = null;
        }

        this.oFilterBar.setBasicSearch(oBasicSearch);

        oBasicSearch.attachBrowserEvent("keyup", function (e) {
                if (e.which === 13) {
                    this.onSearch();
                }
            }.bind(this)
        );
    },

并在您的onToggleSearchField()函数中初始化onInit()。

通过i18n定制同样的..。在i18n中设置文本并使用以下逻辑相应地控制占位符。

this.getView().getModel('i18n').getResourceBundle().getText(
                            'Your PlaceHolder Name from i18n')

谢谢,

阿比