Customize ValueHelpDialog in SmartFilterBar control to show also a table.

[former_member637422]

Hi experts!
I'm facing a problem that brings me upside down...

I have a SAP Annotations proyect under tCode SEGW and, in Fiori, I want to show some custom ValueHelpDialogs with a table so the user can search and select records from that table.
I've made a functionality to customize the default valueHelpDialog but it doesn't show properly each time it's opened:

As we can see, the dialog is opened with the tabBar option "Define conditions" selected. In this view is also showed the table with the records (that's wrong). Once the user moves to the option "Select from the list" and comes back to "Define conditions", the table is not shown anymore, which is correct.

The table filter runs OK and also the records selection (tokens) are setted properly in the input field so my only "bug" is the one I ask here.

¿How can I fix this without changing my ABAP Proyect to "Annotations + Vocabulary" one?

This is how I customize the default ValueHelpDialog: (shown base code)

_onValueHelpRequest: function(event) {
  try {
    // event.preventDefault(); // doesn't do anything
    this._currentFilterControl = event.getSource();
    var controlId  = event.getParameter("id"); // event.getSource().getId();
    var labelText  = this._currentFilterControl.getLabels()[0].getText();
    var me         = this;
    if (!sap.ui.comp.valuehelpdialog.ValueHelpDialog.prototype.defaultBeforeRendering)
    {
      sap.ui.comp.valuehelpdialog.ValueHelpDialog.prototype.defaultBeforeRendering = sap.ui.comp.valuehelpdialog.ValueHelpDialog.prototype.onBeforeRendering;
    }
    sap.ui.comp.valuehelpdialog.ValueHelpDialog.prototype.onBeforeRendering = function(oEvent) {
      // "this" has the valueHelpDialog object
      this.defaultBeforeRendering(); // call default BeforeRendering method
      me._customizeDialog(
         this,
         me._getKeysByFilterControlId(controlId),
         sap.ui.Device.system.phone,
         true,
         true,
         false,
         me._getModelByFilterControlId(controlId),
         me._getColumnsByFilterControlId(controlId)
       );
       this.update();
     };
   } catch (err) {
     console.log(["_onValueHelpRequest", err]);
   }
},

_customizeDialog: function (
  dialogObj,
  keys,
  stretch,
  supportMultiselect,
  supportRanges,
  supportRangesOnly,
  model,
  columns
) {
  dialogObj.setKey(keys.code || "");
  dialogObj.setDescriptionKey(keys.description || "");
  dialogObj.setStretch(stretch || sap.ui.Device.system.phone);
  dialogObj.setSupportMultiselect(supportMultiselect);
  dialogObj.setSupportRanges(supportRanges);
  dialogObj.setSupportRangesOnly(supportRangesOnly);
  dialogObj.addStyleClass("sapUiSizeCompact");
  _buildFilterBar(dialogObj, columns); // Runs OK. The Fbar works
  _bindModel(dialogObj, columns, model); // Runs OK. The table is properly shown
  return dialogObj;
}

The detail functionality (such as "_buildFilterBar" or "_bindModel") was extracted from here.
If you need some extra code, just ask for it and I will post it 🙂

Thanks!

[former_member637422 · Accepted solution]

Ok, got it!

I just have to select the first item in the ToolBar in the "onAfterOpen" event.

This is the code:

var tabBar = aoEvent.getSource()._oTabBar;
var items  = tabBar.getItems();
if (items) {
  tabBar.setSelectedItem(items[0]);
  tabBar.setSelectedKey(items[0].getKey());
}

Thanks!