If you’re using the List from Data Source (LfD) component, when one of the list items is tapped/clicked, the default action is to open an overlay with a more detailed view of the list item.
However, there may be other actions you wish to trigger such as navigate to a URL or run some custom code. To do this you’ll need to detect and interrupt the default behaviour using a hook.
The example below attaches a hook when the list is created (using flListDataBeforeGetData). This makes it possible to access the LfD options. A full list of options can be found here, however, we’re currently interested in running some custom code before the default open event so we use options.config.beforeOpen.
Fliplet.Hooks.on('flListDataBeforeGetData', function (options) {
// Sets a function that will run before opening a list item
options.config.beforeOpen = function (params) {
// Navigate to screen with ID 123
// With a entryTitle query
Fliplet.Navigate.screen(123, {
query: '?entryTitle=' + params.entryTitle
});
// Stops detailed view from open
return Promise.reject();
};
});
In this case, we’re running custom code that navigates a user to a new screen (with a screen ID of 123). We’re also passing that screen some data called entryTitle (this is optional).
Finally we cancel the default open event using Promise.reject() at the end of the code.