On button or image tap (or click)

Fliplet’s Button and Image components allow you to select an action when they are tapped. To set this, navigate to the component’s settings (select the button or image and click the orang cog icon). In the settings you can select a ‘link’ action. This action can let you display another screen, visit a URL or open a document.

Running custom code

If the action you’d like to perform is not available as one of the drop down options you can create a custom action yourself with JavaScript (remember to remove any actions you may have set in the drop down settings).

To do this you first need to give your element a name (a class or ID) in the HTML section of the Developer Options. In the example below we’ve added class="my-button" to a button component. The text ‘my-button’ can be changed to anything you want (provided it doesn’t use certain characters and spaces).

<fl-button class="my-button" cid="12345"><fl-button>

In the JavaScript, we need to set up a function that will listen for a click/tap and run our custom code. The following code uses a library called jQuery that comes pre-installed in Fliplet. The function is called when the component with the ‘my-button’ class is clicked. Note that we need to add a ‘.’ to indicate that ‘my-button’ is a class name.

$('.my-button').on('click', function () {
  // Add your custom code here
  // As an example we're navigating to screen with ID of 84735 
  Fliplet.Navigate.screen(84735);
});

When running, the example above will navigate the user to a new screen with ID of 84735. To learn more about navigating between screens please click here.