Skip to Content
0

Which SAPUI5 control can be used to display dynamic content in form of Labels or lists?

May 17, 2017 at 06:29 AM

38

avatar image

I am developing a Online Questionnaire application. In this I am using Checkbox and Labels inside a VBox and Hbox control to display the options for my answers. These answer options I am getting them from my questionnaire.json model.

Following is my App.view.xml showing the answers layout:

<VBox id="multipleChoices">
   <items>
        <HBox backgroundDesign="Solid" alignItems="Center">
            <items>
                <CheckBox id="mCheckBox0 /><Label text="" id="multipleChoice0" width="500px"/>
               <CheckBox id="mCheckBox1 /><Label text="" id="multipleChoice1" width="500px"/>
           </items>
        </HBox>
       <HBox backgroundDesign="Solid" alignItems="Center">
           <items>
               <CheckBox id="mCheckBox2"/><Label text="" id="multipleChoice2" width="500px"/>
               <CheckBox id="mCheckBox3"/><Label text="" id="multipleChoice3" width="500px"/>
          </items>
       </HBox>
  </item>
</VBox>

It gets applied in front end as follows:

Q1.png

Q2.png


Problem: You can see in Q2.png 4 Labels and 4 radio buttons are being displayed even though there are only two answer options. How do I achieve the scenario where the labels's and radio buttons/ check boxes appear in same number as the answer choices and extra ones are hidden? Is there a dynamic control which can help me with this one?

Also I have a default model named. Questionnaire.json and a temporary model called currentQuestion which holds the current question, answers so that it can be populated on frontend everytime user clicks on next / previous button.

Following is the code for my questionnaire.json and App.controller.js:

questionnaire.json

{
	"data": [{
		"question": "Which pet do you like from the following?",
		"answers": ["Cats", "Rabbits", "Dogs", "Hamsters"],
		"correct": 1,
		"type": "multiple choice"
	}, {
		"question": "Which pet do you prefer from the following?",
		"answers": ["Cats", "Dogs"],
		"correct": 1,
		"type": "single choice"
	}, {
		"question": "What food brand does your pet eat?",
		"answers": ["Pedigree", "Catfood", "Rabbitfood", "HamstersFood"],
		"correct": 1,
		"type": "text input"
	}]
}

App.controller.js
ap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/m/MessageBox"
], function(Controller, JSONModel, MessageBox) {


	var oCurrentQuestionModel;
	var oQuestionModel;
	var iCurrentIndex;
	var oQuestionModelLength;


	Controller.extend("opensap.onlinequestionnaire.controller.App", {
		onInit: function() {
			this.questionSetUp();
			this.getView().setModel(new JSONModel({
				index: false,
				question: {},
				answers: [],
				type: {}
			}), "currentQuestion");


			oCurrentQuestionModel = this.getView().getModel("currentQuestion");
			iCurrentIndex = oCurrentQuestionModel.getProperty("/index");
		},
		startQuestionnaire: function() {
			if (iCurrentIndex === false || iCurrentIndex < 1) {
				iCurrentIndex = 0;
				this.byId("questionNumber").setText("Question " + (iCurrentIndex + 1));
			}
			this.setCurrentQuestionModel();
		},
                goToPrevious: function() {
			this.setPrevious();
		},
		goToNext: function() {
			this.setNext();
		},
		questionSetUp: function() {
			this.byId("multipleChoices").setVisible(false);
			this.byId("singleChoices").setVisible(false);
			this.byId("textInput").setVisible(false);
		},
		setNext: function() {
                      if ((iCurrentIndex === true) || (iCurrentIndex === 0) || (iCurrentIndex > 0)) {
				++iCurrentIndex;
				if (iCurrentIndex > oQuestionModelLength - 1) {
					MessageBox.show("End of questions", {
						title: "Alert"
					});
					return;
				}
			} else {
				iCurrentIndex = 0;
			}
this.byId("questionNumber").setText("Question " + (iCurrentIndex + 1)); this.setCurrentQuestionModel(); }, setCurrentQuestionModel: function() { oQuestionModel = this.getOwnerComponent().getModel("questionnaire"); oQuestionModelLength = oQuestionModel.getProperty("/data/length"); var oCurrent = { index: iCurrentIndex, question: oQuestionModel.getProperty("/data/" + iCurrentIndex + "/question"), answers: oQuestionModel.getProperty("/data/" + iCurrentIndex + "/answers"), type: oQuestionModel.getProperty("/data/" + iCurrentIndex + "/type") }; oCurrentQuestionModel.setProperty("/", oCurrent); if (oCurrentQuestionModel.getProperty("/type") === "multiple choice") { this.byId("multipleChoices").setVisible(true); this.byId("singleChoices").setVisible(false); this.byId("textInput").setVisible(false); this.byId("questionText").setText(oCurrentQuestionModel.getProperty("/question")); this.byId("multipleChoice0").setText(oCurrentQuestionModel.getProperty("/answers/0")); this.byId("multipleChoice1").setText(oCurrentQuestionModel.getProperty("/answers/1")); this.byId("multipleChoice2").setText(oCurrentQuestionModel.getProperty("/answers/2")); this.byId("multipleChoice3").setText(oCurrentQuestionModel.getProperty("/answers/3")); } else if (oCurrentQuestionModel.getProperty("/type") === "single choice") { this.byId("multipleChoices").setVisible(false); this.byId("singleChoices").setVisible(true); this.byId("textInput").setVisible(false); this.byId("questionText").setText(oCurrentQuestionModel.getProperty("/question")); this.byId("singleChoice0").setText(oCurrentQuestionModel.getProperty("/answers/0")); this.byId("singleChoice1").setText(oCurrentQuestionModel.getProperty("/answers/1")); this.byId("singleChoice2").setText(oCurrentQuestionModel.getProperty("/answers/2")); this.byId("singleChoice3").setText(oCurrentQuestionModel.getProperty("/answers/3")); } else if (oCurrentQuestionModel.getProperty("/type") === "text input") { this.byId("multipleChoices").setVisible(false); this.byId("singleChoices").setVisible(false); this.byId("textInput").setVisible(true); this.byId("questionText").setText(oCurrentQuestionModel.getProperty("/question")); } }, setPrevious: function() {
// similar to set Next

} }); });
q1.png (34.6 kB)
q2.png (32.8 kB)
10 |10000 characters needed characters left characters exceeded

@Abdul Moh'd
I got the functionality of next and previous question. But now I am facing this problem. Can you review my code and suggest me improvements.

0
* Please Login or Register to Answer, Follow or Comment.

0 Answers