How to upgrade your Fliplet version 1 app

Apps created before 2021 are likely to be using Fliplet Studio Version 1. This means that current Fliplet features such as drag-and-drop functionality, screen structure visibility, and updated appearance settings are not available in these apps. Some features in the Fiplet V1 apps are no longer compatible with Fliplet Studio, and therefore apps created on V1 require an upgrade.

This article will take you through the steps to update your app to be compatible with the current version of Fliplet Studio.

Get Started

1. Backup your app
2. Contact Fliplet support
3. Review new components
4. Upgrade appearance settings
5. Check and update all screens
6. Replace text HTML
7. Use containers to replace divs
8. Final checks and best practices

How to upgrade your app

 

Step 1 – Backup your app

Before you begin, you must create a backup of your app. This copy will serve as a reference during the upgrade process and help ensure you have a fallback version if needed.

1. Log into your Fliplet Studio account
2. Find your app and click the “more” drop down
3. Click “duplicate” to create a copy of your app
4. Name this copy as your backup for future reference
   

Step 2 – Reach out to Fliplet support

To enable the new system on your app, you will need support from Fliplet. Contact Fliplet support on support@fliplet.com, by using the live chat, or contact your customer success manager to enable the new system for your app. Once this is enabled, the new features will become available. 

You must have created a copy of your app before Fliplet enable the update.

Step 3 – Review new components

After the new system is activated, your app will have access to the updated components:

1. Text Component – Use this instead of inserting text via HTML.
2. Containers – These will replace any HTML divs and help organize your screen content without needing custom HTML.

Step 4 – Upgrade appearance settings

Before continuing with updates, it’s important to ensure that your theme appearance settings are updated.

1. Open the appearance settings by clicking the paintbrush icon on the right of the screen.
2. Ensure the Bootstrap theme is selected, and then choose “update now”
   Note: Keep your copy app’s appearance settings, as updating may reset colors and fonts. You can use the backup app to restore any lost appearance settings.

Step 5 – Check and update all screens

The new screen structure feature makes it easy to view the layout of your screens. You can now see all components on the screen and rearrange them without needing to use HTML code.

1. Open your app in Fliplet Studio.
2. For each screen, use the screen structure view to identify components.
3. Drag out components from within HTML divs (such as forms, lists, or data source lists) to make them standalone.
   
4. Move any remaining divs to the bottom of the screen, and then delete them if no longer needed.

Step 6 – Replace text HTML

HTML text (usually wrapped in `<p>` tags) should now be replaced by the text component:

1. Add a Text Component to your screen.
2. Copy the text from the old HTML into this new component.
3. Once added, delete the original HTML text by selecting it in the screen structure and using the bin icon.

Step 7 – Use containers to replace divs

If your app uses divs for structuring content, you can now replace them with containers:

1. Add containers to your screen.
2. Move content from old divs into these containers.
3. Adjust the appearance of the containers as required (eg: adding padding, centering content).

Step 8 – Final check & best practices

Once all screens have been updated and appearance settings reviewed, test your app thoroughly to ensure it functions as expected. Use the backup app for comparison if needed.

Best Practices for Keeping Your Fliplet App Up to Date

To ensure your app continues to perform well and stays up to date with Fliplet’s latest features, follow these best practices:

• Regularly update Fliplet Studio: Always use the latest version of Fliplet Studio to access the newest features and bug fixes.
• Schedule native app updates: Regular native updates (iOS and Android) are important to maintain app performance and security. Ensure you schedule updates yearly at a minimum to keep up with platform changes.
• Reach out to Fliplet support: If you encounter issues or need assistance, don’t hesitate to reach out to Fliplet support or your Customer Success Manager.

By following these best practices, you’ll ensure your Fliplet app stays up to date and continues to deliver a great experience to your users.