SAP ITS on Motorola MC55A0 Screen Problems

[Former Member]

Hi Experts,

We are implementing SAP ITS for our WMS. I have a Motorola MC55A0, I am just testing with the standard ITSMOBILE01 for the device symbol 3090. Every is working fine except the screen resolution. It doesn't fit to the screen for the device Motorola MC55A0, every time i need to zoom in to key in the username & password and consecutive screens. Other threads, i noticed we need to change the HTML code like meta data or to change height and width settings. But nowhere clear documentations are mentioned. Please let me know the exact place were to Change/ Add the code in the program. Is it in the custom module pool program need to do the changes? if yes then please tell me the exact place under which tag need to place the code. If we need to change the code of the HTML Template include eg: DEVINCLUDE_SYMBOL3090. Please let me know the exact place. System information : EHP7 , Motorola OS: Windows 6.5 Classic.  OS Version: 05.02.29217 OEM Name: Motorola MC55A ,OEM Version: 03.47.0004,OS Cert: SymbolCert.  Your response will be appreciated!!!

Regards,

Vinoth

[former_member602316]

Hello,

I think you are using IE web browser. I had same problem and it solved.

You can add the following code to your html :

<meta name="viewport" content="width=480, user-scalable=no">

[Former Member]

Vinoth,

Have you explored the option of using an alternate browser. The native browsers that are delivered in Windows CE have a bad rendering of the HTML.

Try using the Naurtech browser for Windows CE. Its designed to work well with SAP ITS mobile developments.

[Former Member]

Hi Kelvin Baldwart,

Many Thanks for your assistance. Seems Naurtech browser does not come for free. I am looking for the best fit with the default browser provided by Motorola. I tried the option using Pocket Browser, that is also not free. Have to buy the pocket browser, which we are not convinced . Would like to use the Max facility provided by SAP. Thanks!

Regards,

Vinoth

[former_member194364]

Hi Vinoth,

When you generated the templates in SE80

Were the screen sizes 16x20 or 8x40?

Is the ITS Mobile Visual Editor Wiki of use here:

http://wiki.sdn.sap.com/wiki/x/cr8 --> ITSmobile Visual Editor

Regards,

Oisin

[Former Member]

Hi Oisin,

I was expecting your reply. Really thanks for helping out all our people in SDN. Is it the screen size you are referring to please see the below screen shot. I did it in the SPRO configuration path.i tried will all the possibilities. But couldn't see the expected output. Please assist . Many Thanks!

I have already gone through all the ITS visual editor and their related child thread also. but nowhere the screen resolution documentations are clear.

Regards,

Vinoth

[former_member194364]

Hi Vinoth,

I believe your ITSMobile HTML templates should be generated with the 16x20 screen if you are to use this ITSMobile service on a Motorola MC55A0 device.

What transaction are you hoping to use?

See ITS Mobile Wiki re template generator

https://www.sdn.sap.com/irj/sdn/wiki?path=/display/HOME/ITSmobile

and

http://help.sap.com/saphelp_nw70/helpdata/en/

46/65635b4d045de8e10000000a1553f6/frameset.htm

  > Creating Mobile Applications with ITSmobile

also refer to the following note:

  1316326 - ITSmobile: HTML element size is independent of font size

(will only be useful for minor changes)

Regards,

Oisin

[Former Member]

Hi Oisin,

I have tested with all 4 screen size from 16x20,8x40,16x20ITS,16x20MIN.  But there are no differences noticed even after re-publishing all the screen.

We are doing a POC to use the ITS for the WMS. Planned to create a custom module pool program to  scan the Bar code and do  GR,create TO,Confirm TO,Change Bin etc. i am doing the feasibility testing with the SAP standard ITS services, but facing a problem in Screen fixes. As i don't know HTML & Java Script. Not sure were to Fix the template size in html or in java. Please assist.

All the link which you have shared shows what to do, but i seeking a clear view on how to do and were to do in the template. assist me if i am missing anything. Thanks!

Regards,

Vinoth

[former_member194364]

Hi Vinoth,

can you attach the source code of one of the HTML templates of your ITSMobile service (for a screen size of 16x20,) that was generated with MOBILE4

Regards,

Oisin

[Former Member]

Hi Oisin,

please find the below code which is exactly same as program SAPMIMOB1 under the ITS services ITSMOBILE01.

`if (~currdynpro.speechenabled != "")

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

`end;`

<html`if (~currdynpro.speechenabled != "")

    ` xmlns="http://www.w3.org/1999/xhtml"

      xmlns:vxml="http://www.w3.org/2001/vxml"

      xmlns:ev="http://www.w3.org/2001/xml-events"

      xmlns:xv="http://www.voicexml.org/2002/xhtml+voice"`

  end;` class="MobileHtml">`

  if ( ~itsmobileNameSpace != "" )

    ~current_service = ~itsmobileNameSpace & ~service;

  elseif ( strsub(~sources, 0, 1) == "/" )

    ~current_service = strsub(~sources, 0, strchr(~sources, "/", 1)+1) & ~service;

  else

    ~current_service = ~service;

  end;`

`

<!-- Generated Template

      NAME:   ZVSAPMIMOB1

      SCREEN: 0500

      DATE:   20140917

      TIME:   161851

      STYLE:  MOBILE4

-->

declare class(name, idx=1), style(name, idx=1), style_attr(name, idx=1), icon(name, idx=1),

    class_ext(name, idx=1), align(name, idx=1), label(name, idx=1), has_label(name, idx=1),

    width(i, a), margin_left(i, a), w(i, a) in "some.html";

if ( ~itsmobileFuncInclude != "" )

    include(~service=~current_service, ~language="", ~theme=~theme, ~name=~itsmobileFuncInclude, ~style="x");

else

    include(~service="itsmobile", ~language="", ~theme="99", ~name=nonExt&"functions", ~style="x");

end;

    `<head>`

    if ( ~itsmobileDeviceInclude != "" )

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

    end;

        `<title>`~windowtitle`</title>`

if ( ~itsmobileSoundInclude != "" ) <!-- customers sound -->

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

else <!-- default -->

   include(~service="itsmobile", ~language="", ~theme="99", ~name="include/sound.html");

end;`

`

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

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

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

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

` end;

if ( ~itsmobileJsInclude != "" ) <!-- customer include specified in gui settings -->`

        <script type="text/javascript" language="javascript" src="`mimeURL(~service=~current_service, ~theme=~theme, ~language="", ~name=~itsmobileJsInclude & ".js")`"></script>

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

        <script type="text/javascript" language="javascript" src="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="scripts/all/mobile.js")`"></script>

` end;

  if ( ~itsmobileCustomJsInclude != "" )`

        <script type="text/javascript" language="javascript" src="`mimeURL(~service=~current_service, ~theme=~theme, ~language="", ~name=~itsmobileCustomJsInclude & ".js")`"></script>

` end;`

        <script type="text/javascript" language="Javascript">

           var itsmobile_eos = "`wgateurl(~okcode="/nex")`";

        </script>

` <!-- rfid values --------------------------- -->

  if ( ~RfidEnabledFields != "" ) `

        <script type="text/javascript" language="javascript" src="`mimeURL(~service="itsmobile", ~theme=99, ~language="", ~name="rfid/rfbutton.js")`"></script>

        <script type="text/javascript" language="Javascript">

           var rfid_fields = new Object;

`   repeat with i from 1 to ~RfidEnabledFields.dim

      <!-- get field name and index -->

      rfidField = ~RfidEnabledFields[i];

      rfidFieldIdx = ~RfidEnabledFields[i].idx;

      rfidFieldParams = ~RfidEnabledFields[i].params; `

           rfid_fields["`rfidField`[`rfidFieldIdx`]"] = { `rfidFieldParams` };

`   end;`

        </script>

` end;`

`       <!-- Check if screen supports voice integration -->

        if ( ~currdynpro.speechenabled != "" )

          <!-- include the htmlb functions for voice integration -->

          if ( ~itsmobileVoiceInclude != "" ) <!-- customers voice generation html -->

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

          else <!-- default its default voice include -->

            include(~service="itsmobile", ~language="", ~theme="99", ~name="include/voice.html");

          end;

        end;`

`

    `</head>`

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

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

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

      ` onkeydown="return processKeyEvent(event);" onhelp="return false;">

`

        `<form method="post" action="`WGateURL()`" id="mobileform" name="mobileform" onsubmit="return firstSend()" style="display:inline">

            <input type="hidden" id="~OkCode" name="~OkCode" value="/0" />

            <input type="hidden" id="~FKey" name="~FKey" value="" />

            <input type="hidden" id="~Focusfield" name="~Focusfield" value="" />

            `if (~SEC_SESSTOKEN != "")`<input type="hidden" name="~SEC_SESSTOKEN" value="`~SEC_SESSTOKEN`" />`end`

`if (~active_timer != "")

    include(~service="itsmobile", ~theme="99", ~name="timer.html");

    timer(~active_timer, width, height);

end`

`

`<!-- main screen begin -->

<div width="10%">`

    if ( ~itsmobileCuaInclude != "" ) <!-- customers cua area -->

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

    elseif ( ~itsmobileNoCuaInclude != "1" && ~itsmobileNoCuaInclude != "X" ) <!-- default cua area -->

       include(~service="itsmobile", ~language="", ~theme="99", ~name="include/cuaarea.html");

    end;`

</div>

<div width="10%" class="MobileUserArea">`

if ( ( ~DYNPRO_COMPRESSION != "1" && ~DYNPRO_COMPRESSION != "X" ) ||

     ( 'TEXT'[1].exists == "X" && 'TEXT'[1].visible == "X" ) ||

     0 )

`<!-- line 1 -->

<div class="MobileRow">`

if ( ( 'TEXT'[1].exists == "X" ) && ( 'TEXT'[1].visible == "X" ) )

    icon( "TEXT", 1 );

    `<span style="`width("21", "17.220em"); align("TEXT", 1); style("TEXT", 1)`" `

    if ( 'TEXT'[1].highlighted == "X" )

        `class="MobileLabelHighlighted `class("TEXT", 1)`" `

    else

        `class="MobileLabel `class("TEXT", 1)`" `

    end

    `>`label("TEXT", 1)`</span>`

else

    `<span style="`margin_left("21", "17.220em")`; height:1px"></span>`

end;

<!-- content row end -->`

</div>

`end;

if ( ( ~DYNPRO_COMPRESSION != "1" && ~DYNPRO_COMPRESSION != "X" ) ||

     ( 'TESTS'[1].exists == "X" && 'TESTS'[1].visible == "X" ) ||

     1 )

`<!-- line 2 -->

<div class="MobileRow">`

includeFrame (~frameName="TESTS")

<!-- content row end -->`

</div>

`end;

if ( ( ~DYNPRO_COMPRESSION != "1" && ~DYNPRO_COMPRESSION != "X" ) ||

     ( 'DISP'[1].exists == "X" && 'DISP'[1].visible == "X" ) ||

     0 )

`<!-- line 9 -->

<div class="MobileRow">`

if ( ( 'DISP'[1].exists == "X" ) && ( 'DISP'[1].visible == "X" ) )

    `<input type="button" style="`width("8", "6.560em"); style("DISP", 1)`" `

    `class="MobileButton`class_ext("DISP", 1)` `class("DISP", 1)`" `

    if ( 'DISP'[1].disabled == "X" ) `disabled="disabled" `end;

    `name="`'DISP'[1].name`" `

    if ( ~currdynpro.speechenabled != "" ) `id="`'DISP'[1].name`" `end;

    `value="`label("DISP", 1)`" `

    if ( 'DISP'[1].onclick != "" )

         `onclick="`'DISP'[1].onclick`;" `

    elseif ( 'DISP'[1].rfidenabled == "X" )

        `onfocus="setFocusField('`'DISP'[1].name`');"

        onblur="leaveFocusField('`'DISP'[1].name`');"

        onclick="RfidButtonClick();" `

    else

        `onclick="setOkCode('`'DISP'[1].okcode`');" `

    end;

    `/>`

else

    `<span style="`margin_left("8", "6.560em")`; height:1px"></span>`

end;

if ( 12 != 0 )

    `<span style="`margin_left("12", "9.840em")`; height:1px"></span>`

end;

<!-- content row end -->`

</div>

`end;

if ( ( ~DYNPRO_COMPRESSION != "1" && ~DYNPRO_COMPRESSION != "X" ) ||

     ( 'MENU'[1].exists == "X" && 'MENU'[1].visible == "X" ) ||

     ( 'START'[1].exists == "X" && 'START'[1].visible == "X" ) ||

     ( 'EXEC'[1].exists == "X" && 'EXEC'[1].visible == "X" ) ||

     ( 'FCODE'[1].exists == "X" && 'FCODE'[1].visible == "X" ) ||

     0 )

`<!-- line 10 -->

<div class="MobileRow">`

if ( ( 'MENU'[1].exists == "X" ) && ( 'MENU'[1].visible == "X" ) )

    `<input type="button" style="`width("5", "4.100em"); style("MENU", 1)`" `

    `class="MobileButton`class_ext("MENU", 1)` `class("MENU", 1)`" `

    if ( 'MENU'[1].disabled == "X" ) `disabled="disabled" `end;

    `name="`'MENU'[1].name`" `

    if ( ~currdynpro.speechenabled != "" ) `id="`'MENU'[1].name`" `end;

    `value="`label("MENU", 1)`" `

    if ( 'MENU'[1].onclick != "" )

         `onclick="`'MENU'[1].onclick`;" `

    elseif ( 'MENU'[1].rfidenabled == "X" )

        `onfocus="setFocusField('`'MENU'[1].name`');"

        onblur="leaveFocusField('`'MENU'[1].name`');"

        onclick="RfidButtonClick();" `

    else

        `onclick="setOkCode('`'MENU'[1].okcode`');" `

    end;

    `/>`

else

    `<span style="`margin_left("5", "4.100em")`; height:1px"></span>`

end;

if ( 0 != 0 )

    `<span style="`margin_left("0", "0.000em")`; height:1px"></span>`

end;

if ( ( 'START'[1].exists == "X" ) && ( 'START'[1].visible == "X" ) )

    `<input type="button" style="`width("5", "4.100em"); style("START", 1)`" `

    `class="MobileButton`class_ext("START", 1)` `class("START", 1)`" `

    if ( 'START'[1].disabled == "X" ) `disabled="disabled" `end;

    `name="`'START'[1].name`" `

    if ( ~currdynpro.speechenabled != "" ) `id="`'START'[1].name`" `end;

    `value="`label("START", 1)`" `

    if ( 'START'[1].onclick != "" )

         `onclick="`'START'[1].onclick`;" `

    elseif ( 'START'[1].rfidenabled == "X" )

        `onfocus="setFocusField('`'START'[1].name`');"

        onblur="leaveFocusField('`'START'[1].name`');"

        onclick="RfidButtonClick();" `

    else

        `onclick="setOkCode('`'START'[1].okcode`');" `

    end;

    `/>`

else

    `<span style="`margin_left("5", "4.100em")`; height:1px"></span>`

end;

if ( 0 != 0 )

    `<span style="`margin_left("0", "0.000em")`; height:1px"></span>`

end;

if ( ( 'EXEC'[1].exists == "X" ) && ( 'EXEC'[1].visible == "X" ) )

    `<input type="button" style="`width("6", "4.920em"); style("EXEC", 1)`" `

    `class="MobileButton`class_ext("EXEC", 1)` `class("EXEC", 1)`" `

    if ( 'EXEC'[1].disabled == "X" ) `disabled="disabled" `end;

    `name="`'EXEC'[1].name`" `

    if ( ~currdynpro.speechenabled != "" ) `id="`'EXEC'[1].name`" `end;

    `value="`label("EXEC", 1)`" `

    if ( 'EXEC'[1].onclick != "" )

         `onclick="`'EXEC'[1].onclick`;" `

    elseif ( 'EXEC'[1].rfidenabled == "X" )

        `onfocus="setFocusField('`'EXEC'[1].name`');"

        onblur="leaveFocusField('`'EXEC'[1].name`');"

        onclick="RfidButtonClick();" `

    else

        `onclick="setOkCode('`'EXEC'[1].okcode`');" `

    end;

    `/>`

else

    `<span style="`margin_left("6", "4.920em")`; height:1px"></span>`

end;

if ( 0 != 0 )

    `<span style="`margin_left("0", "0.000em")`; height:1px"></span>`

end;

if ( 'FCODE'[1].exists == "X" )

    if ( 'FCODE'[1].mode == "multiline" )

        `<textarea `

         `class="MobileEditMultiline`class_ext('FCODE', 1); class("FCODE", 1)`" `

         if ( 'FCODE'[1].disabled == "X" ) `disabled="disabled" `end;

         if ( 'FCODE'[1].readonly == "X" ) `readonly="readonly" `end;

         if ( 'FCODE'[1].okcode != "" )

             `onchange="setOkCode('`'FCODE'[1].okcode`');return false;" `

         end;

         `style="`width("5", "4.100em"); style("FCODE", 1)`" `

         `rows="`'FCODE'[1].rows`" `

         `onfocus="setFocusField('`'FCODE'[1].name`');" `

         `onblur="leaveFocusField('`'FCODE'[1].name`');" `

         `name="`'FCODE'[1].name`">`'FCODE'[1]`</textarea>`

    else

        if ( 'FCODE'[1].disabled == "X" )

            if ( 'FCODE'[1].visible != "X" )

                `<input type="hidden" `

            elseif ( 'FCODE'[1].type == "Password" )

                `<input type="password" readonly="readonly" tabindex="-1" `

                `style="`width("5", "4.100em"); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobilePasswordHighlightedDisabled `class("FCODE", 1)`" `

                else;

                    `class="MobilePasswordDisabled `class("FCODE", 1)`" `

                end;

            elseif ( 'FCODE'[1].inputrequired == "X" )

                `<input type="text" readonly="readonly" tabindex="-1" `

                `style="`width("5", "4.100em"); align("FCODE", 1); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobileEditRequiredHighlightedDisabled `class("FCODE", 1)`" `

                else;

                    `class="MobileEditRequiredDisabled `class("FCODE", 1)`" `

                end;

            else

                `<input type="text" readonly="readonly" tabindex="-1" `

                `style="`width("5", "4.100em"); align("FCODE", 1); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobileEditHighlightedDisabled `class("FCODE", 1)`" `

                else;

                    `class="MobileEditDisabled `class("FCODE", 1)`" `

                end;

            end;

            `onfocus="focusField('`'FCODE'[1].name`');" `

            `name="`'FCODE'[1].name`" `

            if ( ( 'FCODE'[1].inputrequired == "X" ) && ( 'FCODE'[1] == "?" ) )

                 `value="" `

            else

                 `value="`strmaskext('FCODE'[1], 1)`" `

            end;

            `size="`'FCODE'[1].width`" maxlength="`'FCODE'[1].maxinputsize`"/>`

        else                                     <!-- not disabled -->

            icon( "FCODE", 1 );

            if ( 'FCODE'[1].visible != "X" )

                `<input type="hidden" `

            elseif ( 'FCODE'[1].type == "Password" )

                `<input type="password" `

                `style="`width("5", "4.100em"); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobilePasswordHighlighted `class("FCODE", 1)`" `

                else

                    `class="MobilePassword `class("FCODE", 1)`" `

                end;

            elseif ( 'FCODE'[1].inputrequired == "X" )

                `<input type="text" `

                `style="`width("5", "4.100em"); align("FCODE", 1); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobileEditRequiredHighlighted `class("FCODE", 1)`" `

                else

                    `class="MobileEditRequired `class("FCODE", 1)`" `

                end;

            else

                `<input type="text" `

                `style="`width("5", "4.100em"); align("FCODE", 1); style("FCODE", 1)`" `

                if ( 'FCODE'[1].highlighted == "X" )

                    `class="MobileEditHighlighted `class("FCODE", 1)`" `

                else

                    `class="MobileEdit `class("FCODE", 1)`" `

                end;

            end;

            if ( 'FCODE'[1].okcode != "" )

                `onchange="setOkCode('`'FCODE'[1].okcode`');return false;" `

            end;

            `onfocus="setFocusField('`'FCODE'[1].name`');" `

            `onblur="leaveFocusField('`'FCODE'[1].name`');" `

            `name="`'FCODE'[1].name`" `

            if ( ~currdynpro.speechenabled != "" )`id="`'FCODE'[1].name`" `end;

            if ( ( 'FCODE'[1].inputrequired == "X" ) && ( 'FCODE'[1] == "?" ) )

                `value="" `

            else

                `value="`strmaskext('FCODE'[1], 1)`" `

            end;

            `size="`'FCODE'[1].width`" maxlength="`'FCODE'[1].maxinputsize`"/>`

        end;

    end;

else

    `<span style="`margin_left("5", "4.100em")`; height:1px"></span>`

end;

<!-- content row end -->`

</div>

`end;

`</div>

<!-- main screen end -->`

        `</form>`

    `</body>`

`</html>

[former_member194364]

Hi Vinoth,

See the section:

`<!-- main screen begin -->

<div width="10%">`

    if ( ~itsmobileCuaInclude != "" ) <!-- customers cua area -->

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

    elseif ( ~itsmobileNoCuaInclude != "1" && ~itsmobileNoCuaInclude != "X" ) <!-- default cua area -->

       include(~service="itsmobile", ~language="", ~theme="99", ~name="include/cuaarea.html");

    end;`

</div>

<div width="10%" class="MobileUserArea">`

this I believe explains why the screen area is so small.

Why the template was generated at this width I cannot explain though?

if the <div width="10%">`

is changed to 100%

What is the result?

Regards,

Oisin

[Former Member]

Hi Oisin,

Apologies for delay. Even after changing the width to 100%,still no change in the output. I suspect CSS has priority over our custom change.  Please assist and do let me know how to find the css path from the html template,so that i will try to play around on that. Many Thanks for the timely help.

Regards,

Vinoth

[former_member194364]

Hi Vinoth,

I presume you are using the standard mobile.css file in the itsmobile service?

You should copy this file to your own service and then use the parameter: ~ITSMOBILECSSINCLUDE

See the WIKI: Service Parameter and Settings - Wiki - SCN Wiki

Regards,

Oisin

[Former Member]

Hi Oisin,

Thanks for your support. Yes, i am using mobile.css file(default SAP is using this file i think), finding hard to get the file Mobile.css from Tcode SE80 under MIME repository. Please assist me the way where can i find the file mobile.css under which path, so that i can copy to my ITS services. Many Thanks!

Regards,

Vinoth

[former_member194364]

Hi Vinoth,

Look in the MIMES folder of the 'itsmobile' "Internet service" in SE80.

That is were the default "mobile.css" should be located.

Regards,

Oisin