[Feature] Reusable Widgets (UI Packages)

[Nikhil-Nandagopal]

Summary

Users want a way to create re-usable widgets that can be configured, styled, and even combined with APIs. This would allow future apps to be built quicker and iterations to propagate to all applications that use them.

Front conversations

[abhvsn]

A user on discord mentioned this feature request : Is there a way to make a widget appear on every page? I am specifically thinking of the menu widget. So I can maintain it on a single place and not have to replicate the structure on every page.

[Nikhil-Nandagopal]

A user left this explanation on the feature in #9628

First off, I'm aware of issue #2033 for adding fully custom widgets. What I'm proposing is a way to take a widget on the canvas, with all of its settings and children, and save it for instantiating wherever it's needed. Perhaps they could be called "Components", and be added as another page-level (or top-level?) object type.

I think the true power of this feature would come from the ability to pass parameters into each component instance from its settings panel, and reference those parameters within the widgets inside the component using this.params or some other method.

Effectively the same concept as React components and props.

[unknown1337]

Dear Nikhil, could you briefly mention the status of this issue? I see that meanwhile quite some people are assigned to this issue. Does this mean that it's being picked up?

[Nikhil-Nandagopal]

@unknown1337 yes this is under active discussion. We'd love to hear about some of your use cases

[ame-appsmith]

Another user showed interest in this feature.

[IAIOMAN117]

I was thinking in the same feature, so far its difficult to replciate the same menu over multiple pages. Actually while dealing with this and tryng to find a workaround, I found 2 features that are lacking and would simplify development. and are get rid of pageids, or at least have a resolver for the page id using the name, and, having 2 way communication on the iframes.

[Nikhil-Nandagopal]

Does anyone have a need for this feature apart from navigation menus?

[charles-bloomfield]

Hey @Nikhil-Nandagopal we have a non-menu use case for reusable widgets. We support a set of internal business entities, each of which has a common set of properties/events/interactions. We have different tooling (eg different appsmith pages) for each of these business entities, but display the common properties/events/interactions in the same way in each tool. Reusable widgets/components would make supporting these reusable patterns much simpler across our different tools!

[Nikhil-Nandagopal]

@charles-bloomfield that sounds really interesting! I'm thinking about this feature and I'd love to chat with you about how we can build it to solve all your use cases. Would you be open to a 30 min conversation? You can block some time on my calendar below if you are. https://calendly.com/appsmith-nikhil/30min?back=1&month=2022-09

[dilippitchika]

@unknown1337 @IAIOMAN117 @mingfang @wemod123 @grinono @charles-bloomfield

we are working on a feature to provide more options for appsmith's default navigation. If navigation is one of the primary reasons for you to use reusable widgets, then can you please let us know?

Would you be open to a 30 min conversation? You can block some time on my calendar below if you are - https://calendly.com/dilip_pitchika/30min?month=2022-10

[davidlehub]

Would love to have that feature, in my case, been able to show the same table on different pages. Currently i have a table that is showed on a modal widget of the home page, but I'm stuck there bcz I don't know how to show the same table on another page, without having to manually recreating the same table.

[sandeepsabat]

@Nikhil-Nandagopal ,I would like to check if the above issue has been picked up and if yes when is this likely to be rolled out. My use cases for such a widget are few:

• Menu side bar
• Application Header
• Application Footer
• Similar data structure Card Objects ( which could be arrays of objects)

Overall I feel this would a very useful feature for many people because such widgets can be managed from a single location and used in multiple places. Furthermore, if the widgets are allowed it to be parameterized so that it can take a parameter and can change itself based on the parameter then that would make it even more powerful. For example, using a parameter value to make one of the text component within the widget disabled or invisible. Or even changing the the text labels based on the parameters.

So let me know what you think of this and when can this be likely rolled out.

[dilippitchika]

Hey @sandeepsabat we have already started work on sharing widgets and we plan to launch our first version in Q2 this year. Thanks a lot for adding all the information, can I know what do you currently show in application header and footer? I wanted to understand if there's a way to simplify this workflow better.

[sandeepsabat]

@dilippitchika , thanks for the info. Is it possible to advance the timeline by any chance? We are in the process of developing our product and this feature would help reduce the complexity.

• To answer your questions, currently the application header has the following:

  • background container
  • logo
  • user name (along with welcome message)
  • logout button

• The footer has a "copy right" message and a "power by" message.

Currently I copy and past them from one page to another. But the challenge is if I make a small change also, I need to copy past again. Another big problem is the menu sidebar. This one keeps evolving as we add more pages. Again currently I am copy-pasting from one page to another, but not a very efficient way to manage the widget. Also the menu bar need to have links to other pages enabled (except for the link to the current page). Here a parameterized widget can come on handy, where I can pass a value to conditionally disable a link. Hope this gives more clarity on the use cases.

[dilippitchika]

We are soon going to ship a version where you can use side navigation in appsmith (March 3rd week), but I am afraid we cannot ship the reusable widgets anytime sooner as we have to scale our system to work across all spectrums of reusability.

[ghost]

Hi - is there any new progress on this issue?

Our case is the following: we have a system designed and implemented as a one-pager, which now has to be split into multiple pages as we work on scailing the application. But this means recreating all the widgets and subwidgets manually, which is going to take a lot of work. Cloning the page and removing excess widgets for each new page is not within reach, because the Appsmith API times out 20 seconds after clicking the "Clone" button.

So, do you plan on implementing widgets and queries which are reusable across pages? And if yes, what is the timeline here?

[nvcnvn]

In my use case, we have simple CURD app which the create & update somewhat similar with each other. I love to have the ability to create a Modal/Page/Widget with the form and inputs needed then some how reuse them with only changing the API call.

[nvcnvn]

Another use case of me is a common header / footer that I want to share between all the pages. Should be god if we can just build the common header bar without the need of writing react component.

[dilippitchika]

@nvcnvn @czarlito thanks for adding your feedback. We will be testing our design for this solution soon, will you be interested to help us test this? If yes, please let me know and i will suggest slots.

[nvcnvn]

@nvcnvn @czarlito thanks for adding your feedback. We will be testing our design for this solution soon, will you be interested to help us test this? If yes, please let me know and i will suggest slots.

@dilippitchika yes sure, really great if I can see how it works

[dilippitchika]

📢 Hey everyone! We're working on the reusability feature for widgets, queries, and JavaScript, and we need your help to test the designs for the feature. Please let us know if you are interested. If you are, please go ahead and book a slot here for 1st week of may: Link 🙏

CC @nvcnvn @czarlito @sandeepsabat @davidlehub @charles-bloomfield

[nirkons]

I am also awaiting this feature, my use case is a search bar that is present at the top of every page, currently i have to copy paste it and the modal it shows with the search results, but every change i make i have to manually update every page :(

[dilippitchika]

Thanks for letting us know @nirkons currently we have started working on this. We will let you know about the release timeline soon.

[sandeepsabat]

@dilippitchika , can you please share an idea about when this feature is going to be released. It is almost 8 months since I first pointed to the issue. Without this capability building a proper application on Appsmith is quite cumbersome. A small feature addition or a minor change becomes a major project. Please consider prioritising this feature at your end.

[dilippitchika]

@sandeepsabat this feature is taking longer than expected because we are also building for the scenario where it can scale beyond just one application. We are under active development and will be launching a centralised update on this feature soon enough informing our timelines.

[justinzyw]

looking forward to this feature

[Nikhil-Nandagopal]

@justinzyw we currently have reusable code and are working towards reusable UI. Would you be interested in doing a few usability tests with us?

[justinzyw]

@justinzyw we currently have reusable code and are working towards reusable UI. Would you be interested in doing a few usability tests with us?

sure thing. how can I help?

[pedro-santos-rodrigues]

Hello @justinzyw ,

Thank you so much for your availability. Could you please try to find a 30 min slot that suits well in your agenda using the following link:

https://calendly.com/pedro-appsmith/appsmith-reusability-beta-research

If you're not able to find a time that is convenient for you, let me know and we can adapt. Thank you again.

[richardwhatever]

i just want to build reusable UI elements to create master pages and template style structure... if I change a link on my header I shouldn't have to go through 25 pages updating it on each.