Skip to Content
Technical Articles
Author's profile photo Vivekanandhan Srinivasan

Dynamic Generation of Radio Buttons in SAPUI5


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


API Reference:


UX Guidelines:

Radio Button



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>
		<l:HorizontalLayout class="sapUiContentPadding" id="horilayout">
			<Button id="btnSubmit" text="Submit" press="finalSubmit" type="Accept"/>

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({
						text :ind+"." + oModel.oData.cols[i].Zquestions
					var oRadioButtonGroup = new sap.m.RadioButtonGroup({
					//	id: "radioGroup"+i,
						buttons: [
							new sap.m.RadioButton({
							text: oModel.oData.cols[i].Option1
							new sap.m.RadioButton({
							text: oModel.oData.cols[i].Option2
							new sap.m.RadioButton({
							text: oModel.oData.cols[i].Option3
							new sap.m.RadioButton({
							text: oModel.oData.cols[i].Option4


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(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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Oswald Seward
      Oswald Seward

      The article is really good, helping the reader understand many things about radio, so ecouter la radio en direct has helped me more.

      Author's profile photo Vivekanandhan Srinivasan
      Vivekanandhan Srinivasan
      Blog Post Author

      Thank you so much for your time reading this blog Oswals. Glad this blog is helpful to you. Have a great day ahead!