Fliplet studio does not have a GitHub style version control built in but there are steps you can take to ensure that you have a version to fallback on incase you need to revert.
There are four levels of source control that we recommend doing one at a screen level and one at an app level. I will explain when to use each type below.
Screen level source control
This means using the setting under a screen in Fliplet studio to create a duplicate screen. This will create a snapshot of all non custom and any custom code on the screen. This includes any screen JS/CSS/HTML written in the developer options.
I recommend changing the name of the screen to the date and time you created the copy so you can remember when this version was created. Something like ‘2021-12-13 18:00‘
If you are familiar with GitHub then think of this step as doing a ‘commit’. I recommend doing this once you hit a checkpoint with a working custom code feature. For e.g. you have a working example of a custom sort on an LFD.
Note: this step only copies any screen level code and NOT any global JS/CSS. For that you might need to perform app level source control.
If you want to use code from the copied screen I recommend copying and pasting the parts you need into the master screen where you need it so as to keep the copy intact.
App level source control
This means duplicating the whole app from the Fliplet studio home page. This will obviously create a copy of the app and I recommend changing the name of the app to a date and time like above.
This creates a snapshot of the all screens in the app and any global JS/CSS.
If you are familiar with GitHub then think of this step as forking a branch. I recommend doing this less often than screen version control but once you have a version of the app you are happy with please make a duplicate of the app especially if you have just published and will be performing feature updates/upgrades.
If you need to use some code from the duplicate app I recommend manually copying and pasting the required parts into the master app hence leaving the duplicate app intact.
Feel free to make as many copies as you need. It’s better to be safe than sorry.
External JS/CSS source control
This means creating some or all of the JS/CSS in a file and referencing that as an external resource.
Once you have created a file with all your custom code in it you can add it to the screen by opening Developer Options > Libraries > add the link to the source code as shown below:
You can link an external file at a screen level as shown above if you only want the code available on that screen.
If you want to link an external file so that the code is available in every screen you can link the file to the global JS as shown below:
You can host this file in your file system or any externally accessible CDN or Fliplet Studio’s file manager.
This technique is advantageous as it prevents others changing your code in the developer options hence if you have functions that are repeatedly used you can host these functions externally.
If you are hosting the file yourself you can make changes to this file from an external system like GitHub for example and all apps will receive your updated code right away.
The only disadvantage is that you cannot make changes to the custom code as easily as changing it in the developer options.
Data source version control
You can view and restore data in the data source manager overlay. No custom code is necessary to manage the data as we perform version control for you. The data source version history stores snapshots when the following actions occur:
- A user visits Fliplet studio and manually makes changes via the data source manager.
- DIS is used to sync data to a data source.
- Custom code is used to perform a commit() to the data source.
Note that the version history is not stored for every form submission made by the users of the app.