SAP Fiori Elements - Issue with EditFlow (onBeforeCreate)

[muralidhar2796]

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.

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

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

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

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 

[junwu]

can you show your code here?

[muralidhar2796]

Sure, I have added the code as the answer below.

[muralidhar2796]

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]

Hi Community,

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

🙂

Regards,

ZFiori.

[muralidhar2796]

Hi @zfiori,

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