Using providers

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

// The returned variable from resolves when the provider is saved
myProvider.then(function (data) {
  // data will contain the result

// The provider is triggered to start saving data

// Trigger events to the provider

// You can also resolve an array of providers (similar to Promise.all)
Fliplet.Widget.all([myProviderA, myProviderB, myProviderC]).then(function () {
  // 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.

Back to the interface of components