This feature requires a CommCare Software Plan

Some uses of this feature will only be available to CommCare users with a Pro Plan or higher. For more details, see the CommCare Software Plan page. Note that all users, even those with the Community Plan, will be able to use web apps to preview forms only (the "Preview Form" feature).


Web Apps is the web version of CommCare.  There are two ways you can use Web Apps:

  1. To test forms (using the “App Preview” feature) - you can preview your form in a virtual device that appears on the right hand side of the screen in App Manager or Form Builder.
  2. To submit data mobile workers can log into Web Apps on a computer just like they would log into a CommCare mobile application. Web Users can also use Web Apps, but data is treated differently for a web user. More information on this point below.

1. Application Preview

Live Data

Please note that when using Application Preview, you are submitting live data to your project space. When submitting data as a web user, it will appear as if submitted by an unknown user and will only appear in exports or reports if specified (via filters).

The Application Preview (or “App Preview) feature is a tool available to all users in the application and form builder sections of CommCare. This feature allows you to view your application as it would appear on a mobile device and immediately test any changes that you make. Application Preview provides a quick, powerful way to test iterations and changes made to an application without having to go through the process of deploying or updating your application on a physical mobile device.

To open application preview, select the teal bar on the right hand side of the screen:


You can also choose to display your application as if it were on a phone or a tablet by selecting the image of a device on the app preview. Selecting the device button will toggle between a mobile phone or tablet:

 

Phone
Tablet
There are a few things that you should know when using the app preview feature. When testing your application, the app preview will always use the most recent version of your application, regardless of what the latest release version is. Basically, you will always see a version of your application based on the last time you selected the ‘Save’ button in the application manager or form builder.

In order to ensure you are using the latest version of your application, you will need to select the refresh button on the app preview feature. You will need to press this button after you make any changes that you would like to review. Please note that if you select the refresh button while you are in a form in app preview, you will be returned to the home screen and will need to navigate back to the form that you were in:


 

General Tips:

 
  • While this feature allows you to test the most recent version of your application without having to deploy any changes, we do recommend deploying new versions of your application occasionally. This will allow you to have checkpoints to revert your application to in case you make a change that you cannot fix or breaks your application.

  • We recommend using the 1 question per screen setting, as multiple questions per screen can cause some slowness and performance issues. To enable this, select the ‘Settings’ button from the home screen of ‘Live Preview’ and select enable for this setting.

  • You can view any other languages you might have configured for your application by proceeding the ‘Settings’ page of Live Preview.

  • Be sure to sync to receive the latest data for your application, especially when using the 'Login As' functionality.

 

Limitations:

 
  • Same limitations as Web Apps..

  • User-controlled repeat groups (i.e. Repeat groups where the user defines how many repeats to input) do not currently work. Repeat groups where the repeat count is pre-defined should work.

2. CommCare for Web Users

Web Apps

If the project space has a Pro software plan or higher, users can access web apps by clicking on "Web Apps" at the top of the page. Note that the apps that appear here are the latest released version of the application, to ensure that your latest test changes don't affect current web apps users! This allows for more robust testing and use of the application, as it allows you to preview more than just the form as described in the section above.

To enable your application in Web Apps, see the setting up web apps section, here.

NOTE: Please note that there are several other known limitations with Web Apps that could affect web users experience, found here.

Login As Feature

In both Web Apps and in the Application Preview, there is a feature known as ‘Login As.’ This functionality allows a web user to access a form as if they were a mobile user from their project space. This is another powerful tool that allows you to truly experience what your application will look and feel like from the perspective of a mobile user. Please note that any forms or data submitted while using the Login As feature will be treated as live data and will appear in exports and reports as such. 

Accessing Login As

To enable the Login As feature, you need be logged in as a Web User with certain permissions. The user’s Web User Role will need to have permission to do the following in your project space:

  1. Edit Data
  2. Edit Mobile Worker Data
  3. Edit Web User Data 
  4. Access to Web Apps 

With these permissions enabled, you should see a 'Login As' button when using App Preview or Web Apps:

      

Limitations:

  • Any data submitted this way will be done so as if you were that mobile worker. The data will appear in exports and reports as such.
  • Any limitations that would apply to a mobile worker in Web Apps. 
  • The only way to confirm a form was submitted on behalf of a mobile worker by a Web User, is to find the specific form itself. You can do this by searching for submissions in the Submit History. Once you find the form in the submit history, there will be a note at the top that states 'Submitted by Web User <name> on behalf of Mobile Worker <name>':

For more information on the Login As feature, please see this document.

3. CommCare for Mobile Workers

Lastly, you can also use your mobile username to view your case list and fill out forms on the web just as you would on a mobile phone.

Setting up web apps

To view your application in Web Apps, you need to enable the Web App setting and mark a version of your application as released. The following steps assume you are ready to use your application in Web Apps:

  1. Proceed to the Application settings by selecting the gear icon in the upper left hand corner next to the application name.

  2. Proceed to ‘Advanced Settings’

  3. Select the Web App checkbox

  4. Save your changes

  5. Select the application name in the upper left hand corner to proceed to the Release Page

  6. Make a new version of your application.

  7. Mark the new version as “Released”

You should now be able to view your application in web apps by selecting “Web Apps” from the navigation bar at the top of the screen!

How it Works

Web apps run off of "released" versions of your application, just like the mobile app. To ensure that your latest test changes don't get published to your web app users until they are ready, web apps will use the latest version marked as released. 

It is strongly recommended that you only allow data entry to happen in web apps from mobile worker accounts, and not web user accounts. To use web apps as a mobile worker:

  1. Sign into your project using the credentials of a mobile worker. This is NOT the Web User email address and password combination you use to log in to CommCareHQ to view reports, manage users, or modify an application.

    1. From the regular CommCareHQ main login page (www.commcarehq.org) you must use the fully qualified project-specific username (mobileusername@project_name.commcarehq.org) to log in.

    2. Alternatively, if you navigate to "www.commcarehq.org/a/project_space_name]/login" you can log in with just the mobile user name and password (i.e. just use mobileusername without the "@project_name.commcarehq.org")

  2. You will be automatically taken to the web apps section of CommCareHQ.

  3. Enter data

Incognito Browser

If you are using Google Chrome, instead of logging out as a web user and logging in as a mobile user, you can open an "incognito window" by pressing Ctrl + Shift + N (Command + Shift +N). This allows you to have a separate log-in session in CommCareHQ. When someone logs in as a mobile user they WILL NOT be able to see reports, the application configuration, or other settings related to your work space.

Multiple Languages

Web apps will display text in the default language of your first web app.  (We're working on the ability to set defaults per app).

However, you can also set which language displays for each individual user in the Settings & Users section of CommCareHQ:

  1. Navigate to your "mobile workers" page

  2. Click on a mobile worker's name to edit that worker

  3. Find the "language" box and enter the language code (as seen in the Application) that corresponds to the desired language

NOTE: The language will not switch if you use "login as" to log in as the mobile worker. You will have to separately log in using the username and password of the mobile worker to be able to see the app display in the desired language for the mobile worker.

General Web Apps Notes

Which version of my app is Web Apps using?

The table below is true for all projects created after March 2014; for projects before that, the default for Clicking on the Web Apps button and for accessing Web Apps as a mobile worker was always to use the most recent version, regardless of whether it was starred. If you have specific questions please "report an issue" and the support team will follow up with you.

 

Point of Access

User Type

App Version

Clicking on Web Apps at top of CommCareHQ page

Web

Most recent starred version

Live Preview in application/form manager screens

Web

Most recent version of form (ignores app version)

Using 'Login As' feature in Live Preview

Mobile

Most recent version of form (ignores app version)

Using 'Login As' feature as a Web User in Web Apps

Mobile

Most recent starred version

Using a web app as a Mobile Worker

Mobile

Most recent starred version