Dynamic Generation of Radio Buttons in SAPUI5

Introduction

Hello Guys, I myself Vivek with 14+ years rich experience in SAP Netweaver and currently specialized in SAP Fiori/UI5 Development. We are a SAP Gold Partner and specialized in SAP UX Technologies too.

In my years of experience I am working with SAPUI5 for the past 7 years and to be honest still learning new things connecting with new business requirements.

Eligible Readers

SAPUI5 developers, Consultants, Solution Architects and basically anyone who is interested in SAP UX possibilities and new business scenarios.

When the readers need this blog?

Hopefully this blog will be helpful to the above mentioned readers when they are looking for UX page/app with dynamic UI generation. This blog is part 2 with the dynamic generation of UI5 table in the below link

This blog is all about creating Radio Button groups dynamically based on the odata response and retrieving the selected answers from the dynamically generated radio buttons.

The optimal scenario be creating dynamic options for some questions, surveys etc., and doing some calculations based on the outcome from the user selection.

UI’s Used in this blog and reference

sap.m.RadioButtonGroup

API Reference:

sap.m.RadioButton

UX Guidelines:

Radio Button

Extends:

Control

Application Component: CA-UI5-CTR

Available Since: 1.10

Category: User Input

Dynamic Radiobutton generation

We have considered the use case of a simple question and Answer app where the questions are maintained in a table in the backend system.

The questions are retrieve via oData response and the UI elements will be created in dynamically in the view.

Below is my View Code

<Page title="Student Examination">
		<l:VerticalLayout class="sapUiContentPadding" id="overlayout"></l:VerticalLayout>
		<HBox>
		<l:HorizontalLayout class="sapUiContentPadding" id="horilayout">
			<Button id="btnSubmit" text="Submit" press="finalSubmit" type="Accept"/>
		</l:HorizontalLayout>
		</HBox>
	</Page>

Now we are going to create our dynamic Radio Button Group in the Vertical Layout with id “overlayout”.

Execute the oData and store the response on a JSONModel referred here a oModel.

var oPanel = this.getView().byId("overlayout");
				var i;
				var s = oModel.oData.cols.length;
				for (i = 0; i < s; i++) {
					var ind = i+1;
					var oLabel = new sap.m.Label({
						id:"oLabel"+i,
						text :ind+"." + oModel.oData.cols[i].Zquestions
					}); 
					var oRadioButtonGroup = new sap.m.RadioButtonGroup({
					//	id: "radioGroup"+i,
						buttons: [
							new sap.m.RadioButton({
							id:"option1"+i,
							text: oModel.oData.cols[i].Option1
						}),
							new sap.m.RadioButton({
							id:"option2"+i,
							text: oModel.oData.cols[i].Option2
						}),
							new sap.m.RadioButton({
							id:"option3"+i,
							text: oModel.oData.cols[i].Option3
						}),
							new sap.m.RadioButton({
							id:"option4"+i,
							text: oModel.oData.cols[i].Option4
						})]
						});
					
					oPanel.addContent(oLabel);
					oPanel.addContent(oRadioButtonGroup);

Now we have executed the oData and we know how many Questions are there and we have given 4 options for each questions.

Now the view is generated along with the questions maintained in the table.

Upon the submit button, we are going to read the values from the dynamic radio button selection and calculate the score by adding the correct answers.

The correct answers for each question is also store in the table.

The table structure be like

Upon Submission of the answers by clicking on the button,

Now the crucial part is each Radiobutton create is directly assigned to the horizontal layout as aggregations rather in the radiobutton group. So we need to reach the selected values of the radio button from the aggregations as below.

var s = oModel.oData.cols.length;
			var that = this;
			var i=0;
			var e;
			for(var t=0;t<s; t++){
				var cnt = this.getView().byId("overlayout").mAggregations.content.length;
				if(t===0){e=1;}
				else{e=e+2;}
				if(this.getView().byId("overlayout").mAggregations.content[e].getSelectedButton().getId().slice(6,7) === oModel.oData.cols[t].Answer){
					i=i + 1;
					
				}
			}

Based on the answers maintained in for each question we are adding the value of “I” which at the end will give us the correct result.

You can Route to another success page displaying the results of the questions answered. This can be created and tested a survey app among the team, internal examinations for the team etc.,

This is just the sample and with our imagination we can extend these possibilities limitless.

Please share your ideas and thoughts as well.