label color change and radiobutton color change and icon color change using the class ( not using standard sap calss)

label color change and radiobutton color change and icon color change using the class ( not using standard sap calss)


view.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 gen1"></Button>
<Button icon="sap-icon://refresh" class="gen2"></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 gen1"></Button>
<Button icon="sap-icon://refresh" class="gen2"></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;
}


.labl1>.sapMLabel{
color: blue !important;
font-weight: 600 !important;
}

.labl2>.sapMLabel{
color: red !important;
font-weight: 600 !important;
}


.gen1>.sapMBtnInner {
background-color: green;
background-image: none;
outline: medium none !important;
}

.gen1>.sapMBtnInner>.sapMBtnIcon{
 color : white;
}

.gen2>.sapMBtnInner {
background-color: #06997b ;
background-image: none;
outline: medium none !important;
}

.gen2>.sapMBtnInner>.sapMBtnIcon{
 color : white;
}



+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

index.html

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


output :


Post a Comment

Previous Post Next Post