Fliplet’s Developer Options can be found in Fliplet Studio when editing your app. They are located in the right hand menu.
Developer mode
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
Adding HTML, CSS and Javascript
You can add HTML, CSS and JavaScript directly into their respective areas in the Developer Options. The HTML tab may already have some code in it relating to any components already on your page. The CSS and JavaScript tabs are generally empty (unless you’ve selected a ‘Low-code’ screen layout).
Adding CSS and JavaScript libraries
If you want to import a library of pre-existing JavaScript or CSS directly into your app you can do this through the ‘Libraries’ menu option. Type the name of the library you’re looking for or enter the URL if you have a link to an online library. Then click save.
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
- Fliplet’s CSS and Javascript is loaded
- Resource libraries are loaded
- Global custom code is run (CSS, JavaScript)
- Screen level CSS and JavaScript is run
For more details on the execution flow please use this link.