Skip to Content
0

SWITCH component of sap design studio

Dec 09, 2016 at 05:59 AM

439

avatar image

Hello,

I want use switch component of sap design studio,but no way to set show content in it's property only ON/OFF.I want show AR/TTL,so I just use css to change the content,I'm successed.But the problem is that it just worked in firefox browser as picture first,and IE or 360 browser false as picture second.Follow is my css code.Does anyone know why?

span[class="sapMSwtLabel sapMSwtLabelOn"]{
 visibility:hidden; 
}
span[class="sapMSwtLabel sapMSwtLabelOn"]:before{
visibility: visible !important;
content: "AR" !important;
}
span[class="sapMSwtLabel sapMSwtLabelOff"]{
visibility:hidden;
} 
span[class="sapMSwtLabel sapMSwtLabelOff"]:before{
visibility: visible !important;
content: "TTL" !important;
}

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Martin Pankraz Dec 09, 2016 at 09:01 AM
0

Hi Jing,

I played with the css selectors a little. There seems to be a problem with your pseudo elements approach (css ::before statement) and IE. This what I came up with to support all browsers. Please assign class "test" to your switch component on its Design Studio properties.

div[class="test"] span[class*="sapMSwtLabelOff"]{
	visibility:hidden;
}


.test span[class*="sapMSwtLabelOff"]::before{
	visibility: visible !important;
	content: "TTL" !important;
}

Let us know if that works for you.

Kind regards

Martin

Show 4 Share
10 |10000 characters needed characters left characters exceeded

Hi,Martin.

Thank you for your replay.

It worked in all browser I have,but it seens this code haven't work,it just add "TTL" to content before text.I want hiden or delete before text,and then add "TTL".

div[class="test"] span[class*="sapMSwtLabelOff"]{
	visibility:hidden;}

Follow is my code,it works well in 360 browser,firefox browser,googel browser,but IE false.

span.sapMSwtLabel.sapMSwtLabelOn{
    visibility: hidden;
}
span.sapMSwtLabel.sapMSwtLabelOn:before {
    padding: 0px;
    position: absolute;
    visibility: visible;
    content: "AR";
}
span.sapMSwtLabel.sapMSwtLabelOff{
    visibility: hidden;
}
span.sapMSwtLabel.sapMSwtLabelOff:before {
    padding: 0px;
    position: absolute;
    visibility: visible;
    content: "GIT";
}

Thanks.

Jing.

0

Hi Jing,

this means you changed something, because your former example on IE didn't show any text. I adjusted your example for the switch button's "off" state. Maybe you need to rewise your css settings? My test in IE showed only TTL. Make sure to assign my custom class "test" to the component.

Kind regards

Martin

ttl.png (40.4 kB)
0

Hi,Martin.

I have tried what you said,but this style have a problem,you haven't hiden before value "Aus" and then add a new value "TTL" before it,so you will show "TT...". The selector "before" means you can insert a value before old value,eg:"Aus" changed to "TTLAus".

Thanks.

Jing

0

Hi Jing,

Sorry I looked at it the wrong way. You can still try to find a different css selection to achieve what you want. That was the angle I was tyring. But this IE behavior looks suspiciously like a bug I'd say.

Kind regards

Martin

0
varun garaga Dec 09, 2016 at 11:39 AM
0

HI Martin,

did DIV supports in design studio?

as far as i know we cant play with HTML right

and i am using design studio 1.6 sp1 i dont see any switch component its a new component ?

Please correct me if i am wrong

Thanks,

Varun

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hi,Varun.

Swiftch component is in SAPUI5 m model.

Thanks.

Jing.

0
Baudouin Dupriez Jun 15, 2017 at 02:41 PM
0

hi Jing,

what feature did you use as 'switch' button . I am in DS 1.6, and did not find it.

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Hi Baudouin,

Look up under 'Basic Components' you will see Switch 4th-from bottom.

Note: Make sure to select SAPUI5 m (when you create new application/template)

scn-switch.png (10.9 kB)
0

thanks. Indeed I was in "SAPUI5" mode not in "SAPUI5 m".

0