2.11.7 FAB Interactive and Identify Mode

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.

Related articles

• Page:
  1.2.2 FAB Workbench (/IQX/FAB)