Trying to add styles using jQuery in dialog of UI5

Question

I am trying to add styles to my dialog header of my ui5 application, but the effect is not applied.

Here is the code: `

onValueHelpRequest : function(oEvent) {
            var sInputValue = oEvent.getSource().getValue(), 
            oView = this.getView();
            if (!this._pValueHelpDialog) {

                this._pValueHelpDialog = sap.ui.xmlfragment(
                        "zpractice.fragment.ValueHelp", this);
                this._pValueHelpDialog.addEventDelegate({
                    
                    onAfterRendering : function(oEvent) {
                        $("#selectDialog-dialog-header-BarPH").css({
                            "background-color" : "white"
                        });
                        
                    }
                
                })
                var oDialog = this._pValueHelpDialog; 
                this.oView.addDependent(oDialog);
                oDialog.getBinding("items").filter(
                        [ new Filter("name", FilterOperator.Contains,
                                sInputValue) ]);
            }
            this._pValueHelpDialog.open(sInputValue);
        },

`

Could anyone help me with this?

Thanks in advance!

I tried to change the background of the header of the dialog box into white using jQuery.

The effect is nit getting apllied!

Answer 1

Instead of adding the background style manually in the controller you should style the dialog in the XML of the dialog. If there's no UI5 element (in the linked docs it's the sap.m.Button in your case it's the header) which you could style using a class attribute and corresponding css selectors in your stylesheet you could either use the dialog itself and the programmatic approach (see last section of previous link) or override the UI5 provided style classes. This approach is however not recommended as it is not upgrade-safe.

In general I would highly discourage using jQuery to manipulate your UI5 applications as there's almost always a better supported and less intrusive way to achieve the desired outcome.

Also as mentioned in the linked doc the inline stylesheet should not be used and an external stylesheet (in your project) should be used instead. An example for this can be found here: https://ui5.sap.com/#/topic/723f4b2334e344c08269159797f6f796.html

Answer 2

$("#selectDialog-dialog-header-BarPH").css("background-color", "white");