Hi, new here!
I’m prototyping a little idea on Grist as a custom widget, my plan being that if it works well, I’ll share it in the future as a reusable widget.
It’s basically a new view that shows the content in a different layout that’s useful for a certain kind of data.
Each cell in a text column will be displayed inside a <textarea>.
So far I managed (in many hours as I’m not a developer) to create the view, using JS such as:
grist.onRecords(function (records, mappings) {
const rowsContainer = document.querySelector("#rows");
const rowTemplate = document.querySelector("template#row");
for (let i = 0; i < records.length; i++) {
// For each row
const frameData = grist.mapColumnNames(records[i]);
const currentRow = document.importNode(rowTemplate.content, true);
const fieldsContainer = currentRow.querySelector(".fields");
const fieldTemplate = document.querySelector("template#field");
for (let j = 0; j < frameData.fields.length; j++) {
// For each cell
const currentField = document.importNode(fieldTemplate.content, true);
if (frameData.fields[j]) {
currentField.querySelector('textarea').innerText = frameData.fields[j];
fieldsContainer.appendChild(currentField);
}
}
rowsContainer.appendChild(currentRow);
}
});
This displays all the data in my template, which works well.
My next step is making it editable. I’ve seen examples like the Markdown editor but that’s too complex for me to understand and for my use case.
What would be the simplest vanilla JS code to make it so that, in my case, any edit in the current textarea actually edits the data? I’d be interested in any pointers or code example if you have ideas on how to do this!
Thanks!!
ps. I also want to add widget linking, and not sure where to set grist.setCursorPos.
pps. I’d also love to be able to 1. add new rows and 2. change rows order from my widget, if you have any pointers on how to do that, I’m all ears, thank you!