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!

Why would you want to do that? And why with jquery? This is a double code smell. — Marc, Nov 25 '22 at 08:29

score 0 · Answer 1 · answered Nov 24 '22 at 09:35

0

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

answered Nov 24 '22 at 09:35

Fisny

1

Thanks for the reply Finsy! I tried it, but it ain't working! – Kausar Nov 24 '22 at 09:40
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 27 '22 at 14:36

score 0 · Accepted Answer · answered Nov 29 '22 at 14:37

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

Trying to add styles using jQuery in dialog of UI5

2 Answers2