Radio Button color change

Radio Button color change


page.xml

<Page title="Title" class="sapUiSizeCompact" >
  <content>
 <HBox  class="sapUiSmallMargin">
    <RadioButtonGroup id="sd" columns="2" select="xyz" class="sapUiMediumMarginBottom" selectedIndex="0">
    <buttons>
     <RadioButton id="rb1" text="Customer" class="labl1"/>
     <RadioButton id="rb2" text="Prospect" class="labl2"/>
    </buttons>
   </RadioButtonGroup>
            </HBox>
         
                <HBox id="h1">
                <Label text="Customer Id :" labelFor="multiInput" class="sapUiSmallMarginBeginEnd sapUiTinyMarginTopBottom labl1"/>
                    <MultiInput
                        id="multiInput"
                        valueHelpOnly="true"
                        valueHelpRequest=".onValueHelpRequested" >
                    </MultiInput>
                    <Button icon= "sap-icon://search" class="sapUiTinyMarginBeginEnd" ></Button>
                    <Button icon= "sap-icon://refresh" ></Button>
                </HBox>
               
             
                    <HBox id="h2">
                    <Label text="Prespect Id :" labelFor="multiInput" class="sapUiSmallMarginBeginEnd sapUiTinyMarginTopBottom labl2"/>
                    <Label text="  "></Label>
                    <MultiInput
                        id="multiInput1"
                        valueHelpOnly="true"
                        valueHelpRequest=".onValueHelpRequested">
                    </MultiInput>
                    <Button icon= "sap-icon://search" class="sapUiTinyMarginBeginEnd" ></Button>
                    <Button icon= "sap-icon://refresh"></Button>
                    </HBox>
  </content>
 </Page>

------------------------------------------------------------------------------------------------
controller.js

onInit: function() {
 
  /*this.getView().byId("h1").setVisible(false);
  this.getView().byId("h2").setVisible(false);*/
  this.xyz();
},


xyz : function(){
 
  debugger;
  var a = this.getView().byId("sd").getSelectedIndex()
  a=="0"? this.getView().byId("h1").setVisible(true):this.getView().byId("h1").setVisible(false);
  a=="1"? this.getView().byId("h2").setVisible(true):this.getView().byId("h2").setVisible(false);
 
}


-------------------------------------------------------------------------------------------------------

style.css

.labl1{
color: red !important;
font-weight: 600 !important;
}
.labl2{
color: blue !important;
font-weight: 600 !important;
}


#ids11--rb1-label{
color: blue !important;
font-weight: 600 !important;
}

#ids11--rb2-label{
color: red !important;
font-weight: 600 !important;
}


----------------------------------------------------------------------------------------------------------
index.html

<link rel="stylesheet" type="text/css" href="css/style.css">


output :

2 Comments

  1. Hi Admin thanks for the solution appreciated,
    But I dont want to do it in dynamic ID as you have did it with dynamic IDs to change the color of the text
    because for dynamic ID if we use that way after going to another page and coming back to same page the dynamic id changes and the color goes blank so better to not to use dynamic id

    ReplyDelete
  2. Hi Digvijay,

    your point is correct and i found solution on that in the next blog i created class for button and using that class i change the button color please check and revert.

    please check my next updated post ( https://apnesapguruji.blogspot.com/2019/10/change-button-background-color-without.html )

    Thanks !!

    ReplyDelete
Previous Post Next Post