I don’t know how often you will come across an issue like this. Nevertheless, I think it’s a good case to work with redefinition of controls and a composite control as the FilterBar.

I created a custom worklist app that uses the FilterBar control, with SAPUI5 version 1,28.31. This is a composite control that it has its own buttons with fixed labels. The problem that I had was that two buttons, “Clear” and “Restore”, were translated to the same word in Spanish. Therefore, the result was two identical buttons. The resource bundle where these texts resides is inside library sap.ui.comp. Unluckily the only thing I could do was to redefine the control.

My worklist app with the filter bar looks like this when running with mockdata:


/wp-content/uploads/2016/08/worklist_1011165.png


If you click on Filters you open the filter bar dialog.


filter dialog.png


There you can find the Clear and Restore buttons. Both were translated to the same word in Spanish.


/wp-content/uploads/2016/08/reinicializar_1011209.png



Redefine FilterBar control

First, I started by creating a custom control that behaves exactly the same as the FilterBar. To do this, I created a new file in controls\CustomFilterBar.js. The source code so far will look like this:


jQuery.sap.require("sap.ui.comp.filterbar.FilterBar");
sap.ui.comp.filterbar.FilterBar.extend("Z_MIS_DOCT.controls.CustomFilterBar", {
  metadata: {
  library: "Z_MIS_DOCT.controls",
  properties: {},
  aggregations: {},
  events: {}
  },
  init: function() {
  sap.ui.comp.filterbar.FilterBar.prototype.init.apply(this, arguments);
  },
  renderer: {}
});

Here I’m creating a new control by extending the FilterBar class. I’m not changing anything in the metadata, the init method is calling the super class as it is, and at last an empty renderer will work exactly as the FilterBar renderer.

After this I change my view so it makes use of this new custom control. I define the namespace in the view tag keeping the previous filter namespace because I will still be using the FilterItem control that belongs to the sap.ui.comp.filterbar library.


<mvc:View controllerName="Z_MIS_DOCT.controller.Worklist" xmlns="sap.m"
                xmlns:customFilter="Z_MIS_DOCT.controls"
                xmlns:filter="sap.ui.comp.filterbar"
                xmlns:mvc="sap.ui.core.mvc"
                xmlns:footerbar="sap.ushell.ui.footerbar">

Then, the filter bar will have just a date picker for the purpose of this test.


                               <customFilter:CustomFilterBar reset="onReset" clear="onClear" showClearButton="true" search="onFilter">                             
                                               <customFilter:filterItems>
                                                               <filter:FilterItem name="A" label="{i18n>FilterFecha}">
                                                                              <filter:control>
                                                                                              <DatePicker id="FilterFecha" valueFormat="yyyyMMdd"/>
                                                                              </filter:control>                                                  
                                                               </filter:FilterItem>
                                               </customFilter:filterItems>
                               </customFilter:CustomFilterBar>

At this point I should run the app and everything should look the same.

Overriding the resource bundle

Now the real thing. I downloaded the standard code in FilterBar.js and figure out what I need to redefine. If my intention were to override the resource bundle I would do it in my init method. I replace the resource bundle in this._oRb with the resource in my custom app.


                init: function() {
                               sap.ui.comp.filterbar.FilterBar.prototype.init.apply(this, arguments);
                               this._oRb = jQuery.sap.resources({url: "../i18n/i18n.properties"});
                },

I had to download the resource bundle for Spanish from sap.ui.comp and paste everything inside my resource in i18n/i18n_es.properties. Then changed one of the button’s labels to something different. This time when I run the app the new labels appear:

/wp-content/uploads/2016/08/borrar_1011210.png

The problem with this approach is that I would have to create a resource bundle that replaces all standard texts for all languages, and that’s not what I want.

Replace the Clear button

Instead of replacing the standard resource bundle I can just change the label of the button I want. This is better as I only have to translate one text instead of the whole library. I will leave the init method standard and redefine the method that creates the buttons in the filter dialog.


                init: function() {
                               sap.ui.comp.filterbar.FilterBar.prototype.init.apply(this, arguments);
                               // this._oRb = jQuery.sap.resources({url: "../i18n/i18n.properties"});
                },
               
                _addFilterDialogButtons: function(i) {
                               sap.ui.comp.filterbar.FilterBar.prototype._addFilterDialogButtons.apply(this, arguments);
                               var B = this._oFilterDialog.getButtons();
                               this._oFilterDialog.removeButton(B[1]);
                               B[1].setText("my text");
                               this._oFilterDialog.insertButton(B[1],1);
                },

After calling the method of the super class I’m changing the button that I want. If you look at the standard code, you will notice that if variant management is enabled then the clear button won’t be at index 1. Of course, instead of hardcoding “my text” the idea is to retrieve it from the resource bundle of my app.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Dong Pham

    Hi ,

    I posted my question here because this topic you are talking to Filter Bar. I got a problem with aggregation binding . I tried to follow your instruction which you mentioned here : https://archive.sap.com/discussions/thread/3960608 , but it still does not work. And an error was thown :
    Error:¬†Uncaught Error: sap.ui.comp.filterbar.FilterBar.prototype.addFilterItem() Expected argument ‘oFilterItem.control’ may not be null nor empty

    Could you give me some guides on that?

    Thanks a lot.
    Dong

    (0) 
  2. Leonardo Gomez Post author

    Hi Dong,

    It’s better that you post your question as a new post as people won’t wee it here.

    That error comes because you didn’t provide an argument when calling the addFilterItem() method.

    Write your question if you haven’t already and post your code so people can find the mistake.

    Regards,

    Leonardo.

    (0) 

Leave a Reply