Hey FileMaker Devs! I've been using a lot of different JS libraries in Appsmith lately, and I wanted to see if I could get the same thing working in FileMaker. This was my first attempt at using a web viewer for anything besides displaying an external site.
There are lots of other cool charting and graphing options available in Mermaid.js! It's really easy to get the charts working with the text from their examples on the website. The tricky part is looping over your data to generate the chart text. I ended up using a combination of ExecuteSQL(), Let() and While().
5 Likes
Thanks for sharing @greenflux. Extremely cool!
2 Likes
does it work offline or is it possible to get it working stand-alone?
1 Like
@FileKraft , it should work offline, if you store the Mermaid.js script locally instead of importing it in the HTML.
Just replace this line:
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
with this:
<script>MERMAID_SCRIPT</script>
Then open the script link, and store the script in a text field. Then substitute it in with the HTML the same way as the other fields.
3 Likes
An alternative which I have started to use is to store the code as a text object placed off the visible layout area. Give it a unique name, such as "mermaidJavascript" and in your web viewer you can include it using GetLayoutObjectAttribute("mermaidJavascript" ; "content" ).
Mermaid is very cool. I think it may be supported here in discourse. I added the SVGbob tools (at the bottom of the cog menu when you are composing a message) because I love ASCII art.
--edit, we don't have mermaid support yet.
2 Likes
That's a great tip, @Malcolm ! I always disliked having to add a new table and field just to store text, but the alternative of dealing with escape quotes in a calculation is even more of a pain in the long run. This is a great alternative for importing a javascript file. I'd definitely be using this next time!
1 Like