Image for post
Image for post

Using Javascript to retrieve values from a Xamarin Forms WebView

We are currently in the middle of re-building our existing mobile app. Probably the most important form in the app is the Vehicle Inspection form. This form allows a driver to fill out a vehicle inspection from their mobile device and to submit the results. In our current app (which is an Apache Cordova hybrid app developed using Javascript in conjunction with Kendo UI controls) we generate an HTML page from the inspection metadata. This allows us to use all the HTML controls such as

- textboxes
- checkboxes
- dates
- radiobuttons
- dropdowns

We then capture the driver’s responses using Javascript, and submit these responses to our backend system.

Our current mobile app however is being developed using Xamarin Forms. All of our form controls use Telerik UI controls. We knew we wanted to replicate as closely as possible the implementation of the current app. The vehicle inspection is a critical piece of functionality, and it works extremely well. The challenge therefore would be to try to find something that replicated this same impementation in Xamarin Forms.

Whilst investigating how we would reproduce this I came across the WebView. This is a view for displaying HTML content inside the app. Unlike the OpenUri() method wich navigates the user to a web page using the app’s in-built browser, the WebViewdisplays HTML content “inside” the app. This sounded like what I needed.

Generating the HTML to render the vehicle inspection was the easy part. I had this working quite quickly. Using the same logic for creating the HTML controls in our existing app (which uses Javascript) I was able to mimic this using C# to achieve exactly the same output in the current app. The problem came when I wanted to sumbit my responses. I looked at the simple example on the Microsoft documentation, but this didn’t provide nearly enough clarity of how to proceed. I tried injecting Javascript functions into the generated HTML but this only seemed to work for functions that didn’t interact with the DOM. However, to retrieve the responses required interaction with the DOM.

There doesn’t seem to be much information anywhee on this particular topic. I looked through the usual suspects (Stackoverflow, Xamarin forums) but to no avail.

I then stumbled across an article that went into a lot more detail on how to Use Javascript with a WebView[^]. Reading through this and looking at the example code gave me sufficient knowledge to work out how to retrieve the responses from the HTML generated vehicle inspection.

Here are the functions I wrote that enable me to retrieve the responses.

Hide Copy Code

I have now got this working and am able to submit the responses that have been entered into the HTML generated vehicle inspection.

A father, cyclist, vegetarian, atheist, geek and multiple award winning technical author. Loves real ale, fine wine and good music. All round decent chap.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store