ChartJS integration in fmbetter forms

Support
1

Hi

we are new to FMBF… evaluating the tool since 10 days now (2 devs, one with average html/js backgrounds)…

so far we were able to build a simple mockup for a mobile app to access our business application…
we are able to manipulate lists, forms and master detail due, and store datas to avoid reloading when navigating from list to form…

the first question we have is how to implement the chartJS library (with vue-chartjs). we are very familiar with this tool we use for a long time in our FileMaker Solution

we know how to do it in a classic web environment using visual code, but we don’t see how to put it or connect it with FMBF

does a doc or tutorial exists somewhere

thanks

2

ChartJS is much like other libraries in BF

A CDN needs to be added to the DOM header insertions

Here is a similar example using Apex Charts.

Schema:
https://examplesdev.fmbetterforms.com/#/form/FR_6474D1C2-7A42-E34C-90C6-C9E7E1BEA006

Live example:
https://examplesdev.fmbetterforms.com/#/form/FR_6474D1C2-7A42-E34C-90C6-C9E7E1BEA006

Then typically in the onFormLoad actionScript in BF you would run some JS that invokes the chart.

The example I added does not need to initialize the chart library because it is already a Vue component. You could use Vue-chartjs or just the ChartJS CDN directly.

The docs also have an example of using third-party libraries here: Adding Custom Page Elements - FM BetterForms

For the fastest reply post your questions on Slack!