[SOLVED] Trying to store back values into the table

Developers
1

Dear all, I am trying to build my first Grist custom widget and I am stuck at this: I have a table with 2 columns for “original” latitude and longitude coordinates, and 2 columns for modified lat & lng. The map on the right displays a marker with the original coordinates and, when dragged, it reports back the new coordinates as lat and lng variables. I would like to update the 2 columns on the table to the left with these updated coordinates.

This is a trimmed down version of the code with only the necessary elements:

grist.onRecord(function(record, recordId) {

// gets values from records
const valorLatitude = record.Latitude;
const valorLongitude = record.Longitude;
const valorLatitudeEq = record.LatitudeEq;
const valorLongitudeEq = record.LongitudeEq;

// creates marker from original coordinates
if (valorLatitude && valorLongitude) {
    currentMarker = L.marker([valorLatitude, valorLongitude], {
        draggable: true // allows dragging
    });
    map.setView([valorLatitude, valorLongitude], 19);
    currentMarker.addTo(map);
    currentMarker.bindPopup(valorCodigo);
    currentMarker.openPopup();
	
	// assigns coordinates after drag to lat and lng variables
    currentMarker.on("dragend", function(e) {
        const {
            lat,
            lng
        } = e.target.getLatLng();
		
		// I understand this does not work, need to access Grist API somehow to store lat and lng back to the modified coordinates columns
        record.LongitudeEq = lng;
        record.LatitudeEq = lat;
    });
}

});

And a diagram of the UI. All help appreciated, thank you!

image
image1243×563 34 KB

2

Solved:

currentMarker.on("dragend", function(e) {
            const {
                lat,
                lng
            } = e.target.getLatLng();
            output.textContent += `\nUpdated: ${lat}, ${lng}`;

            const table = grist.getTable();
            table.update({
                id: record.id,
                fields: {
                    LatitudeEq: lat,
                    LongitudeEq: lng
                }
            });
3

Glad you solved it. Just a minor nitpick: table.update() is async, so ideally you might want to turn your above code into:

currentMarker.on("dragend", async (e) => { ... await table.update({...}) }); //note the addition of 'async' and 'await'