2.11.7 FAB Interactive and Identify Mode

Owned by Margaret Jaco (Deactivated)
Last updated: Mar 14, 2018 by Andre Reforma (Deactivated)
4 min read

FAB Interactive Mode can super-charge the development process. Changes to the app can be visualised immediately – no need to wait for a re-load of the App.

If you are doing typical development using Eclipse or similar IDEs you must not only upload your code and view changes, you then must refresh the browser App and go through the steps in the App to get to the part you want to test.

With FAB, you can modify and preview an App running with real data. Even JavaScript modules can be updated immediately. This is a big time-saver. See TIPS at the end of this document.


FAB Interactive Mode


(Interactive Mode uses web-sockets via ABAP Push Channels and ABAP Messaging Channels and requires SAP_BASIS 7.40 SP5 [limited functionality available from SP2]) . Interactive Mode can be available from version 2.0.7 if SAP_BASIS prerequisites are met).


Open an Existing Form or Create a New Form

 



Turn on Interactive Mode



Form will reload and message “Starting Interactive Mode…wait for reload.”

 



  • IMPORTANT! – If you do not see the message toast “Interactive Mode started”, interactive mode will not function correctly (*see notes below)


Using Interactive Mode


Note that in interactive mode, when you move your mouse over an element, a message toast will display the id of the element and it’s CSS style

 



Start to edit the Form as usual, adding and editing controls. You will notice that as you make changes, the preview updates in real time! (without needing to press “Save”) (**see Notes)

 


You can even adjust settings such as Label Span, Grid Data in real time.



Even tables can be added and used in real time.


Notice too that as you select items from the tree, the selected item will be outlined in blue in the preview (***in most cases)


NOTE: the Form is not saved until to press “Save” (usual behaviour).


Identify Mode


Identify mode allows you to navigate in the tree by hovering over the respective element in the preview (Note ****)


Turn on Identify Mode from the Interactive Mode menu


Now hover over the elements in the preview and the tree will expand to the appropriate node (*****)


See here the tree is completely collapsed. Then after hovering over elements in the preview, the tree expands to the appropriate node (*****)

 



You may notice that the screen flashes a bit in Interactive Mode. Once finished with it, turn interactive mode Off.

Also note that if interactive mode seems to be not working, try selecting the parent “Project” node in the tree: the screen should start to flash a little again and interactive mode should be working.

Notes

*  if you do not see the “Interactive Mode Started” message toast, ensure you have no browser windows open with the same Form (best to log-out and close all browser windows). See TIPS below. Also try completely terminating SAP GUI and starting it again.

** some exceptions apply, for example; changing the properties of the “Page” elements does not result in an immediate update

*** some elements do not outline in blue, for example Form Container

****There are limitations with SAP GUI programs that make this feature a little cumbersome. A GUI timer is required to check for messages from the app via web-sockets, this results in screen ‘flashing’.

***** Not all nodes work in identify mode but are included in subsequent releases.


TIPS

If you use Interactive Mode from within the FAB Workbench, and you do not get the “Interactive Mode Started” Message Toast

  • Quit SAP GUI Completely. That is; exit the whole SAP Logon Pad and close it down then restart it.
  • Close completely all browser windows running FAB Apps.
  • Go to the Properties of the FAB App and copy the launch URL. Then paste that into your browser. You should see the “Interactive Mode Started” Message Toast to ensure it’s working.

If you use Interactive Mode from within the FAB Workbench, and want to preview the app in a browser such as IE or Chrome.

Show your Browser and FAB Windows side-by-side on your screen.

Use Identify Mode for a short period of time. Once finished with it (ie once you have located your elements), turn it off.