[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

[slysiou]

+1 would be great to have abilities to create custom Gant, D3js...

[Michael-sr]

+1

[wschacker]

+1

[jmaister]

If it is as straightforward as extending a React component, it would be easy to contribute to the palette of widgets with third-party widgets from other repositories.

Only an idea:

class OddlyCustomComponent extends AppSmithComponent {
    render() {
        return <div>{...}</div>
    }

    onDataChange(data) {...}
    onEvent(event, data) {...}
}

Adding them as plugins on the AppSmith deployment.

[riodeuno]

@jmaister We have a contribution guide, which has a video demonstrating the mechanism in which we can convert a component into an Appsmith Widget.

The process is similar to what you have suggested.

[Nikhil-Nandagopal]

Another user on intercom asked about this option

[UMUTBAYGUT]

Is there any news about it ?

[Nikhil-Nandagopal]

@UMUTBAYGUT we don't have this planned yet. Is there a specific custom widget you're looking to integrate?

[josh900]

@Nikhil-Nandagopal , This is a really amazing tool, and we are quickly putting it to use, however, I wanted to mention 1-2 things that would take it to another level for me:

• Any method to edit the underlying code of any appsmith widget, to make modifications to the robust template you provide, or
• A more robust method of creating custom html/css/js widgets in a page than the current src iframe.

per this issue: https://community.appsmith.com/t/using-query-in-iframe/561

[willmartian]

(Taking some inspiration from prior art, Wordpress custom Gutenberg blocks: https://github.com/WordPress/gutenberg-examples/blob/trunk/01-basic-esnext/src/index.js )

For interoperability and future proofing, I would want custom widgets to support the usage of custom elements/vanilla JS+html more so than React components.

Thinking out loud... Given a custom element definition, myComponent.js

import { MyComponent } from "myComponent.js";

defineWidget("My Component", {
  src: MyComponent,
  icon: "myComp.png",
  edit: "<my-component editing>Hello world (in editor)</my-component>",
  save: "<my-component>Hello world</my-component>"
});

Thoughts?

[Nikhil-Nandagopal]

@willmartian that sounds cool but we're thinking more along the lines of what if we didn't even need to write the code in another IDE and could code the entire widget inside Appsmith? Check out what someone tried to achieve here in an iFrame https://community.appsmith.com/t/using-query-in-iframe/561 We're wondering how we could improve this experience so we could write the entire component in the browser!

[manikumarnune123]

+1

[Nikhil-Nandagopal]

@manikumarnune123 could you mention which widget are you looking to add?

[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