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