Fliplet’s Developer Options can be found in Fliplet Studio when editing your app. They are located in the right hand menu.
Clicking the icon will open up the Developer Options panel. When the Developer Options are open, the app is put into Developer Mode, meaning that Fliplet Studio removes all the visual editing options so that the app behaves as it would when you interact with it (eg, any app menu buttons will now work when clicked).
“This Screen” and “Global” tabs
It’s important to understand where and when your code is run. Code entered in the “This Screen” tab will only run on the respective screen you’re editing. Whereas code in the “Global” tab will be repeatedly run across your app when you visit a new screen.
The “This Screen” tab is a good place to put code that you don’t want to affect other screens. “This Screen” tab code will:
- be run when users open the respective app screen
- stop running (and be reset) when the user leaves the screen
In contrast, the “Global” tab is a good place to place code to interact with all the screens in your app. For example you may want to make style changes that apply across your entire app. Code in the “Global” tab will:
- be run when any screen opens (and will be run before any screen specific code)
- stop running when the app is closed
The library will be downloaded and added to your app so that it can work offline.
Code running order (aka execution flow)
The code in your app is run sequentially. We’ve already mentioned that Global code is run when you open an app and is run before any screen level code. So changes made at a screen level can overwrite code run at a Global level but not the other way around. For example, a CSS style set at the Global level cannot change the style on a screen if there is also a CSS style set at the screen level.
The order of the execution flow is broadly:
- Screen HTML (and components) are added to the screen
- Resource libraries are loaded
For more details on the execution flow please use this link.