Changing function on a button using detachPress / attachPress

Question

I have a requirement for my app and I need to change the event handler of a common button depending on the status of the workflow.

Basically I need to change the function called when you press the button and vice-versa and was looking to achieve this by using the event handler functions detachPress and attachPress.

https://ui5.sap.com/#/api/sap.m.Button/methods/detachPress https://ui5.sap.com/#/api/sap.m.Button/methods/attachPress

My Button (XML View):

<Button text="Edit" width="50%" id="_editButtonEmail" press="editPIN"/>

On my controller I want to change the function editPIN by cancelEditPIN.

Some things I've tried:

    editPIN: function(oControlEvent) {
       //change button
       var editButton = this.getView().byId("_editButtonEmail");
       //detach this function on press
       editButton.detachPress(editButton.mEventRegistry.press[0].fFunction);
       editButton.attachPress(this.cancelEditPIN());
    }

    cancelEditPIN: function() {
       //do something else
    }

Also

editPIN: function(oControlEvent) {
   //change button
   var src = oControlEvent.getSource();
   src.detachPress(this.editPIN());
   src.attachPress(this.cancelEditPIN());
}

None of these seem to work and if I check my console the function editPIN is still attached to my mEventRegistry press event.

Answer 1

There are few things worse than checking your GUI texts to determine what action should be done.

A different approach uses two buttons. Only one is visible at a time

<Button
    text="{i18n>editPIN}"
    visible="{= ${myModel>/State} === 'show' }"
    press="editPIN" />
<Button
    text="{i18n>editCancelPIN}"
    visible="{= ${myModel>/State} === 'edit' }"
    press="cancelEditPIN" />

In this case {myModel>/State} is a local JSON model where the current state of your workflow is stored.

---

If you really want to use your attach/detach approach: It probably didn't work because you were calling the methods while passing them as a parameter to attach/detach. So for example try src.detachPress(this.editPIN); instead of src.detachPress(this.editPIN());