[Feature] Custom widget

[riodeuno]

Summary

A way to include a custom component in Appsmith's canvas.

Motivation

Some tools require very specific types of widgets to display, represent and interact with data.

These types of widget functionality may not be available in the default set of widgets in Appsmith.
Having a way to include these in applications can be helpful.

Front conversations

[ofpiyush]

Please read #2122 when we pick this.

[droggo]

+1 for this feature

[dgorshkov]

Hello! Could we please get an update on this?
It's marked as "Q1 2022" on the roadmap, but it's almost Q2.

[Nikhil-Nandagopal]

@dgorshkov we haven't begun with this yet. Is there a widget you find missing?

[dgorshkov]

@Nikhil-Nandagopal Yes, we'd like to build a kanban board component.
BTW, congrats on the funding.

[sxwebster]

+1 for this.

Sometimes there are things I want to do with other JS libraries beyond what is available in AppSmith -eg using something from HighCharts instead of FusionCharts. It would be excellent if I could write a wrapper to include HighCharts (for which I have my own license - thus not requiring you to get a distribution license as happened with Fusion Charts) and then provide data sources similar to how I would at the moment.

[pranavkanade]

@hiteshjoshi @Nikhil-Nandagopal A user is asking for this feature so that they can have a tabulator widget - http://tabulator.info

[a-c-m]

Adding a +1 here. The ability to create custom widgets (ideally with a searchable index on the appsmith or some 3rd party website) would be a huge improvement to the ecosystem and likely drive a lot of adoption.

I think https://github.com/appsmithorg/appsmith/blob/release/contributions/AppsmithWidgetDevelopmentGuide.md does a good job of showing how. But, to make this feature a true asset to appsmith, i think widgets need to be able to be imported / live outside the primary codebase, so they can be added adhoc in some kind of plugin system.

[dilippitchika]

Hello folks, we are going to start work on this soon. I am looking for volunteers who can help us with understanding the problem statement better and what the workflow of your app and this new widget will look like. If anyone is interested in contributing to this project, please feel free to block a slot here - https://calendly.com/dilip_pitchika/30min

[a10k]

Also, just a custom HTML block, where we can write some html snippet/use the {{}} to dynamically pass props to a web-component within it, while we add the libraries via script tag should be a great solution. Or is this already possible in the app somehow and I missed it, please help. Thanks!

[dilippitchika]

Hey @a10k what are you trying to do in the custom html block? Can you please help me understand this?

[ahmetsevki]

Budibase has a nice plugin architecture which allows you to import into an existing deployment.

[Nikhil-Nandagopal]

@ahmetsevki is there any reason you prefer manually uploading a component over writing the component code inside Appsmith itself as a widget?

[ahmetsevki]

• writing a custom react component in a screen provided by the appsmith app builder will be a bad dev experience. You will have to copy/paste code, you won't have the versioning of the component.
• If you are going for a custom component like tooljet does that is rendered in an iframe, transpiled with babel, that would be a solution that transpiles at every component load, and won't scale. One bad move and your screen will freeze perhaps locking you out of your app (every time you try to edit your app, the browser perhaps would try to transpile many components)
• What we should do is an admin screen where you can import plugins from a github repo. That repo will return a version and a schema. And you will import the distribution.js javascript file - compiled with react as peer dependency/not bundled to reduce size. Then load them on demand.
  • provide a skeleton project creator for developers that will create a custom component. The release file will be the compiled js + schema + version
  • developer creates a react component as default export, builds it in github actions
  • appsmith admin points to the repo, appsmith downloads it to server side, stores it
  • widget is made available on builder UI, upon construction sth like:

    // the following registers itself to window  with "window["##CUSTOM_COMPONENTS##"].push(plugin)"
    require('/tmp/someplugin/custom-component-index-built-by-custom-component-developer.js') 
    declare global {
        interface Window { "##CUSTOM_COMPONENTS##": Array<{name: string; component: FC<any>}>; }
    }
    const Button= window["##CUSTOM_COMPONENTS##"].find( c => c.name === 'myplugin').component
    const container = document.getElementById("somediv");
    const root = createRoot(container);
    root.render(<Button type='error' text='TryMe!' onClick = {() => {console.log('whaat')}}/>)

CREDIT: budibase implementation.

[Nikhil-Nandagopal]

@ahmetsevki thanks for explaining the reasoning for not wanting the iFrame method. This will help build it better

[iamenrique]

In the meantime, can you kindly confirm this guide is still valid and up-to-date? https://github.com/appsmithorg/appsmith/blob/release/contributions/AppsmithWidgetDevelopmentGuide.md

Reported here as well

[riodeuno]

Hi @iamenrique! Yes, the APIs described in the guide should work.

We are looking to enhance the guide. So, please do share any suggestions you may have.

You can tag me or @rajatagrawal on GitHub, in case you have any queries when using the APIs described, or widget development in general.

We're also looking to add the property auto complete definitions to this guide, once the relevant changes have been merged into the code base.

[sbalaji1192]

Closing this as we have introduced the custom widget on cloud and self hosted instances.

Documentation links:

1. https://docs.appsmith.com/reference/widgets/custom
2. https://docs.appsmith.com/build-apps/how-to-guides/Create-Custom-Widgets-Using-Iframe