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

Configuring Views to Use Landscape or Portrait Layout

This topic describes how to configure a view to use landscape or portrait layout. It uses the Opportunity List View as an example.

To configure views to use landscape or portrait layout

1. Identify the view that you must modify.
   1. Log in to the client, and then navigate to the Opportunities screen.
   2. Click Opportunities List.
   3. Click Help, and then click About View.
   4. Make a note of the view name.

      For example, Opportunity List View.

2. Identify the Web template file that the view that you identified in Step 1 uses:
   1. Open Siebel Tools.

      For more information, see Using Siebel Tools.

   2. In the Object Explorer, click View.
   3. In the Views list, query the name property for Opportunity List View.
   4. In the Object Explorer, expand the View tree, and then click View Web Template.
   5. In the View Web Templates list, make a note of the value that the Web Template property contains.

      For example:

   View Detail (Parent with Pointer)

   6. In the Object Explorer, click Web Template.
   7. In the Web Templates list, query the Name property for the web template name.

      For example, query the Name property for the following value. If the name includes a special character, such as a parenthesis, then you must use double quotation marks to enclose the entire value:

   "View Detail (Parent with Pointer)"

   8. In the Object Explorer, expand the Web Template tree, and then click Web Template File.
   9. In the Web Template Files list, make a note of the value that the Filename property contains.

      This value identifies the name of the Web template file that you must modify. For example, CCViewDetail_ParentPntr.swt.

3. Modify the Web template file:
   1. Choose the application-level View menu, Windows, and then click Web Templates Window.
   2. Scroll down in the Web Templates window to locate, and then click the following file:

   CCViewDetail_ParentPntr

   If you click CCViewDetail_ParentPntr, then Siebel Tools displays the HTML code that the CCViewDetail_ParentPntr.swt file contains. It displays this code in a separate window.

   3. Right-click the window that displays the HTML code, and then choose Edit Template.
   4. Locate the div element that you must modify.
   5. Modify the code.

      For example, add the following code:

   <div id="content1" landscape="Default" portrait="Show">
   <div id="content2" landscape="Default" portrait="Hide">
   

   For more information, see Landscape and Portrait Tags You Can Add to Div Elements.

4. Test your modifications.

Landscape and Portrait Tags You Can Add to Div Elements

Table 20 describes the attributes that you can add to a div element that the Web template file contains. Siebel Open UI uses this configuration to determine the orientation when it loads a view or if the user modifies the orientation. It processes each tagged div element for hide or display according to the attribute value for the landscape and portrait layout. It does not process any div element that includes an invalid value for the landscape or portrait tags.

Configuring Web Templates to Use Landscape or Portrait Layout

The example in this topic configures a web template to use landscape or portrait layout.

To configure web templates to use landscape or portrait layout

1. Modify the web template:
   1. Open Siebel Tools.

      For more information, see Using Siebel Tools.

   2. Choose the application-level View menu, Windows, and then click Web Templates Window.
   3. Scroll down in the Web Templates window to locate, and then click the following file:

   CCPageContainer

   4. Right-click the window that displays the HTML code, and then choose Edit Template.
   5. Add the following landscape tag:

   <swe:frame type="Screenbar" htmlAttr="landscape='Default' portrait='Hide' marginheight='0' marginwidth='0' noresize scrolling='Auto'">
     <swe:include file="CCFrameScreenbar.swt"/>
   </swe:frame>

   6. Add the following portrait tag:

   <swe:frame type="Content" htmlAttr="landscape='Default' portrait='Show' marginheight='0' marginwidth='0' noresize scrolling='Auto'">
     <swe:include file="CCFrameContentHI.swt"/>
   </swe:frame>

2. Modify the cascading style sheet:
   1. Use a text editor to open the theme-blue.css file.
   2. Add the following code:

   @media all and (orientation:landscape)
   {
     #_swescrnbar {
       width: 20%;
       float: left;
     }
     #_swecontent {
       width: 77%;
       float: right;
     }
     }

   @media all and (orientation:portrait)
   {
     #_swecontent {
       width: 98%;
       float: none;
     }
     #_swescrnbar{
       width: 98%;
       float: none;
     }
     }

   3. If any div element is hidden in landscape mode or portrait mode, then you must create a toggle class. Do the following work:
      • Locate the proper media query in the theme-blue.css file.
      • Create a toggle class in the query you located in Step o for the div element. Use one of the following tags:

   landscape = 'Default'
   portrait = 'Default'

   This configuration allows Siebel Open UI to call the toggle layout. In this example, no hidden div element exists, so it is not necessary to create a toggle class for #_swescrnbar or #_swecontent for landscape layout.

Configuring a Nested Tag with Landscape or Portrait Layout

Siebel Open UI queries all div elements that contain landscape or portrait attributes to determine hide or display configuration. It does this for all div elements that exist in the DOM. Siebel Open UI allows the following configuration:

• If the parent div element is displayed, then the child div element of this parent can be displayed or hidden.
• If the parent div element is not displayed, then the child div element of this parent must be hidden. It cannot be displayed.

You must make sure that any tags you add use this configuration. For example, consider the following example code:

<div id="content" landscape="Default" portrait="Hide">
  <div id="button"/>
  <div id="view">
    <div id="applet1" landscape="Hide" portrait="Show"/>
    <div id="applet2"/>
  </div>
</div>

This code does the following:

• Landscape layout. Displays the button and applet2, but hides applet1.
• Portrait layout. Hides the button, applet2, and applet1.