user-interfacesapui5

How to Customize the Icon or Value Help Indicator in sap.m.Input?


I am working with sap.m.Input in an SAPUI5 application and need to customize the value help indicator (VHI). Specifically, I want to:

Change the default icon used for the value help indicator (showValueHelp="true"). Replace the standard value help functionality with a custom event handler or dialog.

<Input id="myInput"
   valueHelpIcon="sap-icon://search"
   showValueHelp="true"
   valueHelpRequest="onValueHelpRequest"/>

Questions:

How can I change the default value help icon?

The valueHelpIcon property doesn't seem to work in sap.m.Input.

Can I completely replace the default value help indicator with a custom icon or button? If so, what’s the best approach?

Is there a way to override the default behavior of the value help indicator and open a custom dialog instead?

What I've Tried:

Setting valueHelpIcon="sap-icon://custom-icon" (no effect). Handling valueHelpRequest to open a custom dialog. Exploring custom CSS to modify the default icon.

I’d appreciate any guidance or alternative approaches to achieve this customization. Thanks!


Solution

  • The Input control doesn't allow you to specify which icon should be used as value-help icon. You can see in line 415 of Input.js that the value help icon is hard-coded.

    However, if you need a version of the input control that does allow you to specify which icon is used, I would suggest to create a custom Input control. This Input control could be as simple as subclass of the standard UI5 Input control. And then just override its _getValueHelpIcon method.