Generating a random UUID in the mobile phone application and then insert it into the form using javascript within the webview

User Support Form Building
,
1

Thanks for this, I have now tried a different approach, which is to generate a random UUID in the mobile phone application and then insert it into the form using javascript within the webview. If anyone else is trying to do this and needs more details I am happy to explain more.

John

1 Like
2

Hi @johnrbpalmer,

Would love to hear as it would get documented in the forum and the community would benefit from the same.

Have a great day!

3

OK, this is the javascript that I am using, with XXX as a placeholder here for the random UUID assigned by the app and userUUID as the name given to the text input element on the form. (This is a combination of the name used for field in the XLSForm and the random string assigned to the form when it is published. To figure this out, my approach is to first publish the form, then view it in a browser and look through the source code to see how the element is named.) The key is that simply changing the value of the text input is not enough (presumably Kobo is placing some additional javascript in the form that ensures an entry gets sent to the server only if the user has actually touched it). So I change the value and then dispatch an event from the entry, and this does the trick. (I am also hiding the text input from the user so they cannot change it manually, but I am displaying the UUID as a label so they can see it has been set (and I can test this in the app).

   var event = new Event("change", {bubbles: true, cancelable: true,}); 
   var this_input = document.getElementsByName("userUUID")[0];
   this_input.value="XXX";
   this_input.dispatchEvent(event); 
   this_input.style.visibility = "hidden"; var id_labels = document.querySelectorAll("[data-itext-id=userUUID_label]"); 
   for (var i = 0; i < id_labels.length; i++) id_labels[i].innerHTML = "ID: XXX";

I am coding the app in Flutter and injecting this javascript into a webview that uses the flutter_webview_plugin. The full code is here:

2 Likes