SprinklrJS SDK

Sprinklr SDK to interact with the Sprinklr platform.

Installation

Install the npm package

yarn add @sprinklrjs/app-sdk

Overview

Lets start with initializing the sdk by invoking the init method. This lets the Sprinklr platform create a connection with the custom component for bidirectional communication.

import SprClientSDK from '@sprinklrjs/app-sdk';

const MyCustomComponent = () => {
    const [isClientInitialized, setIsClientInitialzed] = useState<boolean>(false);
    const sprClientRef = useRef<SprClientSDK>();

    useEffect(() => {
        const initSDK = async () => {
            //Set reference so that we can use it later
            sprClientRef.current = new SprClientSDK();
            //Call the init method to initialize and await on this to resolve
            await sprClientRef.current.init();
            //Set a flag that the sdk has been initialized
            setIsClientInitialized(true);
        }
        initSDK();
    }, []);

    //Wait until isClientInitialized is set to true
    return (
      <>{ isClientInitialized ? 'My custom component!' : 'Loading...' }</>
    )
}

Documentation

sdk.init()

This method is used to initialize and setup the SDK so that the custom component can coomunicate with the Sprinklr component. This method is a preqreuisite to use any other methods on the SDK.

sdk.getEnvParams()

This method is used to get the environment params configured for this application inside the Sprinklr Platform. It returns an object with the parameter names as key and their corresponding values set against those keys.

sdk.request(params)

This method is used for the following scenarios -

1. Fetch data from Sprinklr available in the current page's context.
2. Fetch data from a third party service via Sprinklr

Fetching data from Sprinklr

This is used to fetch standard Sprinklr records in the current page's context like case, profile, user.

sdk.request(operationName)

//Returns the current case user has opened
const currentCase = await sdk.request('getCurrentCase');
//Returns the current profile associated with the case
const currentProfile = await sdk.request('getCurrentProfile');
//Returns the current logged in user
const currentUser = await sdk.request('getCurrentUser');

| Name | Type | Description | | ------------- | ----------------------------------------------------------- | ------------------------------------------------------------- | | operationName | 'getCurrentUser' | 'getCurrentCase' | 'getCurrentProfile' | OperationName indicated what type of data you want to request |

Fetch data from a third party service via Sprinklr

This is used to fetch data from a non-Sprinklr end point. For eg you may want to fetch data hosted in your custom environment but do not want to manage the user session. You can use this method to let Sprinklr make the call to your end point with the necessary params. Sprinklr also injects a JWT token in the Authorization request header. This can be used to identify that the request is coming from an authenticated user.

sdk.request(requestParams)

const data = await sdk.request({
  url: 'https://myCustom.domain.com/endpoint',
  method: 'GET',
  contentType: 'application/json',
});

requestParams is an object with the following type - | Name | Type | Description | | ------------- |-------------| -----| | url | string | The url that should be hit to get the data | | method | 'GET' | 'PUT' | 'POST' | 'DELETE' | The type of REST call | | headers | object | Any optional headers that you want to send | | contentType | string | The expected content-type of the response | | data | object | Any optional data that needs to send. This is important for PUT/POST calls |

sdk.ui.snackbar(type, { message })

This method is used to render snackbar with a given message.

//Success
sdk.ui.snackbar('SUCCESS', { message: 'Data saved successfully!' });
//Error
sdk.ui.snackbar('ERROR', { message: 'There was an error while saving data!' });
//Warning
sdk.ui.snackbar('WARNING', { message: 'Approaching SLA Limit!' });

sdk.ui.snackbar(type, params) | Name | Type | Description | | ------------- |-------------| -----| | type | 'SUCCESS' | 'ERROR' | 'WARNING' | Type of snackbar notification | | params | { message: string } | The message to be rendered in the snackbar notification |