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:

Note: data.config.getData must return an array of objects. Each object must contain both id and data properties. If you are integrating with a third-party API, it may be necessary to map the returned response using Array.prototype.map() or _.map() from lodash to restructure the response.

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,
        data: { name: 'Nick' }
      },
      {
        id: 2,
        data: { 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 to set a function to run before opening a detail view

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeOpenDetails(data) {
  // data - (Object) Contains "id", "config", "container"
  // data.config - (Object) Entire component's configuration object
  // data.container - (Object) DOM element

  // Define the "beforeOpen" promise
  data.config.beforeOpen = function () {
    // Code doesn't expect anything in return
    // This means developers can do whatever they want

    // If you return 'data' that will become the new data used in the component

    return Promise.resolve();
  };
});

Run a hook to set a function to run before showing the detail view, but after opening

Fliplet.Hooks.on('flListDataBeforeGetData', function onBeforeShowDetails(data) {
  // data - (Object) Contains "data", "src", "config"
  // data.config - (Object) Entire component's configuration object
  // data.src - (Object) DOM elements for the detail view
  // data.data - (Object) Entry data

  // Define the "beforeShowDetails" promise
  data.config.beforeShowDetails = function () {
    // Your code here

    // Resolve Promise with the "data"
    return Promise.resolve(data);
  };
});

Run a hook to set a function to run after showing the detail view

Fliplet.Hooks.on('flListDataBeforeGetData', function onAfterShowDetails(data) {
  // data - (Object) Contains "data", "src", "config"
  // data.config - (Object) Entire component's configuration object
  // data.src - (Object) DOM elements for the detail view
  // data.data - (Object) Entry data

  // Define the "afterShowDetails" promise
  data.config.afterShowDetails = function () {
    // Code doesn't expect anything in return
    // This means developers can do whatever they want

    // If you return 'data' that will become the new data used in the component

    return Promise.resolve();
  };
});

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

Run a hook before delete confirmation pop up shows

Fliplet.Hooks.on('flListDataBeforeDeleteConfirmation', function onBeforeDeleteConfirmation(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

  // Code doesn't expect anything in return
  // This means developers can do whatever they want
});

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