Fliplet’s Developer Options can be found in Fliplet Studio when editing your app. They are located in the right hand menu.

Developer Options

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:

  1. be run when users open the respective app screen
  2. 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:

  1. be run when any screen opens (and will be run before any screen specific code)
  2. 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:

  1. Screen HTML (and components) are added to the screen
  2. Fliplet’s CSS and Javascript is loaded
  3. Resource libraries are loaded
  4. Global custom code is run (CSS, JavaScript)
  5. Screen level CSS and JavaScript is run

For more details on the execution flow please use this link.

Version history

Fliplet automatically saves a version of your global code each time you save changes. This allows you to review previous states of your global CSS/SCSS and JavaScript, and restore an earlier version if needed.

Up to 30 recent versions are retained. Each version records the following details:

  • Version number (with a Current badge for the latest version)
  • Timestamp
  • Description (e.g. “user edit”, “app merge”)
  • Modified by (the user’s full name)
  • Number of data sources in use
  • Number of libraries/dependencies

Accessing version history

  1. Open Developer Options from the right-hand menu
  2. Switch to the Global tab
  3. Click the History button in the toolbar

A panel will open showing all saved versions in a table, with the current version highlighted at the top.

Previewing a version

  1. Click the Action dropdown on any previous version
  2. Select Preview

This opens a read-only view of that version’s code, which includes:

  • Version number, timestamp, description, and author
  • CSS/SCSS editor (read-only) with a copy-to-clipboard button
  • JavaScript editor (read-only) with a copy-to-clipboard button
  • Libraries and data sources associated with that version

Click Back to the list to return to the version table.

Restoring a version

  1. Click the Action dropdown on the version you want to restore (or click Restore from the preview screen)
  2. Select Restore
  3. A confirmation dialog will appear showing the version timestamp — click Restore to confirm

When you restore a version:

  • Your current global code is automatically saved as a new version before the restore takes place, so you can always revert back
  • All global CSS/SCSS, JavaScript, dependencies, and data source references are restored
  • The app preview reloads automatically to reflect the restored code