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.

Returns

Popup : this

Action a custom alert

xxxxxxxxxx

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

Show Component

Show component when a component is already hidden.

Component Id found here:

Returns

 Null

Action a show component

xxxxxxxxxx

TB.showComponent("component_19");

Hide Component

Hide component when a component is visible.

Returns

 Null

Action to hide the component

xxxxxxxxxx

TB.hideComponent("component_20");

Navigate to Page

Navigate page by page id.

Page id found here:

Returns

 Null

Action to Navigate page by page id.

xxxxxxxxxx

TB.navigateToPageId("o6WQb5NnBZ");

Navigate to

Navigate page by page slug.

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

Returns

 Null

Action to Navigate using page slug.

xxxxxxxxxx

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. 

xxxxxxxxxx

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.

xxxxxxxxxx

TB.render('component_4-login_success', function(data) {

      console.log(data)

});

Render

Get all data of components.

Returns

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

Trigger to Navigate using page slug.

xxxxxxxxxx

TB.render("component_20", function(data){

    console.log("component_data", data)

});

Before Page Change

Listen for an attempt to change navigation. 

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

Code Sample:

xxxxxxxxxx

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. 

xxxxxxxxxx

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

xxxxxxxxxx

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)    

});