如何更改过滤栏中的默认值？答案

【问题标题】：How to change default values in Filter Bar?如何更改过滤栏中的默认值？
【发布时间】：2022-10-08 07:11:14
【问题描述】：

我使用 Ui5 的类过滤栏开发了一个带有项目列表和搜索功能的 ui5 页面。该框架自动为触发搜索的按钮定义一个文本，并为在搜索栏中默认显示的文本定义一个文本。

我想对其进行自定义，以便更好地控制其内容并使用 i18n 设置进行更好的多语言管理。我该如何进行这种定制？我查看了 SDK 文档，但它没有提到我可以轻松进行此更改的属性。

跟随一段代码来实现这部分视图。

<Label/>
<fb:FilterBar 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">
          <items>
            <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}" />
          </items>
        </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">
          <items>
            <core:Item key="001" text="{i18n>typeInbound}" />
            <core:Item key="002" text="{i18n>typeOutbound}" />
            <core:Item key="003" text="{i18n>typeNotClassified}" />
          </items>
        </ComboBox>
      </fb:control>
    </fb:FilterGroupItem>
  </fb:filterGroupItems>
</fb:FilterBar>

【问题讨论】：

标签： sapui5 ui5-webcomponents

【解决方案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)
        );
    },

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

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

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

谢谢，

阿比

【讨论】：