Close the container and return to the previous screen.
Confirmation that the container is closing. See CloseResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Close the container
const response = await container.close();
// Handle the response
if (isSuccess(response)) {
console.log('Container closed successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Get the session parameters from the container.
The session parameters as a JSON string that can be parsed into an object. See GetSessionParamsResponse.
The native layer returns session parameters as a JSON string.
Parse with JSON.parse(result.result) to use as an object.
Session parameters can contain primitives, base64 encoded strings, or nested objects.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Get session parameters
const response = await container.getSessionParams();
// Handle the response
if (isSuccess(response)) {
if (response.status_code === 200) {
const sessionParams = JSON.parse(response.result);
console.log('Session params retrieved:', sessionParams);
} else if (response.status_code === 204) {
console.log('No session parameters found');
}
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Hide the back button on the container header.
Confirmation that the back button is now hidden. See HideBackButtonResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Hide back button
const response = await container.hideBackButton();
// Handle the response
if (isSuccess(response)) {
console.log('Back button hidden successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Hide the full-screen loading indicator.
Confirmation that the loader is now hidden. See HideLoaderResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Hide loader
const response = await container.hideLoader();
// Handle the response
if (isSuccess(response)) {
console.log('Loader hidden successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Hide the refresh button on the container header.
Confirmation that the refresh button is now hidden. See HideRefreshButtonResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Hide refresh button
const response = await container.hideRefreshButton();
// Handle the response
if (isSuccess(response)) {
console.log('Refresh button hidden successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Check if the web app is connected to the Grab SuperApp via JSBridge.
The connection status, indicating whether the MiniApp is running inside the Grab SuperApp. See IsConnectedResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Check connection status
const response = await container.isConnected();
// Handle the response
if (isSuccess(response)) {
console.log('Connected to Grab SuperApp:', response.result.connected);
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Notify the Grab SuperApp that the page content has loaded.
Confirmation that the content loaded notification was sent. See OnContentLoadedResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Notify content loaded
const response = await container.onContentLoaded();
// Handle the response
if (isSuccess(response)) {
console.log('Content loaded notification sent successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Notify the client that the user has tapped a call-to-action (CTA).
The action identifier for the CTA that was tapped. See OnCtaTapRequest.
Confirmation that the CTA tap was notified. See OnCtaTapResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Notify CTA tap
const response = await container.onCtaTap('AV_LANDING_PAGE_CONTINUE');
// Handle the response
if (isSuccess(response)) {
console.log('CTA tap notified successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Open a link in the external browser.
The URL to open in the external browser. See OpenExternalLinkRequest.
Confirmation of whether the external link was opened successfully. See OpenExternalLinkResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Open external link
const response = await container.openExternalLink('https://grab.com');
// Handle the response
if (isSuccess(response)) {
console.log('External link opened successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Use this method to track user interactions and page transitions.
Analytics event details including state, name, and optional data. See SendAnalyticsEventRequest.
Confirmation of whether the analytics event was sent successfully. See SendAnalyticsEventResponse.
You can use predefined constants to ensure consistency across the platform.
Predefined Values:
Simple usage
import {
ContainerModule,
isSuccess,
isError,
ContainerAnalyticsEventState,
ContainerAnalyticsEventName,
} from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Send analytics event
const response = await container.sendAnalyticsEvent({
state: ContainerAnalyticsEventState.HOMEPAGE,
name: ContainerAnalyticsEventName.DEFAULT,
});
// Handle the response
if (isSuccess(response)) {
console.log('Analytics event sent successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Set the background color of the container header.
The background color to set (hex format, e.g., '#ffffff'). See SetBackgroundColorRequest.
Confirmation that the background color was set. See SetBackgroundColorResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Set background color
const response = await container.setBackgroundColor('#ffffff');
// Handle the response
if (isSuccess(response)) {
console.log('Background color set successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Set the title of the container header.
The title text to display in the header. See SetTitleRequest.
Confirmation that the title was set. See SetTitleResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Set title
const response = await container.setTitle('Home');
// Handle the response
if (isSuccess(response)) {
console.log('Title set successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Show the back button on the container header.
Confirmation that the back button is now visible. See ShowBackButtonResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Show back button
const response = await container.showBackButton();
// Handle the response
if (isSuccess(response)) {
console.log('Back button shown successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Show the full-screen loading indicator.
Confirmation that the loader is now visible. See ShowLoaderResponse.
Remember to call ContainerModule.hideLoader when the operation completes.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Show loader
const response = await container.showLoader();
// Handle the response
if (isSuccess(response)) {
console.log('Loader shown successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
Show the refresh button on the container header.
Confirmation that the refresh button is now visible. See ShowRefreshButtonResponse.
Simple usage
import { ContainerModule, isSuccess, isError } from '@grabjs/superapp-sdk';
// Initialize the container module
const container = new ContainerModule();
// Show refresh button
const response = await container.showRefreshButton();
// Handle the response
if (isSuccess(response)) {
console.log('Refresh button shown successfully');
} else if (isError(response)) {
console.error(`Error ${response.status_code}: ${response.error}`);
} else {
console.error('Unhandled response');
}
JSBridge module for controlling the WebView container.
Remarks
Provides methods to interact with the WebView container. This code must run on the Grab SuperApp's WebView to function correctly.
Example
ES Module:
Example
CDN (UMD):