Examples Using the Simple Form UI

1 Example of hidden questions on form load
- 1.1 Fully Worked Out Example
2 showQuestion function to display a simulated select-multiple question
- 2.1 showQuestion function

Example of hidden questions on form load

Fully Worked Out Example

<!--We need to hide a number of fields when the form is loaded and then let them be revealed using obs controls-->
<script type="text/javascript">
	jQuery(function() { 
	<!--Hide the following questions when the form loads-->
	htmlForm.simpleUi.hideQuestion('interview-condition-type');
	htmlForm.simpleUi.hideQuestion('follow-up-service');
	});
</script>
	<fieldset>
		<legend><lookup expression="fn.getConcept('SurvivorMIS:162631').name"/></legend>
		<p id="informed-consent" class="left">
			<label><lookup expression="fn.getConcept('SurvivorMIS:162631').description"/></label>
			<obs id="informed-consent-obs" conceptId="SurvivorMIS:162631" answerConceptIds="CIEL:1065,CIEL:1066,SurvivorMIS:162630">
			<controls>	
					<!--When the user chooses 'No' the interview-condition-type and follow-up-service questions are displayed-->
					<when value="CIEL:1066"
						thenJavaScript="htmlForm.simpleUi.showQuestion('interview-condition-type');htmlForm.simpleUi.showQuestion('follow-up-service');"/>
					<!--When the user chooses 'Refused to Answer' the interview-condition-type and follow-up-service questions are displayed-->
					<when value="SurvivorMIS:162630"
						thenJavaScript="htmlForm.simpleUi.showQuestion('interview-condition-type');htmlForm.simpleUi.showQuestion('follow-up-service');"/>
					<!--When the user chooses 'Yes' the interview-condition-type and follow-up-service questions are hidden-->
					<when value="CIEL:1065"
						thenJavaScript="htmlForm.simpleUi.hideQuestion('interview-condition-type');htmlForm.simpleUi.hideQuestion('follow-up-service');"/>
				</controls>
			</obs>
		</p>
	</fieldset>
	<!--Interview condition type-->
	<fieldset id="interview-condition-type">
		<!--A BUNCH OF STUFF HERE-->
	</fieldset>
	<!--Follow-up Service-->
	<fieldset id="follow-up-service">
		<!--A BUNCH OF STUFF HERE-->
	</fieldset>

showQuestion function to display a simulated select-multiple question

showQuestion function

<!--Family Contact-->
<fieldset>
	<legend>Family Contact</legend>
	<p class="left">
		<label>Have you had contact with your family before coming to this organization?</label>
		<obs id="family-contact" conceptId="162766"> <!--This is a yes/no coded concept-->
			<controls>	
					<when value="1065"
						thenJavaScript="htmlForm.simpleUi.showQuestion('family-contact-communication-type')"
						elseJavaScript="htmlForm.simpleUi.hideQuestion('family-contact-communication-type')"/>
			</controls>
		</obs>
	</p>
</fieldset>
<!--Note that the id is now on the following fieldset tag because we're using the showQuestion function-->
<fieldset id="family-contact-communication-type">
	<legend>Communication Method<!--<lookup expression="fn.getConcept('162767').name"/>--></legend>
	<!--Family Contact Communication Type-->
	<!--The select multiple is an observation group-->
	<obsgroup groupingConceptId="162767">
		<table>
			<tr>
				<th><label><lookup expression="fn.getConcept('162767').description"/></label></th>
			</tr>
			<tr>
				<td><p><obs conceptId="162768" style="checkbox"/><label>Letters</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162771" style="checkbox"/><label>Mobile Phone Application (Viber, Skype, Facebook)</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162772" style="checkbox"/><label>SMS</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162769" style="checkbox"/><label>Phone Calls</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162770" style="checkbox"/><label>Internet</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162773" style="checkbox"/><label>Staying with family</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162774" style="checkbox"/><label>Visits from family members</label></p></td>
			</tr>
			<tr>
				<td><p><obs conceptId="162781" style="checkbox"/><label>Refused to Answer</label></p></td>
			</tr>
		</table>
	</obsgroup>
	<!--Family Contact Communication Type other-->
	<p id="family-contact-communication-type-other">
		<label>Other<!--<lookup expression="fn.getConcept('162775').name"/>--></label>
		<obs conceptId="162775"/>
	</p>
</fieldset>