filterpanel customization Css class

[Former Member]

Hi All,

We have filterpanel as main page in our Sap design studio application desktop version.

If we execute the link in Iphone the dimensions in filterpanel is very small.

I have tried creating the same application using Iphone template, but crosstab are not coming properly as expected, so we cannot use Iphone template.

In the desktop template only am trying to change the fnt size of dimentsions in filterpanel and also teh button sizes.

I have checked in Scn and found below links with relevant details for Css.

But we dint get any proper class for changing the Filterpanel Font size and Button size.

Please elt me know which class i should use for getting the required changes.

Thanks,

Jaya

[Former Member]

Another work around I could suggest is

Using getUserAgent() function

var getString=APPLICATION.getUserAgent();

This function returns the user Agent string based on the device on which the application is  executed. So with this you can use a if else condition in the startup of your application to define your width and size of your components for various devices.

Example

if(getString=="Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5")

{

Define your margins/widh/height of the filterpanel for iPhone here

}

else

{

Define your margins/widh/height of the filterpanel for Desktop here

}

User Agent for iphone4 -Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5

User Agent for iphone5 - Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

User Agent for iphone6 - Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

Helps?

[Former Member]

Hi Jayapradha

To change the button size for desktop and iphone you will have to use the combination of @media CSS class

Example - Define "b" as your CSS Class for Button

//For desktop

.b.sapUiBtnS {

   font-family: Tahoma,Arial,Helvetica,sans-serif;

   font-size: 12px; //Change accordingly

   color: #000000;

   height: 21px;

   width: 200px !important; //Change accordingly

}

//For iphone

@media only screen

  and (max-device-width: 320px)

  and (max-device-height: 480px)

  and (-webkit-min-device-pixel-ratio: 2) {

.b.sapUiBtnS {

   font-family: Tahoma,Arial,Helvetica,sans-serif;

   font-size: 6px; //Change accordingly

   color: #000000;

   height: 12px;

   width: 120px !important; //Change accordingly

}

}

The @meida class will work like a if loop and the css styles defined within this class will be applied to the specified condition of width and height of the screen.

Thanks

[Former Member]

Hello Jaya,

I am new to Css, but I think you can try to override the font-size of class .sapUiTv in sapzenfilterpanel to change the font size of the dimensions in the filter panel.

Thanks,

Nithya V

[TammyPowlas]

Hello Jaya - the SAP Help on page 39 suggests not using the crosstab with the iPhone - see http://help.sap.com/businessobject/product_guides/AAD15/en/ds_15_user_en.pdf

That said, I am wondering about your requirement to show the crosstab on the iPhone; perhaps you could use the camera icon to upload screen shots?   Also please share which version of Design Studio you are using?