Advanced CommCare Android Formatting
Table of Contents:
- 1 A few things to keep in mind
- 2 Appearance Attribute - Overview
- 3 Appearance Attribute Examples and Instructions
- 3.1 Audio Widgets
- 3.2 Automatic Advancing
- 3.3 Automatic Advancing with Images
- 3.4 Editable Barcode Scan Result
- 3.5 Force capture for audio/video/image widgets
- 3.6 GPS Capture using Google Map
- 3.7 Grid View
- 3.8 Notification Label
- 3.9 Radio Buttons Aligned with Label
- 3.10 Combined Multiple Choice Using a Question List Group
- 3.11 Selectable Label Text
- 3.12 Short Text Entry Widget
- 3.13 Single Line Numeric Entry
- 3.14 Single Select "Dropdown"
- 3.15 Single Select "Combo Box"
- 3.16 Multiple Select Dropdown
- 3.17 Date formatting option that enables adding a nullable date
- 4 Hint and Help Text
- 5 Media Options
- 5.1 In-line Video
- 6 Text Formatting
- 7 Text To Speech
Items on this page are useful for formatting in CommCare apps and are described below. Most of them require you to edit an "Advanced" field of your question. The Advanced section of the https://dimagi.atlassian.net/wiki/x/PDHKfw is by default collapsed/hidden since most fields are not relevant; however it can be displayed via the form builder by selecting Advanced from the drop down menu immediately to the right of the red Delete button.
A few things to keep in mind
Some of these appearances must be configured by advanced modification of forms. You can request better form builder support for these formatting options by reaching out to support@dimagi.com. All supported formatting options are listed on this page. If you use a formatting option found in XLSForms, we cannot guarantee compatibility with CommCare.
Please note that these configurations apply to CommCare mobile apps, and some do not work with https://dimagi.atlassian.net/wiki/x/sgHKfw or https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955161. To see comparable formatting options for Web Apps, go to https://dimagi.atlassian.net/wiki/x/rQTKfw. In order to confirm that these advanced formatting attributes are working, you will need to test the application in the appropriate place for your project, whether that is a mobile device or Web Apps.
Appearance Attribute - Overview
By editing the appearance attribute or making other advanced changes in the https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143957308, you can do some very nice things with your form structure while working in CommCare for Android and Web Apps. The options listed here are supported as of CommCare 2.9
In the form builder the Appearance Attribute field can be found near the bottom of the Advanced section of the Question Properties:
Appearance Attribute Examples and Instructions
Audio Widgets
Not supported on App Preview
Beginning in CommCare 2.50, a new audio widget is used. This widget does not standardly include the ability to upload audio; however, this can be accomplished in two ways.
Set an Audio question's Appearance Attribute to: acquire-or-upload
This will allow the user to choose between selecting audio or recording it.
Set an Audio question's Appearance Attribute to: legacy
This will use the previous audio widget and retain the old functionality
Automatic Advancing
Not supported on App Preview
You can have your form advanced to the next screen automatically upon choosing an answer. This works for single select multiple choice questions only (not for checkbox / multiple-select).
Be careful when deciding to use this because if the user accidentally chooses an answer they will be advanced to the next screen and will need to be comfortable swiping back to make the change/correction.
How to do it
In the Advanced section of the Question Properties, set the field Appearance Attribute to: quick
Note: As of CommCare 2.45, you cannot use the appearance attribute "quick" with the last question of a form to auto-submit a form.
Automatic Advancing with Images
Not supported on App Preview
You can have your form advanced to the next screen automatically upon choosing an answer. This works for single select multiple choice questions only (not for checkbox / multiple-select).
Consider making this a required question, so that a button must be selected to continue.
How to do it
In the Advanced section of the Question Properties, set the field Appearance Attribute to: quick compact
For a screen, two images wide use: compact-2.
For a screen. three images wide use: compact-3.
Editable Barcode Scan Result
Not supported on App Preview
The barcode question widget allows you to scan a barcode and store the result as a string. At times it is useful to be able to edit that string after scanning.
How to do it
In the Advanced section of the Question Properties section set the Appearance Attribute to: editable
Force capture for audio/video/image widgets
Not supported on App Preview
The audio/video/image capture widgets by default allow you to either capture new media or select a file from your device. In some situations one might want force the user to capture new media and not have the option to choose a media file. This is possible by following the directions below.
How to do it
In the Advanced section of the Question Properties section set the Appearance Attribute to: acquire
GPS Capture using Google Map
Not supported on App Preview
GPS question can be configured to:
Allow user to select their location on Google maps by clicking on "Record Location" button.
Allow user to see the recorded location on Google maps by clicking on "Show Location" button.
How to do it
In the Advanced section of the Question Properties section set the Appearance Attribute to: maps
Grid View
Not supported on App Preview
You can create a grid of possible answers using only images and have the user just click on the image. This works for multiple choice questions that are either single or multiple answer. You can see an example of this at the ODK website.
How to do it
In the Advanced section of the Question Properties, set the field Appearance Attribute to: compact
If, for example, you want the grid to be two items across you can add "-2" so it will look like: compact-2
Notification Label
Not supported on App Preview
Notification labels are a special type of label text which is displayed at the bottom of the screen.
It can appear in 3 different colors. It will appear based on what display condition you set in the label.