Add a button to the detail view with a custom query parameter for filtering

Get Help
,
1

If you want to add a button to an LFD detail view that when clicked on will filter an LFD on another screen you can do it in the following way.

First you want to add the button to the LFD detail view. You can do this by clicking top edit the LFD instance and clicking on “Edit component’s code”

image
image720×156 9.01 KB

Here under the detail template you can insert the button where you’d like.

image
image1464×118 23.4 KB

Sample HTML:

<button type="button" class="btn btn-primary" id="{{id}}">Primary</button>

You want to include the id={{id}} part so the JS code we will add later will dynamically know which entry the user has clicked on.

In the screen JS you want to include the following JS:

//Change the screen id to the screen you want to navigate to. 
$(document).on('click', '.btn.btn-primary', function() {
  var entryID = $(this).attr('id');
  Fliplet.Navigate.screen(123, { query: '?dynamicListOpenId=' + entryID });
});

The above snippet is used if you want to open the detail view of the entry on the other screen but if you want to just filter by some property you can use the entryID to query the data source for that record and then you pick any column you want to filter by. For e.g

$(document).on('click', '.btn.btn-primary', function() {
  var entryID = $(this).attr('id');
  Fliplet.DataSources.connect(dataSourceId).then(function(connection) {
    return connection.findById(entryID).then(function(record) {
      // records is the found object
      Fliplet.Navigate.screen(123, {
        query:
          '?dynamicListFilterColumn=' +
          encodeURIComponent('Office') +
          '&dynamicListFilterValue=' +
          encodeURIComponent(record.data.Office)
      });
    });
  });
});

Here we are filtering by the office property of the record. So if this entry had Office equal to London then the LFD on the destination screen will be filtered to be Office equal to London.

You can any of the query parameters defined here to filter your LFD’s anyway you want to. See documentation or more examples and types of queries available.

Documentation: