How to perform own action on F5 key press in UI5?

user_16991635 0
Viewed 318

I don't know how to replace the F5 key action in SAPUI5.

I have a button "Refresh" which is reloading my business data in the UI and made some kind of manipulation before showing it on the view. I want to catch the F5-press so that my method to refresh can be called.

sapui5 keyevent javascript
2 Answers

Since UI5 1.70 (commit:59b83bf), applications can define app-wide shortcuts in manifest.json and declare the corresponding event handlers in the view.

Here is a sample: https://embed.plnkr.co/NKOfisfY7w0MOiX8

In manifest.json:

"sap.ui5": {
  "commands": {
    "MyRefresh": {
      "shortcut": "F5"
    }

In the view:

<AnyUI5Control>
  <dependents>
    <core:CommandExecution xmlns:core="sap.ui.core"
      command="MyRefresh"
      execute=".onRefreshData"
    />
  </dependents>
</AnyUI5Control>

When the control has the focus, pressing F5 will trigger the event handler onRefreshData in the controller.

Please note that the custom shortcut feature in UI5:

  • Is supported since UI5 1.70.
  • Currently works only if the control has the focus. See the related discussion on GitHub.
  • Make sure your shortcut key combination doesn't overlap with the existing shortcuts that the target control already provides.
user_58460450

Just add an event listener to the window and call preventDefault() to stop it from doing the default thing of reloading.

(After running, click inside the white section to see it working. Otherwise the page will reload)

window.addEventListener("keydown", (event) => {
  if (event.key == "F5") event.preventDefault();
});

user_121015540
Related