List (from data source) JS APIs

These public JS APIs will be automatically available in your screens once a List (from data source) component is dropped into such screens.

Run a hook before the list is rendered

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeGetData(data) {
  // insert your code here
  // return a promise if this hook should be async
});

Overwriting data to be rendered

The flListDataBeforeGetData hook explained above can be useful to overwrite the list data by declaring a function at the data.config.getData path returning a promise which resolves with the new data:

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeGetData(data) {
  // data is an object with the component configuration and the component container
  // data.config
  // data.container

  // Define the "getData" promise to return the new data
  data.config.getData = function() {
    return Promise.resolve([{ id: 1, name: 'Nick' }, { id: 2, name: 'Tony' }]);
  };
});

Let’s take a look at a complete example injecting data from a data source to the list component with custom filter and without data transformations:

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeGetData(data) {
  // data is an object with the component configuration and the component container
  // data.config
  // data.container

  // disable caching the data so it's always retrieved from the server
  data.config.cache = false;

  // Define the "getData" promise to manually fetching data. 
  data.config.getData = function () {
    // In this example we connect to a datasource with ID 123
    // Change the ID to your data source ID
    return Fliplet.DataSources.connect(123)
      .then(function(connection) {
      // Get all entries in the data source matching a specific condition
      return connection.find({
        where: { column: 'value' }
      });
    });
  };
});

Now, let’s have a look at another complete example injecting data from a data source to the list component with a custom filter and with data transformations:

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeGetData(data) {
  // data is an object with the component configuration and the component container
  // data.config
  // data.container

  // disable caching the data so it's always retrieved from the server
  data.config.cache = false;

  // Define the "getData" promise to manually fetching data. 
  data.config.getData = function () {
    // In this example we connect to a datasource with ID 123
    // Change the ID to your data source ID
    return Fliplet.DataSources.connect(123).then(function(connection) {
      // Get all entries in the data source matching a specific condition
      return connection.find({
        where: {
          column: 'value'
        }
      })
    }).then(function (entries) {
      // Apply some transformations to the data before sending it back to the list component
      var entries = result.map(function(entry) {
        entry.data.dataSourceEntryId = entry.id;
        return entry.data;
      });

      // Return the data to be rendered on the list component
      return entries;
    });
  };
});

Run a hook before deleting an entry

Fliplet.Hooks.on('flListDataBeforeDeleteEntry', function onBeforeDeleteEntry(data) {
  // data - (Object) Contains "entryId", "config", "container"
  // data.entryId - (Number) ID of the entry that is going to be deleted
  // data.config - (Object) Entire component's configuration object
  // data.container - (Object) DOM element

  data.config.deleteData = function(id) {
    // Resolve Promise with the entry ID
    return Promise.resolve(id);
  };
});

Persistent Variable Queries

With the List (from data source) you can programatically load a specific list item, apply filters and/or search, and even add a new pre-filter.
(pre-filter is a filter applied before the list is rendered - this won’t override the filters added in component settings)

This can be achieved by setting a persistant variable using the Fliplet.App.Storage. Read more here
The persistant variable, by default, will be removed automatically after running.

Fliplet.App.Storage.set('flDynamicListQuery:simple-list', { ... });

The persistant variable is namespaced with flDynamicListQuery: plus the list layout name. Below are all the layout names you can use.

List layouts

The key of the persistant variable includes the layout name of the List (from data source).
Here is a list of all the layouts available in the List (from data source) component:

Let’s have a look at how to use the feature.

Fliplet.App.Storage.set('flDynamicListQuery:simple-list', options);

Let’s see a few examples on how to use all these options:

Open specific list item

// Open by ID
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  open: {
    id: 1234
  }
});

// Open by column and value
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  open: {
    column: "First Name",
    value: "John"
  }
});

Load list with search value

// Search by value only
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  search: {
    value: "business apps"
  }
});

// Search by value on a specific data column
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  search: {
    column: "Title",
    value: "business apps"
  }
});

// Search by value on an array of data columns
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  search: {
    column: ["Title", "Category"],
    value: "business apps"
  }
});

Load list with a filter

// Applying one filter
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  filter: {
    value: "Apps"
  }
});

// Applying multiple filters
Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  filter:{
    value: ["Apps", "London"]
  }
});

Pre-filter the list

Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  prefilter: [
    {
      column: "Title",
      logic: "contains",
      value: "apps"
    }
  ]
});

Other options

Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  search: { ... },
  goBack: {
    enableButton: true,
    action: "(function () { console.log('run code') })"
  },
  persist: true
});

Chain features

A pre-filter and a search

Fliplet.App.Storage.set('flDynamicListQuery:simple-list', {
  prefilter: [
    {
      column: "Title",
      logic: "contains",
      value: "apps"
    }
  ],
  search: {
    column: ["Title", "Category"],
    value: "business apps"
  }
});

Operators for the logic key


Back to API documentation