cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Fiori Elements - Issue with EditFlow (onBeforeCreate)

muralidhar2796
Explorer
216

Hi All,

I have a List Report & Object Page application and on click of Create, I want to display a Confirmation popup and then proceed to Object Page for creation. For this purpose, I am using onBeforeCreate method of editFlow.

Whenever there are no entries in the List Report page (meaning no table entries), this method is working as expected.

muralidhar2796_0-1730883403147.png

muralidhar2796_1-1730883435144.png

On click of Proceed, it will open the Object Page for Creation. This is as expected.

But, whenever there are entries in List Report page (meaning - I hit the Go button to fetch the entries from Backend), this flow is not working as expected and it behaves weird.

I have entries in the Table. Now I hit the Create button

muralidhar2796_2-1730883539179.png

It opens the confirmation popup. Before clicking on Proceed, It also opens the Object Page.

muralidhar2796_3-1730883569187.png

The pop-up is auto-closed after few seconds and then Object page keeps buffering forever.

muralidhar2796_4-1730883641491.png

The documentation says the method should return a Promise. I have written logic to resolve and reject promise based on the buttons in the confirmation dialog. As said above, it works as expected when there are no entries in the table.

I am not sure what I am missing here. Can someone please help on this?

@SAPSupport 

 

 

 

View Entire Topic
muralidhar2796
Explorer

Sure, this is the code in onBeforeCreate method

override: {
editFlow: {
                onBeforeCreate: function () {
                    //display a popup
                    var oResourceBundle = this.base.getView().getModel("i18n").getResourceBundle();
                    var that = this;
                    return new Promise((resolve, reject) => {
                        var oInput = new sap.m.Input({
                            placeholder: oResourceBundle.getText("reqTypePlaceholder"),
                            tooltip: oResourceBundle.getText("reqTypeTooltip"),
                            type: sap.m.InputType.Number
                        });
                        var oDialog = new sap.m.Dialog({
                            title: oResourceBundle.getText("reqTypeDialog"),
                            content: [
                                new sap.ui.layout.form.SimpleForm({
                                    editable: true,
                                    layout: "ResponsiveGridLayout",
                                    maxContainerCols: 2,
                                    content: [new sap.m.Label({
                                        required: true,
                                        text: oResourceBundle.getText("reqTypeLabel")
                                    }),
                                        oInput]
                                })
                            ],
                            buttons: [
                                new sap.m.Button({
                                    text: oResourceBundle.getText("proceedButtonTxt"),
                                    press: function () {
                                        // Check if the input field has a value
                                        if (oInput.getValue().trim() !== "") {
                                            that._ReqType = oInput.getValue();
                                            resolve(oInput.getValue());  // Resolve with input value
                                            oDialog.close();
                                        } else {
                                            // Indicate an error if input is empty
                                            MessageToast.show(oResourceBundle.getTexT("reqTypeValidation"));
                                        }
                                    }
                                }),
                                new sap.m.Button({
                                    text: oResourceBundle.getText("cancelButtonTxt"),
                                    press: function () {
                                        reject();  // Reject the Promise on cancel
                                        oDialog.close();
                                    }
                                })
                            ],
                            afterClose: function () {
                                oDialog.destroy();  // Clean up the dialog
                            }
                        });
                        oDialog.open();
                    });
                }
}
}
zfiori
Participant
0 Kudos

Hi Community,

Thanks for your selfless sharing, it really help us a lot.

 

🙂

 

Regards,

 

ZFiori.

muralidhar2796
Explorer

Hi @zfiori,

Unfortunately, this is not the solution. I shared the code as @junwu  asked me to share 😅