Custom Controls Event Handling in SAP UI5

Question

In my SAP UI5 application i wish to create a 3 state toggle switch similar to one at http://jsfiddle.net/darkajax/MbR6c/

I have a table and in each row of the table these toggle switches must exist.

I suppose the best way to do is to create a custom control and render it . It works fine . However on a click of any of the toggle switch state i wish to call the parent controller . I am not able to call the events of the custom control :

function(Control, Button) {
    return Control.extend("svm.customControl.toggleSwitch", {
        metadata: {
            properties: {
                A: {
                    type: "String"
                },
                B: {
                    type: "String"
                },
                C: {
                    type: "String"
                }
            },
            aggregations: {},
            events: {
                changes: {
                    enablePreventDefault: true
                }
            }
        },
renderer: function(oRm, oControl) {
    oRm.write(
    '<div class="switch-toggle switch-3 switch-candy"> 
        <input id=' + oControl.getA() + ' name="state_' + 
             oControl.getA() + '" type="radio" 
                  onclick='oControl.fireChanges +'> 
              <label for=' + oControl.getNone() + '>None</label>
        <input id=' + oControl.getB() +' name="state_' + 
              oControl.getB() + '" type="radio"> <label for=' + 
                     oControl.getB() +
                    ' onclick="">Viewer</label>>/div><div>
         <input id=' + oControl.getC() + ' name="state_' + oControl.getA() +
                    '" type="radio"> <label for=' + oControl.getC() + ' onclick="">Owner</label> <a></a></div>'
                );

            },

I know the above renderer is not the nice to look at , but from the above messy the important bit is:

<input id=' + oControl.getA() + ' name="state_' + 
             oControl.getA() + '" type="radio" 
                  onclick='oControl.fireChanges +'>

I am wishing to call the event but it does not call it . getting the error :

Uncaught SyntaxError: Unexpected token }

and on inspecting the line of the error:

(function(event){function })

just wondering is there a way to call the events ?

Any way you have you found out how to add events to the html-element? I am not happy with the answer here because it doesn't solve the actual problem... — IceRevenge

A.vH A.vH · Accepted Answer · 2017-12-18T10:13:26

1

votes

Why do you create a Custom Control? What is wrong with the sap.m.SegmentedButton ?

Custom Controls Event Handling in SAP UI5

1 Answers