Logo
Search
Info
Content
Category Navigation
  • Pipes & Integrations

  • Introduction to Pipes

  • Adding Pipes

  • Using Pipes

  • Tadabase Functions

    Text Pipes

    Time Conversion

    Mask and Disguise

    Advanced Date Pipes

    Unit Conversion

    Mortgage Calculator Pipe

    Barcode Generator

    QR Code Generator

    Number Utility Pipe

    Search and Replace

    Tadabase Domain Utilities

    Base64 File Converter

    Tadabase Rest API Pipes

    Vertical Lookup Pipe

    Duplicate Parent and Children

    Connection Field Plucker Pipe

    Record Looper Pipe (Legacy)

    Generate CSV Pipe

    3rd Party Pipes

    Shopify

    Pipedrive Pipe

    Plaid Pipe

    Vehicle VIN Decoder

    OpenAI Pipe

    Freshdesk Pipe

    Toggl Track Pipe

    FedEx Pipe

    MySQL Pipe

    Letter Stream Pipe

    Microsoft OneDrive Pipe

    Klaviyo Pipe

    TaxJar Pipe

    QuickBooks Pipe

    Google Sheets Pipe

    Perspective API Pipe

    Advanced Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

Categories
Pipes & Integrations
Advanced Integrations
JavaScript Callbacks a...

JavaScript Callbacks and Actions

 

Available Callbacks

From within your JavaScript code, you can trigger certain actions as well as listen for callbacks. 

Callbacks

  • TB.render
  • before-page-change

Actions:

  • TB.showComponent
  • TB.hideComponent
  • TB.navigateToPageId  // pageId
  • TB.navigateTo  //page slug
  • TB.showAlert
  • TB.getUserToken

Show an Alert

Populate a popup element with text-only content.

Parameter Type Description
Message string Alert message.
Type string

Various types of alert-success, warning, error, info and wait.   

Returns

Popup : this

Action a custom alert

TB.showAlert("This is a custom Alert", "success");

Show Component

Show component when a component is already hidden.

Parameter Type Description
ComponentId string Id of component.

Component Id found here:

Returns

 Null

Action a show component

TB.showComponent("component_19");

 

Hide Component

Hide component when a component is visible.

Parameter Type Description
ComponentId string Id of component.

Returns

 Null

Action to hide the component

TB.hideComponent("component_20");

 

Navigate to Page

Navigate page by page id.

Parameter Type Description
pageId string Id of page.

Page id found here:

Returns

 Null

Action to Navigate page by page id.

TB.navigateToPageId("o6WQb5NnBZ");

 

Navigate to

Navigate page by page slug.

Parameter Type Description
pageSlug string

Slug of page.

Page slug found here: Go to page setting in your app builder.

Returns

 Null

Action to Navigate using page slug.

TB.navigateTo("sample-page-2");

 

getUserToken

Gets the token of the logged in user. Can be usedful if systematically triggering page/user API calls and requires the logged in user token. 

var userToken = TB.getUserToken();
console.log(userToken); 

 

Get User after successful login

Callback after a user logs in successfully to the app. Be sure the component id matches the login components ID.

TB.render('component_4-login_success', function(data) {
      console.log(data)
});

 

Render

Get all data of components.

Parameter Type Description
componentId string

Id of component or 'any' for all components. 

callback  

Callback function

Returns

Object : {     ele : "HTML ELEMENT", // String     objI:"OBJECT_ID", // String     records : [] // Array
type : "TYPE OF component"

}

Trigger to Navigate using page slug.

TB.render("component_20", function(data){
    console.log("component_data", data)
});

 

Before Page Change

Listen for an attempt to change navigation. 

Parameter Type Description
Event Name string before-page-change
Page ID string The ID of the page to listen for
Callback   Callback function

You can get the page ID from the builder. When working with a child page, make sure to use the second ID. 

Code Sample:

TB.registerEvent('before-page-change', "K2ejlOQo9B", function() { 
    
    console.log("Page in about to be changed");

});

Example: 

When a page is about to be navigated away from, require confirmation before changing pages. If the user doesn't confirm the request for the alert, the page will remain present. 

TB.registerEvent('before-page-change', "K2ejlOQo9B", function() { 
    if (confirm('Are you sure you want to leave?')) {
    } else {
      return false; 
    }
});

How did we do ?

Previous Article
Stripe Checkout
Next Article
Twilio Integration
Article Navigation
  • Available Callbacks
  • Callbacks
  • Actions:
  • Show an Alert
  • Returns
  • Show Component
  • Returns
  • Hide Component
  • Returns
  • Navigate to Page
  • Returns
  • Navigate to
  • Returns
  • getUserToken
  • Get User after successful login
  • Render
  • Returns
  • Before Page Change
  • Code Sample:
  • Example:
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational