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
- Create a custom CSS file.
- 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; }
- Add the transition effect to the PAGE_TRANSITION list of values:
- Open Siebel Tools. Connect to the database that your Siebel Mobile application uses.
For more information, see Using Siebel Tools.
- Click the Screens application-level menu, click System Administration, and then click List of Values.
- 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.
|
|
Type |
PAGE_TRANSITION |
Display Value |
Slide In |
Language-Independent Code |
SLIDEIN |
Parent LIC |
Tablet |
- 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.
|
|
Type |
PAGE_TRANSITION |
Display Value |
Slide In |
Language-Independent Code |
SLIDEIN |
Parent LIC |
Phone |
- Compile your modifications.
- Test your modifications:
- Log in to the client.
- Navigate to the Setting screen.
- 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.
- 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.
- Log out of the client, and then log back into the client.
- Navigate between views, and verify that Siebel Open UI uses the transition you chose in Step d.
|