Fetched geo-location data from browser to the UI fields are not retained after save

Support
#1

Hi, I’m working on a small project where the employee’s geo-location, i.e., the latitude and longitude fields should be auto-filled by clicking the “Generate Geo-location” button.

Screenshot 2

I’ve used javascript in the Java controller to fetch coords data from the browser to the respective fields but when I press “OK”, the values are not saved, leading to an instance created but without the geo-location data.
Screenshot 3

These are the attribute settings for both.

Screenshot 1

How can I solve this?

#2

Hello,

I’ve used javascript in the Java controller

It depends on how you did that. If your JavaScript code only puts text directly into vaadin frontend, then Jmix component value may not be updated. Did you use .setValue method in your code?
https://docs.jmix.io/jmix/flow-ui/vc/components/textField.html#value

Another thing to try that comes to my mind, is to update the edited entity field with its setter, something like myAttendLog.setLocationLatitude() .

Kind regards,
Mladen

1 Like
#3

Hello Mladen,
I’m trying this way. But I see that the Java method is not getting called from JS. How can I do this?

@Subscribe(id = "generateLoc", subject = "clickListener")
    public void onGenerateLocClick(final ClickEvent<JmixButton> event) {
        notifications.create("Generating Coords...").show();
        String script = "function getLocation() {" +
                "    if (navigator.geolocation) {" +
                "        navigator.geolocation.getCurrentPosition(showPosition);" +
                "    } else {" +
                "        showErrorMessage('Geolocation is not supported by this browser.');" +
                "    }" +
                "}" +
                "function showPosition(position) {" +
                "    var latitude = position.coords.latitude;" +
                "    var longitude = position.coords.longitude;" +
                "    updateFields(latitude, longitude);" +
                "}" +
                "function showErrorMessage(message) {" +
                "    alert(message);" +
                "}" +
                "function updateFields(latitude, longitude) {" +
                "    var latitudeField = document.getElementById('locationLatitudeField');" +
                "    var longitudeField = document.getElementById('locationLongitudeField');" +
                "    if (latitudeField && longitudeField) {" +
                "        latitudeField.value = latitude;" +
                "        longitudeField.value = longitude;" +
                "        saveToDatabase(latitude, longitude);" +
                "    } else {" +
                "        showErrorMessage('Fields not found.');" +
                "    }" +
                "}";

        event.getSource().getUI().ifPresent(ui -> ui.getPage().executeJs(script + "getLocation();"));
    }
    private void saveToDatabase(double latitude, double longitude) {
        AttendLog attendLog = dataContext.create(AttendLog.class);
        attendLog.setLocationLatitude(latitude);
        attendLog.setLocationLongitude(longitude);
        dataManager.save(attendLog);
    }

Regards,
Tahsin

#4

This is shown:
Uncaught ReferenceError: saveToDatabase is not defined

#5

I see.
You are executing JavaScript code, and that is running inside the browser, on the client side.
JavaScript doesn’t have access to saveToDatabase() because it’s on the server side.
You need to provide a way to communicate between those 2 layers.

One way is to have a REST endpoint that JavaScript can call. If you go that way, be sure to set CORS properly.

Another way would be to make your own component, e.g. geoCoordinates, by integrating text field and whatever is getting you the navigator.geolocation.getCurrentPosition().

Check this:
https://demo.jmix.io/ui-samples/sample/custom-component
https://demo.jmix.io/ui-samples/sample/custom-component-js-library

Kind regards,
Mladen

#6