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 Form Builder 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. 

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 and Web Apps. The options listed here are supported as of CommCare 2.9. Utilize multiple appearance attributes simultaneously by entering them separated by spaces.

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

Address Geocoding

You can make any text question on CommCare into an address lookup with geocoding validation. For more information see our guide on Address Geocoding in Web Apps.

Expand

Summary

The address question type was born out of the need to quickly and accurately input address data into CommCare. It is a question type that provides an address lookup, which lets users select a complete address. Other questions may be configured to "subscribe" to the address question. When an address is selected, the question will "broadcast" the address's  individual fields to subscribing questions, which will then be automatically filled out. In this way, one can build a form where a user selects an address and then the address's city, postal code, etc. are automatically populated into other questions.

The address question is available in Web Apps and App Preview, but not on CommCare Mobile.

Demonstration

Image Removed

How to Enable the Address Question Type in a Form

1. The following feature flag is needed

   1. CASE_CLAIM_AUTOLAUNCH (USH Specific toggle to support several different case search/claim workflows in web apps)

2. Add an address lookup question to the form as a text question type, and also add any questions that will receive and populate with subparts of the address.
   Image Removed

3. Open the Advanced section of the address question.
   Image Removed

4. Under Appearance Attribute, enter "address broadcast-<topic>" where "<topic>" can be any name to identify the address (e.g. "home", "work", etc).
   Image Removed

Go to the address-subpart-receiving questions and under Advanced / Appearance Attribute for each of those, enter "receive-<topic>-<field>", where "<topic>" matches the address question topic name from the previous step, and "<field>" is the subpart of the address to be received by each question (e.g. "city", "zipcode", etc).  The full list of available fields appears below.

Image Removed

1. Test the new address lookup question in the app preview window to see that a selected address populates as expected and submit to save the form selections successfully.
   Image Removed

Address Question Type Components

The address question is not a formal question type, but an appearance on a text question. When the appearance is set to 'address' on a text (by entering 'address' into the Appearance Attribute under the Advanced question fields as demonstrated above), the question appears as an address search bar.

Broadcasts

Broadcasts will have an appearance tag of 'broadcast-<topic>' where 'topic' is a reference name that ties broadcasts to receivers (e.g. 'broadcast-hello' is tied to 'receive-hello-street'). Please note that an appearance can have multiple appearance types, so to have an address question broadcast its address components to receivers, the appearance becomes 'address broadcast-<topic>.'

Receivers

Receivers will have an appearance type in the format 'receive-<topic>-<field>' where <topic> corresponds to the same topic of the broadcast. 

Fields

Fields will map to the mapbox geocoder API in one of the following ways:

• full: the whole address 

• zipcode: maps to 'postcode'  e.g. ‘02139’ (zipcode is specific to the US)

• postcode: also maps to 'postcode' (for use outside of the US where zipcode is not used) 

• city: maps to 'place' and can be cities, towns and villages e.g. ‘Cambridge’

• county: maps to 'district' (county is specific to the US)

• district: also maps to 'district' (for use outside of the US where county is not used)

• street: is the concatenation of 'address' and 'text' to include the address number and street name 

• country: maps to the 'country' e.g. ‘United States of America’

• country_short: maps to the shortcode of the 'country' e.g. ‘US’

• region: maps to region, which includes states, provinces, and prefectures e.g. ‘Massachusetts’ 

• us_state: maps to the region only if it is in the US.

• us_state_short: maps to the region shortcode only if it’s in the US

• geopoint: latitude and longitude, formatted as "lat long", e.g., "37.34367 -121.893684"

Usage Details

Receiver Question Types

Text

The text question type is preferred for most of the components that have wide range of options such as 'street', 'zipcode', 'city'. If you have a defined set of options like 'states', consider the Multiple Choice and Multiple Choice Combobox. 

Numeric

Numeric question types are supported as receivers, but they are less ideal than text questions. Although they seem reasonable for zipcode, they will strip out the leading '0' (e.g. '02139' becomes '2139'). A text question with validation is better.

Multiple Choice and Multiple Choice Combobox

These questions are ideal when you want to limit the set of options, e.g. 'states'. When a broadcast is sent to a receiver, an option in the multiple choice is selected only if it matches the field it subscribes to. If there is no match, it registers a NO ANSWER as an answer. This means that if there is a previously selected answer but it receives a field that does not match its options, it will clear out the previous answer.

Special Combobox Feature: Tiered Fallbacks

It is possible to receive multiple fields and select the first match in the multiple choice combobox options. For example, if you wanted to only match on states 'CA', 'NY' and 'MA', but if none of those states match the address being received you want to fallback to match on countries 'United States of America', 'Puerto Rico', you would use 'receive-<topic>-<field1>||<field2>||<fieldn>'. An option will be selected when the first match is encountered going down the list of fields. 

Repeat Groups

If an address group is used inside of a repeat group, the selected address's fields will only broadcast within that same group.

Image Removed

Settings

In "Project Settings", on the "Basic" page, is an option to set the project's default location:

Image Removed

Warning

Please note that these configurations apply to Web Apps. To see comparable formatting options for CommCare Mobile go to Advanced CommCare Android Formatting. If you would like to confirm 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.

About

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 Form Builder 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. 

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 and Web Apps. The options listed here are supported as of CommCare 2.9. Utilize multiple appearance attributes simultaneously by entering them separated by spaces.

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

...

Collapsible Groups

In Web Apps, groups can be configured to show a bordered box with a header. Clicking on the header will then show or hide the questions inside the group:

...

When the group is opened, the warning icon will disappear from the header and be visible on the question with the error, along with the error message:

...

How to do it

In the Advanced section of the Question Properties section, you'll mark the group as collapsible and whether you want it to be open or closed when the form loads.

If you wish to have the group open when the form is first opened, set the Appearance Attribute to: group-collapse collapse-open

...

We are also able to use alignment values to align the button toggle. When using alignment appearance attributes text-align-center and text-align-right, the element position will adjust based on the screen width or other entry fields, except for labels, for better custom positioning.

Combined Multiple Choice Using 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, in the Advanced section of the Question Properties, set the field  Appearance Attribute to: 

...

This dropdown also allows you to filter the 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

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

...

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:

      Anchor
      combobox combobox

      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. On Web Apps, the fuzzy matching approach typically yields better results than Multiple Words.

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

      Anchor
      combobox multiword combobox multiword

      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: 

      Anchor
      combobox fuzzy combobox fuzzy

      combobox fuzzy

   2. Technical note: "fuzziness" is largely based on edit distance, which calculates how similar the search string is to the options. CommCare also does some special case handling, in particular to handle searches that match the beginning of one or more of the options (as when the user has started typing out a long option).

...

This is similar the the single select dropdown above, but for a multiple select (checkbox) question type.

...

How to do it

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

...

Time questions display in 24-hour format by default, but they can be change to a 12-hour format with an AM/PM option:

...

How to do it

In the Advanced section of the Question Properties, set the field  Appearance Attribute to: 12-hour

...

For all questions that are not Repeat Groups:

In the Advanced section of the Question Properties, set the field Appearance Attribute to:  "n"-per-row where "n" is any integer (i.e. 3-per-row). This needs to be updated for each question you wish to include in a row with a "tiled" format. 

...

The button shows display text for the next choice, which will be selected when it is clicked. Clicking the button cycles through choices in order.

How to do it

In the Advanced section of the Question Properties for a single-select multiple choice (not checkbox) question, set the field Appearance Attribute to: button-select

...

Striped Repeat Groups

Applies subtle row shading and a highlight effect to alternating questions within a group or repeats in a repeat groupselected when it is clicked. Clicking the button cycles through choices in order.

How to do it

Nest a repeat group under a group. The group will be used for styling and can have its Display Text left blank.

In the Advanced section of the group's Question PropertiesQuestion Properties for a single-select multiple choice (not checkbox) question, set the field Appearance Attribute to: stripe-repeats. Note that this is on the outer question group, not the repeat group itself (example configuration here)

...

If this appearance attribute is applied to a group without a nested repeat group, the questions within the group will be highlighted with alternating stripes.  button-select

...

Hint as Placeholder

Set input placeholder text as hint text. This will also hide the hint text to eliminate redundancy and clutter.

...

How to do it

Set hint message as described below.

...