Go to a new screen (and transfer data)

To navigate a user to a new screen we can use the Fliplet.Navigate method. This allows us to:

1. Take the user to a new screen
2. Specify the screen transition animation (eg: fade, slide in etc)
3. Pass data to the new screen in the form of an HTML query

To see the full range of options please refer to the API here.

We can specify the screen we want to go to using the screen name or its ID (this can be found by clicking on the screen name in the left hand screen menu). Below we are navigating to a screen with an ID of 12345 and a screen with name “Home screen”.

Fliplet.Navigate.screen(12345);
Fliplet.Navigate.screen('Home screen');

It’s also possible to go to the previous screen simply by using the back method. See below:

Fliplet.Navigate.back();

If you’d like to set the transition animation, transition duration or pass small amounts of data between screens you can add a second parameter like in the example below:

Fliplet.Navigate.screen(12345, {
  transition: 'fade',
  duration: 2,
  query: '?companyName=Fliplet',
});

This code navigates to screen 12345. It uses a fade transition that lasts 2 seconds and passes the variable of companyName (which is set to ‘Fliplet’) as a URL query parameter.

The destination screen can then use the query parameter with the following code:

var query = Fliplet.Navigate.query;
var companyName = query.companyName;