Tiger Squad

Dashboards

Forms

Messaging

Explore

Cross-platform Architecture

Current State Mobile, Q1 '24

Last edited 140 days ago by Douglas Sheridan

Summary

The mobile app is already using the existing Survey Engine that was used to build the COVID-19 Eligibility Survey. The app is using the component, CovidVaccinationSurvey.tsx to display the WebView that ultimately loads the Survey Tool’s remote content.

How it works

Backend

The API team has developed a backend with admin frontend tool that enables admins to login and design forms using a web based GUI through their browser. Forms are built and published in the web GUI and exposed via an API and custom domain.

Srini has created an example form for us already that uses all of the existing form inputs, as a demonstration to the business stakeholders and designers what all exists already. This is an effort to help the designers figure out how to re-use existing form inputs vs. building from scratch.

The demo form is hosted here:

https://surveytest-v2.bswhive.com/⁠

⁠

Screenshot 2024-03-18 at 11.01.56 AM.png

⁠

COVID-19 Eligibility Form

For the COVID-19 vaccination clinic visit flow, the URL that gets loaded into the mobile WebView is:

https://surveys-tst.bswhealth.com/Covid/VaccinationSurvey/f2954f8e-cf3b-4008-bb18-c1da1dcdf10a?UserId=E10&ExternalEventId=covid2021&Age=69&Platform=MOBILE&firstname=Adult

Let’s explode this URL out into its components:

Base URL: https://surveys-tst.bswhealth.com

Route path: /Covid/VaccinationSurvey/:survey-id?

URL params:

:survey-id : f2954f8e-cf3b-4008-bb18-c1da1dcdf10a

Query params:

UserId=E10

ExternalEventId=covid2021

Age=69

Platform=MOBILE

firstname=Adult

The headers passed to the WebView is just a single cookie with the following shape:

{

"Cookie": "consumer_cookieTST2=5fCqXB-9lVH-bhwuqsLukP4QMe3XL1uYwLYJI-zSmI1nNh7CVhjpXAH6COMzU7Ecgq2fqoZaTDqSs8z177gsFn1o4npQrGaaYyaVtoucrRKfT47RPk46QNx2eJuWG2tKiqb7bR2t1H3dGIdjsALhG11FtZ_Daj82fPrTwa2NSPtshWxVHcxqNeAu5KUSvC4dvUqWfBkK2zrcCfnylUCpaT1WiNZKWtLPL53I1JQAF_gmrLhjXd0ae3o4sWv8aTo2BHALAWnXF_w5tROa-K8uRApIqE0YTFN_F8pj6b23C6qbT3eEEY96EsB81ni6eYvNJrhV65RQd5zE6abH9-dxlqSYSgBbWtcNYnOZQoF-dQC1dvVAGNnfSi2HVZPDCfurHTuqM5UVHhMqCAEnhwZoVHi_y9ubaTtFvE84y3LIBJrKwON6ABX6GF856-Rby1cpsdjJ9rD25_07uykhQEoxmBhwv74zi88OLwPQqKDPTl0gbf931hQ8bRIWJ-8Dq66BMb8_DHomtrWkHlHg-6UU9NWoJ-upLxUm_KatSeJiM9E437-rxPRPWlNUpsSyklcj_Y0pegkF8vGz7sUJEMrpFRIFR_JD_c1OHrZoLEJNb3ry1iPRKfwlYrMx3cm4Z7N9KHd1VUUimiX5KPH0QBwu2sTPfPJxhjKlSUKqGf8sZvrAipLqjG-gCr4bJnmjErqdfn-EYK09rt58wO7qApf-h04a7ZF2LtDRWDvpddd40RpgSbB7HOVkahB8CbOucflfrQRhq-E1PYqOB6lb9hH9RBFCVVEZLAQKz8H9mhY6-idYw1zs4Kt28iTbKniE_mxFECKjuRHKobMuHNxclO0yth4VoLB7fytrSawUEvqw1HQTI8PyaFCoNBiFhXFBybAUoSwIo7vqZAmzeo7zDwIsg2S6ofwwLFlcR_ia2Hh9VjYS3ypAMzn2MBFCbW4qUsodRBmMcwCdCQz1zL8IfPqb1n1FW-2lZQ8YCbN6fNn8_T4; Path=/; SameSite=None; Expiration=Mon, 18 Mar 2024 19:12:09 GMT; Domain=.bswhealth.com; Secure"

}

Mobile Frontend

The mobile frontend is taking the URL that renders the form and displays it inside of a WebView component. You can see the implementation of this by going to the file: CovidVaccinationSurvey.tsx

<WebView

ref={(web) => (this.webView = web)}

javaScriptEnabled={true}

source={{ uri: this.state.initialUrl, headers: this.buildHeaders() }}

onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}

onNavigationStateChange={this.onShouldStartLoadWithRequest}

renderError={this.renderError}

onError={this.onError}

onLoadEnd={this.onLoadEnd}

startInLoadingState={true}

renderLoading={this.renderLoading}

To navigate to this component to debug it, you just need to go to the COVID-19 Scheduling flow for a visit to a clinic. Note that this won’t work for in-home vaccine scheduling for COVID-19 as that flow is using a different implementation that doesn’t involve the existing Survey Engine.

To start the flow, you need to first enable this feature-flag in configData.json :

⁠

Screenshot 2024-03-18 at 11.17.46 AM.png

⁠

"scheduling": {

...

"enableCovid19VaccineScheduling": true,

...

}

Once the feature-flag is enabled, refresh the app and login. Scroll down on the Dashboard until you see the now-visible “COVID-19 →” card:

⁠

Screenshot 2024-03-18 at 11.20.00 AM.png

⁠

Once on the COVID-19 Care Landing Page, you’ll want to select the “Schedule Vaccine” option:

⁠

Screenshot 2024-03-18 at 11.21.06 AM.png

⁠

A bottom sheet will appear with options. Pick the “Clinic Visit” here, since as mentioned earlier, the In-Home Vaccines option is not using the Survey Engine.

⁠

Screenshot 2024-03-18 at 11.22.17 AM.png

⁠

After tapping “Clinic Visit”, you will get the Proxy Picker screen. Pick any patient to continue.

After tapping a proxy, you will land on the “COVID-19 Vaccine Eligibility” page (ie., CovidVaccinationSurvey.tsx ), the screen responsible for rendering the WebView that loads the remote URL, which returns pre-styled HTML.

⁠

Screenshot 2024-03-18 at 11.24.41 AM.png

⁠

Each question that appears in this COVID-19 Eligibility form, including this initial informational page itself, are all built using the existing Survey Engine.

Scroll down to the bottom of the page, and tap the checkbox to agree and then tap the “Get Started” button.

The next page to load happens to be the first question of the COVID-19 Eligibility form.

⁠

Screenshot 2024-03-18 at 11.26.45 AM.png

⁠

After answering all the survey questions, the user will inevitably land on the confirmation screen with the results of the survey displayed.

⁠

Screenshot 2024-03-18 at 11.31.57 AM.png

⁠

Scroll down to accept the disclaimer, and then tap “Schedule appointment” button to start the COVID scheduling flow.

Known Limitations/Defects

⁠

1. Poor back button management

Back button management is not being handled well

Taps on back arrow leaves the entire survey flow

2. Poor button animations

Taps on buttons will get stuck in the depressed (darker) appearance as if it’s constantly depressed.

There is no indication of loading happening

User feels like nothing is happening, and is confused

Users can tap on Next and Previous at same time, and only 1 action will win

3. Zoom in/out issue

Users that double tap the screen will get a zoomed in experience causing slight disorientation as mobile apps are not expected to be zoomable

Summary

How it works

Backend

COVID-19 Eligibility Form

Mobile Frontend

Known Limitations/Defects

1. Poor back button management

2. Poor button animations

3. Zoom in/out issue

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.