WARNING: These are advanced configurations

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!

Application Preview

Please note that these configurations do not work with Application Preview or Web Apps. If you would like to confirm these advanced formatting attributes are working, you will need to deploy the application to a mobile device.

 

Text Formatting

You can make text on CommCare Android display in bold, italics, strikethrough, and various sizes. For more information see Text Formatting

 

Hint and Help Text

The Advanced Section of the Form Builder is by default collapsed/hidden since most fields are not relevant; however several items in this section are useful for formatting in CommCare Android and are described below.

Hint Message

Hint message is a special type of label text which is displayed below the label text. It appears slightly smaller and is meant to provide clarification to the question. Only the first 1-2 lines of a hint message is displayed by default, just click on the text once to see the full text. 

Help Text

Help text is similar to Hint Text, exactly that you can view the text by clicking on a small information icon which appears next to the question:

    

Appearance Attribute - Overview

By editing the appearance attribute or making other advanced changes in the Form Builder, you can do some very nice things with your form structure while working in CommCare for Android. The options listed here are supported as of CommCare 2.9

Most of these require you to edit the "Advanced" field of your question. This can be done via the form builder by selecting Advanced from the drop down menu immediately to the right of the red Delete button. 

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

Single Select "Dropdown"

How to do it

In the Advanced section of the Question Properties, set the field  Appearance Attribute to: minimal

 View Example XML

Here is an example of the xml:

<select1 ref="/data/spinner_test" appearance="minimal">
			<label ref="jr:itext('spinner_test-label')" />
			<item>
				<label ref="jr:itext('spinner_test-1-label')" />
				<value>1</value>
			</item>
			<item>
				<label ref="jr:itext('spinner_test-2-label')" />
				<value>2</value>
			</item>
			<item>
				<label ref="jr:itext('spinner_test-3-label')" />
				<value>3</value>
			</item>
			<item>
				<label ref="jr:itext('spinner_test-4-label')" />
				<value>4</value>
			</item>
		</select1>

Notes

If the label text of a choice is very long it may be cut off in the dropdown view. The basic rule is that the text can only be as long as the width of your device. The text will not wrap onto a second line.

Single Select "Combo Box"

(Will be available starting in CommCare 2.33). This is similar to the single select dropdown, but it also allows you to filter the dropdown list by typing in a text box. When possible, it will also try to prevent users from entering text that is not part of a valid answer.

How to do it

There are 3 different variations of a combo box available, which use different rules for how they filter answer choices in the dropdown menu based upon the text that the user has entered:

  1. Standard - This option is recommended for if your question has simple, mostly one-word answer choices. The filter matches on prefixes, i.e. entering the text "ap" would show "Apple" and "Apply", but not "Cape"
    1. In the Advanced section of the Question Properties, set the field Appearance Attribute to: combobox
  2. Multiple Words - This option is recommended for if your question has more complicated, mostly multiple-word answer choices. The filter checks for matches on individual words that appear anywhere within the entered text. 
    1. In the Advanced section of the Question Properties, set the field Appearance Attribute to: combobox multiword
  3. Fuzzy Matching - This option is recommended for if your question has more complicated answer choices that you expect users might misspell or mistype. The filter is more permissive and will show answer choices that are deemed similar to the entered text. 
    1. In the Advanced section of the Question Properties, set the field Appearance Attribute to: combobox fuzzy

Multiple Select Dropdown

This is similar the the single select dropdown above, but for a multiple select question. In the example below you can see two multiple select dropdown questions that are in a question list group. The user pushes "select answer" and then chooses from the pop-up menu. The selected answers are then recorded on the question screen. This may work well to enable users to "confirm" the answers they have selected.

                     

How to do it

In the Advanced section of the Question Properties, set the field  Appearance Attribute to: minimal

Radio Buttons with Label

This is a way of displaying the values of a select list as circular radio buttons instead of a vertical list.

 

How to do it

Create a Single Select list question.  In the Advanced section of the question properties set the Appearance Attribute to list.

Combined Multiple Choice using a Question List Group

This is a way of combining questions that have the same answers. It requires creating a "throw-away" question that is used to set the header (i.e. in the example below, "Chose for each: Yes No" is a single select question for which data is not captured.

How to do it

You need to put all of the questions in a Question List Group.

The first question will define the headers (so you will not be able to actually record data for it). For that first question, i n the Advanced section of the Question Properties, set the field  Appearance Attribute to: label

The subsequent questions in the group should have appearance set to: list-nolabel

 

 View Example XML

Below is an example of the xml.

For the first question:

             <select1 ref="/data/test_combined_appearance/like_choices" appearance="label">
				<label ref="jr:itext('like_choices-label')" />
				<item>
					<label ref="jr:itext('like_choices-yes-label')" />
					<value>yes</value>
				</item>
				<item>
					<label ref="jr:itext('like_choices-no-label')" />
					<value>no</value>
				</item>
			</select1>

For the subsequent questions:

          <select1 ref="/data/test_combined_appearance/like_blue" appearance="list-nolabel">
				<label ref="jr:itext('like_blue-label')" />
				<item>
					<label ref="jr:itext('like_blue-yes-label')" />
					<value>yes</value>
				</item>
				<item>
					<label ref="jr:itext('like_blue-no-label')" />
					<value>no</value>
				</item>
			</select1>

 

Notification Label

Notification label is 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. 

How to do it

In the Advanced section of the Question Properties, set the field  Appearance Attribute to

floating-good - for a green label message

floating-caution - for a yellow/orange label message

floating-bad - for a red  label message

Grid View

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

Automatic Advancing

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: Quick advance buttons are not supported on App Preview

Automatic Advancing with Images

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.

Note: Quick advance buttons are not supported on App Preview


 

Selectable Label Text

By default, label text cannot be selected when filling out a form. This is to make the user interface simple and to avoid confusing mobile workers that unintentionally long-press during form entry. However, this also means that it is not possible to select and copy label text into another location.

It is possible to enable selectability of label text by changing the appearance attribute in the form builder.

 

How to do it

In the Advanced section of the Question Properties section set the  Appearance Attribute to: selectable


Editable barcode scan result

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

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


Media Options

CommCare has some advanced options for how to display media that you include in your app.

In-line Video

Generally when adding a video to a question in CommCare, a small play button is added to the upper right corner. Clicking on this play button opens the video in the device's media player:

However it is also possible to play a video in-line within CommCare. This means the user never leaves CommCare and switches to the media player. However it also means that the video may be smaller:

How to do it:

  1. Find the question/label with the place where you want the video to be 
  2. Under Media click video-inline
  3. Upload the video using the pop up
  • No labels