@grabjs/superapp-sdk
    Preparing search index...

    Class ContainerModule

    SDK module for controlling the WebView container via JSBridge.

    Provides methods to interact with the WebView container. This code must run on the Grab SuperApp's WebView to function correctly.

    ES Module:

    import { ContainerModule } from '@grabjs/superapp-sdk';
    const containerModule = new ContainerModule();

    CDN (UMD):

    <script src="https://cdn.jsdelivr.net/npm/@grabjs/superapp-sdk@x.y.z/dist/index.js"></script>
    <script>
      const containerModule = new SuperAppSDK.ContainerModule();
    </script>

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    close getSessionParams hideBackButton hideLoader hideRefreshButton isConnected onContentLoaded onCtaTap openExternalLink sendAnalyticsEvent setBackgroundColor setTitle showBackButton showLoader showRefreshButton

    Constructors

    Methods

    • Close the container and return to the previous screen.

      Returns Promise<CloseResponse>

      This method can return the following status_code values:

      • 204 (No Content): Container closed successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Returns Promise<GetSessionParamsResponse>

      This method can return the following status_code values:

      • 200 (OK): Session parameters retrieved successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      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.

      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.

      Returns Promise<HideBackButtonResponse>

      This method can return the following status_code values:

      • 204 (No Content): Back button hidden successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Returns Promise<HideLoaderResponse>

      This method can return the following status_code values:

      • 204 (No Content): Loader hidden successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      Should be called when the entry point has finished loading.

      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.

      Returns Promise<HideRefreshButtonResponse>

      This method can return the following status_code values:

      • 204 (No Content): Refresh button hidden successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Returns Promise<IsConnectedResponse>

      This method can return the following status_code values:

      • 200 (OK): Connected to Grab SuperApp. The result contains IsConnectedResult.
      • 404 (Not Found): Not connected to Grab SuperApp.

      Call this method to verify the connection status before using other features.

      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.

      Returns Promise<OnContentLoadedResponse>

      This method can return the following status_code values:

      • 200 (OK): Notification sent successfully.
      • 204 (No Content): Operation completed successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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).

      Parameters

      • request: string

        The action identifier for the CTA that was tapped.

      Returns Promise<OnCtaTapResponse>

      This method can return the following status_code values:

      • 200 (OK): CTA tap notification sent successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Parameters

      • request: string

        The URL to open in the external browser.

      Returns Promise<OpenExternalLinkResponse>

      This method can return the following status_code values:

      • 204 (No Content): External link opened successfully.
      • 400 (Bad Request): Invalid request parameters.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      Call this method to open the specified URL in an external browser (outside of the Grab app).

      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.

      Parameters

      Returns Promise<SendAnalyticsEventResponse>

      This method can return the following status_code values:

      • 204 (No Content): Analytics event sent successfully.
      • 400 (Bad Request): Invalid request parameters.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      You can use predefined constants to ensure consistency across the platform.

      Predefined Values:

      ContainerAnalyticsEventState, ContainerAnalyticsEventName

      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.

      Parameters

      • request: string

        The background color to set (hex format, e.g., '#ffffff').

      Returns Promise<SetBackgroundColorResponse>

      This method can return the following status_code values:

      • 204 (No Content): Background color set successfully.
      • 400 (Bad Request): Invalid request parameters.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Parameters

      • request: string

        The title text to display in the header.

      Returns Promise<SetTitleResponse>

      This method can return the following status_code values:

      • 204 (No Content): Title set successfully.
      • 400 (Bad Request): Invalid request parameters.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Returns Promise<ShowBackButtonResponse>

      This method can return the following status_code values:

      • 204 (No Content): Back button shown successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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.

      Returns Promise<ShowLoaderResponse>

      This method can return the following status_code values:

      • 204 (No Content): Loader shown successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      Remember to call ContainerModule.hideLoader when the operation completes.

      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.

      Returns Promise<ShowRefreshButtonResponse>

      This method can return the following status_code values:

      • 204 (No Content): Refresh button shown successfully.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.
      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');
      }

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods