How Do I Create a Custom Widget On Appsmith?

NOTE - this is an old reponse. Appsmith now provides a custom widget in the UI that you can use to build anything you want!

React components can be connected to the Appsmith platform using the Widget Development APIs and registered to be available for use by Appsmith developers.

• In the video below, we can view a quick walk-through on the basics of the Widget Development API.
• In the following, we dive into the details of the features available to widget developers.

NOTE: If you want to create a "custom widget" inside the UI, then you may want to look at using the iframe widget. While this won't let you create a reusable widget in the platform, it will give you complete control over the iframe (which can house a "custom widget")

The Widget Development API provides features to the widget developers, allowing them to have control over the widget's UI rendering, query submission, and data handling. The API also provides lifecycle methods for widgets that allow the developer to add functionality at specific points in the widget's lifecycle.

To configure a widget in Appsmith, the developer needs to create a new widget and define its properties, methods, and UI. The widget is then registered with the platform and can be used by Appsmith developers in their applications.

It's important to note that creating a custom widget involves more than just defining the widget itself. You'll also need to register your widget with Appsmith, and possibly provide a custom editor for your widget if the default property editor isn't sufficient for your needs. You can learn more about these steps in the Appsmith widget development guide.

Here is a basic example of how to create a custom widget in Appsmith using the Widget Development API:

import React from 'react';
import { WidgetConfig } from 'appsmith';
import { Props } from './MyWidgetProps';

class MyWidget extends React.Component<Props> {
  static widgetConfig: WidgetConfig = {
    // This information is used by Appsmith to display your widget correctly
    type: 'MyWidget',
    name: 'My Custom Widget',
    icon: 'MyWidgetIcon',
    needsModel: true,

    // The default properties that users can set
    defaults: {
      data: []
    }
  };

  render() {
    return <div>{this.props.data}</div>;
  }
}

export default MyWidget;

In the example above, we define a MyWidget component and define its widget configuration, including its type, name, icon, and whether it needsModel. We also define the default properties that Appsmith developers can set and use in their applications.

The render method of the component defines how the widget is displayed on the UI. In this case, it simply displays the data property that has been set.

Once the MyWidget component has been defined, it can be registered with the Appsmith platform and used by Appsmith developers in their applications.