Preventing a Panel from Losing Focus - onBeforePanelActivate Event

Description

This event is useful if you want to prevent the Panel that has focus losing focus.

For example, if the form fields on a Panel have been edited, but not yet committed, you might want to prevent the Panel from losing focus. This is much like preventing a pop-up window that contains a Grid or UX component from closing if the child component has been edited.

If the Javascript that you define in the onBeforePanelActivate event returns false, then any attempt to activate another Panel will fail and focus will remain on the current Panel. If the event returns true, then you will be able to give focus to another Panel.

A common design pattern in a mobile application is to have multiple Panel Cards inside a Panel Navigator. If one of the Panel Cards contains a form, you might want to prevent the user from navigating to another Panel Card if the form has been edited, but not yet been saved. In this video we show how this is easily done using the Panel Navigator's onBeforePanelActivate event. The same techniques can be used in a PanelLayout.

Click here to download the component used in the video

See Also