Data Directory JS APIs

These public JS APIs will be automatically available in your screens once a Data Directory component is dropped into such screens.

Run a hook before the directory is rendered

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

Overwriting data to be rendered

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

Fliplet.Hooks.on('flDirectoryBeforeGetData', function onBeforeGetData(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 a directory:

Fliplet.Hooks.on('flDirectoryBeforeGetData', function onBeforeGetData(data) {
  // 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
    return Fliplet.DataSources.connect(123).then(function(connection) {
      // Get all entries in the data source matching a specific condition
      return connection.find({ where: { foo: 'bar' } })
    }).then(function (entries) {
      // Apply some transformations to the data before sending it back to the directory
      var entries = { =;

      // Return the data to be rendered on the directory
      return entries;

Running code before the directory is initialised

// Register the event
document.addEventListener('flDirectoryBeforeInit', function(e) {
  // Get the directory instance
  var directory = e.detail.context;

  for(var i = 0; i <; i++) {
    // Modify data in the directory with a sample "formatCurrency" function we have defined elsewhere[i]['AmountInUSD'] = formatCurrency([i]['AmountInUSD'], '$');


Query parameters

Use the following query parameters when linking to a directory screen.

Example 1

Open filter mode.


Example 2

Open the filter mode with all possible values of the “Country” field.


Example 3

Search the directory with the keyword “engineer”


Back to API documentation