Kanban custom widget

Hi !

I’m happy to share with you a new custom widget that has been developed with the French Community last few weeks.
But firstly, I would like to thank @celine_delval who initiates this project, proposing the first design.

No need to present what is a Kanban, but here are the main widget features:

  • Dynamic columns: list, order, title and color depend directly on table configuration.
  • Possibility of adding new tasks directly in the widget
  • Possibility of editing tasks directly in the widget
  • Drag-and-drop cards from one column to another
  • Cards can be reordered within a column
  • Customize general display and cards

As usual:

Hoping this widget will help you with your task management !

6 Likes

Hi Varamil,

thank you for this nice custom widget. Just tried it out and it work really well.

I have one proposal/feature request though:
In my use case I have some additional columns with data associated with the task that do not fit the fields used by the widget. Since they do not need to be visible on the kanban view directly that is not really a problem for me. But I would like to be able to edit them when I select the task on the kanban. So my proposal would be that the widget returns a record identifier to grist when I click on a task so that I can design my own edit form in another widget (table, card, whatever) instead of opening the widgets own popup. Basically the same behavior like the calendar widget.
Do you think that would be possible to implement? I think it would be more versatile this way. Maybe you could also introduce an option in the configuration to choose between this approach and the integrated edit pop up.

Thanks again for your great work!

Hi @Hendrik_Bruttel, thank you for the feedback.

What you would like is the Kanban be a selector for any other linked widget? I think it’s possible.
And in addition, you would like an option to disable the edit popup on card selection?

Let me see what I can do.

Hi Varamil,

Thank you for your fast reply and your openness to my suggestions.

I set up a small demo document that hopefully makes it more clear.
https://docs.getgrist.com/eTsLvXEkNaJk/Demo-KanbanCalendar-Widget?utm_id=share-doc

In the “Calendar View” I can click on an event and edit the corresponding row in the linked card widget on the right side. That gives me the possibility to associate all types of columns and data that Grist supports, which makes it very flexible.

In the “Kanban View” I cannot link the card widget to the Kanban widget and therefore it just shows all entries.

The edit popup of your widget does not provide this kind of flexibility since it is limited to the fields/columns you prepared (which are actually already quite a lot). Examples for fields I use: attachments and a reference list for team members (not just one person in charge). And also your popup does not seem to adhere to the dropdown filters for reference fields. When I edit the task/event in there I can choose every person instead of just cooks for meals and consultants for appointments in the example.

One thing I am not sure about is how to add a new task this way. I think I read something in the widget api documentation that you can set the row id to to “new”. I would expect that this would lead to a new record in the linked card widget. But I am not sure if it works like this.

Also one other minor suggestion: the Kanban widget works perfectly fine if I leave the deadline column completely empty (like in my example document) but it is still a mandatory column. I feel that it should be optional and just status and task should be mandatory. In one of my potential use cases all tasks would happen on the same day so the deadline date would be useless.

If these changes would be possible that would be awesome :slight_smile:

Hi @Hendrik_Bruttel

I think I understand your request, and I guess all widgets should be configured as either a selector or a filter to allow linking, so I’ve quickly corrected this mistake! :slight_smile:

Regarding the new cards, it simply creates a new card in the column where is the button, then the linked widget gets the new row ID. So, you cannot cancel the addition, but it’s easy to delete.

Just a remark, have you seen the TAGS column? Which let you add any column to the widget/editing form. Of course, it handles as it can the columns, but may help for some simple cases.

For information, the API is limited, and you haven’t all the features available in the core. About the dropdown filtering, I think I can retrieve the formula that filter the list, but it’s a Python formula whereas widgets are developed in JavaScript, so it needs to convert language. Moreover, the API doesn’t provide the dropdown content, I need to build it myself based on some document metadata not really documented. It should be great to have the filtering feature on the widget side, but right now it looks not possible.

Regarding the deadline, this is used for the card ordering, you can drag’n drop cards in the same column to force the “priority” (when no specific date is given). That’s why I firstly let it as mandatory, but probably can be OK to disable it if deadline is not set. I’ve to check the code.

EDIT: new release with the DEADLINE as optional.

Hi @Varamil ,

thank you so much. I tried it out it works very well for me!

That is kind of unfortunate that the api does not provide the filtered drop down choices. Maybe they should add that.

I saw that the calendar plugin also had an option to open the internal grist record card on double click. With that of course all of grists core function is available.
Even though my javascript skills are very limited I was able to integrate that as an option. I sent you a pull request for review it.

And yes I saw the tag column, but as I said I have some data attached to the tasks that do not need to be shown on the board directly.

I have a Kanban widget that can do everything you asked. I have not released it only because I was lazy about translating it to English (it’s in Portuguese)

ps: in the topic above I said “as mentioned on Discord, I am developing it on the Widget Builder yet. So it’s not online.”

that was the case at the time, but I made it as several files and thus compatible with Github

My Kanban however probably requires more initial configurations, so there is that, and each one has its own use case.

@Hendrik_Bruttel merged, thank you for the PR.

@Varamil: I sent you another PR for a small feature I integrated. I realized that I could add html markup to the “Task” field which would get rendered in the kanban view. But it makes editing hard, so I introduced an optional field for the actual displayed content that can be used with a trigger formula or a formula field to add additional fields or html markup to the displayed content.

@Rogerio_Penna: I am happy to give it a try. Where can I find it?

@Hendrik_Bruttel PR merged !

@Varamil: thanks. Unfortunately as of today something seems to be broken with the widget. I implemented two instances and both stopped working in Safari and Chrome.

This is the error in the console in the first instance:
widgetSDK.umd.cjs:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘then’)
at f.getMeta (widgetSDK.umd.cjs:1:2908)
at f.getChoices (widgetSDK.umd.cjs:1:622)
at async widget.js:15:315
at async Promise.all (varamil.github.io/gr…kanban2/min/index 0)
at async w (widget.js:15:370)

and this in the second:
widget.js:3 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘getChoices’)
at I (widget.js:3:3368)
at widgetSDK.umd.cjs:10:1875

can you take a look at that?

@Rogerio_Penna : thanks, I will give it a try in the next days.

Hello @Hendrik_Bruttel

I haven’t seen exactly your error, but found another one linked to last changes. I’ve corrected it, could you tell me if you still have the issue?
Thanks!

@Varamil: It mostly works again. But i still get an error if I use additional Tags. All the tasks where the Tag column is not empty are not displayed and I get the following error in the console:

Uncaught (in promise) TypeError: l.forEach is not a function
at O (widget.js:15:1097)
at widget.js:3:3548
at Array.forEach ()
at I (widget.js:3:3528)

@Hendrik_Bruttel it should be OK now, sorry and thank you for feedbacks !

@Varamil : Tags are working now, but now I can drag and drop the cards but the new position/status is not applied in grist.

rah I haven’t seen that the value is not applied on Grist. Corrected. @Hendrik_Bruttel