Action for saving to bubble database from plugin

I am new to bubble and needed to create a map plugin for my own custom need. I need help creating an action on bubble workflow

  • getting the coordinates (longitude/latitude) when the location changes and should be passed to Bubble.
  • Ability to save data in Bubble database via workflow (e.g. writing to fields with coordinates and address).
    For instance in the update part of the element code i have this which uses geocoder to get the location:
try {
            const results = await geocodeAddress(geocoder, address);
            if (results && results.length > 0) {
                const location = results[0].geometry.location;
                console.log('Geocoding successful. Location:', location.toString());

                // Move the marker to the new location
                instance.data.marker.position = location;
                
                // Center the map on the new location
                instance.data.map.setCenter(location);
                
                // Adjust the zoom level
                instance.data.map.setZoom(zoomLevel);
                console.log('Map updated to new location:', location.toString());

                // Update InfoWindow
                if (instance.data.infoWindow) {
                    instance.data.infoWindow.setContent(`<div><strong>Selected Location:</strong><br>${results[0].formatted_address}</div>`);
                    instance.data.infoWindow.open(instance.data.map, instance.data.marker);
                }

                // Trigger 'location_changed' event
                instance.triggerEvent('location_changed', {
                    lat: location.lat(),
                    lng: location.lng(),
                    address: results[0].formatted_address
                });
                console.log('location_changed event triggered.');
            } else {
                console.error('No results found');
                showAlert('Unable to retrieve address for the provided location.', 'error');
            }
        } catch (error) {
            console.error('Geocoding error:', error);
            showAlert('Geocoding failed: ' + error.message, 'error');
        }```

You can’t save directly to DB. You need to return data into a state and user can choose to save data or not to DB using Bubble feature (create/make change to a thing).

So you need to create state (long/lat) in the plugin, use instance.publishState() function, after you can use instance.triggerEvent() function to trigger a workflow (you need to create an event in the event section).

Trigger 'location_changed' event
instance.publishState('lat',location.lat()) 
instance.publishState('long',location.long()) 
instance.triggerEvent('location_changed');
1 Like