Using providers

Components can display providers to get specific data from the system or need a particular piece of funcionality to be added.

The easiest example is the button component, which uses the link provider to configure the action of the button.

Provider frame

Including providers into a component

// Returns a promise
var myProvider ='', {

  // 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 populate its interface (to be used like 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

// Once the promise is resolved
myProvider.then(function (data) {
  // This will get called once the provider has called ""

// You can also resolve an array of providers (similar to Promise.all)
Fliplet.Widget.all([myProviderA, myProviderB, myProviderC]).then(function () {


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.

Back to the interface of components