FAB Interactive Live 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.by providing a real time preview of your application as you make changes to the Form Structure. 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 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
| Info |
|---|
...
| 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.
| Info |
|---|
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
...
Turning Live View On or Off
Live mode can be turned on or off from the Live View menu option shown below.
Refreshing Live View
In some instances, it may be required to refresh the live view to show all the recent changes.
This can be achieved in two ways:
- By selecting the Live View Reload menu option
- Or clicking the Live View Reload button in the toolbar
Control Identification
FAB makes it easier to identify controls from either the Form Structure or from the Application Preview window.
- To identify a control in the preview window from the Form Structure, simply click on the element in the Form Structure and the control should get a blue border in the Application Preview.
- To find a control in the Form Structure from the Preview Window, simply double click the control in the preview. The corresponding control in the Form Structure will be selected.
| Info | ||
|---|---|---|
| ||
If Live View and Control Identification are not working, try the following troubleshooting steps:
If you use Interactive Live 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 Live Mode for a short period of time. Once finished with it (ie once you have located your elements), turn it off. |
...
| Filter by label (Content by label) | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Page Properties | ||
|---|---|---|
| ||
|
...