08. Questionnaire Component (Section 3. Composite Component)

Now we create a second 'Composite' Lightning Component to display a Questionnaire to be completed.

1. In Salesforce, create a Lighting Component called 'Questionnaire'.

2. Add the following Javascript code to the controller - copy in the JSON from the questionnaire.json file.

({
	doInit : function(component, event, helper) {
		// This data gets injected into the example.html view
		// and is accessible using double brackets:
		// e.g. {{ recordTitle }}
		var json = {};

		component.set("v.pageTitle", json.Title);
		component.set("v.questions", json.questions);
	},
	handleSaveClick : function(component) {
        component.set("v.selectedQuestionnaireID", "");		
	},
	handleBackClick : function(component) {
        component.set("v.selectedQuestionnaireID", "");
	}
})

3. IF NEEDED - JSON code sample from questionnaire.json.

                var json = {
		  "Title": "UAT Evaluation",
		  "questions": [
		        {
		          "name": "QUEST-0001",
		          "question__c": "1. I didn't experience issues in my database related to the performance of software, hardware or network.",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        },
		        {
		          "name": "QUEST-0002",
		          "question__c": "2. The combination of the UPK \"Try It\" mode and the business processes will be sufficient documentation for me to perform my day to day activities after the upgrade is complete",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        },
		        {
		          "name": "QUEST-0003",
		          "question__c": "3. The tests conducted during UAT and in homework were representative of the major business processes my institution will perform on a recurring basis.",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        },
		        {
		          "name": "QUEST-0004",
		          "question__c": "4. I didn't experience issues in my database related to the performance of software, hardware or network.",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        },
		        {
		          "name": "QUEST-0005",
		          "question__c": "5. I didn't experience issues in my database related to the performance of software, hardware or network.",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        },
		        {
		          "name": "QUEST-0006",
		          "question__c": "6. I didn't experience issues in my database related to the performance of software, hardware or network.",
		          "help_text__c": "This question relates to the main database as well as the CMS connector.",
		          "options": "AgreeValues",
		          "comment_available__c": "Yes"
		        }
		    ]
		};

4. Copy the markup in the 'views/questionnaire.html' file created earlier into the 'Component' and paste between the aura:component</aura:component> tags in the new component.

5. Start fixing the code in the following order:

Change the code to the following:

• Add lightning:input
• Add lightning:button
• Add aura:attribute 'questions' Object[]
• add aura:iteration
• doInit

<aura:component >

	<!-- 1. Attributes -->
	<aura:attribute name="pageTitle" 
			type="String"
			default="Questionnaire"
			description="Title of the Questionnaires" />
	<aura:attribute name="questions" 
			type="Object[]"
			default="[]"
			description="Title of the Sections of Questionnaires" />

	<!-- 2. Handlers -->
 	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

	<!-- 3. Events -->
  
	<!-- 4. Methods -->
	  
	<!-- 5. Data Service Components -->  

	<!-- 6. Layout -->		
	<h2 class="slds-text-align--center slds-text-heading--large slds-m-around--large">
	  {! v.pageTitle }
	</h2>


	<!-- {% for question in section.questions %} -->
	<aura:iteration items="{!v.questions}" var="question">
            <p>Question: {!question.question__c}</p>
      	</aura:iteration>
	<!-- {% endfor %} -->

	<div class="slds-box slds-m-around_x-small">
	  <div class="slds-grid slds-wrap">
	    <div class="slds-size_2-of-3">
               <lightning:input type="checkbox" 
        	                label="I accept the terms of use and participation in this questionnaire" 
        	                name="TandCs" 
        	                value="" />
	    </div>
	    <div class="slds-size_1-of-3">
	      <div class="slds-text-align_right">
	    	<lightning:button variant="brand" 
	    			  label="Mark Complete" 
	    			  iconName="utility:answer" 
	    			  iconPosition="left" 
                                  onclick="{! c.handleSaveClick }" />
	    	<lightning:button variant="brand" 
	    			  label="Back to Questionnaires" 
	    			  iconName="utility:list" 
	    			  iconPosition="left" 
                                  onclick="{! c.handleBackClick }" />
	      </div>
	    </div>
	  </div>
	</div>

</aura:component>