Skip to main content

Call different APIs on tab select

This guide explains how to call different APIs based on the tab a user clicks.

  1. Drag and drop a Tabs component from the component panel to the application canvas:

    The component panel was opened and Tabs was typed in the search bar to filter for the Tabs component.
  2. Add two Backend APIs called API1 and API2 to your Application by clicking the Add Backend API button:

    Two Backend APIs that both have a single Javascript step were added to the Applications backend.
  3. For each API click open the response block and add an onSuccess event handler to your APIs. Choose Show Alert as the Action Type and set the Message to API1 was called and API2 was called respectively:

    A Show Alert action type was added to the onSuccess event handler for both APIs.
  4. Click on the Tabs component to open its properties panel:

    A tabs component was clicked to open its properties panel.
  5. Open the context menu of the onTabSelect event handler and set the Action Type to Run JS (in Browser). Then copy and paste the following JavaScript snippet to the Code input field:

    (Tabs1.selectedTab == "Tab 1") ? API1.run() : API2.run();
    A Run JS Action type was added to the event handler of a Tabs component.
  6. That's it, click on the tabs in your Tabs component to call the Backend APIs. When Tab 1 is selected API 1 is triggered and the alert "API1 was called".

    The user clicked on a different tab and triggered an API run that is showing an Alert on the page.