Fliplet Core JS APIs

The fliplet-core package contains the following namespaces:

The fliplet-core package contains the following methods:

If you’re looking for other namespaces, make sure to check the Media or Data Sources dependencies.


Environment

Get an environment variable

These variables are usually available on components and providers:

var appId = Fliplet.Env.get('appId');

Set an environment variable

Fliplet.Env.set('appId', 2);

Hooks

Register a callback for a hook

Fliplet.Hooks.on('beforeFormSubmit', function (data) {
  console.log('just got', data);

  data.foo = 2;

  return Promise.resolve('bar'); // you can return a promise if your hook is async
});

Run a hook

var data = { foo: 1 };

Fliplet.Hooks.run('beforeFormSubmit', data).then(function (results) {
  // results[0] is "bar"
  // data.foo is 2
}, function onError (err) {
  // woop woop, an hook fired a rejection!
});

User

Get the user auth token

var userAuthToken = Fliplet.User.getAuthToken();

Set the user auth token

Fliplet.User.setAuthToken('eu--abcdef');

Set the user details

Fliplet.User.setUserDetails({
  auth_token: 'eu--abc',
  id: 2,
  email: 'foo@example.org'
});

Studio

Forward an event to Fliplet Studio

Fliplet.Studio.emit('foo', { bar: 1 });
Fliplet.Studio.emit('navigate', {
  name: 'appSettingsGeneral', // route name
  params: { appId: 11 } // parameters to pass to the route
});

API

Make an API request to the Fliplet APIs

// Returns a promise
Fliplet.API.request({
  url: 'v1/user',
  method: 'PUT',
  data: { email: 'new@email.org' }
}).then(function onSuccess(response) {
  console.log(response);
});

Widget

Emit an event to the parent widget or Fliplet Studio

Fliplet.Widget.emit('foo', { bar: 1 });

Get the widget instance id

This method is usually meant to be called from a widget interface, to get the widget instance id if necessary.

var id = Fliplet.Widget.getDefaultId();

Get a widget instance data

This method is usually meant to be called from a widget interface, to get the saved data.

var data = Fliplet.Widget.getData();

You can also get the data of a specific widget instance in the current page by passing its ID:

var data = Fliplet.Widget.getData(1);

Get the URL to an asset from the relative path of a widget

// the first parameter is the widget id as usual
var url = Fliplet.Widget.getAsset(123, 'img/icon.png');

// on the interface, you can skip the id (same as getData and getUUID)
var url = Fliplet.Widget.getAsset('img/icon.png');

Get a widget instance unique identifier

The widget instance ID might change overtime when an app is published. If you need to use an ID which won’t change, you can use the getUUID(<widgetInstanceId>).

var uuid = Fliplet.Widget.getUUID(1);

Display an error message in Fliplet Studio

Fliplet.Widget.displayMessage({ text: 'The email is not valid' });

Sets the widget interface info message in Fliplet Studio

Fliplet.Widget.info('2 files selected');

Toggle the wide mode on the interface

// Enable the wide mode
Fliplet.Studio.emit('widget-mode-wide');

// Disable the wide mode
Fliplet.Studio.emit('widget-mode-default');

Toggle the save button

// Enable the button
Fliplet.Widget.toggleSaveButton(true);

// Disable the button
Fliplet.Widget.toggleSaveButton(false);

Set & reset the save button label

// Set the button label
Fliplet.Widget.setSaveButtonLabel('Pick');

// Reset the button label (to 'Save & Close')
Fliplet.Widget.resetSaveButtonLabel();

Toggle the cancel button

// Enable the button
Fliplet.Widget.toggleCancelButton(true);

// Disable the button
Fliplet.Widget.toggleCancelButton(false);

Set & reset the cancel button label

// Set the button label
Fliplet.Widget.setCancelButtonLabel('No thanks');

// Reset the button label (to 'Save & Close')
Fliplet.Widget.resetCancelButtonLabel();

Autosize

Tells the parent widget or studio the new height of this widget.

Fliplet.Widget.autosize();

As a rule of thumb, you are responsible of calling the above function every time the height of your widget (or provider) is changing.

Open a provider

var myProvider = Fliplet.Widget.open('com.fliplet.link', {

  // If provided, the iframe will be appended here,
  // otherwise will be displayed as a full-size iframe overlay
  selector: '#somewhere',

  // You can send data to the provider, to be used similar to a widget instance data
  data: { foo: 'bar' },

  // You can also listen for events fired from the provider
  onEvent: function (event, data) {
    if (event === 'interface-validate') {
      Fliplet.Widget.toggleSaveButton(data.isValid === true);
    }

    // return true to stop propagation up to studio or parent components
  }
});

myProvider.then(function (data) {
  // data will contain the result
});

// You can also resolve an array of providers
Fliplet.Widget.all([myProvider]).then(function (results) {
  // results is an array with data from all providers you resolved
});

You can also stop the provider from being closed once resolved, by passing the closeOnSave: false option. You can then close it manually by calling myProvider.close() at any time.

Attach an event on save request

Optionally attach an event handler to be called when the “save” button will be called in studio. Here’s the typical usage of the function:

Fliplet.Widget.onSaveRequest(function () {
  // Save data when the save button in studio is clicked
  return Fliplet.Widget.save({ foo: 1 });
}).then(function onSave() {
  // Closes this widget interface
  Fliplet.Widget.complete();
});

Save data

Used to save JSON-structured data to the current widget instance. The save function is usually meant to be triggered from onSaveRequest described above.

Fliplet.Widget.save({ foo: 1 }).then(function () {
  // Closes this widget interface
  Fliplet.Widget.complete();
});

Close the interface when done

Fliplet.Widget.complete();

Organizations

Get the user organizations

Fliplet.Organizations.get().then(function (organizations) {

});

Get the current organization settings

Fliplet.Organization.Settings.getAll()
  .then(function (settings) {
    // Your code
  });

Set settings. Current settings are extended with this ones.

Fliplet.Organization.Settings.set({
  user: 'foo',
  _password: 'bar' // Settings start with _ are encrypted
})
  .then(function(settings) {
    // Your code
  });

Get a single setting

Fliplet.Organization.Settings.get('foo')
  .then(function (value) {
    // Your code
  })

Check if a setting is set

Fliplet.Organization.Settings.isSet('_password')
  .then(function(isSet) {
    if (isSet) {
      // Your code
    }
  });

Unset a setting

Fliplet.Organization.Settings.unset(['user','_password'])
  .then(function (currentSettings) {
    // Your code
  })

App

Get the current app settings

var settings = Fliplet.App.Settings.getAll();

Get a single settings from the current app

var datum = Fliplet.App.Settings.get('foo');

Get the logs for an app

Fliplet.App.Logs.get({
  where: { type: 'jobs' }
}).then(function (logs) {
  // logs<Array>
});

Create a log for an app

Fliplet.App.Logs.create({
  foo: "bar"
}).then(function (log) {
  // log<Object>
});

Save or update some settings of the current app

Fliplet.App.Settings.set({ foo: 'bar', hello: 'world').then(function () {
  // optional promise callback to be called when the APIs have saved the data
});

Deletes a list of settings from the app

Fliplet.App.Settings.unset(['foo', 'hello']).then(function () {
  // optional promise callback to be called when the APIs have deleted the data
});

Lock the device orientation

// If called with no parameters, the app orientation from the settings will be used
Fliplet.App.Orientation.lock(newOrientation)

Unlock the device orientation

Fliplet.App.Orientation.unlock()

App Storage

It’s a wrapper for the namespaced storage for the current app.

Fliplet.App.Storage.set(key, val)

Profile

It’s a wrapper for the namespaced storage for the user profile.

Fliplet.Profile.set('firstName', 'John')

Fliplet.Profile.get('firstName').then(function (value) {
  // value is 'John'
})

The following variables are reserved for common use.

Apps

Get the list of apps the user has got access to

Fliplet.Apps.get().then(function (apps) {

});

Note: when returning apps, the API will return both V1 and V2 apps created with Fliplet. Most likely, you want to filter and use V2 apps only. This can be done by filtering out apps where the boolean app.legacy is true.

Pages

Get the list of pages of the current app

Fliplet.Pages.get().then(function (appPages) {

});

Check whether the device is online

var isOnline = Fliplet.Navigator.isOnline();

Wait for the device to be ready before running some code

Fliplet.Navigator.onReady().then(function () {
  // your code
});

Wait for the cordova plugins to be ready before running some code

Fliplet.Navigator.onPluginsReady().then(function () {
  // your code
});

Storage

Store data

Fliplet.Storage.set('key', value).then(function () {});

Read data

Fliplet.Storage.get('key').then(function (value) {});
Fliplet.Storage.get('key', { defaults: { defaultProperty: 'defaultValue' } }).then(function (value) {});
Fliplet.Storage.get('key', { defaults: 'defaultValue' }).then(function (value) {});

You can optionally provide a default value in case the key has not been assigned a value yet.

Remove data

Fliplet.Storage.remove('key', value).then(function () {});

Namespaced

Gives you the hability to namespace your data

var myNamespaceStorage = Fliplet.Storage.Namespace('foo');

Set

myNamespaceStorage.set('bar', 'my data')

Get

Get a key

myNamespaceStorage.get('bar').then(function(value) {})

Get all

Get all keys

myNamespaceStorage.getAll().then(function(data) {})

Remove

Remove a key or list of keys from the namespaced storage

myNamespaceStorage.remove('bar')
myNamespaceStorage.remove(['foo', 'bar'])

Clear

Clear all namespaced storage

myNamespaceStorage.clear()

Query parameters

Fliplet.Navigate.query;
Fliplet.Navigate.back();
Fliplet.Navigate.url('http://fliplet.com');

To find out the ID of a page, you can use Fliplet Studio (it’s displayed on the browser bar) or simply run Fliplet.Env.get('pageId') from any page.

// Navigate to the screen with ID 1
Fliplet.Navigate.screen(1);

// Navigate to the screen with ID 2, optionally passing some more details
Fliplet.Navigate.screen(2, { query: '?foo=bar' });

// Navigate to the screen with ID 3, using a slide transition
Fliplet.Navigate.screen(3, { transition: 'slide.right' });

// Navigate to the screen with ID 4, using a fade transition
Fliplet.Navigate.screen(4, { transition: 'fade' });

When using the com.fliplet.link provider to get the navigation details, the function below can be used to parse such details.

// Data coming from the link provider
var data = {
  action: 'screen',
  page: 1,
  query: '?param1=value1'
};

Fliplet.Navigate.to(data);

Open a popup

var options = {
  title: 'Foo',
  message: 'Bar',
};
Fliplet.Navigate.popup(options);

Open a confirm dialog

var options = {
  title: 'Foo',
  message: 'Bar',
  labels: ['Agree','No'] // Native only (defaults to [OK,Cancel])
};
Fliplet.Navigate.confirm(options)
  .then(function(result) {
    if (!result) {
      return console.log('Not confirmed!');
    }
    console.log('Confirmed!');
  });

We are using PhotoSwipe. Note: You need to add photoswipe on your dependencies list to use this.

var data = {
  images: [
    {
      title: 'Foo',
      path: '/foo.jpg', // On native platform if present, path is used instead of web url
      url: 'http://lorempixel.com/1280/720/'
    },
    {
      url: 'http://lorempixel.com/400/200/'
    }
  ],
  options: { // You can pass Photo Swipe options
    index: 1
  }
};
Fliplet.Navigate.previewImages(data);

Analytics

Enable/disable tracking

The app might have an analytics widget active, although you can also prompt the user if he accpets tracking.

Fliplet.Analytics.enableTracking()
Fliplet.Analytics.enableTracking()

Check tracking status

Fliplet.Analytics.isTrackingEnabled()

guid

Generates a global unique identifier with a format like: "2682df5f-2679-7de5-c04c-d212f4314897"

var guid = Fliplet.guid()