Execute scripts in the html viewer custom widget

Showcase
1

I just discovered a way to execute HTML <script> tags using the HTML Viewer Grist Widget.

Instead of selecting HTML viewer in the list of available custom widgets, enter the custom URL:

https://gristlabs.github.io/grist-widget/renderhtml?tags=script

This is an undocumented feature of this widget, which I only discovered by reading the source code of the widget.

I had been desperately trying to render Mermaid.js charts for a long time, without success, but now I finally got it working with the HTML viewer plugin!

This is the text which gets passed to the HTML viewer widget:

<pre class="mermaid">
flowchart LR
  markdown["`This **is** _Markdown_`"]
  newLines["`Line1
  Line 2
  Line 3`"]
  markdown --> newLines
</pre>
<script type="module">
  //alert("hello");
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  console.log(mermaid);
  mermaid.initialize({ startOnLoad: false, theme: "dark"});
  await mermaid.run();
</script>

And it gets rendered!

Here’s a screenshot trying to capture it all on one screen:

image
image1598Ă—510 31.5 KB

Anyway, just wanted to share this in case anyone else had been struggling with the same thing for a while.

4 Likes
2

Hmmm… that’s very interesting. Of course, you coded everything DIRECTLY on the html code.

But I guess you can make it like a formula and have code replaced by references to Grist data.

That would allow to use Mermaid Gantt Charts, for example

3

Yeah! There are many ways to make this better, and converting this into a formula, and using data from the tables, would be a step in the right direction.

Ideally I would create a full-fledged custom widget for mermaid diagrams, which I’ve tried to do before ( Link to Code ), but I haven’t had much luck, which is why I was so excited when I got this working.

4

For similar needs, I recently checked through this list of open source Dashboard apps and also this one. Out of which tipboard seemed to be most matching counterpart of this commercial metrics dashboard tool.

Some kind of “Metrics Blocks” parallel to already existing widgets for pages could help to build dashboard pages inside Grist.

5

Mission successful :sunglasses: :arrow_forward: Mermaid Charts Integration

1 Like