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
– Marc, Commented Nov 25, 2022 at 8:29

Niklas · Accepted Answer · 2022-11-29 14:37:43Z

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

Fisny · Accepted Answer · 2022-11-24 09:35:10Z

0

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

answered Nov 24, 2022 at 9:35

Fisny

1

2 Comments

Kausar Over a year ago

Thanks for the reply Finsy! I tried it, but it ain't working!

Community Over a year ago

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.

Collectives™ on Stack Overflow

Trying to add styles using jQuery in dialog of UI5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related