Skip to Content
-1
Jul 08, 2019 at 05:17 PM

Process two sets of data from different models in one custom control

94 Views

Aim:

I'd like to have two models(sets of data) passed to the custom control with a predefined search field, in which later on I can execute filtering.

I've started with a simplified idea of passing data from the frontend to my custom control and now experiencing troubles.

Background of the simplified idea:

Create a custom control with an aggregation foo , the value to it will be provided from the view.

Also create another aggregation element _searchField which will be populated with the data provided from the view. Fire the onSuggestTerm everytime user types in a _searchField.

function (Control) {
    var DropDownListInput = Control.extend('xx.control.DropDownListInput', {
      metadata: {
        defaultAggregation: 'foo',
        aggregations: {
          foo: { type: 'sap.m.SuggestionItem', multiple: true, singularName: 'suggestionItem' },
          _searchField: { type: 'sap.m.SearchField', multiple: false, visibility: 'hidden' }
        }
      }
    });

    DropDownListInput.prototype.init = function () {
      var that = this;
      this.onSuggestTerm = function (event) {
        var oSource = event.getSource();
        var oBinding = that.getAggregation('foo');
        oBinding.filter(new sap.ui.model.Filter({
          filters: new sap.ui.model.Filter('DISEASE_TERM', sap.ui.model.FilterOperator.Contains, ' Other')
        }));
        oBinding.attachEventOnce('dataReceived', function () {
          oSource.suggest();
        });
      };

      this.setAggregation('_searchField', new sap.m.SearchField({
        id: 'UNIQUEID1',
        enableSuggestions: true,
        suggestionItems: that.getAggregation('foo'),
        suggest: that.onSuggestTerm
      }));
    };

    return DropDownListInput;
  });

I'm not providing Renderer function for control here, but it exists and this is the most important excerpt from it:

oRM.write('<div');
      oRM.writeControlData(oControl);
      oRM.write('>');
      oRM.renderControl(oControl.getAggregation('_searchField'));
oRM.write('</div>');

Passing the data to this control from the xml view:

<xx:DropDownListInput
  id="diseaseTermUNIQUE"
    foo='{path: db2>/RC_DISEASE_TERM/}'>
      <foo>
        <SuggestionItem text="{db2>DISEASE_TERM}"
           key="{db2>DISEASE_TERM}" />
      </foo>
</xx:DropDownListInput>

The code fails to run with this error Cannot route to target: [object Object] -

and I have no idea what's wrong here..