On component tap or click

Button and Image components have a built-in setting to attach an action when they are tapped. However, if you’re not using a button or image component or want to run a custom action then you can use the method below.

You can give your element a name by adding a class or an ID in the HTML section of the Developer Options. In the example below, we’ve shown what a standard container component looks like before and after we’ve added a class with the name “my-clickable-component”.

<!-- Standard component before we've added a class -->
<fl-container cid="12345"></fl-container>

<!-- Component after we’ve added a class -->
<fl-container class="my-clickable-component" cid="12345"></fl-container>

In the JavaScript tab, we need to add some code that will listen for any clicks on our container component and then run any custom code we want to run.

Below, we’re listening for a click/tap on any element with a class name of “my-clickable-component”. When it’s clicked or tapped, we run the custom code that’s inside the function. In this example we’re navigating the user to a new screen within the app (a screen with an ID of 84735).

$('.my-clickable-component').on('click', function () {
  // Navigates to screen with ID 1
  // Opens directory entry with ID 123
  Fliplet.Navigate.screen(84735);
});