Attach browser event to a control using XML-View

Question

My REST service send me a lot of data. Every property contains the value and a help-attribute that contains a long description of the field property.

Ok, I have data (a list of property with value and help) in a JSONModel and I use data-binding XML https://openui5.hana.ondemand.com/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.html to map data value in forms and tables. Now I want show somehow help message for each property.

My idea is show a message dialog when the user double-click on the Label or on the Text of the column header in a table

Both Label and Text have attachBrowserEvent method but I don't know how use the function to attach the event wrinting only in the XML-views

I would like something like this:

In XML-View:

<Label text="Language" 
          attachBrowserEvent:"function("click",showMessageHelp({model>/language/help}))">

<Input value="{model>/language/value}"/>

In the controller:

showMessageHelp:function(sMessage){

//show message dialog with sMessage
...........
}

Sunil B N Sunil B N · Accepted Answer · 2015-07-07T05:30:21

You can achieve this using onAfterRendering method. Have CustomData in the XML:

<Label id="label" text="Language">
    <customData>
          <core:CustomData key="type" value="{/language/help}" />
    </customData>
</Label>

Then in controller use this customData:

  onAfterRendering: function () {
        var showValueHelp = function () {
            var text = this.getCustomData()[0].getValue();
            sap.m.MessageToast.show(text);
            event.preventDefault();
            event.stopPropagation();
            return false;
        };

        this.byId("label").attachBrowserEvent("click", showValueHelp);
    }

JS fiddle is here

PS:I am not sure this is viable solution for you. This is the best I could come up with, currently.

Attach browser event to a control using XML-View

2 Answers