{"type":"doc","content":[{"type":"paragraph"},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"multiexcerpt-include-macro","parameters":{"macroParams":{"_parentId":{"value":"2143945901"},"macro_uuid":{"value":"846f10d6-3459-462c-8ce9-b12bb0b90265"},"name":{"value":"Technical Documentation"},"templateData":{"value":"eJyLjgUAARUAuQ=="},"page":{"value":"CommCare Help Site Design Guidance"},"addpanel":{"value":"false"}},"macroMetadata":{"macroId":{"value":"2ae60e0e-6dd5-48d8-9c62-9b1eb9e80784"},"schemaVersion":{"value":"1"},"placeholder":[{"type":"icon","data":{"url":"https://raw.githubusercontent.com/fuegokit/appfire-design-systems-brand-svg/main/single-color-brand-icons/af-logo-multi-excerpt-24.svg"}}],"title":"MultiExcerpt Include"}},"localId":"1f77617a-3b7d-446a-a9c2-67161a041fe1"}}]},{"type":"paragraph"},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{"maxLevel":{"value":"3"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"ebf03fbb-a0ba-4231-ae34-d667068c8c32"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"261caf2b-638b-4934-b708-647c45f7e885"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Warning","type":"text"}]},{"type":"paragraph","content":[{"text":"Please note that these configurations apply to ","type":"text"},{"text":"Web Apps","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Web Applications","versionAtSave":"27"},"href":"https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143955161"}}]},{"text":". To see comparable formatting options for CommCare Mobile go to ","type":"text"},{"text":"Advanced CommCare Android Formatting","type":"text","marks":[{"type":"link","attrs":{"href":"https://dimagi-dev.atlassian.net/wiki/display/commcarepublic/Advanced+CommCare+Android+Formatting"}}]},{"text":". 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.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"About","type":"text"}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"Form Builder","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Form Builder","versionAtSave":"135"},"href":"https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143957308"}}]},{"text":" 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. ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Appearance Attribute - Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"By editing the appearance attribute or making other advanced changes in the ","type":"text"},{"text":"Form Builder","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Form Builder","versionAtSave":"135"},"href":"https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143957308"}}]},{"text":", 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.","type":"text"}]},{"type":"paragraph","content":[{"text":"In the form builder the Appearance Attribute field can be found near the bottom of the Advanced section of the Question Properties:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":57728,"__fileMimeType":"image/png","width":1042,"id":"27ecd7fe-266c-4799-becd-efd9912f9a11","collection":"contentId-2143945901","type":"file","__fileName":"image2017-8-14 10:7:27.png","height":379}}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Appearance Attribute Examples and Instructions","type":"text"},{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Collapsible Groups","type":"text"}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":24384,"__fileMimeType":"image/png","width":1155,"id":"2a4a9333-a220-47da-8c29-1b3dbc99a80f","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.07.21 PM.png","height":258}}]},{"type":"paragraph","content":[{"text":"Collapsible groups can be nested inside each other:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":32912,"__fileMimeType":"image/png","width":1156,"id":"c5413e06-ec0d-45ca-95d6-07217276c7a4","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.17.17 PM.png","height":387}}]},{"type":"paragraph","content":[{"text":"If a ","type":"text"},{"text":"closed","type":"text","marks":[{"type":"strong"}]},{"text":" collapsible group contains a required question, the group header will be marked with an asterisk:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"__fileSize":8288,"__fileMimeType":"image/png","width":1108,"id":"0a693aee-d3c8-4157-bd16-4e0eb19bec33","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.14.03 PM.png","height":63}}]},{"type":"paragraph","content":[{"text":"When the group is opened, the asterisk will disappear from the header since it's now visible on the question:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":19802,"__fileMimeType":"image/png","width":1111,"id":"64c0e231-f9ee-4eec-8d95-42551ba09981","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.14.10 PM.png","height":200}}]},{"type":"paragraph","content":[{"text":"If a ","type":"text"},{"text":"closed","type":"text","marks":[{"type":"strong"}]},{"text":" group contains a question with a validation error, the group header will be marked with a warning icon:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"__fileSize":8641,"__fileMimeType":"image/png","width":1108,"id":"d39e438f-59dc-455d-871b-ec82619c9aec","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.19.33 PM.png","height":61}}]},{"type":"paragraph","content":[{"text":"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:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":21177,"__fileMimeType":"image/png","width":1112,"id":"59486b9b-65c1-47f7-98c3-4b60e4f9e325","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2020-09-30 at 1.19.39 PM.png","height":220}}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"paragraph","content":[{"text":"If you wish to have the group ","type":"text"},{"text":"open","type":"text","marks":[{"type":"strong"}]},{"text":" when the form is first opened, set the ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"group-collapse collapse-open","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"If you wish to have the group ","type":"text"},{"text":"closed","type":"text","marks":[{"type":"strong"}]},{"text":" when the form is first opened, set the ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"group-collapse collapse-closed","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Collapsibility is only supported for Group questions, not for Question List questions or Repeat Group questions. However, you can nest a question list or repeat group inside of a collapsible group. ","type":"text"}]},{"type":"paragraph","content":[{"text":"In order for the appearance attributes listed above to work, the Question Group must have a display text. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Collapsible group headers do not support markdown. Any markdown that you use in the Group question's ","type":"text"},{"text":"Display Text","type":"text","marks":[{"type":"em"}]},{"text":" will be displayed as plain text.","type":"text"}]},{"type":"paragraph","content":[{"text":"Collapsible groups are available only on web apps, not on mobile devices or in App Preview.","type":"text"}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Combined Multiple Choice Using a Question List Group","type":"text"}]},{"type":"paragraph","content":[{"text":"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).","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"full-width"},"content":[{"type":"media","attrs":{"__fileSize":99577,"__fileMimeType":"image/png","width":1280,"id":"b09a96d7-3da4-4bff-aef6-37c1aa8fd4e2","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2023-08-25 at 5.14.42 PM.png","height":296}}]},{"type":"paragraph","content":[{"text":"This structure can also work for multi-select checkbox questions.","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"full-width"},"content":[{"type":"media","attrs":{"__fileSize":89881,"__fileMimeType":"image/png","width":1280,"id":"f6f8751d-f060-4166-8110-c21a1f6f54c8","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2023-08-25 at 5.16.00 PM.png","height":289}}]},{"type":"paragraph","content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"You need to put all of the questions in a Question List Group.","type":"text"}]},{"type":"paragraph","content":[{"text":"The first question will define the headers (so you will not be able to actually record data for it). For that first question, i","type":"text"},{"text":"n the Advanced section of the Question Properties, set the","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"label"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-label"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"b64b46ab-e9ad-4463-b701-7e2d9823ac1c"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"27af6e1e-86c7-4b58-a691-1345722eb062"}},{"text":"label","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"The subsequent questions in the group should have appearance set to: ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"list-nolabel"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-list-nolabel"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"6b11511d-9bd9-45e4-b38b-609babd969be"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"53f9fedf-ac67-433b-8a19-c718cb21db0e"}},{"text":"list-nolabel","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Below is an example of what this looks like in the form builder:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":65.0},"content":[{"type":"media","attrs":{"__fileSize":14609,"__fileMimeType":"image/png","width":497,"id":"23f17f4c-6bf4-49e4-b16d-d2cf64896339","collection":"contentId-2143945901","type":"file","__fileName":"image2019-6-7_13-44-42.png","height":445}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"expand","attrs":{"title":"View Example XML"},"content":[{"type":"paragraph","content":[{"text":"Below is an example of the xml.","type":"text"}]},{"type":"paragraph","content":[{"text":"For the first question:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":" \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tyes\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tno\n\t\t\t\t\n\t\t\t","type":"text"}]},{"type":"paragraph","content":[{"text":"For the subsequent questions:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":" \n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tyes\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tno\n\t\t\t\t\n\t\t\t","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Single Select \"Dropdown\" or \"Combo Box\"","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"__fileSize":25087,"__fileMimeType":"image/png","width":838,"id":"e7d37434-5d53-479a-b446-45254d4699ce","collection":"contentId-2143945901","type":"file","__fileName":"image2021-12-21_17-43-35.png","height":331}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"},{"text":"In the Advanced section of the Question Properties, set the","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"minimal"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-minimal"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"324519b1-bb5d-48c8-9957-a3b4bb800be9"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"e106c2b3-e51a-4450-89dc-b5783fc233bd"}},{"text":"minimal","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":85.0},"content":[{"type":"media","attrs":{"__fileSize":18882,"__fileMimeType":"image/png","width":717,"id":"158fcfcc-df0a-44a0-a8cf-cdeecc03c131","collection":"contentId-2143945901","type":"file","__fileName":"image2017-8-14 10:11:52.png","height":294}}]},{"type":"paragraph","content":[{"text":"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:","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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\"","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to:","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"combobox"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-combobox"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"6e02ac7b-4cbe-4317-9c21-06a39ddcdd13"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"a99ef4b6-997d-4b44-b1a4-0ecd2182c36a"}},{"text":"combobox","type":"text","marks":[{"type":"strong"}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"combobox multiword"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-comboboxmultiword"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"0917b6fb-a275-4996-8b5b-60a19b451689"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"d21d9b78-dea4-4d32-9819-ea312f4cdd0b"}},{"text":"combobox multiword","type":"text","marks":[{"type":"strong"}]}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"combobox fuzzy"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-comboboxfuzzy"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"b86a9cd2-b046-4869-8be9-e066fefdd419"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"96e81531-276e-49db-8007-1bddac1a43ab"}},{"text":"combobox fuzzy","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Technical note: \"fuzziness\" is largely based on ","type":"text"},{"text":"edit distance","type":"text","marks":[{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Edit_distance"}}]},{"text":", 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).","type":"text"}]}]}]}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"expand","attrs":{"title":"View Example XML"},"content":[{"type":"paragraph","content":[{"text":"Here is an example of the xml:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html/xml"},"content":[{"text":"\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t1\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t2\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t3\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t4\n\t\t\t\n\t\t","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Multiple Select Dropdown","type":"text"}]},{"type":"paragraph","content":[{"text":"This is similar the the single select dropdown above, but for a multiple select (checkbox) question type.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":30356,"__fileMimeType":"image/png","width":1280,"id":"cc7da563-8237-4f56-a2ef-0fdda69c807f","collection":"contentId-2143945901","type":"file","__fileName":"dropdown1.png","height":276}}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":41225,"__fileMimeType":"image/png","width":1280,"id":"ce6d7173-e9d5-4749-a67c-e1e16e18732c","collection":"contentId-2143945901","type":"file","__fileName":"dropdown2.png","height":357}}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":32331,"__fileMimeType":"image/png","width":1280,"id":"7f5acf98-49a9-4f3d-8d72-7787863be0c4","collection":"contentId-2143945901","type":"file","__fileName":"dropdown3.png","height":276}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"},{"text":"In the Advanced section of the Question Properties, set the","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"minimal","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"12-Hour Time","type":"text"}]},{"type":"paragraph","content":[{"text":"Time questions display in 24-hour format by default, but they can be change to a 12-hour format with an AM/PM option:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":45.0},"content":[{"type":"media","attrs":{"__fileSize":11639,"__fileMimeType":"image/png","width":317,"id":"64d65ee6-f13a-4620-9f77-5a7c4bfc889e","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2022-06-01 at 11.17.37 AM.png","height":252}}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":" ","type":"text"},{"text":"In the Advanced section of the Question Properties, set the","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"12-hour","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Question Tiles (\"n\"-per-row / “n”-per-row-repeat)","type":"text"}]},{"type":"paragraph","content":[{"text":"In Web Apps, questions can be configured as a Tiled Question, which will take up a different amount of space on the screen, with the ability to be \"tiled\" horizontally with other questions. Normally, all questions are tiled vertically, but Tiled Questions may be tiled horizontally.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"For all questions that are ","type":"text","marks":[{"type":"underline"}]},{"text":"not","type":"text","marks":[{"type":"underline"},{"type":"strong"}]},{"text":" Repeat Groups:","type":"text","marks":[{"type":"underline"}]}]},{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the","type":"text","marks":[{"type":"textColor","attrs":{"color":"#222222"}}]},{"text":" field ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]},{"text":"\"n\"-per-row ","type":"text","marks":[{"type":"strong"}]},{"text":"where \"n\" is any integer (i.e. 3-per-row). This needs to be updated for ","type":"text"},{"text":"each question you wish to include in a row with a \"tiled\" format. ","type":"text","marks":[{"type":"textColor","attrs":{"color":"#172b4d"}}]}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":131708,"__fileMimeType":"image/png","width":1129,"id":"8faaefe8-5dd4-43be-b3bc-8d8ebeb70403","collection":"contentId-2143945901","type":"file","__fileName":"Screen Shot 2023-08-25 at 5.04.20 PM.png","height":367}}]},{"type":"paragraph","content":[{"text":"For Repeat Groups:","type":"text","marks":[{"type":"underline"}]},{"type":"hardBreak"},{"text":"Place the Repeat Groups within a Group. In the Advanced section of the question Group’s Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"\"n\"-per-row-repeat ","type":"text","marks":[{"type":"strong"}]},{"text":"where \"n\" is any integer (i.e. 3-per-row). This will apply the “n”-per-row attribute to each Repeat Group within that Group.","type":"text"}]},{"type":"paragraph","content":[{"text":"For example:","type":"text"}]},{"type":"table","attrs":{"layout":"default","width":1066.0,"localId":"62f22494-9738-48f6-ad6a-65b714ac5f2c"},"content":[{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[458.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":355,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":21944,"__fileMimeType":"image/png","width":355,"alt":"image-20240226-184737.png","id":"9d5f2a24-87f5-48a6-8af9-20a133e4dd1a","collection":"contentId-2143945901","type":"file","__fileName":"image-20240226-184737.png","height":207}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"“3-per-row-repeat” appearance attribute is configured on Group3","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"repeat_count of 2 is applied for each subrepeat group","type":"text"}]}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":[606.0]},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":590,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":24847,"__fileMimeType":"image/png","width":1192,"alt":"image-20240226-184730.png","id":"08d8b491-a609-4c98-9e67-3815a51d0e29","collection":"contentId-2143945901","type":"file","__fileName":"image-20240226-184730.png","height":347}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"The left form builder configuration results in the above layout","type":"text"}]}]}]}]}]}]},{"type":"paragraph","content":[{"text":"This appearance attribute can be used in combination with others; these just need to be space-separated. ","type":"text"}]},{"type":"paragraph","content":[{"text":"An example implementation of this feature can be found in the ","type":"text"},{"text":"ush-feature-training template app","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.commcarehq.org/a/ush-feature-training/apps/view/1dbb597323a2462f9f3388d0a02c4596/form/f414f51281c3492982de9841b8daa488/source/#form/edit_facility/facility_repeat/item/txt-email"}}]},{"text":".","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Question Text Alignment","type":"text"}]},{"type":"paragraph","content":[{"text":"In Web Apps, questions and labels are left-aligned by default. But, they can be configured as center or right-aligned as well. The question text alignment is compatible with several other advanced Web App formatting options listed on this page.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to:","type":"text"},{"type":"hardBreak"},{"text":"text-align-right:","type":"text","marks":[{"type":"strong"}]},{"text":" If you wish to have the question text right-aligned.","type":"text"},{"type":"hardBreak"},{"text":"text-align-center:","type":"text","marks":[{"type":"strong"}]},{"text":" If you wish to have the question text center-aligned. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":43775,"__fileMimeType":"image/png","width":1280,"id":"9a9c1296-d329-4014-8728-37bf25f9700b","collection":"contentId-2143945901","type":"file","__fileName":"Label and question text alignments.png","height":591}}]},{"type":"paragraph","content":[{"text":"The alignment attributes can be appended to the existing appearance attributes of a question. e.g., ‘3-per-row text-align-center’ can be used to create a question tile with center alignment.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"inline-media-image","parameters":{"width":"700","id":"be85ad2d-f558-401e-903e-e57f83b6dc19","collection":"contentId-2143945901","height":""}}},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Limitation","type":"text"}]},{"type":"paragraph","content":[{"text":"Text alignment can be used for questions within \"Groups\" but is not compatible with \"Groups\" question types. It is also incompatible with \"Collapsible Groups\". ","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Question input size","type":"text"}]},{"type":"paragraph","content":[{"text":"The default width for question inputs is the full width of the page, but input widths can be adjusted to be smaller.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to:","type":"text"},{"type":"hardBreak"},{"text":"short:","type":"text","marks":[{"type":"strong"}]},{"text":" In order to set the width of the input to ~20% of the width of the page in which it is housed.","type":"text"},{"type":"hardBreak"},{"text":"medium:","type":"text","marks":[{"type":"strong"}]},{"text":" In order to set the width of the input to ~30% of the width of the page in which it is housed.","type":"text"}]},{"type":"paragraph","content":[{"text":"In the examples below see that the ","type":"text"},{"text":"Name","type":"text","marks":[{"type":"em"}]},{"text":" question has the appearance attributes set, while the ","type":"text"},{"text":"phone ","type":"text","marks":[{"type":"em"}]},{"text":"question maintains the default width.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":58897,"__fileMimeType":"image/png","width":1280,"id":"852f3a8b-b0b1-496b-b9e7-a3d09dc7dcf8","collection":"contentId-2143945901","type":"file","__fileName":"short-input.png","height":372}}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":58281,"__fileMimeType":"image/png","width":1280,"id":"cdda071f-7fbd-49c4-8519-d373ec8096a0","collection":"contentId-2143945901","type":"file","__fileName":"medium-input.png","height":372}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Single-Select Button","type":"text"}]},{"type":"paragraph","content":[{"text":"Displays a single-select multiple choice question as a simple button. No question label, help message, or hint text is shown in Web Apps. ","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"You might use a Single-Select Button if you wanted to show/hide instructions or a list of questions. You would use its value in the Display Condition of the label or question you wanted to show or hide.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"In the Advanced section of the Question Properties for a single-select multiple choice (not checkbox) question, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"button-select","type":"text","marks":[{"type":"strong"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":9518,"__fileMimeType":"image/png","width":991,"alt":"image-20250409-180652.png","id":"f5d5855e-055e-42a9-b2f1-a09cb05df82f","collection":"contentId-2143945901","type":"file","__fileName":"image-20250409-180652.png","height":188}},{"type":"caption","content":[{"text":"Here we see a question with small text","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":12477,"__fileMimeType":"image/png","width":993,"alt":"image-20250409-180723.png","id":"b593cfa1-8d73-4367-80d9-415beac222e5","collection":"contentId-2143945901","type":"file","__fileName":"image-20250409-180723.png","height":225}},{"type":"caption","content":[{"text":"Here we see a question with large text. Note that it is a different question with different formatting. The text size cannot be changed dynamically using a button.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"With the button-select attribute, you can also use alignment to determine the placement of the button. For example, set ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to “button-select text-align-right” (do not include quotes) to see the button on the right.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":11976,"__fileMimeType":"image/png","width":990,"alt":"image-20250409-181109.png","id":"a4d394b4-06e3-4f81-a7f6-916cfde54e95","collection":"contentId-2143945901","type":"file","__fileName":"image-20250409-181109.png","height":199}}]},{"type":"paragraph"},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Hint as Placeholder","type":"text"}]},{"type":"paragraph","content":[{"text":"Set input placeholder text as hint text. This will also hide the hint text to eliminate redundancy and clutter.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":100.0},"content":[{"type":"media","attrs":{"__fileSize":85644,"__fileMimeType":"image/png","width":1280,"id":"22fd2ab3-be38-4795-b4bb-1c480b5b96fa","collection":"contentId-2143945901","type":"file","__fileName":"hint-as-placeholder.png","height":456}}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"How to do it","type":"text"}]},{"type":"paragraph","content":[{"text":"Set hint message as described below.","type":"text"}]},{"type":"paragraph","content":[{"text":"Then in the Advanced section of the Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to:","type":"text"},{"type":"hardBreak"},{"text":"hint-as-placeholder","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph"},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Border Outline","type":"text"}]},{"type":"paragraph","content":[{"text":"Create a black border outline around a group of content in the form","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":1126,"widthType":"pixel"},"content":[{"type":"media","attrs":{"__fileSize":16059,"__fileMimeType":"image/png","width":1126,"id":"86789eeb-9be7-4c2e-ad3c-7a39179a1593","collection":"contentId-2143945901","type":"file","__fileName":"Screenshot 2024-02-22 at 3.44.16 PM.png","height":157}}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"How to do it","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"Create a question group that holds the content you want to enclose in the border. In the Advanced section of the group's Question Properties, set the field ","type":"text"},{"text":"Appearance Attribute","type":"text","marks":[{"type":"em"}]},{"text":" to: ","type":"text"},{"text":"group-border ","type":"text","marks":[{"type":"strong"}]},{"text":"(example configuration ","type":"text"},{"text":"here","type":"text","marks":[{"type":"link","attrs":{"href":"https://www.commcarehq.org/a/ush-feature-training/apps/view/1dbb597323a2462f9f3388d0a02c4596/form/f414f51281c3492982de9841b8daa488/source/#form/border-group"}}]},{"text":")","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"Hint-and-help-text123"},"legacyAnchorId":{"value":"AdvancedWebAppsFormatting-Hint-and-help-text123"},"_parentId":{"value":"2143945901"}},"macroMetadata":{"macroId":{"value":"6bedbed1cd88a90f74098f0719b546a1fd8999e64db742d88710ea89051d109c"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"9c237515-8344-46e9-b79b-bef8fb3a15b7"}},{"text":"Hint and Help Text","type":"text"}]},{"type":"paragraph","content":[{"text":"Hint Message","type":"text"}]},{"type":"paragraph","content":[{"text":"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. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"__fileSize":16818,"__fileMimeType":"image/png","width":563,"id":"a5e18b2d-ad68-45b4-9ccd-1ee830a69de5","collection":"contentId-2143945901","type":"file","__fileName":"image2021-12-24_8-22-50.png","height":164}}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"hardBreak"}]},{"type":"paragraph","content":[{"text":"Help Message","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"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:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"__fileSize":17790,"__fileMimeType":"image/png","width":563,"id":"0ee17cbf-dcfc-474e-8f41-d861c5262302","collection":"contentId-2143945901","type":"file","__fileName":"image2021-12-24_8-26-6.png","height":164}}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"__fileSize":14278,"__fileMimeType":"image/png","width":567,"id":"24ba1630-57f4-469d-b8bf-e9e4e083f06e","collection":"contentId-2143945901","type":"file","__fileName":"image2021-12-24_8-27-51.png","height":140}}]},{"type":"paragraph","content":[{"text":" ","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Text Formatting","type":"text"}]},{"type":"paragraph","content":[{"text":"You can make text on CommCare Web Apps display in bold, italics, strikethrough, and various sizes. For more information see our guide on ","type":"text"},{"text":"Text Formatting (Markdown)","type":"text","marks":[{"type":"link","attrs":{"__confluenceMetadata":{"isRenamedTitle":true,"linkType":"page","contentTitle":"Text Formatting (Markdown)","versionAtSave":"35"},"href":"https://dimagi.atlassian.net/wiki/spaces/commcarepublic/pages/2143958337"}}]},{"text":".","type":"text"}]},{"type":"paragraph"}],"version":1}

Browser not supported