Custom Widget - Excalidraw & Grist- a nice combo

[Sylvain_Page]

Hi Great Grist Community !!

I am very short on time but cannot wait to share this custom widget enabling Excalidraw to be used in Grist :

Here it is :

Excalidraw 0.15.2 without image - Grist

I hope it will helps, I wanted so much to give a feedback of all you did for me !
Have a nice week-end

note : public editing enabled → avoid crashing the widget in the html tab

Bye

[paul-grist]

That’s pretty neat! I like the way Excalidraw looks. I had a little trouble saving until I realized I needed to be on a row that already exists, the grey “new” row doesn’t work. That might be something we need to streamline on the product side.

[Sylvain_Page]

I’ve made an updat with excalidraw 0.17.3 and to enable images.
(not possible in previous plugin)

It is now possible to include correctly an image inside a drawing, I must admit it was a pain, working with IA (issue with mixing reference while saving in grist column. It ended to manual saving process for simplification end robustness).

It is more aligned with latest excalidraw release + enabling inclusion of image was a must.
Additionnal function would me maybe to automatically save .png in a dedicated field.

Top of top would be to be able to include fields of grist directly in the drawing.

Hope it helps.

Ooops link here → Excalidraw & Grist Waow ! 0.17.3 + images - Grist

[Rogerio_Penna]

What is the difference between Excalidraw and “Grist Waow”?

[Sylvain_Page]

Nothing I just wanted to say Exvalidraw and Grist make a nice combo .
The main idea is to be able to sketch drawings and link them to a specific table with easy updates.
I find it useful to have a whiteboard available—small sketches are sometimes more explicit than long descriptions or raw data.

[Igor_Tolstov]

what is widget link ?

[Sylvain_Page]

Hi,

There is no repo for the widget, all code is inside the html tab of the set-up of the custom-widget-builder:

New community widget - Custom widget builder

Not to get too meta, but you can now use a custom widget to build custom widgets! [custom-widget-builder] Developed by @jarek (who does work at Grist Labs), who has been using this widget to build and test widgets on the fly. Think of it as a “widget fiddle”. Build with HTML/JavaScript. Documentation available within the widget itself (via “Open Configuration” > “Help”). Remember to save your work, as there’s no autosave! Now available as a community widget within Grist: [custom-widget-bu…

[Rogerio_Penna]

open the link he provided. Select the right widget. Open the Properties panel on the right. Click Open Configuration (green text “Abrir Configuração” in my Grist)

Copy the text from the HTML and JS tabs. (in this case, only HTML tab is being used, but in others, both tabs may be used so better to get used to always copy both just in case)

In your Grist, create a new widget, select a table it will connect to, select CUSTOM type of widget, select Custom Widget Builder, open it’s configurations and paste the copied code in the appropriate tab.

[Dynnammo]

When applying all the specified config above, it displays the Excalidraw panel fine, but the data in the ‘excalidraw’ column aren’t updated.
Edit : I also tried with the 0.17.3 version, but the save procedure doesn’t seem to work both on the demo and when applied in my Grist instance

[Sylvain_Page]

Hello !
Can you please share your page ?
Did you make try duplicating the widget in your own account ?
I just check version 0.17.3 it works correctly

When you push the button save it will shortly show saved and the widgtes refreshes.

Also :
Keep the excalidraw column (type text) I did not map the name of the column in the widget so if you rename it or change it won’t work.
And do not forget permit the widget to write in exclidraw column

I think the best will be first to duplicate the document with the widget

And finally prefer V0.17.3 though savings are done manually as it uses last excalidraw librabry.

I will try to create a dedicate repo + serving page + cleaner architecture in the future.