Info
Content

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; 
    }
});

Back to top