Using "useGetWidgetModel" to Embed an Existing widget in ComposeSDK

[JeremyFriedel]

Using "useGetWidgetModel" to Embed an Existing Widget in ComposeSDK

When developing ComposeSDK embedded applications, there are three principal techniques for embedding or converting an existing Sisense widget. Discussing each method, and some of the benefits associated with them:

1. Direct Rendering existing Sisense Dashboard Widgets with the DashboardWidget Function:
   The expedited approach involves rendering an existing Sisense widget directly using the DashboardWidget function. While this method ensures swift integration, it does not allow all data options of the widget to be edited within ComposeSDK or defined as variables, one of the features of native ComposeSDK widgets. Nevertheless, customization of other parameters, including styling, remains feasible based on the props used. Mandatory parameters include the dashboard and widget ID, which allow the rendering of an existing Sisense widget.
2. Widget Recreation using ComposeSDK to Create Native ComposeSDK widgets
   An alternative method, detailed in this linked article, entails recreating the widget as a native ComposeSDK widget by employing an existing Sisense widget as a template for a new not directly linked ComposeSDK widget. Though potentially more time-intensive, this approach yields a fully customizable native ComposeSDK widget. It stands independent of any specific widget or dashboard on the Sisense server, enabling complete independence to changes made to the original dashboard or widget, or complete deletion of the widget used as the model.
3. Loading Widget Metadata with the useGetWidgetModel function
   
   Leveraging the useGetWidgetModel ComposeSDK function provides a middle ground. It allows automating the return of widget metadata from an existing Sisense widget, facilitating dynamic modifications within ComposeSDK. This method balances somewhat the autonomy of entirely recreating a widget as a native ComposeSDK widget and rendering a widget as a Dashboard Widget.

Using the format below, the entire ComposeSDK metadata equivalent of an existing Sisense widget can be imported and be used directly to render a direct ComposeSDK equivalent:

import { Chart, useGetWidgetModel } from "@sisense/sdk-ui";

/**
 * Retrieves and renders a ComposeSDK equivalent of an existing Sisense widget using one of three methods.
 * Method 1: Rendering an existing Sisense widget directly as a ComposeSDK DashboardWidget.
 * Method 2: Recreating the widget independently as a native ComposeSDK widget using a Sisense widget template.
 * Method 3: Programmatically loading ComposeSDK metadata using the useGetWidgetModel function.
 *
 * @param {string} dashboardOid - The ID of the Sisense dashboard containing the widget.
 * @param {string} widgetOid - The OID of the Sisense widget to be converted.
 * @returns {JSX.Element} - The ComposeSDK Chart component rendering the converted widget.
 */

const convertSisenseWidgetToComposeSDK = ({ dashboardOid, widgetOid }) => {
  const { widget, isLoading, isError } = useGetWidgetModel({
    dashboardOid,
    widgetOid,
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error</div>;
  }

  if (widget) {
    // Extract ComposeSDK metadata equivalent of the Sisense widget
    const widgetProps = widget.getChartProps();

    // Render the ComposeSDK Chart component with the converted widget metadata
    return <Chart {...widgetProps} />;
  }

  return null;
};

// Example usage:
const sisenseToComposeSDKWidget = convertSisenseWidgetToComposeSDK({
  dashboardOid: 'yourDashboardID',
  widgetOid: 'yourWidgetOID',
});

The variable widgetProps contains the entire widget metadata equivalent of the Sisense widget. This is a standard Javascript object that contains all of the Sisense metadata in the format ComposeSDK expects. These parameters can be changed in the object similar to any other Javascript object.

The useGetWidgetModel function, introduced in the latest ComposeSDK version as of January 2024, fetches the entire ComposeSDK metadata equivalent of a Sisense widget. However, certain errors may arise when the metadata returned is used to render a widget, necessitating minor adjustments to the props returned.

For instance, the widget dataSource parameter can includes the server name, which is often "localhost," triggering an "ElastiCube not found" error in ComposeSDK. Mitigate this is possible by eliminating "localhost/" from the returned prop object:

widgetProps.dataSet = widgetProps.dataSet.replace("localhost/" , "")

 Similar changes can be made to any other parameters where issues may occur.

It is important to note that widgets rendered using useGetWidgetModel retain all limitations and variations of ComposeSDK, and unsupported widget types in ComposeSDK are still not renderable. As an example, ComposeSDK widgets require a Value metadata item, while native Sisense widgets can render with only a category panel item.

Additionally, if left permanently in the code, the Sisense widget and its corresponding dashboard must persist, as useGetWidgetModel fetches the widget metadata on each call. As a result, any changes made to the widget in native Sisense will be reflected, which can be useful.

Similar to the method discussed here, useGetWidgetModel can facilitate the conversion of a widget into a fully native ComposeSDK model instead of using the web console of native Sisense, the returned props from "useGetWidgetModel" can be console logged and copied directly. Once the necessary metadata is copied, the function can be "useGetWidgetModel", and the widget will be a fully native ComposeSDK widget.

A native Sisense widget:

The widget is rendered using ComposeSDK and useGetWidgetModel:

The widget metadata returned console logged. These can be copied directly from the console, avoiding potentially the continual use of useGetWidgetModel.

Share your experience in the comments!