How to customize the "sap.ui.comp.filterbar.FilterBar" control? - sapui5

Question

I developed a SAPUI5 page with a list of items and a search feature using the control sap.ui.comp.filterbar.FilterBar. The framework defines automatically a text for the button which triggers the search and also for a placeholder that appears as default in the search field.
I would like to customize this in order to have better control of its content and a better multi language management with i18n settings. How can I do this customization? I looked at the documentation but it does not mention a property which I can easily make this change.
Follows a piece of code that implements this part of the View
<!-- ... -->
<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

If I understood it correctly you are looking to overwrite and customize the placeholder for the default search ..
It can be controlled by the following code.
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)
);
},
and Initialize the onToggleSearchField() in your onInit() function.
Customizing the same via i18n... Set your text in your i18n and control the placeholder accordingly using the following logic.
this.getView().getModel('i18n').getResourceBundle().getText(
'Your PlaceHolder Name from i18n')
Thanks,
Abhi