We use one of the Airtable apps called “page builder” to do the similar thing like custom widget invoice in Grist. But instead of custom code the page, Airtable offers drag and drop the “fields”. so I know exactly the data is coming from which field. Right now we are trying to code the same thing in github page but don’t know how to code to match the Grist field. Can you help? thanks
Hello @dexter and welcome to the community!
There are a couple of stages in getting data from Grist to the widget. A Custom Widget is essentially tied to a particular table of data, and to the fields selected for it (though it could be given access to the rest of the document as well). Configuring this is described at Custom Widgets.
In addition to selecting a table, you also typically select “Visible Fields” (for this custom widget), which will be the only fields it receives for the selected table. Here’s a screenshot of the configuration of the Invoice template, with the list of visible fields highlighted:
That determines what data gets to the widget. The super-simple widget shown in the documentation provides a good way to understand this part or to try it out. (Some of this isn’t as polished as we’d like and we’ll have better ways to do it in the future, which is why the feature is still marked as experimental.)
The next part is how to get this Grist data to show on a webpage.
For most of Custom Widgets that we’ve created for our templates (such as Invoices, Mailing Labels, and Purchase Orders), we’ve used Vue.js library, which makes it simple to get data into a webpage dynamically. You can use any library (e.g. React, JQuery, GrainJS), or no library at all, but if you are starting out without a favorite way to build dynamic pages, I think Vue.js is a good fit for building custom widgets.
The Vue.js library is documented here: Introduction — Vue.js. You need to include the library code (you can see how its done in our widgets, e.g. here), use certain tags in HTML to refer to the Vue “app data”, and use Javascript to update this “app data” when you receive data from Grist.
To make it all work, it’s definitely a good idea to read Vue.js documentation, at least enough to understand the basics of how it works. For using Javascript to get Grist data and update Vue with it, it’s best to refer to the source code of publicly-available widgets.
I hope this helps you build what you are looking for!