Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Warning

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!

WarningApplication Preview

Multiexcerpt include macro
macro_uuid846f10d6-3459-462c-8ce9-b12bb0b90265
nameTechnical Documentation
templateDataeJyLjgUAARUAuQ==
pageCommCare Help Site Design Guidance
addpanelfalse

Table of Contents
maxLevel3

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. Table of ContentsmaxLevel3

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. 

...

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: 

Anchor
label
label
label

...

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: 

Anchor
minimal
minimal
minimal

...

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. 

...