ITS Mobile Screen scaling down issue in MC9200 Device

[Sumankalyan17]

Hi all,

This is regarding the scaling down issue for Internet service in MC9200 Device.I have gone through a lot of options in the forum but we are unable to resolve the issue.

We are using Enterprise Browser in the RF device,but the internet device is not displaying proportionately in the device.

Please find the attached device snapshots.

I have tried meta tags by creating a HTML include as DEVINCLUDE_SYMBOL9200 and maintaining it as value for parameter ITSMOBILEDEVICEINCLUDE.I tested the below meta tags but no result.

1. <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
2. <meta name=“mobileoptimized” content=“240”>
3. <meta name="viewport" content="width=240, height=320, user-scalable=yes,

            initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

I have also increased the value of parameter ~ITSMOBILEELEMFACTOR to 9 ,but no difference in output.

i have tried adding both the parameters in Internet Service parameters in SE80 and also in GUI configuration parameter in SICF.

Kindly advise.

Regards

Suman.

[Former Member · Accepted solution]

Hi Suman Pradhan,

I think you have manually added the meta tag within the generated ITS HTML template otherwise it is not present.

Instead, you should use the CSS file: Mobile.css to do your cosmetic changes.

As per your snapshot, in the configuration, you have mentioned the ~ITSMOBILECSSINCLUDE class to be Mobile. So that means, in your internet service, you should have a file named mobile.css under an auto-created folder called 'MIME Objects'.

Now in order for ITS to recognize that file, you should also mention it for the same parameter for your Internet service in SE80 (Point 4 under 'Create an internet service'), AND change the path to that file in your HTML template accordingly in the generated code:

Eg: Say your mobile.css is under 'Styles' folder under the MIME Objects folder. Then change code as:

if ( ~itsmobileCssInclude != "" ) <!-- customer include from gui settings -->

  cssinclude = "Styles/" & ~itsmobileCssInclude & ".css";`

        <link rel="stylesheet" href="`mimeURL(~service=~current_service, ~theme=~theme, ~language="", ~name=cssinclude)`" type="text/css" />

` else <!-- default include from itsmobile --> `

        <link rel="stylesheet" href="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="styles/mobile.css")`" type="text/css" />

` end;

After that, edit mobile.css file: you can find the respective CSS class and add the code for enlarging in all the classes as mentioned in your HTML code:

Eg: Outer-most class by default is 'MobileBody'. In this, you can use all the CSS code you want to enlarge width, height, font: large and so on.

For further adding styling to your ITS screens, you can refer my next blog on it: .

Let me know.

[Sumankalyan17 · Accepted solution]

Hi ,

Thank you for your reply.

I created a device include DEVINCLUDE_SYMBOL9200 in the internet service in SE80.

I copied the code from HTML template DEVINCLUDE_SYMBOL3090 in Itsmobile01 internet service and added the Meta tags at the last.

I don't have any MobileCSSinclude in my internet service in SE80.

But I have some doubts here. Can you please provide your inputs?

1. If we maintain value of parameter ItsmobileCssinclude as "Mobile”, will it not refer to  the CSS include in Itsmobile?.
2. What would happen if I remove the MobileCSSinclude parameter from GUI configuration settings?

     Will it work according to the meta tag present in DeviceInclude HTML template?

Regards

Suman

[Former Member · Accepted solution]

Hi Suman,

As far i know the DeviceInclude file is put under the main ITS service such as ITSMOBILE01.

The basic ITS services are always used everytime you execute a service and the settings are taken from there. As mentioned here: Prerequisites to run ITSmobile - Wiki - SCN Wiki Try publishing the basic ITS services Completely:

• ITSMOBILE
• ITSGENMOBILE
• ITSGENMOBILE4
• ITSGENMOBILEXV
• Also your internet service again 'Completely'

Also, try adding ITSMOBILE01 to your ~Sources parameter.

To answer your questions, do you have a Mobile.css file in ITSMOBILE service?

You can create you own CSS class under your service under 'MIME'.

Please see: ITSMobile Development for more information.

If none of the above work, you can implement as per my second blog.

[Sumankalyan17 · Accepted solution]

Hi

I have not yet added CSSinclude in the internet service in SE80.

As you can see in my first post snapshot,the internet service is not covering the entire screen in the device.

Can you provide CSS code that is  to be written to make the internet service display properly (covering the whole screen area) of the RF device.

Thanks again for all your support .

Regards

Suman

[former_member194364 · Accepted solution]

Hi Suman,

have you tried accessing the same ITSMobile service on a Chrome Browser usign the Developer Tools (CTRL + Shift + L)and using the toggle device mode (CTRL + Shift + M) and inputing the screen size in pixels. Does the ITSMobile service display like in the "1.jpg"?

The ITSMobile Visual Editor might be useful here: https://wiki.scn.sap.com/wiki/x/-QRPF

Regards,

Oisin

[Former Member · Accepted solution]

As Oisin ONidh mentioned, Using Visual Editor maybe a good idea.

If not, the jist of CSS styling is given in my blog - 

1. Create a css file under you service (right-click -> MIME).

2. make sure you link to that file in your parameters of service as well as in the HTML template that you have created for your screen.

3. In this file you can copy the skeleton from mobile.css file present under ITSMOBILE service.

4. in your HTML template, Check the class for your body tag, find that in your mobile.css, if not present, add it in the mobile.css and then add the code to increase the width and height of that eg. MobileBody class.

MobileBody

{

     width: 100%;

     height: 100%;

}

5. Publish that entrie service again

[Sumankalyan17 · Accepted solution]

Hi

Thanks for the reply,

Will check and update..

Thanks.

Regards

Suman

[former_member621593]

I am facing the same issue, i am confused what is the exact solution to resolve this issue, could you please help on this.

[Sumankalyan17]

I have updated the work around in the above comments.

Please check once if it works for your issue.

Regards

Suman

[Sumankalyan17]

Hi ,

Need one quick help here.

After using the device include the output layout is coming as expected,but the cursor is not on the input field.

I tested by removing the device include parameter (ItsMobileDeviceInclude) from service parameter .

So whenever  I remove the parameter,the cursor is on the input field,and when i add the parameter the cursor  is not set,so I guess the include code is responsible.

Include Code ---

`include(~service="system", ~language="", ~theme="dm", ~name="templateLibraryScreenIndependentDHTML.html");`

<html>

  <head>

    <!-- <title>`#windowtitle`</title> -->

    `SAP_TemplateStylesheet()`

    `SAP_TemplateJavaScript()`

  </head>

  <body `SAP_TemplateBodyAttributes( )`

        onload="`SAP_TemplateOnLoadJavaScript()`" >

<meta name="viewport" content="width=480, height=640, user-scalable=yes,

initial-scale=1.2, maximum-scale=5.0, minimum-scale=1.0" />

  </body>

  `SAP_TemplatePostProcess();`

</html>

Kindly advise.

Regards

Suman

[former_member194364]

Hi Suman,

hard to tell from here.

How does the "view source" of the HTML templates compare? with and without the ~itsMobileDeviceInclude set in SICF?

Regards,

Oisin

[Sumankalyan17]

Hi ,

I think the issue is with the above auto generated code .

I guess the enterprise browser can handle only one <body> tag in a page.

When the above <body> tag is loaded , the browser ignores the below second <body> tag in the internet template (system generated) which contains attribute to set focus.

    `<body class="MobileBody `class("~currdynpro", 1)`" `style_attr("~currdynpro", 1);

      if (~currdynpro.speechenabled != "")` ev:event="load" ev:handler="#sayOnPageLoad"` else

      ` onload="setFocus('`~focusfield`');`~itsmobileOnloadHandler`"` end;

      ` onkeydown="return processKeyEvent(event);">.

So now I have to change in each screen and the above discussed meta tags after the 2nd <body> tag instead of writing in the device include.

Hope I am clear .

Regards

Suman.

[Sumankalyan17]

Hi all,

We got a workaround by applying the below meta tags.

I think the issue was coming up because the resolution of device is 640 x 480 but the resolution of the sap service is 320 x 240 .

<meta name="viewport" content="width=480, height=640, user-scalable=yes,

initial-scale=1.5, maximum-scale=5.0, minimum-scale=1.0" />

Thanks all you for your help.

Regards

Suman

[former_member194364]

Hi Suman,

happy to hear you were able to resolve .Just in case anybody else finds this thread

You included this meta name in the custom DEVINCLUDE_SYMBOL9200 file for your ITSMobile service and then used the parameter ~ITSMOBILEDEVICEINCLUDE in the GUI Configuration in SICF to point to this file?

Correct?

Regards,

Oisin

[Sumankalyan17]

Hi Oisin ,

Yes, you are correct.

I created a device include of DEVINCLUDE_SYMBOL9200 and added it as a parameter value for ~ITSMOBILEDEVICEINCLUDE in GUI configuration.

Now whatever change i do in the meta tag in the include is applicable for the entire service.

Also i would like to provide one additional info over here.

If there is a requirement to provide different scaling factor for different screens ,then we can create a new include in the HTML template.

Then in the particular screen where you need different scaling factor (or any other screen specific change).

update the below html tag.

       include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileDeviceInclude & ".html");

with something like the below.

include(~service=~current_service, ~language="", ~theme=~theme, ~name="devinclude_mc9200_1.html");

Hope it helps someone.

Regards

Suman.

[prakashlu82]

Hi Pradhan,

Need your help here. We are testing RF screens in Zebra RF gun which is on Android 10.0 with Enterprise Browser 3.0. Previously we were using Windows OS with IE as Browser. Now the issue is with small screen size. I have tried adding Viewport tag in HTML template under <head> section but non of the options seems working. Can you please through some light for us to fix this scaling issue?

Thanks,

Prakash S.

[Sumankalyan17]

Hi

can you shed some info as whether there are any service parameters to set the screen resolution.

Regards

Suman

[Former Member]

I do not know of any service parameter to set the resolution.

However, i always set the width & height for the outer CSS class written for the 'body' tag to be of 320 * 480 pixels in my main CSS file itself.

[Sumankalyan17]

Hi

I just checked that the resolution of the device is 640 x 480 (vga res).

And one of my colleague suggested that the resolution of the device should be 320 * 480 .

Is it because  of this I am getting the scaling down issue?

Also now I understand what you were asking me to check .I would test the internet service in Chrome and update.

Regards

Suman.

[former_member194364]

Hi Suman,

that could be the issue alright.

The templates could have been generated for smaller resolution size similar to 320* 480?

Regards,

Oisin

[Sumankalyan17]

Hi

Are there any service parameters where we can set the device resolution.

Is there way to set the resolution from the SAP side?

Regards

Suman

[former_member194364]

Hi Suma,

no this is not possible. No such parameters exist.

Regards,

Oisin

[Sumankalyan17]

Hi

We don't have IE 9 or above installed in the server (virtual desktop) where ECC is installed so we are not able to use SAP visual editor.

Also we don't chrome browser installed on the RF device as it was suggested to use Enterprise browser.

Is there any other way to achieve this apart from what was suggested by

[former_member194364]

Hi Suman,

no I did not expect that you would have Chrome on the device - but if you have Chrome on a desktop/laptopyou can emulate calling the ITSMobile service in a screen size that is similar.

That would help troubleshooting, well for me it helps.

If ITSMobile Visual Editor is not possible - then would need to follow the steps outlined by

This is the only solution here for you.

Regards,

Oisin