Configuring Siebel Open UI > Customizing Siebel Open UI for Siebel Mobile > Customizing Transitions, Themes, Styles, and Colors >

Customizing Transitions That Siebel Open UI Displays When It Changes Views

The example in this topic describes how to add a custom CSS3 transition. A CSS3 transition is a visual effect that Siebel Open UI uses anytime it displays a view or refreshes a view after the user clicks New, Edit, Save, or Cancel in Siebel Mobile. Slide Left is an example of a transition. Siebel Open UI comes predefined with the Slide Left transition enabled. It automatically constrains the transition field depending on whether the user is using a desktop computer, tablet, or phone. The transition LOV field displays Slide Left and None for tablets and phones. If the user sets a transition on one platform, such as a tablet, and then uses another platform, such as a phone, then Siebel Open UI resets the transition to empty.

To customize transitions that Siebel Open UI displays when it changes views

1. Create a custom CSS file.
2. Use the following classes to add the transition to the file you created in Step 1:

   .siebui-prev-TransitionEffect-begin
   .siebui-prev-TransitionEffect-end
   .siebui-next-TransitionEffect-begin
   .siebui-next-TransitionEffect-end

   where:

   • TransitionEffect identifies the transition effect name. For example, the following code specifies the slide-in transition effect:

   .siebui-prev-slidein-begin {
   position : absolute;
   width : 100% !important;
   top : 0;
   z-index : 999;
   -webkit-transition : top 1s ease-in-out;
   -moz-transition : top 1s ease-in-out;
   -o-transition : top 1s ease-in-out;
   transition : top 1s ease-in-out;
   }
   .siebui-prev-slidein-end {
   top : 2000px !important;
   }
   .siebui-next-slidein-begin {
   margin-top : -2000px;
   height : 0 !important;
   -webkit-transition : margin-top 1s ease-in-out;
   -moz-transition : margin-top 1s ease-in-out;
   -o-transition : margin-top 1s ease-in-out;
   transition : margin-top 1s ease-in-out;
   }
   .siebui-next-slidein-end {
   margin-top : 0;
   height : 100% !important;
   }

3. Add the transition effect to the PAGE_TRANSITION list of values:
   1. Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.

      For more information, see Using Siebel Tools.

   2. Click the Screens application-level menu, click System Administration, and then click List of Values.
   3. Right-click in the List of Values list, click New Record, and then add the following value to the PAGE_TRANSITION list of values for tablets.

      Property	Value
      Type	PAGE_TRANSITION
      Display Value	Slide In
      Language-Independent Code	SLIDEIN
      Parent LIC	Tablet

   4. Right-click in the List of Values list, click New Record, and then add the following value to the PAGE_TRANSITION list of values for phones.

      Property	Value
      Type	PAGE_TRANSITION
      Display Value	Slide In
      Language-Independent Code	SLIDEIN
      Parent LIC	Phone

   5. Compile your modifications.
4. Test your modifications:
   1. Log in to the client.
   2. Navigate to the Setting screen.
   3. Verify that Siebel Open UI displays the transitions you specified in Step 2 in the Transition field.

      For example, verify that Siebel Mobile displays the Slide In transition.
   4. Choose a value in the Transition field.

      If you do not choose a transition or if you choose None, then Siebel Open UI does not use a transition.

   5. Log out of the client, and then log back into the client.
   6. Navigate between views, and verify that Siebel Open UI uses the transition you chose in Step d.