Add a picture to each Radio Button in Radio Button Group

Question

I want to implement a Radio Button Group where every Radio Button will have a picture next to it (on the left side of the radio button).

Is that possible? If so, how?

html:

<div class="form-group" show-errors>
    <label class="col-md-2 control-label metric-light-16-black pay-form-label">Payment Method</label>
    <div class="col-md-10" id="rdPaymentMethod">
        <label class="radio-group col-md-2">
            <span id="radio-group-1" style="margin-left: 0cm;"></span>
            <span class="radio" style="margin-left: 0cm;" />
            <img src="assets/images/card-mastercard.png" style="margin-left: 0cm;"/>

        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-2" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-viza.png"/>
        </label>

        <label class="radio-group col-md-2">
            <span id="radio-group-3" style="margin-left: 0cm;"></span>
            <span class="radio"/>
            <img src="assets/images/card-paypal.png"/>
        </label>
    </div>
</div>

javascript sap function:

var placeRadioButtonAt = function(radioButtonId, containingDivId, selected) {
    elements.push(radioButtonId);
    var oRB1 = new sap.ui.commons.RadioButton(radioButtonId, {
        selected : (selected==true),
        select : function() {}
    });

    oRB1.placeAt(containingDivId);
}

calling this function 3 time (for each radio button):

    placeRadioButtonAt("radio1","radio-group-1",true);
    placeRadioButtonAt("radio2","radio-group-2");
    placeRadioButtonAt("radio3","radio-group-3");

Take a look at this answer: https://stackoverflow.com/a/47411457/5846045 That way, images can be displayed between and text for each item without creating any custom control. However, displaying them horizontally is currently not supported. — Boghyon Hoffmann, Nov 21 '17 at 17:21

Cassio · Accepted Answer · 2016-12-13T09:33:04.190

3

I would extend the RadioButton control for allowing images to be added with each radio button, and also extend the RadioButtonGroup to allow adding the previous extended control as an aggregation.

OBS: css classes rendering are missing, more details on renderer implementation can be found here.

Assumptions:

The namespace was defined as my.app inside the index.html file
Inside your project folder (webapp or WebContents) you have created a folder for these custom controls, named controls

RadioButton extension

sap.ui.define(['jquery.sap.global', 'sap/m/Image', 'sap/m/RadioButton'

], function (jQuery, Image, RadioButton) {
    "use strict";

    var CustomRadioButton = RadioButton.extend("my.app.controls.RadioButtonImage", {
        metadata: {
            "properties": {
                "imageSrc": "string"
            },
        },
        renderer: function (oRm, oControl) {
            var oImg = new Image({ src: oControl.getProperty("imageSrc") })
            oRm.renderControl(oImg);
            sap.m.RadioButtonRenderer.render(oRm,oControl);
        }
    });

    return CustomRadioButton;
}, true);

RadioButtonGroup extension

sap.ui.define(['jquery.sap.global', 'sap/m/RadioButtonGroup'

], function (jQuery, RadioButtonGroup) {
    "use strict";

    var CustomRadioButtonGroup = RadioButtonGroup.extend("my.app.controls.RadioButtonGroup", {
        metadata: {
            aggregations: {
                buttons : {type : "my.app.controls.RadioButtonImage", multiple : true, singularName : "button", bindable : "bindable"}
            },
            defaultAggregation : "buttons",
        }
    });

    return CustomRadioButtonGroup;
}, true);

edited Dec 13 '16 at 09:33

answered Dec 12 '16 at 13:46

Cassio

2,912
2
20
21

thank you very much for your answer. I looked at your first solution but I am not sure it answers my needs. Let me explain. The current html I attached above is not suitable for radio button group. Instead it has **3 single radio buttons**. I want to combine them all into **one radio button group** (radio group). so I would probably need to create a method named: *placeRadioGroupAt()*. how can I create this method and which div should I give it? reminde you that I want all those 3 radio buttons inside this one element (radio group) to have a picture next to them. – Matoy Dec 12 '16 at 14:19
@Matoy: I have updated my answer based on your comment. I totally passed the detail it should be a radio button group. This should work for you. – Cassio Dec 12 '16 at 14:38
@Cassio: I followed your steps to create the custom Control. But the code is getting into a continuous loop and causing : Stack Overflow !!( :P). Error: Uncaught RangeError: Maximum call stack size exceeded. I think this is because of the code line: `oRm.renderControl(oControl);` which is causing the renderer method of itself again and again. We need to call the RadioButtonRenderer rather than the renderer method of itself. – Rahul Bhardwaj Dec 13 '16 at 05:38
@RahulBhardwaj: Correct! Thanks for pointing it out. I just corrected the answer. – Cassio Dec 13 '16 at 09:33
0 down vote This doesn't work.. I get an error "found in negative cache: 'CompleteSurvey/controls/RadioButtonGroupRenderer.js' from ./controls/RadioButtonGroupRenderer.js: 404 - Not Found" . Here's how I implemented it in the view ; xmlns:ri="CompleteSurvey.controls" – Adam Harkus Nov 21 '17 at 10:16
@AdamHarkus: Can you try running in incognito mode once and confirm if you get the same error? Also, i think there is problem with binding. Guessing `answers array` is present from root, binding should be: ` – Rahul Bhardwaj Nov 21 '17 at 11:16

Add a picture to each Radio Button in Radio Button Group

1 Answers1

RadioButton extension

RadioButtonGroup extension

Related