CODEWITHSUNDEEP
javascriptdialogsapui5
Ruth
Ruth

Reputation: 23

How to add a close button to a JavaScript dialog in SAPUI5?

I'm trying to add a button to a javaScript view dialog. unfortunately, the button is not shown (the Header button) Actually, I want the dialog to have another button in the corner , that closes the dialog

this.oWarningMessageDialog = new Dialog({
                    type: DialogType.Message,
                    title: this._oBundle.getText("PaymentPostponement"),
                    state: ValueState.Warning,
                    Header: new Button({
                        type: ButtonType.Reject,
                        icon: "sap-icon://decline",
                        press: function (oEvent) {
                            this.oWarningMessageDialog.close()
                            this.oWarningMessageDialog = null
                            Core.byId("ApproveMessageText").destroy()
                        }.bind(this)
                    }),

                    beginButton: new Button({
                        type: ButtonType.Reject,
                        text: this._oBundle.getText("Postpone"),
                        icon: "sap-icon://decline",

enter image description here

Upvotes: 0

Views: 2066

Answers (1)

PKV
PKV

Reputation: 139

If you need the exact look as specified in the image, you need to use a 'customHeader' aggregation. Code is as follows :-

this.oWarningMessageDialog = new Dialog({
                type: DialogType.Message,               
                state: ValueState.Warning,
                customHeader: [
                    new sap.m.Bar({
                       /* either use an icon */
                        contentRight: new sap.ui.core.Icon({
                                src : "sap-icon://decline",
                                useIconTooltip : false,
                                color : "#f33334",
                                press : function (oEvent) {
                                this.oWarningMessageDialog.close();
                                this.oWarningMessageDialog = null;
                                Core.byId("ApproveMessageText").destroy()
                            }.bind(this)
                        }).addStyleClass("sapUiMediumMarginBottom"),
                        /* or you can even use a button */
                        // contentRight: new Button({
                        //  type: ButtonType.Transparent,
                        //  icon: "sap-icon://decline",
                        //  width: "20px",
                        //  press: function (oEvent) {
                        //      this.oWarningMessageDialog.close();
                        //      this.oWarningMessageDialog = null;
                        //  }.bind(this)
                        // }).addStyleClass("sapUiSmallMarginBottom"),
                        contentMiddle : [
                            new sap.m.Title({
                                text :this._oBundle.getText("PaymentPostponement")
                            }),
                            new sap.ui.core.Icon({
                                src : "sap-icon://message-warning",
                                useIconTooltip : false,
                                color : "#E69A17"
                            })
                            ]
                    })

                ],
                    beginButton: new Button({
                    type: ButtonType.Reject,
                    text: this._oBundle.getText("Postpone"),
                    icon: "sap-icon://decline"
                })
            });

or, the correct way of including the close button is by using "endButton" Aggregation. But this will display button in the footer of the dialog.

Upvotes: 2

Related Questions