Widget

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();