Note: Settings above impact all pages.

Force-fit to Screen Width

It's possible that some ITSmobile pages are wider than the viewport (visible area) area of the device, resulting in the need to scroll the screen to see all page elements and a less than ideal user experience. This problem is addressed with the <SapForceFitToScreen> parameter, which arranges horizontally aligned HTML elements vertically. When enabled, ITSmobile pages are forced to render elements within the visible horizontal region, or screen width.

NOTE: This parameter applies only to SAP ITSmobile apps, and might effect CSS styling. Parameter is disabled by default.

Confine page to screen width:


<SapForceFitToScreen value="1"/>
For additional page fitting options, see the DOM injection guide.

Customize Page UI Elements

EB 2.x provides configuration parameters for controlling the size of UI elements on SAP pages. These settings impact all pages.

Increase button height:


<SapCustomization> 
    <SapButtonHeight value="30px"/>
</SapCustomization>


Adjust font size:


<SapCustomization>    
  <SapButtonFontSize value="10px"/>      
</SapCustomization>


Adjust a read-only text field:


<SapCustomization>     
  <MobileEditDisabledWidth value="20px"/> 
</SapCustomization>


To customize style elements:

Specify desired style changes using a custom CSS file as described in the Custom CSS File section (below). The code below shows how the file name and path should appear using the <customcssfile> tag in the Config.xml file.


<Applications>
  <Application
  ...  
    <SapCustomization> 
        <customcssfile value="file://%INSTALLDIR%/android_sap/sapstyle.txt"/>
    </SapCustomization>

Custom CSS File

Apps made with Enterprise Browser 2.5 (and higher) for Android can employ a custom CSS file to modify certain styles within an SAP app at runtime. By default, a file called sapstyle.txt is stored in the following device folder:

  • %INSTALLDIR%/android_sap/

To modify a style using the custom CSS file:

  1. In the CSS file, change the elements for the style class(es) as desired.

  2. Add the enabled:true tag in the class(es) to be activated as shown:

    
    .MobileButton {
    width:100%;
    background-color:#A3C1E4;  /*--New style added for MobileButton class--*/
    color:blue;                /*--New style added for MobileButton class--*/
    enabled:true;              /*--Identifier for new style--*/
    font-weight: 400;
    }
    
  3. Save the changes and push the new file to the device, replacing the old file (if any).

The new style is applied the next time the page loads.

Sample SAP CSS File

The section below shows the default CSS file for SAP apps found on the device in %INSTALLDIR%/android_sap/style.txt after EB installation. To activate and any attribute, add the tag enabled:true; within the curly braces {}, modify parameters if desired, save and push the new file to the device. Changes are reflected the next time the effected page(s) are loaded.

To specify and/or change the name and/or location of the sapstyle.txt file, see the <customcssfile> tag section of the Config.xml reference.

  
  /*----------------------------------*/
  /* GENERAL PAGE                     */
  /*----------------------------------*/
  @import url("../ALV_GRID.CSS");

  .MobileUserArea, input {
    font-family:arial;
    font-size:100%;
  }

  .MobileUserArea, textarea {
    font-family:arial;
    font-size:100%;
  }

  /* --- MOBILE BODY -----------------*/
  .MobileBody {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-color:#F5F9FC;
  }

  /* --- MOBILE SCREEN ---------------*/
  .MobileScreen {
    width:100%;
    padding:0px;
    margin:0px;
    border:0px;
  }

  /*----------------------------------*/
  /* Main Areas of Mobile Screen      */
  /*----------------------------------*/

  /* --- CUA AREA --------------------*/
  .MobileCuaArea {
    width:100%;
    background-color:#D9E5F2;
    padding:0px;
    margin:0px;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-bottom-color:#B3C3CF;
  }

  /* --- USER AREA -------------------*/
  .MobileUserArea {
    table-layout:fixed;
    width:100%;
    overflow-x:auto;
    overflow-y:auto;
  }

  /* ---------------------------------*/
  /* CUA AREA ELEMENTS                */
  /*----------------------------------*/

  /* --- MESSAGE ---------------------*/
  .MobileMessageScreen {
    width:100%;
    background-color:#F5F9FC;
    padding:0px;
    margin:0px;
    border-style:solid;
    border-color:#C40026;
    border-top-width:0px;
    border-left-width:0px;
    border-right-width:0px;
    border-bottom-width:2px;
  }

  .MobileMessageLine {
  }

  /* --- MESSAGE ---------------------*/
  .MobileMessageLogo {
    vertical-align:middle;
    padding-left:3px;
    padding-right:3px;
  }

  /* --- TITLE -----------------------*/
  .MobileWindowTitle {
    font-weight:bold;
    font-size:1.0em;
    padding-left:7px;
    overflow:hidden;
    white-space:nowrap;
  }

  /* --- LOGO im Header --------------*/
  .MobileHeaderLogo {
    background-color:#D9E5F2;
    vertical-align:middle;
    height:16px;
    border:0px;
    padding-left:3px;
  }

  /* --- Include Frame ---------------*/
  .MobileIncludeFrame {
  }

  /* --- Basic Row -------------------*/
  .MobileRow {
    white-space:nowrap;
    vertical-align:middle;
  }

  /* ---------------------------------*/
  /* DYNPRO ELEMENTE                  */
  /*----------------------------------*/

  /* --- SUBSCREENS ------------------*/
  .MobileSubScreen {
    table-layout:fixed;
    width:100%;
    padding:0px;
    margin:0px;
    border:0px;
  }

  /* --- STEPLOOPS -------------------*/
  .MobileStepLoop {
    table-layout:fixed;
    width:100%;
    padding:0px;
    margin:0px;
    border:0px;
  }

  /* --- FRAME -----------------------*/
  .MobileFrame {
    width:100%;
    table-layout:fixed;
    background-color:#D9E5F2;
    padding:0px;
    margin:0px;
  }

  .MobileFrameHeader {
    width:100%;
    background-color:#A3C1E4;
    font-weight:bold;
    padding:0px;
    margin:0px;
    border:0px;
  }

  .MobileFrameHidden {
    width:100%;
  }

  /* --- ACTIVE BUTTON ---------------*/
  .MobileButton {
    width:100%;
    font-weight: 400;
  }

  /* --- DISABLED BUTTON -------------*/
  .MobileButtonDisabled {
    width:100%;
  }

  /* --- EDIT FIELD ------------------*/
  .MobileEdit {
    width:100%;
  }

  .MobileEditMultiline {
  }

  .MobileEditMultilineDisabled {
  }

  .MobileEditMultilineHighlighted {
    color:blue;
  }

  .MobileEditMultilineHighlightedDisabled {
    color:blue;
  }

  .MobileEditMultilineRequired {
    border-color:blue;
  }

  .MobileEditMultilineRequiredHighlighted {
    border-color:blue;
    color:blue;
  }

  .MobileEditDisabled {
    width:100%;
    border-style:solid;
    border-color:#808080;
    border-width:1px;
    color:black;
    background-color:#F5F9FC;
  }

  /* required */
  .MobileEditRequired {
    width:100%;
    border-color:blue;
  }

  .MobileEditRequiredDisabled {
    width:100%;
    border-style:solid;
    border-color:#808080;
    border-width:1px;
    background-color:#F5F9FC;
  }

  /* required + highlighted */
  .MobileEditRequiredHighlighted {
    width:100%;
    border-color:blue;
    color:blue;
  }

  .MobileEditRequiredHighlightedDisabled {
    width:100%;
    border-style:solid;
    border-color:#808080;
    border-width:1px;
    color:blue;
    background-color:#F5F9FC;
  }

  /* highlighlighted */
  .MobileEditHighlighted {
    width:100%;
    color:blue;
  }

  .MobileEditHighlightedDisabled {
    width:100%;
    border-style:solid;
    border-color:#808080;
    border-width:1px;
    color:blue;
    background-color:#F5F9FC;
  }

  /* --- F4 BUTTON -------------------*/
  .MobileF4Button {
    width:1em;
  }

  .MobileF4ButtonDisabled {
    width:1em;
  }

  /* --- SEARCHELP BUTTONS -----------*/
  .MobileSearchhelpButton_Search {
  }

  .MobileSearchhelpButton_SearchDisabled {
  }

  .MobileSearchhelpButton_Cancel {
  }

  .MobileSearchhelpButton_Options {
  }

  .MobileSearchhelpButton_Selection {
  }

  .MobileSearchhelpButton_Sort {
  }

  .MobileSearchhelpButton {
  }

  /* --- SEARCHELP EDIT FIELD --------*/
  .MobileSearchhelpEdit {
  }

  .MobileSearchHelpBody {
  }

  .MobileSearchHelpScreen {
  }

  .MobileSearchHelpUserArea {
  }

  .MobileSearchHelpSortingRow {
    background-color: #f2e1af;
  }

  .MobileSearchHelpRow {
  }

  .MobileSearchHelpRow2 {
    background-color: #D9E5F2;
  }

  .MobileSearchHelpFindResults {
  }

  .MobileSearchHelpMessageLine {
    color: red; font-weight: bold;
  }

  /* --- F4 HELP FIELD ---------------*/
  .MobileF4 {
  }

  .MobileF4Disabled {
  }

  /* required */
  .MobileF4Required {
    border-color: blue;
  }

  .MobileF4RequiredDisabled {
    border-color: blue;
  }

  /* required + highlighted */
  .MobileF4RequiredHighlighted {
    border-color:blue;
    color:blue;
  }

  .MobileF4RequiredHighlightedDisabled {
    border-color:blue;
    color:blue;
  }

  /* highlighlighted */
  .MobileF4Highlighted {
    color:blue;
  }

  .MobileF4HighlightedDisabled {
    color:blue;
  }

  /* --- PASSWORD --------------------*/
  .MobilePassword {
    width:100%;
  }

  .MobilePasswordDisabled {
    width:100%;
  }

  /* highlighted */
  .MobilePasswordHighlighted {
    width:100%;
    color:blue;
  }

  .MobilePasswordHighlightedDisabled {
    width:100%;
    color:blue;
  }

  /* --- LABEL FIELD -----------------*/
  .MobileLabel {
    width:100%;
    white-space:nowrap;
  }

  .MobileLabelHighlighted {
    width:100%;
    white-space:nowrap;
    color:blue;
  }

  /* --- RADIOBOX --------------------*/
  .MobileRadioButton {
    vertical-align:middle;
  }

  .MobileRadioLabel {
    white-space:nowrap;
  }

  /* --- CHECKBOX --------------------*/
  .MobileCheck {
  }

  .MobileCheckLabel {
    white-space:nowrap;
  }

  /* --- LISTBOX ---------------------*/
  .MobileListboxRequiredHighlighted {
    width:100%;
    border-color:blue;
    color:blue;
  }

  .MobileListboxRequiredHighlightedDisabled {
    width:100%;
    border-color:blue;
    color:blue;
  }

  .MobileListboxRequired {
    width:100%;
    border-color:blue;
  }

  .MobileListboxRequiredDisabled {
    width:100%;
    border-color:blue;
  }

  .MobileListboxHighlighted {
    width:100%;
    color:blue;
  }

  .MobileListboxHighlightedDisabled {
    width:100%;
    color:blue;
  }

  .MobileListbox {
    width:100%;
  }

  .MobileListboxDisabled {
    width:100%;
  }

  /* ---------------------------------*/
  /* SYSTEM MESSAGE / MAIL            */
  /*----------------------------------*/
  .MobileSysList {
    width:90%;
    table-layout:fixed;
    background-color:#D9E5F2;
    padding:0px;
    margin:0px;
    border:2px;
    border-color:#B3C3CF;
    border-style:solid;
  }

  .MobileSysListTitle {
    width:100%;
    background-color:#A3C1E4;
    font-weight:bold;
  } 

Android Keyboard and DataWedge

The SAP package disables the Android keyboard by default, which also might prevent DataWedge from outputting acquired data as keystrokes. If DataWedge keystroke output is desired, enable Enterprise Keyboard on the device instead.

Enterprise Browser supports disabling default SIP provided by Android platforms. Disable it by setting the Config.xml file attribute as below:


<IME>
  <DisableAllIME value ="1"/>
</IME>

Prevent all keyboard pop-ups:


<IME>
  <DisableAllIME value ="1"/>
</IME>
<SIP>
  <ResizeOnButtonbar value="1"/>        
</SIP>

:::xml
<KeyboardConfiguration>
<KeyboardVisibility value="onDemand"/>
  <ondemand>
      <onHardwarekeypress value="1"/>
      <HardwarekeyValue value="140"/>
  </ondemand>   
</KeyboardConfiguration>

The first section of the Config.xml code above prevents the keyboard from automatically popping up when the focus moves to an input field and sets the page as "resizable" so it can adapt when a keyboard pops up. The second section causes the keyboard to appear when the F10 key is pressed (on certain devices).

More information:


Ending SAP Session

It's important to terminate the SAP session when quitting an Enterprise Browser app that accesses ITSmobile. EB 2.x implements a Config.xml tag for this purpose. The SAP package by default is set to terminate an SAP session whenever Enterprise Browser is closed.

Default setting on SAP package:


<DeleteCookiesOnLaunch value="1"/>


Default setting on non-SAP package:


<DeleteCookiesOnLaunch value="0"/>



Locking Screen Orientation

EB 2.0 (and higher) can lock an EB app to a specific screen orientation (portrait or landscape). The SAP package by default sets the parameter to "Auto," which locks the app in the "natural" orientation of device (landscape on CC5000, ET55, VC80 and WT6000; portrait on all others). Screen "auto-rotation" is disabled when this parameter is used. More info.

Set screen orientation to "natural" for device:


<ScreenOrientation>
  <LockOrientation value= "Auto"/>
</ScreenOrientation>

KeyDown Actions

EB 2.0 (and higher) allows hardware keys of certain Zebra devices to be remapped to perform predefined actions or execute JavaScript code blocks residing on the device or on a server. Hardware keys are remapped in the KeyActions section of the KeyCodeMapping .xml file. See the Keycode Mapping Guide for more information.

Press F8 key to quit the app:


<KeyActions> 
    <KEYACTION  keyvalue="138" action="quit" />
</KeyActions>


Execute JavaScript on KeyDown event


<KeyActions> 
   <KEYACTION  keyvalue="139" action="runscript- zoomscript" />
</KeyActions> 



DOM Namespace

Enterprise Browser can inject one or more of its JavaScript APIs into a running ITSmobile app, providing access to virtually any feature available to any other EB app.

See the EB Config Reference for details.


Hide SystemBar

Enterprise Browser allows the System bar (also known as the Navigation bar, which contains HOME, BACK and RECENT buttons) to be hidden, maximizing screen space for apps and helping to prevent the app user from accidentally exiting. By default, the System bar is is hidden in the SAP bundle and displayed in the standard package. The parameter is configured in the app's Config.xml file. See the EB Config Reference for details.


Speech Recognition

EB 2.0 (and higher) supports the injection of speech commands into legacy SAP applications using text-to-speech (TTS) technology, allowing apps to speak to app users. Apps also can accept speech inputs via automatic speech recognition (ASR) and execute certain commands on a page, all without modifying the underlying server application. By default, TTS and ASR are disabled in the SAP package. See the Voice Guide for details.


SAP vs. Standard EB Package

The SAP and standard Enterprise Browser .apk files are identical; the differences between the two packages are contained only in their Config.xml files. For organizations with mixed deployments, Zebra recommends deploying the SAP package to all devices and pushing the standard Config.xml file to the EB installation directory of devices that require it. This is because the SAP installation delivers both SAP and standard versions of the Config.xml to the device.

Install directory:

/Android/data/com.symbol.EnterpriseBrowser/

SAP config file location:

/Android/data/com.symbol.EnterpriseBrowser/android_sap/Config.xml

Standard config file location:

/Android/data/com.symbol.EnterpriseBrowser/android_regular/Config.xml

To convert to the standard package from SAP:

  • Copy the Config.xml from android_regular to the EB install directory.

To convert to SAP from the standard package:

  • Copy the Config.xml from android_sap to the install directory.

Note: The /Android/data/com.symbol.EnterpriseBrowser/ folder can be replaced with the /%INSTALLDIR%/ substitution variable.


See Also

-->

Redirecting to TechDocs archive site...