Skip to main 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.showLoading()
  • TB.hideLoading()
  • 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; 
    }
});

NEW! New Callback to get value of a connection field when using a display field dropdown

TB.render('component_8', "field_44", "connection_value_updated", function(data) {
	//add custom code here
	console.log('component_id ', data.component_id)
	console.log('field_slug ', data.field_slug)
    console.log('value ', data.value)    
});

Back to top