Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Layout, Views, Menus, Lists, and Controls >

Customizing the Layout for Mobile Devices

This topic describes how to customize the layout according to the mobile device that the user uses, such as a tablet, mobile phone, WebOS, and so on.

To customize the layout for mobile devices

1. Open the .css file from one of the following locations:
   • The Siebel Server installation folder:

   ORACLE_HOME\WEBMASTER\files\language_code

   • The Siebel client installation folder:

   ORACLE_HOME\PUBLIC\language_code\FILES

   • The Siebel Tools installation folder:

   ORACLE_HOME\PUBLIC\language_code\FILES

2. Add code to the css file you opened in Step 1 that uses media query to create device specific styles.

   For more information, see the topic about CSS media queries at the Mozilla Developer Network at https://developer.mozilla.org/en-US/docs/CSS/Media_queries.

   For example, add the following code to create styles for tablet or mobile phone:

   /* iPad */
   @media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)
   {
   }
   @media all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)
   {
   }
   /* iPhone */
   @media all and (max-device-width: 480px) and (orientation:landscape)
   {
   }
   @media all and (max-device-width: 480px) and (orientation:portrait)
   {
   }

3. Identify the .swt file that you must modify, and then open it for editing.

   For a similar example that identifies and modifies a web template, see Configuring Views to Use Landscape or Portrait Layout.

4. Add the following tags to the .swt file:
   • swe:if
   • swe:switch
   • swe:case
   • swe:default

     To add these tags you use the following code:

   <swe:switch>
     <swe:case condition="Web Engine State Properties, CheckMobileDevice,
       'Device:device_type'">
       <div id="scrnbar" landscape="Default" portrait="Hide">
       <div id="content" landscape="Default" portrait="Show">
     </swe:case>
     <swe:default>
       <swe:switch>
         <swe:case condition="Web Engine State Properties, CheckMobileDevice,
         'Device:device_type'">
           <div id="scrnbar" landscape="Show" portrait="Hide">
           <div id="content" landscape="Hide" portrait="Show">
         </swe:case>
         ...
       </swe:switch>
     </swe:default>
   </swe:switch>

   where:

   • device_type is a device that Siebel Open UI supports. The SupportedMobileBrowser server parameter identifies these devices. For more information, see Specifying the Supported Mobile Browser.

     For example, the following code sets the layout for a tablet or mobile phone:

   <swe:switch>
     <swe:case condition="Web Engine State Properties, CheckMobileDevice,
       'Device:iPad'">
       <div id="scrnbar" landscape="Default" portrait="Hide">
       <div id="content" landscape="Default" portrait="Show">
     </swe:case>
     <swe:default>
       <swe:switch>
         <swe:case condition="Web Engine State Properties, CheckMobileDevice,
         'Device:iPhone'">
           <div id="scrnbar" landscape="Show" portrait="Hide">
           <div id="content" landscape="Hide" portrait="Show">
         </swe:case>
         ...
       </swe:switch>
     </swe:default>
   </swe:switch>

5. Set the following parameter in the InfraUIFramework section of the application configuration file so that Siebel Open UI supports the device type that you specify in Step 4:

   SupportedMobileBrowser = device_type_1,device_type_n

   For example:

   SupportedMobileBrowser = Pad,iPhone,iPod,Android,webOS

   For more information, see Modifying the Application Configuration File.

6. Make sure Siebel Open UI is enabled for Siebel Mobile.

   For more information, see Determining Whether or Not Siebel Open UI Is Enabled for Siebel Mobile.

Specifying the Supported Mobile Browser

You can use the SupportedMobileBrowser parameter to identify the devices that Siebel Open UI loads in the JQM (jQuery Mobile) view. It uses the following default string value. A comma separates each value that the string contains:

SupportedMobileBrowser = iPad,iPhone,iPod,Android-Chrome-Mobile,Android-Chrome,webOS

If you do not specify this parameter in the Server Manager or in the application configuration file, then Siebel Open UI uses this default value. You can append values to add more devices. You must append a unique combination of the user agent. For example, to add a parameter for Android Xoom, you use the following string:

Android-Xoom

You use the following code:

SupportedMobileBrowser = iPad,iPhone,iPod,Android-Chrome-Mobile,Android-Chrome,Android-Xoom,webOS

For more information, see Modifying the Application Configuration File.