D80347GC21_sg (1)

Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺs a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Siebel Open UI Foundations Student Guide D80347GC21 Edition 2.1 | March 2015 | D90724 Learn more from Oracle University at oracle.com/education/ a Author Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Customer Experience (CX) Disclaimer Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Curriculum Team Technical Contributors and Reviewers Customer Experience (CX) This document contains proprietary information and is protected by copyright and other intellectual property laws. You may copy and print this document solely for your own use in an Oracle training course. The document may not be modified or altered in any way. Except where your use constitutes "fair use" under copyright law, you may not use, share, download, upload, copy, print, display, perform, reproduce, publish, license, post, transmit, or distribute this document in whole or in part without the express authorization of Oracle. Team Publisher Syed Imtiaz Ali The information contained in this document is subject to change without notice. If you find any problems in the document, please report them in writing to: Oracle University, 500 Oracle Parkway, Redwood Shores, California 94065 USA. This document is not warranted to be error-free. Restricted Rights Notice If this documentation is delivered to the United States Government or anyone using the documentation on behalf of the United States Government, the following notice is applicable: a s a )h m ฺco deฺ e r u Gui t n Trademark Notice cce dent a Oracle and Java are registered trademarks @owners.ofSOracle tu and/or its affiliates. Other names y may be trademarks of their respective e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non U.S. GOVERNMENT RIGHTS The U.S. Government’s rights to use, modify, reproduce, release, perform, display, or disclose these training materials are restricted by the terms of the applicable Oracle license agreement and/or the applicable U.S. Government contract. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Contents 1 Course Introduction Lesson Agenda 1-2 Instructor and Class Participants 1-3 Training Site Information 1-4 Course Audience 1-5 Course Prerequisites 1-6 Course Goal 1-7 Course Objectives 1-8 Course Methodology 1-9 Course Materials 1-10 Information Sources 1-11 Other Sources 1-12 Course Agenda 1-13 s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ 2 Introducing Siebel Open UI kฺc us n o t Objectives 2-2 ya nse a Siebel Open UI 2-3 (m lice y e Siebel Open le 2-5 ndUI Benefits b a a r NativePBrowserfe Support 2-6 k s n an Support 2-7 yaMobile-trDevice a M nUpdated on Look 2-8 Enhanced User Experience 2-9 Responsive Web Design 2-10 Client-Side Customizations 2-13 Large Community of Developer Resources 2-14 Customizing Siebel Open UI 2-15 Change the Overall Look and Feel 2-16 Change the Way Data is Presented 2-17 Using JavaScript Controls 2-18 Add Client-Side Logic 2-19 Siebel Tools 2-20 JavaScript 2-21 Considerations 2-22 Lesson Highlights 2-25 Practice 2-26 iii a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 3 Siebel Open UI Architecture Objectives 3-2 Siebel Open UI Key Components 3-3 Application Object Manager (AOM) 3-4 Siebel Web Template (SWT) Files 3-5 Decoupled Layout 3-6 SWT Folder Structure 3-7 Cascading Style Sheet (CSS) files 3-8 CSS Folder Structure 3-9 JavaScript (JS) files 3-10 JS Folder Structure 3-11 Browser Scripts 3-12 Open UI Client 3-13 Proxy 3-14 Presentation Model (PM) 3-16 Physical Renderer (PR) 3-17 Plug-In Wrappers (PWs) 3-18 Manifests 3-19 Manifest Administration 3-20 Example: Navigating to the My Contacts View 3-21 1. The Physical Renderer or Presentation Model Passes the Request to the Proxy 3-22 2. The Proxy Sends a Request to the Siebel Server 3-23 3. The Siebel Server Returns the Data 3-24 4. The Presentation Model Applies Business Logic 3-26 5. The Physical Renderer Generates HTML 3-27 6. The Result is Presented to the User 3-28 Siebel Open UI Architecture Summary 3-29 Summary of Differences (In Yellow) 3-30 Recommended Practices 3-31 Lesson Highlights 3-32 Practice 3-33 s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non 4 Administering the Manifest Objectives 4-2 The Siebel Open UI Manifest 4-3 The Manifest Files View 4-5 The Manifest Expressions View 4-6 The Manifest Administration View 4-7 iv a 4 Add an Init Function 5-20 4.2 Create the class Constructor 5-16 4. The UI Objects Applet: Object Type 4-9 1.1 Declare the Class as a Function 5-15 4. The Files Applet 4-14 Caveat: Presentation Model and Physical Renderer Files 4-15 Example: Customize Siebel Open UI 4-16 1. Define the File and Parent File(s) for the Class 5-13 4. Add the Class to the Namespace 5-12 3. Create or Customize JavaScript Files 4-17 Example: A Section of a Custom JavaScript File 4-18 2. Oracle and/or its affiliatesฺ Use the Manifest Administration View to Specify What Files Should be Downloaded When 4-8 1.4 Add Implementation Code to the Class 5-18 4. Verify the Object Class does not yet Exist 5-11 2.5 Add the Custom Methods for the Class 5-21 Complete Example Page 1 of 3 5-22 Complete Example Page 2 of 3 5-23 v a . Test your Customizations 4-22 Lesson Highlights 4-23 Practice 4-24 s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d n hi t a p ฺ e 5 Presentation Model ฺc o us k n Objectives 5-2 a se t y a Review: Proxy Framework (m li5-3 en c y e Review: ThedPresentation e Model 5-4 l n b A Presentation ra Object 5-5 Pa sfeModel k n an the Presentation Model Examples 5-6 yaCustomizing r a tot Customize a Presentation Model 5-7 n M nHow o Example 5-8 Terminology 5-9 Implement a Presentation Model Customization 5-10 1. Add Custom File(s) to the Manifest Files View 4-19 3.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. The UI Objects Applet: Name 4-11 2. If Necessary. The Object Expression Applet: Groups 4-12 2.3 Specify the Class as an Extension of its Parent Class 5-17 4. Administer the Manifest to Include the Custom File(s) 4-21 5. Add Expressions to the Manifest Expressions View 4-20 4. The UI Objects Applet: Usage Type 4-10 1. The Object Expression Applet: Expressions 4-13 3. Implement a Constructor Function for the Class 5-14 4. 2 Create the Class Constructor 6-14 4.3 Specify the Class as an Extension of its Parent Class 6-15 4. Oracle and/or its affiliatesฺ Complete Example: Page 3 of 3 5-24 Review: Presentation Model Structure 5-25 Lesson Highlights 5-26 Practice 5-27 6 Physical Renderer Objectives 6-2 The Physical Renderer 6-3 A Physical Renderer Object 6-4 Customizing the Physical Renderer Examples 6-5 How to Customize a Physical Renderer 6-6 Example 6-7 Implement a Physical Renderer Customization 6-8 1.5 Add the Custom Methods for the Class 6-17 Review: Physical Renderer Structure 6-19 Lesson Highlights 6-20 Practice 6-21 s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non 7 Debugging Objectives 7-2 Suggestions for Debugging a Script 7-3 Browser Developer Tools 7-4 Invoke Developer Tools 7-5 Verify the Script was Downloaded 7-6 Reasons for Failure to Download 7-7 Use SiebelJS.Log() 7-9 The debugger Statement 7-10 Debugging Using Browser Developer Tools 7-11 Recommendations 7-12 Lesson Highlights 7-13 Practice 7-14 vi a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Verify the Object Class Does Not Yet Exist 6-9 2. Define the File and Parent File(s) for the Class 6-11 4.Log() 7-8 Output of SiebelJS.4 Add Implementation Code to the Class 6-16 4. Add the Class to the Namespace 6-10 3. Implement a Function for the Class 6-12 4.1 Declare the Class as a Function 6-13 4. Add the Theme to the List of Values 8-26 3. Edit the Rules 8-17 3. Create the CSS File: Save the File 8-19 4. Administer the Manifest 8-20 5. Oracle and/or its affiliatesฺ 8 Cascading Style Sheets and Open UI Themes Objectives 8-2 Review: Cascading Style Sheets (CSS) 8-3 CSS Rules 8-4 More Advanced CSS Rules 8-5 Conflicting CSS Styles 8-8 Location of CSS Files 8-9 Examining CSS Rules 8-10 Theme 8-11 Themes for Siebel Open UI 8-12 Selecting a Different Theme 8-13 Defining a Theme 8-14 Modify an Existing Theme 8-15 1. Create the Style Sheets 8-24 2.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Test the Custom Theme 8-29 Lesson Highlights 8-30 Practice 8-31 s a h ) m o ฺc deฺ e r u Gui t n nt cce d8-18 e a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non 9 Siebel Mobile Applications Objectives 9-2 Siebel Mobile Applications 9-3 Mobile Application Modes 9-4 As-Delivered Siebel Mobile Applications 9-5 User Experience 9-6 Features 9-7 JavaScript Files for Siebel Mobile Applications 9-8 CSS Files for Siebel Mobile Applications 9-9 Enabling an Application Object Manager for Siebel Mobile Applications 9-10 Architecture of Siebel Mobile Applications 9-11 Mobile Applets 9-12 vii a . Test the Modified Theme: Verify the Rules 8-22 Create a Custom Theme 8-23 1. Locate the Styling Rules 8-16 2. Administer the Manifest 8-27 4. Create the CSS File: Copy the Modified Rules to a New File 3. Test the Modified Theme 8-21 5. Oracle and/or its affiliatesฺ Mobile Applet Web Templates 9-13 Mobile Views 9-14 Mobile View Web Templates 9-15 Mobile Screens 9-16 Customizing the User Interface for Siebel Mobile Applications 9-17 Siebel Disconnected Mobile Applications 9-18 Siebel Disconnected Architecture 9-19 Lesson Highlights 9-22 Practice 9-23 s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non viii a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. a . Oracle and/or its affiliatesฺ 1 Course Introduction s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Oracle and/or its affiliatesฺ • This lesson provides an introduction to the: – Instructor and class participants – Training site information – Course: — — — Audience A di Prerequisites Goal Objectives Methodology Materials Agenda s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non — — — — Copyright © 2015.Foundations 1 . Siebel Open UI .2 a .Lesson Agenda Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Foundations 1 . Oracle and/or its affiliatesฺ • Who are you? – Name – Company – Role • What is your prior experience? – Siebel applications – JavaScript – Cascading Style Sheets s a h ) • How do y you expect p to benefit from this course? com ฺ ฺ e e r d i tu Gu n e cc dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.3 a . Oracle and/or its affiliates. Siebel Open UI .Instructor and Class Participants Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Siebel Open UI .4 a . All rights reserved.Foundations 1 . Oracle and/or its affiliatesฺ Training Site Information Rest rooms Class duration and breaks Telephones Meals and refreshments s a h ) m o ฺc deฺ e r Fire Exits Questions? u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Foundations 1 . All rights reserved. Siebel Open UI . Oracle and/or its affiliatesฺ Course Audience • This course is designed for members of the Siebel application team responsible for customizing Siebel CRM applications using the Siebel Open UI framework or team members responsible for planning or administering these customizations s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.5 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. 1.x or equivalent Familiarity with JavaScript Familiarity with Cascading C S Style S Sheets s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ • Recommended: – – – – Familiarity with navigating Siebel CRM applications Siebel Tools 8. Oracle and/or its affiliates. All rights reserved.6 a .Course Prerequisites Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 1 . Siebel Open UI . 7 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Course Goal • To familiarize participants with the Siebel Open UI framework and how to customize it using JavaScript and Cascading Style Sheets s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. All rights reserved. Siebel Open UI .Foundations 1 . 8 a . Oracle and/or its affiliatesฺ Course Objectives • Describe the Siebel Open UI architecture • Identify the key file types involved in customizing the Siebel Open UI client • Administer Siebel Open UI customizations s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. Siebel Open UI . All rights reserved.Foundations 1 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Course Methodology Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.9 a . Oracle and/or its affiliatesฺ • Subject matter is delivered through: – – – – Lecture and slide presentations Software demonstrations Class discussions Hands-on practices s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI .Foundations 1 . All rights reserved. Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 1 . Oracle and/or its affiliatesฺ Course Materials • Course content is delivered over two days • Student Guide – All slides presented during lecture – Student notes with additional information • Activity Guide – Hands-on practices s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.10 a . Oracle and/or its affiliates. All rights reserved. html • Specific guides for this course: – – – – – Fundamentals for Siebel Open UI Configuring Siebel Open UI Deploying Siebel Open UI Mobile Guide: Connected Mobile Guide: Disconnected s a h ) m o ฺc deฺ e r u Gui t n • Additional content on My Oracle Support: cce dent a – Information Center: Siebel Open y UI@ (DocSID tu1511846.oracle.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.11 a . Oracle and/or its affiliates.Foundations 1 .2) e d an e this p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Information Sources • Siebel CRM documentation is available on Oracle Technology Network (OTN) – http://www. All rights reserved.com/technetwork/documentation/siebel087898. Siebel Open UI . Copyright © 2015. Siebel Open UI .learning see available resources.Other Sources Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Navigate to Products > Siebel CRM to M nLearning on.oracle.com/oll.oracle. Oracle and/or its affiliatesฺ • Oracle Learning Library – http://www.<#> .com/oll/siebel a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The Siebel Open n development team periodically posts transfers of information (TOIs) to a traUI y a Oracle Library at http://www. All rights reserved.Foundations 1 . 13 a . Siebel Open UI . Oracle and/or its affiliatesฺ Course Agenda Introducing Siebel Open UI: • Lesson 1: Course Introduction (this lesson) • Lesson 2: Introducing Siebel Open UI • Lesson 3: Siebel Open UI Architecture Customizing Siebel Open UI: • Lesson 4: Administering the Manifest • Lesson 5: Presentation Model s a h • Lesson 6: Physical Renderer ) m o ฺc deฺ • Lesson L 7 7: D Debugging b i e r u Gui t n • Lesson 8: Cascading Style Sheets and Open t cce UInThemes a ude @ t y S e d an e this p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Foundations 1 . 14 a . Oracle and/or its affiliatesฺ Course Agenda Additional Topics: • Lesson 9: Siebel Mobile Applications s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 1 . Siebel Open UI . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ 2 Introducing Siebel Open UI s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Oracle and/or its affiliates. a . Foundations 2 . All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. you should be able to: • Describe Siebel Open UI • Identify advantages of Siebel Open UI over the Siebel High Interactivity (HI) user interface s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Objectives After completing this lesson.2 a . Siebel Open UI . Oracle and/or its affiliates. a single AOM cannot support both Siebel Open UI and the HI or SI client. Siebel Self Service Portal. Open UI is not available for the customer-facing standard-interactivity (SI) M Open non are special Open UI versions of some former customer-facing clients. for client.Foundations 2 . A single application object manager (AOM) is configured to either have Siebel Open UI enabled or to use the "traditional" interface. Oracle and/or its affiliatesฺ Siebel Open UI • Is Oracle's next-generation browser client for Siebel desktop and mobile applications • Uses the same back-end architecture. ttraditional diti l Si Siebel b l clients li t Siebel Enterprise a s a )h Web Server m ฺco deฺ Database e r u Gui t n Open UI cce dent a Client tu Siebel Server y@ S e d Continued … an e this p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n The former employee-facing client is the high-interactivity (HI) client and can be replaced with a tran y a the UI -client. but changes the way the user interface (UI) is rendered • Can C co-exist i t with ith fformer.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. The SRF is a compiled version of metadata that represents the Siebel application. Oracle and/or its affiliates.3 . Siebel Open UI . example. All clients can run against the same Siebel Repository File (SRF). There Traditional Client Copyright © 2015. The architecture will be discussed in detail in subsequent lessons. Siebel Open UI Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. ActiveX is a software framework created by Microsoft that adapts its earlier Component Object Model (COM) and Object Linking and Embedding (OLE) technologies for content do nloaded from a net downloaded network. on My Oracle Support. and HTML5 is recommended but not required. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ • Uses open standards to render the application – Uses HTML.Foundations 2 . As of this writing. All rights reserved. and JavaScript — Downloaded to the client as needed to render the page/view – Does not use ActiveX – Does D nott require i IInternet t t Explorer E l (IE) • Runs on any standards-compliant platform a s a )h m Traditional ฺco deฺ HI Client e Web Server r i u GDatabase t u n Any standardscce dent a compliant platform Open UI y@ s Stu e Client d thiServer an Siebel p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Browser Compatibility: a tran To improve performance. ork partic particularly larl in the conte contextt of the World Wide Web. HyperText Markup Language (HTML) is the primary markup language for displaying web pages and other information that can be displayed in a web browser. and fonts. review the Certifications tab Requires IE and ActiveX Siebel Enterprise Copyright © 2015. Cascading Style Sheets (CSS) is a style sheet language used to style web pages written in HTML. It is designed primarily to enable the separation of document content from document presentation such as the layout. JavaScript (JS) is an open source client-side scripting language commonly implemented as part of a web browser in order to create enhanced user interfaces and dynamic websites. as of IP 2014 Siebel Open UI is no longer y a "infinitely" browsers must be modern enough to use JavaScript nM nobackwards-compatible. colors. Web Siebel Open UI .4 . For a complete list of supported browsers.1 is the minimum requirement for Cascading Style Sheets. ECMA-262 and later. CSS 2. Cascading Style Sheets (CSS). Foundations 2 .5 a . All rights reserved. Oracle and/or its affiliatesฺ Siebel Open UI Benefits • • • • • • Native browser support Mobile device support Updated look Enhanced user experience Client-side customizations Large community of developer resources s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ • The Siebel page renders in any standards-compliant browser – Is rendered like other web pages in that browser • Takes advantage of browser functions – History. bookmarking.6 . zoom. tabs. find. and so on a s a )h m Open p UI in p UI in oOpen ฺ ฺcMozilla e Google Chrome Firefox e r d i tu Gu n e cc dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The CSS files n with the Siebel application contain some rules that use browser a tshipped a y r a extensions nto. For M nobrowser example.Native Browser Support Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . More details on CSS are in a subsequent lesson. Oracle and/or its affiliates. All rights reserved.invoke browser functionality that has yet to be made an industry standard. extensions are used to create shaded buttons on browsers that support Copyright © 2015. linear gradient color display.Foundations 2 . print. location.7 a . email.Foundations 2 . a M non Copyright © 2015. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. calls. and so on A Siebel mobile application s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Each Siebel mobile ya -tran application requires a separate license. All rights reserved. Siebel Open UI . Oracle and/or its affiliatesฺ Mobile Device Support • Siebel mobile applications are built using the Siebel Open UI framework – Applications run on any standards-compliant browsers – Applications look like other native applications • Integrates I t t with ith mobile bil ffunctions ti – Gestures. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Siebel Open UI . All rights reserved.8 a . Oracle and/or its affiliatesฺ Updated Look • Open UI-specific CSS files provide a cleaner. more modern look and enhanced functions New overall look Simple querying s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 2 . releases Not all HI features are implemented in Open UI UI. Oracle and/or its affiliates. All rights reserved. ya -tallows r a M non a Copyright © 2015.9 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Enhanced User Experience • • • • • Controls within an applet automatically resize Textboxes are resize-able and include spell check Keyboard tabbing has been enhanced The calendar has been improved And more Drag a textbox corner to expand the textbox… s a h ) m o ฺc deฺ …and the other controls automatically e r u Gui resize (they are narrower here) t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The calendar an a user to specify start of week and workdays. Siebel Open UI .1" on My Oracle Support. See "Best Practices: Deployment Guide for Siebel Open UI: Document 1499842.Foundations 2 . There are some limitations in the releases. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ Responsive Web Design • As of IP2014 the layout of the page depends on the size of the browser window – Frequently referred to as an aspect of "Responsive Web Design" • Example: The full-sized full sized window is full-featured: full featured: "Full-size" window Application-level menus s a h ) m Tabs and view bar o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ Continued … ฺc o us k n t ya nse a (m lice y e nd rable a P sfe kconfiguring n Detailsa on n responsive web design are in the Siebel Open UI . Oracle and/or its affiliates.10 a . All rights reserved.course. JavaScript M nonAPI Small global icons Copyright © 2015.Advanced a y r t a .Foundations 2 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. features are moved.Foundations 2 . Oracle and/or its affiliatesฺ Responsive Web Design • As the user shrinks the window (or on a device with less resolution). or removed automatically Application-level menus are still visible "Mid-size" Mid size window Larger global icons s a h View bar has been removed)to omwhichฺ provide room for the c tabs. All rights reserved. resized.11 a . Siebel Open UI . ฺ are now in ide ure2 levels t u n e nt G c c a ude @ t y S e d an e this p ฺ Continued … ฺc o us k n t ya nse a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . almost all "non-vital" features have been removed No application-level menu "Small" window No global icons A vastly-reduced number of tabs s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 2 . Oracle and/or its affiliates. Oracle and/or its affiliatesฺ Responsive Web Design • At the smallest resolutions.12 a . All rights reserved. Foundations 2 .13 . rendering in special ways.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. That API y a allows n. Server-side Server side customizations still require Siebel Tools. All rights reserved. Siebel Open UI . Oracle and/or its affiliates. The new API M ncustomers oanything supports from simple validations to replacement of whole UI components that require — Copyright © 2015.to easily extend the capabilities of Oracle provided features. Oracle and/or its affiliatesฺ Client-Side Customizations • The framework provides a full continuum of customization possibilities using the public JavaScript API – The as-delivered Siebel Open UI client behaves very similarly to the high-interactivity client – You can use the JavaScript API to get as sophisticated as you want with your customizations — You can extend so that the application looks nothing like a standard Siebel application You can extend small bits and pieces a s a )h m co eฺ ฺ e r AsFully id ucustomized In between t u n delivered G cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Open UI provides a trana fully published JavaScript API to build powerful CRM solutions. Customers can continue to use tools they are accustomed to or use the new web development extensibility to build features previously unachievable using traditional means. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved.Foundations 2 . Oracle and/or its affiliates. and JavaScript) provides a large pool of available developers and tools – Siebel applications can be extended using the same tools that developers are familiar with – Developers can work with the Siebel interface similarly to other web applications Developers use their preferred tools to edit JavaScript and CSS files to customize the application s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . CSS. Oracle and/or its affiliatesฺ Large Community of Developer Resources • Using standards (HTML.14 a . Siebel Open UI .15 a .Foundations 2 . Oracle and/or its affiliatesฺ • You can use the framework to extend the client application – Change the overall look and feel – Change the way data is presented – Add client-side business logic s a h ) m o ฺc deฺ e r u Gui Note: Siebel Tools is still required for server-side customizations t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. All rights reserved.Customizing Siebel Open UI Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.side of the page). Tree (navigation a trthemes a y a . All rights reserved. The as-delivered application provides the Aurora theme in all three user clicks Copyright © 2015. and Side Menu (a hidden menu that is displayed when the links the M along nona menu icon).16 .Foundations 2 . Siebel Open UI . Oracle and/or its affiliatesฺ Change the Overall Look and Feel • Client-side layout is managed by cascading style sheets (CSS) and updated Siebel Web Template (SWT) files • A theme is a collection of CSS files that implement the look and feel for the application – Users U can choose h which hi h th theme tto use iin th their i user preferences f • Custom CSS files can be added to override the defaults As-delivered Aurora tab theme As-delivered Aurora tree theme a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Three types of n are available: Tab (tabs across the top of the screen). Siebel Web Template files provide placeholders for Siebel view and applet layouts on top of which the HTML is constructed. formats.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . All rights reserved. Oracle and/or its affiliatesฺ Change the Way Data is Presented • JavaScript controls are used to present the data onto the application page – A specific piece of JavaScript code is used to render a specific type of Siebel control — — — — Long text box Calendar List And so forth s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.17 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Foundations 2 . Siebel Open UI .Foundations 2 . All rights reserved. n Ma nThe o Copyright © 2015. Oracle and/or its affiliatesฺ • Use the JavaScript controls Oracle provides – Many are sourced from public jQuery libraries • Substitute in JavaScript controls from open source libraries • Use JavaScript controls from private libraries • Write your own custom JavaScript controls Standard list applet control to show contacts Tiled applet control to show contacts a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a k P nsfe JavaScript library designed to simplify the client-side scripting of jQuery a isna multi-browser y jQuery tra library is public. Oracle and/or its affiliates.Using JavaScript Controls Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. HTML.18 . Foundations 2 .19 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. display cce dent work and main phone a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Add Client-Side Logic • The JavaScript API has access to Siebel data and metadata • You can use the JavaScript API to manipulate Siebel data and add client-side logic If Job Title does not have a value. Siebel Open UI . do not display work and main phone s a h ) m o ฺc deฺ e r u Gui t n If Job Title has a value. Oracle and/or its affiliatesฺ • Use Siebel Tools to: – Modify business layer objects — — Add fields to business components Add server-side logic – Enable UI objects for display — — Add controls to applets Add applets to views – Generate a Siebel Repository file (SRF) s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Siebel Tools Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved.Foundations 2 . Oracle and/or its affiliates. Siebel Open UI .20 a . Oracle and/or its affiliates.JavaScript Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.21 a . Oracle and/or its affiliatesฺ • Use JavaScript to: – Provide interactivity with the user — — — Customize how controls appear Partially refresh the view React to user clicks – Implement client-side logic — — Show or hide fields inside the applet Manipulate some Siebel data s a – And so forth h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Siebel Open UI .Foundations 2 . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.22 a . check in. or manage these fil customizations file t i ti • The framework does provide separate Siebel directories for custom files s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d Continued … an e thi p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n ya -tran a M non – So they are isolated from upgrades – You must manage your own custom file versions Copyright © 2015. Oracle and/or its affiliatesฺ Considerations • Developers modify CSS and JavaScript files outside of the Siebel framework using their own tools and editors • Standard web development practices should be followed • Siebel Tools is not used to track. Siebel Open UI . Oracle and/or its affiliates. All rights reserved.Foundations 2 . All rights reserved.Foundations 2 .23 a . Oracle and/or its affiliatesฺ Considerations • You can completely tailor the user interface using the JavaScript API – Redesign the way the Siebel application is rendered – Add Open UI portlets to other applications – And A d so fforth th s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d Continued … an e thi p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Considerations • Applets that are classified as standard interactivity applets are not usually supported in Open UI – A warning icon is displayed in the view – You can: — — — Remove th R the applets l t ffrom the th view i Rework the applets to conform to high-interactivity Wait until Oracle migrates these applets a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Reference: See Tasks for Siebel Open UI" in Deploying Siebel Open UI for more n a tra"Migration y a information M nonon. For example "About Record" • The server side renderer implements standard interactivity • Contains one or more applets with a portlet in it • Product Catalog style layouts.Foundations 2 .making standard interactivity applets and views work in Open UI. Exceptions: Standard Interactivity applets without business components or applets outside of Copyright © 2015. All rights reserved. views may be converted to RIA (rich internet application) applets and displayed in Open UI A view becomes standard activity if any of the below criteria are met: • Contains one or more applets which are not bound to a business component • Contains one or more applets whose "Class" properties points to a class which derives from classes that implement the base functionality of standard interactivity High Interactivity" Interactivity set to 1 • Contains one or more applets whose associated Class have "High • Contains one or more applets with User property: High Interactivity Enabled = N • Contains one or more applets outside of a View (not associated to a view web template other than standard pop ups (MVG/Pick/Assoc)). layouts Siebel Open UI .24 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. CSS. Oracle and/or its affiliatesฺ Lesson Highlights • Siebel Open UI is the new user interface for Siebel applications – – – – – Built using standard HTML.25 a . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. and JavaScript Will run in any standards-compliant browser P id similar Provides i il ffunctionality ti lit tto th the Si Siebel b l HI client li t Implements responsive web design (RWD) Provides the ability extend Siebel customizations using web development practices s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 2 . Siebel Open UI . All rights reserved. Oracle and/or its affiliates.Practice Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI .Foundations 2 .26 a . Oracle and/or its affiliatesฺ • Explore the Siebel Open UI client as an end user s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. a . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ 3 Siebel Open UI Architecture s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Oracle and/or its affiliatesฺ Objectives After completing this lesson. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. you should be able to: • Describe the components of the Siebel Open UI architecture and how they interact s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.2 a . All rights reserved. Siebel Open UI .Foundations 3 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 3 . Siebel Open UI . All rights reserved.3 a . Oracle and/or its affiliatesฺ Siebel Open UI Key Components • • • • • • Application Object Manager (AOM) Siebel Web Template (SWT) files Cascading Style Sheet (CSS) files JavaScript (JS) files Open UI Client Manifests s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi More p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. you can set these parameters in the [InfraUIFramework] section of the client configuration (.Foundations 3 . Oracle and/or its affiliatesฺ Application Object Manager (AOM) • Runs on the Siebel Server and processes client requests • To work with Open UI Clients. Oracle and/or its affiliates. set the parameters for the AOM: – EnableOpenUI = TRUE – HighInteractivity = TRUE a s a )h m Select the desired AOM o ฺc deฺ e r u Gui t n cce dent a tu and y@ S e Set iEnableOpenUI d th s an e HighInteractivity to True p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n For existing deployments it is best to create a new object manager so that you can continue to a tran y a run n.4 . All rights reserved. The URL for Open M thenformer odifferent UI will be from the standard URL and available in parallel to the existing HI client. If you are prototyping using the Siebel Developer Web Client.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.cfg) file.object manager for high interactivity clients as necessary. You must generate the new virtual directories on the Siebel Web Server to support the new object manager. Copyright © 2015. Siebel Open UI . Siebel Web Template (SWT) Files Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.5 a .Foundations 3 .swt extension Copyright © 2015. Oracle and/or its affiliatesฺ • Provide placeholders for Siebel view and applet layouts – Allow Siebel data to be mapped to logical placeholders within the layout • Provide the framework on which the HTML is constructed – Are A processed db by th the Si Siebel b lS Server s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Siebel Web Template files have a . All rights reserved. Siebel Open UI . All rights reserved. and so forth a s a )h m co eฺ ฺ e r The updated SWT files use <div> tags.6 . In short.wikipedia. Siebel Open UI . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 3 . Wikipedia at http://en. decide on the size and layout of it. The new files do not. "The first element in your list goes here. "Put this in as a table that's this big at this M beenonchanged locationnon the screen.org/wiki/Span_and_div. the SWT files y a have so that instead of saying. for example." they say. consult an HTML reference guide. boundaries. Oracle and/or its affiliatesฺ Decoupled Layout • Open UI uses new versions of the SWT files which no longer contain explicit layout – They use <div> tags instead of explicit alignments or frames to support CSS styling The 'original' SWT files include explicit tables. Let the CSS file Copyright © 2015. locations. allowing the id uthe page t u n G CSS stylesheets to determine how to lay out cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The original SWT a tranfiles contain layout information." For more information on <div> tags in HTML. Oracle and/or its affiliatesฺ • SWT files are on the Siebel Server in \siebsrvr\WEBTEMPL – The WEBTEMPL directory contains the original SWT files – The OUIWEBTEMPL subdirectory contains the new Open UI SWT files a s a )h m ฺco deฺ e r u Gui t Siebel Open UI SWT files n are in OUIWEBTEMPL cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n If you are prototyping ya -tran using the Siebel Developer Web Client. a M non Copyright © 2015.SWT Folder Structure Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. the path is client\WEBTEMPL. Oracle and/or its affiliates. All rights reserved.7 . Siebel Open UI .Foundations 3 . All rights reserved.8 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. a M non Copyright © 2015. Oracle and/or its affiliatesฺ Cascading Style Sheet (CSS) files • Consist of a set of styling rules that specify how content in an HTML document is to be displayed – Separates the document presentation from the document content – Are written in a markup language that uses tags • Allow a set of styling rules to apply to multiple web pages – Modifying the presentation of a large website can be performed by editing a single set of files a s a h • Include rules that specify how to lay out block-level elements ) m o ฺc deฺ defined in the HTML source e r u Gui t n • Are referenced to present the final UI to the user cce dent a – HTML elements include style information tu references styles y@ s Sthat e d stored in CSS files an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The original CSS ya -tranfiles did not contain layout information. Siebel Open UI . The new CSS files do.Foundations 3 . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. ya -trcontain a M non Copyright © 2015. the path is client\PUBLIC\enu\files. If you are prototyping using the Siebel Developer Web Client Client. Siebel Open UI . Oracle and/or its affiliatesฺ CSS Folder Structure • CSS files are on the Web Server in \eappweb\PUBLIC\<lang>\files Siebel Open UI CSS files are in PUBLIC\<lang>\files s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The directories an the files for HI and Open UI. Oracle and/or its affiliates.9 a .Foundations 3 . All rights reserved. populate controls with data from business component fields • Are provided by Oracle for as-delivered functionality – Customers can add other files to change application behavior a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Modifying existing a tran files: Rather than modifying existing files. and protects the modified file from being overwritten by upgrades. Oracle and/or its affiliatesฺ JavaScript (JS) files • Contain client-side business and presentation logic • Are used by the Open UI client to help render the application in a browser – For example.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Siebel Open UI allows you to y a reference modified version of the file in a separate custom directory.10 . Details are in a subsequent lesson. This protects the M oanfrom originalnfile corruption. Siebel Open UI . Copyright © 2015. All rights reserved.Foundations 3 . many of the controls are implemented by Oracle engineering using JQuery. JavaScript you can use open open-source. All rights reserved. Oracle and/or its affiliatesฺ JS Folder Structure • JS files are on the Siebel Web Server in \eappweb\public\<lang>\<build>\SCRIPTS – The top directory contains all JavaScript for high interactivity – The siebel subdirectory contains all JavaScript for the Open UI framework – The 3rdParty subdirectory contains all 3rd party controls s a h ) m o Siebel Open UI JavaScript files are inฺc eฺ e PUBLIC\<lang>\<build>\scripts\siebelu orr3rdParty d i t u n G e t cc den a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Store your custom ya -tranJavaScript files in the custom subdirectory of the siebel directory. If you are prototyping using the Siebel Developer Web Client.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a M non a Copyright © 2015. source 3rd 3rd-party party libraries such as JQuery. Siebel Open UI . the path is client\public\<lang>\<build>\SCRIPTS. In fact. Because the framework is using JavaScript. Oracle and/or its affiliates.Foundations 3 .11 . but it is not recommended. Oracle and/or its affiliatesฺ Browser Scripts • JavaScript files that are used with HI clients are separate from the JavaScript files that are part of the Open UI framework • Historical JavaScript files (if any) are on the Web Server in \eappweb\PUBLIC\<lang>\<srf>\bscripts\all a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Traditional browser ya -tran scripts can run side by side with Open UI. All rights reserved. the path is client\public\<lang>\<srf>\bscripts\all.12 . Siebel Open UI . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. If you are prototyping using the Siebel Developer Web Client Client.Foundations 3 . a M non eappweb Copyright © 2015. Oracle and/or its affiliates.13 a .Foundations 3 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. including Plug-in Wrappers r d i u t u n G e t cc den a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . All rights reserved. Oracle and/or its affiliatesฺ Open UI Client • Is a framework that runs within the browser on the client to present the interface to the user – – – – Only talks to the back-end server components when needed Caches data locally A li client-side Applies li t id llogic i Binds the data to the presentation layout • Utilizes: – Proxies s a h ) – Presentation Models (PM) m o ฺ ฺc (PWs) e e – Physical Renderers (PR). a Metadata M noisnother data such as repository objects that are needed to construct the view. All rights reserved. PW PR Metadata Copyright © 2015. Oracle and/or its affiliates.Proxy Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ • Provides the interface to the back-end Siebel data – Gets runtime data and metadata as needed – Provides data back to the server • Is provided by Oracle – Must not be modified by customers Browser Open UI Client s a h ) Runtime m o PM ฺc deฺ data e r u Gui t n Proxy Proxy interfaces with cce dent the servers a y@ s Stu e d Siebel Server an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Runtime data ya -tisrathen records from the Siebel database that the user will see in the view.14 a .Foundations 3 . Siebel Open UI . Oracle and/or its affiliates. Oracle and/or its affiliatesฺ • Creates local representations of metadata objects – Creates a "shadow" copy of the business object associated with the view – Creates a "shadow" copy of the business components associated with the applets in the view – Creates a "shadow" copy of the applets – Creates a "shadow" copy of the controls in the applet – And so forth s a h ) Browser Local representations m o ฺc deฺ Open UI Client e r u Gui Metadata t n PW PR cce dent Runtime a PM y@ s Stu data e d Proxy pan thi ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . All rights reserved.15 a .Proxy Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 3 . All rights reserved.Presentation Model (PM) Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 3 . Oracle and/or its affiliatesฺ • Works with the proxy data – Collects field values – Sets properties • Determines what logic should be applied – Allows for client-side scripting without the need to engage the Siebel Server • May capture behaviors s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe kcovered n Detailsa are n in a subsequent lesson.16 a . Siebel Open UI . Oracle and/or its affiliates. a y r t a M non– Did the user leave a control? – Did the user click a link? Copyright © 2015. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Foundations 3 . a y r t a M non— — — Copyright © 2015. All rights reserved. Siebel Open UI .17 a . Oracle and/or its affiliatesฺ Physical Renderer (PR) • Builds or renders the user interface • Uses different controls to display different types of data – Datetime versus currency versus text • Uses different controls to display records in different ways – The same records (same presentation model) can be shown as a: — List applet Carousel Timeline A d so fforth And th s a h ) m o ฺc deฺ e r i u Gmobile t u n • Supports different presentations for desktop versus cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe kcovered n Detailsa are n in a subsequent lesson. an applet) from rendering controls for the applet s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a faenew feature in IP2014.Plug-In Wrappers (PWs) Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 3 .18 a . a physical renderer for a button • Are attached to control types – For example. Oracle and/or its affiliates. All rights reserved. attach a physical renderer for all text field controls • Separate overall rendering of an object (for example. Siebel Open UI . Oracle and/or its affiliatesฺ • Are physical renderers for controls – For example. k P are s n Plug-inawrappers n y ra Ma non-t Copyright © 2015. Oracle and/or its affiliatesฺ Manifests • Identify which files are associated with a given user interface element – If an element is not listed.Foundations 3 . browser.19 .manager is responsible for reading the manifest and determining which files application object M ondownloaded.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. The a that a y r t a . All rights reserved. Oracle and/or its affiliates. The manifest is stored within the Siebel database just like other administrative data. need tonbe It provides this list of files in the HTML header sent to the client PM JS CSS Copyright © 2015. a default set of files is used • Control which files get downloaded to the client Browser Open UI Client PW PR a s a )h m co eฺ Proxy ฺ e r Specify which files to download id u to theGclient t u n cce dent Web Server / a Siebel Server y@ sJSStu CSS e d Manifests an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Only the files nare required for a particular element are downloaded to the browser. Siebel Open UI . a y r t a M nonCopyright © 2015.20 a .Administration screen within the Siebel application The Administration . Siebel Open UI . All rights reserved.Foundations 3 . Oracle and/or its affiliates.Application > Manifest Administration view s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe kmanifest n Detailsa on n administration are covered in a subsequent lesson.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Manifest Administration • Manifests are managed in the Application . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Example: Navigating to the My Contacts View In this example, a user clicks My Contacts to navigate to the My Contacts view: 1. The physical renderer or presentation model passes the request to the proxy 2 The 2. Th proxy sends d a requestt tto the th Siebel Si b l server 3. The Siebel server returns the results 4. The presentation model applies business logic s a 5. The physical renderer generates the final HTML h ) m o 6 The result is presented to the user 6. ฺ ฺc ure Guide t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 3 - 21 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 1. The Physical Renderer or Presentation Model q to the Proxy y Passes the Request • The physical renderer or presentation model recognizes an event (a mouse click), prepares a request, and sends it to the client proxy Browser Open UI Client PW PR a s a )h m Proxy ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Handling Events: a tranAs of IP2014, event handling is managed using an "Event Helper" object. y a - of this object are described later in this course, for a more detailed While basics M the nonof the event helper consider taking Oracle University's Siebel Open UI - Advanced description User click PM Copyright © 2015, Oracle and/or its affiliates. All rights reserved. JavaScript API course. Siebel Open UI - Foundations 3 - 22 Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 2. The Proxy Sends a Request to the Siebel Server • The proxy 'recognizes' that it does not have the necessary data to fulfill the request – The client cache doesn't have the required data locally • The proxy sends a request for the information to the application li ti object bj t manager (AOM) on the th Siebel Si b l server Browser Open UI Client s a PW PR h ) m o PM ฺc deฺ e r u Gui t n Proxy t Proxy sends n ccerequest e a @ Stud y e Siebel Server d this n a AOM cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non No contact data Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 3 - 23 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 3. The Siebel Server Returns the Data • The application object manager passes the required data to the proxy – Metadata: the object definitions for the view, applet, business component, and so forth – Runtime data: the contact records available to the user Browser Open UI Client Metadata s a h ) PM m o R ฺcti Runtime d data t ฺ e r d i Proxy u Gu e Passed to Proxy t n t cce denDatabase a Web Server / y@ s Stu e SRF d i Siebel Server SWT an e thAOM p Metadata ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non PW PR Runtime data Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 3 - 24 a The Siebel Server Returns the Data • The AOM checks the manifest and provides the list of JavaScript and CSS files needed for the applet/view – The browser downloads and caches these files Browser Open UI Client PW PR Metadata JS CSS a s a )h Proxy m o ฺ Fil d Files downloaded l ฺdcd e e r d i tu Gu n e Web Server / c ent c a Siebel Server @ JSStud CSS y SWE Manifest e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n The appropriate n files associated with the theme and view/applet are also downloaded a traCSS y a and M cached. Oracle and/or its affiliatesฺ 3. Oracle and/or its affiliates. non PM Runtime data Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.25 . Siebel Open UI .Foundations 3 . All rights reserved. 26 a . The Presentation Model Applies Business Logic • The proxy notifies the presentation model that all data has been received and files downloaded • The presentation model applies any required business logic using the downloaded JavaScript files Browser Open UI Client s a PW PR h ) Metadata CSSom JS PM ฺc deฺ e r Runtime u Gui t n Proxy data cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ 4. Oracle and/or its affiliates.Foundations 3 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Siebel Open UI . Oracle and/or its affiliatesฺ 5.27 a . Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. The Physical Renderer Generates HTML • The presentation model notifies the physical renderer that the metadata and data are ready to be rendered • The physical renderer: – Renders the applet (or other object) – If necessary.Foundations 3 . uses the plug-in wrappers to render the controls Browser Open UI Client s a h HTML ) Metadata CSS m JS o PM ฺc deฺ e Runtime r u Gui t n Proxy data cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non PW PR Copyright © 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 6. The Result is Presented to the User • The final HTML with embedded JavaScript and CSS styling and data is presented to the user in the browser Browser Open UI Client PW PR PM Metadata Runtime data JS CSS HTML s a h ) m o ฺc deฺ e r u Gui t n Record data cce dent to display a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Proxy HTML to display Copyright © 2015.Foundations 3 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Siebel Open UI .28 a . Foundations 3 . Siebel Open UI .29 a . All rights reserved. Oracle and/or its affiliatesฺ Siebel Open UI Architecture Summary Browser Open UI Client PW PR Metadata PM Runtime d t data JS Proxy CSS Downloaded Interactions s a h ) Manifest m o ฺc deฺ e r i u GCSS t SRF u JS n SWT cce dent a Metadata y@ s Stu e d i n h t a p ฺ e Runtime datac ฺ oDatabase us k n t ya nse a (m lice y e nd rable a P sfe k n ya -tran a M non Web Server / Siebel Server AOM Specifies which files to download Copyright © 2015. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. 30 a Server Style Sheets HTML Composition Layout y Styling Styling Layout Siebel Open UI Static: Layouts moved to CSS from SWT Server Siebel HI Client Dynamic: Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Siebel Open UI Client ActiveX UI Controls Data and control g decoupled p bindings Siebel HI Client JavaScript UI Controls JavaScript Library JQuery Library Layout Data & Data bindings Client C Browser Siebel HI Client JavaScript Extension API ActiveX Proxy JavaScript Proxy Client s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n In the diagram nSiebel Server and Siebel Web Server are represented together as a trthe a y a "Server".Foundations 3 . Oracle and/or its affiliatesฺ Summary of Differences ((In Yellow)) . All rights reserved. M nonSiebel Web Templates Style Sheets Conditional Rendering Siebel Object Manager Siebel Tools Configuration HTML Composition Conditional Rendering Siebel Web Templates Copyright © 2015. Siebel Open UI . All rights reserved.Foundations 3 . Network. M noornthe Copyright © 2015. Siebel Open UI . Oracle and/or its affiliates.1) on MyOracle Support. Oracle and/or its affiliatesฺ • Never edit as-delivered JavaScript files – Create and reference custom files instead • Isolate customizations in "custom" subdirectories • Create a new object manager for Open UI and test out their deployment in parallel with the HI client • Develop a plan to migrate any browser scripts to the Open UI framework a s • Be aware of standard interactivity applet use and implications a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Reference: For n information.31 .Siebel Open UI Deployment Guide (Doc ID 1499842. see Deploying Siebel Open UI on Oracle Technology a tramore y a .Recommended Practices Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. physical renderer.32 a . Oracle and/or its affiliates. and CSS layers s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. presentation model.Foundations 3 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ Lesson Highlights • The architecture for Siebel Open UI is similar to the architecture for the high interactivity with some differences – A separate application object manager is used which is enabled for Open UI – Layout information is moved from the SWT to the CSS files – Data binding and layout is decoupled in the client by using proxy. All rights reserved. Siebel Open UI .Foundations 3 . All rights reserved. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.33 a . Oracle and/or its affiliatesฺ Practice • Enable Siebel Open UI for an application object manager • Use the browser to see which files are downloaded • Inspect some of the directories s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 4 Administering the Manifest s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a . All rights reserved. Oracle and/or its affiliates. All rights reserved. Siebel Open UI .Foundations 4 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Objectives After completing this lesson.2 a . you should be able to: • Describe the purpose of each of the Siebel Open UI manifest administration views • Add custom files to the manifest • Administer the manifest s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . or other t n cceobject e a @ Stud y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non – Where those files should be applied — — Copyright © 2015. specify which JavaScript files should be u Gassociated t u n with which applet. All rights reserved.Foundations 4 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ The Siebel Open UI Manifest • Is a set of metadata records in the Siebel database that determine: – What files should be downloaded to the client — — JavaScript files Cascading Style Sheet (CSS) files – When those files should be applied — Optionally. create conditional rules for when a file should be applied s a h ) m Associate files to objects j in the Siebel application pp o ฺc deฺ e r i For example.3 a . navigation item. Oracle and/or its affiliates.Foundations 4 . Oracle and/or its affiliatesฺ The Siebel Open UI Manifest • Is administered using the manifest administration views under Administration .Application – Manifest Files – Manifest Expressions – Manifest M if t Administration Ad i i t ti s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . All rights reserved.4 a . All rights reserved. Do not forget that the browser caches JavaScript files. the files themselves are not uploaded y a to This allows you to modify the files in the filesystem and the updated Mthe Siebel on-Enterprise. so you Copyright © 2015. Siebel Open UI .5 .css files: <eappweb>\PUBLIC\<lang> • Custom files (including relative paths) must be added to this view before they can be used in other manifest views a s a )h m ฺco d>eฺ Administrationr-e Application i that u Gallufiles t Manifest Files includes n t to the client cedownloaded mightcbe n e a @ Stud y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n File References: a tranThe manifest contains file references. Oracle and/or its affiliatesฺ • Determines what files are available to be downloaded – Files include relative paths — — .The Manifest Files View Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.js files: <eappweb>\PUBLIC\<lang>\<build>\scripts . may need to clear the browser cache to see the updated files. Oracle and/or its affiliates. files arenimmediately available.Foundations 4 . Siebel Open UI . the expression named Base thattribute an object p OperationalMode equals 'Base' ฺ e c s ฺ u k n e to a y a ens m ( y e lic e d n rabl a P sfe k n The expressions n written using Siebel Query Language.6 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. and GetProfileAttr() to read an attribute from the currently-active application and session (for example. All rights reserved. Oracle and/or its affiliatesฺ The Manifest Expressions View • Defines expressions that are used to determine whether or not to download a file – When should a file be applied? • Expressions typically compare object or profile attributes to lit l values literal l – Evaluate to either TRUE or FALSE – For example.Application > ManifesttExpressions u Guincludes n name-expression pairs cce dent a y@ s Stu e d i evaluates to TRUE if the For example. Siebel Call Center while logged in as SADMIN). Oracle and/or its affiliates.Foundations 4 . currently-active object (for example. The full range of Siebel Query a traare y a Language is available. the expression for Base is GetObjectAttr("OperationalMode") = 'Base' a s a )h m ฺco deฺ e r i Administration . M nonexpressions The two most-commonly-used most commonly used methods are GetObjectAttr() to read an attribute from the Copyright © 2015. the applet). In the Object Expression applet. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. screenshot the selected record in the top applet (UI Objects) is of Type = Applet.7 . So when a user navigates to the Contact List Applet. presentation model. Screenshot example: In the example in the screenshot. ya -tThe r a M non a Copyright © 2015. Siebel Open UI . and Name = Contact List Applet. Group Name = Grid is selected. This corresponds to a simple table of records. and the user preferences specify that a table of records should be shown (a grid). Usage Type = Physical Renderer.Foundations 4 . This record determines what specific files should be downloaded for the Contact List Applet's physical renderer. the file to the right (siebel/jqgridrenderer) should be used as the physical renderer. All rights reserved. or so forth The current view shows download rules for the Contact List Applet s a h ) m o ฺc deฺ e r u Gui t n cce dent a tu the Manifest y@ Files from S e d athen e this Files view Expressions from p ฺ Manifest Expressions ฺc oviewus k n ya nse t a (m lice y e nd rable a P sfe k n Screenshot: anscreenshot has been modified to fit the page. Oracle and/or its affiliatesฺ The Manifest Administration View • Associates files from the Manifest Files view with user interface (UI) objects such as applets and controls – Uses expressions from the Manifest Expressions view to determine when to download — Which files to download in which situations • Specifies how the files are to be used – Physical renderer. All rights reserved. and object name in the UI Objects applet 2. Specify expression groups and expressions in the Object Expression p applet pp 3. Oracle and/or its affiliates. usage type. Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Use the Manifest Administration View to Specify What Files Should be Downloaded When 1. Specify the files to be downloaded in the Files applet s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ More ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 4 .8 a . Specify the object type. or Control: The file is loaded when the specified object of this type is loaded – Navigation: The file is loaded when the navigation items are displayed s a h ) m o ฺc deฺ e r Specify an object type u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. The UI Objects Applet: Object Type Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ • Specify an object type with which to associate the file : – Application: The file is loaded when the application is loaded – View. Siebel Open UI .1. Toolbar. All rights reserved. Oracle and/or its affiliates.9 a .Foundations 4 . Applet. Menu. for example. You only need to add or modify records in this view if you are customizing the application. HTML files that might be referenced to M maynobenreferenced add a standard footer to a page or so forth. Copyright © 2015.Foundations 4 . but n a traResource y a that by the JavaScript. Siebel Open UI . Oracle and/or its affiliatesฺ • Specify how the file(s) will be used: – Common/Resources: The file is a reference or resource file and should always be downloaded – Theme: The file supports a theme – Presentation Model/Physical Renderer: The file is the base Presentation Model or Physical Renderer file for the object – Web Template: This record references a Siebel Web Template a s a )h m ฺco deฺ e r u Gui t n nttype ccethe dusage Specify e a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Resource Files: files are files that are not necessarily JavaScript or CSS files. Oracle and/or its affiliates. All rights reserved.10 . The UI Objects Applet: Usage Type Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.1. The files required to support the standard Siebel Open UI interface are already populated in these views. Foundations 4 . DEFAULT FORM APPLET applies to all form applets that do not M non-rules have specific set for them. The UI Objects Applet: Name Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Copyright © 2015.11 . Usage Type. Oracle and/or its affiliates. Siebel Open UI . and Name as an as-delivered record. This is the only exception to the requirement that Type/Usage Type/Name be unique for each record. The files you specify in your record will be downloaded in addition to those specified in the asdelivered record. Oracle and/or its affiliatesฺ • Specify the name of the object as it appears in Siebel Tools – Use Help > About View to get applet or view names a s a )h m ฺco deฺ e r i uobjectG t u Specifyn the name cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Other names: n are names in ALL CAPS that are used to specify more general a trThere a y a configurations.1. for example. All rights reserved. you can create ONE additional record with the same Type. Instead. Duplicate Names: You cannot modify as-delivered records. tualld of its expressions y e d this are combined with ANDs n The Map group a is evaluated lastฺcฺp se u k n e to a y a ens m ( y e lic e d n rabl a P sfe k n Web Template n If Usage Type = Web Template. then you must specify the name of a traName: y a . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Exception: When Type = Application. evaluation stops when a group evaluates to TRUE a s a )h m ฺco deฺ e r u Gui t n t is evaluated ceGridegroup n cThe a @ Sfirst. The Object Expression Applet: Groups • A group is a set of Boolean expressions that determines whether or not to download a file or files – When should this file be downloaded? – A single group evaluates to TRUE or FALSE • Each E h group h has a llevell – Each group is evaluated in order.12 . Siebel Open UI . rather than in the Files applet. Oracle and/or its affiliatesฺ 2.Foundations 4 . the Web M Siebel non • Specify the operator (AND or OR) to use to combine expressions in the group Copyright © 2015.Template here. all groups that evaluate to TRUE are applied. All rights reserved. Screenshot: The screenshot has been modified to fit the page. The Object Expression Applet: Expressions • An expression is a simple Boolean expression that returns TRUE or FALSE • Add expressions to a group to determine whether to download the files associated with the group – Th The L Levell fifield ld d determines t i th the order d iin which hi h th these expressions are evaluated – Evaluation stops as soon as the result is known — For example. All rights reserved. in that d s i n h order. Oracle and/or its affiliatesฺ 2. evaluation stops and the group returns )h m FALSE o ฺc deฺ e r u Gui t n cce dent a The group the Desktop. Oracle and/or its affiliates. if expressions are being ANDed and a single a s a expression returns FALSE. and ANDs them together ฺpa use t c ฺ k to n a ay ense m ( y e lic e d n rabl a P sfe k n Expressions: nexpressions are those defined in the Administration . @Grid and tuGridevaluates y S e EditList.Application > a trThe a y a Manifest view.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . nM noExpressions Copyright © 2015. expressions.Foundations 4 .13 . The Files Applet • For each expression group.js from the siebel directory s a h ) m o ฺc deฺ If the Grid expression group e r u Gui evaluates to TRUE… t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a fe k PThenas-delivered s n Defaultafiles: application includes a set of JavaScript and CSS files to a y r t a download M noton-the client. Copyright © 2015. Oracle and/or its affiliatesฺ 3. Siebel Open UI . You are specifying custom files to download here.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 4 .14 a . Oracle and/or its affiliates. All rights reserved. specify a file or files to download to the client …download jqgridrenderer. the file name mustt b be added dd d tto th the fil file it itselflf Copyright © 2015.15 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. Oracle and/or its affiliatesฺ Caveat: Presentation Model and Physical Renderer Files • For presentation model and physical renderer files. Siebel Open UI . define("siebel/jqgridrenderer". you must specify the file within a define statement in the file itself – For example. [<other files to include>] function() {… – Details on creating and configuring these files are in subsequent lessons s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non For Presentation Model and Physical Renderer files.Foundations 4 . Oracle and/or its affiliates. Administer the manifest to include the custom file(s) 5. Add the custom file(s) to the Manifest Files view 3. add expressions to the Manifest Expressions view 4. the contact contact's s work phone number and fax phone ฺc deฺ e r number are not shown u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Example: Customize Siebel Open UI 1. Siebel Open UI . If necessary.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved.16 a .Foundations 4 . Test your customizations s a h Example: Modify the Contact Form Applet so that if the contact's Job ) m o Title is blank (empty) (empty). Create or customize JavaScript files 2. Siebel Open UI .Foundations 4 ./eappweb/PUBLIC/enu/23044/SCRIPTS/siebel/custom /eappweb/PUBLIC/enu/23044/SCRIPTS/siebel/custom – This isolates your modified files from the as-delivered files – You may include a folder structure within this folder a s a – Downloading 3rd-party libraries )h m ฺco deฺ – Copying C i and d modifying dif i as-delivered d li d JJavaScript S i trfil files e u Gui t n – Writing your own cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Customizing presentation model and physical renderer JavaScript files will be discussed in a tran y a subsequent M nonlessons.. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Create or Customize JavaScript Files • Recommended practice: Place all new or custom JavaScript files in .17 .. . • Obtain new files by: Copyright © 2015./eappweb/PUBLIC/<lang>/<build>/SCRIPTS/siebel/custom – For example. All rights reserved. Oracle and/or its affiliatesฺ 1. .. Siebel Open UI .. pp et In tthe e as as-delivered de e ed Copyright © 2015... Oracle and/or its affiliatesฺ Example: A Section of a Custom JavaScript File • This section of physical renderer code shows or hides the work phone number and fax number of a contact based on the value of a Boolean canShow variable: – The canShow variable is set in the presentation model file .parent().Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.parent(). $( "div#FaxPhoneNum_Label" ). n G e t c en $( "div#FaxPhoneNum_Label" ).Foundations 4 .hide().show(). Create two files according to instructions in subsequent lessons and give them easilyrecognizable names..show().js and ContactFormPM.show(). • • • • application.js. navigate to Administration .show the work and If canShow is true..hide().Application > Manifest Administration M• Tonostart and a d que query y tthe eU UI Objects applet app et for o Name a e = Contact Co tact Form o Applet. $( "[name='" + FaxPhoneNum.hide(). o else{ ฺ ฺcthem . This returns both the physical renderer (phyrenderer. The "old" (IP2013 and before) style of GetInputName() still works. for example. Next. All rights reserved. ContactFormPR. if( canShow ){ fax numbers $( "div#WorkPhoneNum_Label" ). you will receive no results. GetEI(): In subsequent lessons you will see the new GetEI() method implemented to get control elements. c"']" a $( "[name='" + FaxPhoneNum. query for Name = DEFAULT FORM APPLET.GetInputName() + "']" ).parent(). Oracle and/or its affiliates. $( "[name='" + WorkPhoneNum.js) for a default form applet.18 . y } e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n How this example ya -tranwas implemented: a n this example. and is shown in this example. as the Contact Form Applet has not yet been customized.parent().GetInputName() + "']" ).hide e e $( "div#WorkPhoneNum_Label" ).GetInputName() + "']" ).hide(). Edit the two files to implement the customizations Administer the two files in the views shown in this lesson.js) and presentation model (pmodel.GetInputName() + @ Stud).show(). } a s a )h m Otherwise. GetInputName() vs. r d i tu u $( "[name='" + WorkPhoneNum.. Application > Manifest Files n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ 2. Oracle and/or its affiliates. Add Custom File(s) to the Manifest Files View • Navigate to Administration . Siebel Open UI .Foundations 4 . All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.19 a .Application > Manifest Files • Add any custom files you created s a h ) m o ฺc deฺ e Add your custom files to Administration r u Gui t . Foundations 4 . Oracle and/or its affiliates.20 a . a suggested practice is to create an expression representing your User ID so your customizations are only visible to you s a h ) m o ฺc deฺ e r u Gui t n cce dent a tu y@ Only SADMIN will seeS modifications e d s hiexpression tthis anthat use p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. If Necessary. All rights reserved. add expressions as necessary – For example. Siebel Open UI . Add Expressions to the p View Manifest Expressions • If the files should only apply under certain circumstances that are not already defined as expressions. Oracle and/or its affiliatesฺ 3.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. M nonCopyright © 2015. All rights reserved. Oracle and/or its affiliatesฺ • Create manifest records that reference the custom files Add manifest records for the Contact Form Applet for the custom physical renderer and presentation model s a h ) m o ฺc deฺ e r u Gui t n cce dent Add expressions a tu custom files y@ s Specify S e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Navigation: The n shown in the screenshot is Application .21 a . Administer the Manifest to Include the Custom File(s) Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Administration > Manifest a traview y a Administration. Siebel Open UI .Foundations 4 .4. n a e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.and work r d i tu notGshown u n e t cc den a y@ s Stu e d Job Title is empty.22 ..and work and fax numbers are visible a s a )h m Job Title is p populated.. p cofax numbers ฺ are ฺand e e .Foundations 4 . Oracle and/or its affiliates..Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. navigate to a customized applet. Oracle and/or its affiliatesฺ 5. Siebel Open UI . and verify its behavior ... Test your Customizations • Start your application..... Application > Manifest Administration specifies which files are associated with which object • To add custom JavaScript to Siebel Open UI: s a h – Add the JavaScript files to the appropriate directory ) m o ฺc idet ฺ UI – Administer Ad i i t the th manifest if t to t apply l the th files fil to t the th rappropriate e u Gui t object n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Lesson Highlights • The manifest administration views determine what files are downloaded to the Siebel Open UI client – Administration . Siebel Open UI .23 a . All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Application > Manifest Expressions defines true/false expressions – Administration . Oracle and/or its affiliates.Foundations 4 .Application > Manifest Files lists available files – Administration . Foundations 4 .24 a . Oracle and/or its affiliatesฺ Practice • Modify a manifest to include custom files • Verify the results s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliates. Oracle and/or its affiliates. a . Oracle and/or its affiliatesฺ 5 Presentation Model s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Foundations 5 . Oracle and/or its affiliates.2 a . you should be able to: • Describe the structure of a presentation model file • Describe how to create a custom presentation model file to implement your own business logic s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ Objectives After completing this lesson. 3 a . Oracle and/or its affiliatesฺ • The proxy creates local representations of metadata objects – Creates a "shadow" copy of the business object associated with the view – Creates a "shadow" copy of the business components associated with the applets in the view – Creates a "shadow" copy of the applets – Creates a "shadow" copy of the controls in the applet – And so forth s a h • These representations are managed as objects in a m) ฺco deฺ namespace in the client cache e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Siebel Open UI . Oracle and/or its affiliates.Review: Proxy Framework Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 5 . All rights reserved. p . desktop p and mobile clients Copyright © 2015.Review: The Presentation Model Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ • Manages business logic on the client side – Allows client-side scripting without requiring code running on the Siebel Server • Captures user behavior – Did th the user lleave a control? t l? • Exposes and manipulates Siebel object properties • Collects user changes to field values • The same presentation model can support different platforms has ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non – For example. Siebel Open UI .4 a .Foundations 5 . Oracle and/or its affiliates. Foundations 5 . Oracle and/or its affiliatesฺ A Presentation Model Object • Is a client-side JavaScript object • Implements a particular UI component – For example. or so forth • Provides a logical abstraction layer of the repository metadata • Does not do any rendering of physical HTML s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. a toolbar. Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. an applet.5 a . Oracle and/or its affiliates. Foundations 5 . Oracle and/or its affiliatesฺ • Create client properties – Example: A property to store a TRUE or FALSE setting used in your logic • Retrieve user properties from the object definition in the repository • Interact with the Siebel Server – Example: Call a server-side business service that invokes a workflow s a h ) • Caveat: Most presentation model customizations alsom require o ฺc changes customization t i ti off the th physical h i l renderer d tto di display l reth the hdeฺ u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.6 a . Siebel Open UI .Customizing the Presentation Model Examples Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. and bindings on the client.Foundations 5 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliates. methods. Oracle and/or its affiliatesฺ How to Customize a Presentation Model • You should extend an existing presentation model rather than creating an entirely new one • Use a standard "scaffold" to build the extension – Details on the scaffold are on subsequent slides • To configure properties.7 . your script might request information on the applet's user properties from the Siebel Server. and would need to parse the response. Setup() is beyond the scope of this course. To retrieve values from a property set sent by the Siebel Server. ya -example r t a M non a Copyright © 2015. All rights reserved. Server extend the Setup() method of the scaffold. extend the Init() method of the scaffold s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n This lesson's an extends an existing presentation model using the Init() method. but is covered in detail in the Siebel Open UI .Advanced JavaScript API course. For example. Siebel Open UI . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Oracle and/or its affiliatesฺ Example • Implement a new ShowJobTitleRelatedField property that is TRUE if a contact record's Job Title field is populated – In a subsequent lesson you will modify the physical renderer to hide fields if ShowJobTitleRelatedField is FALSE If Job Title does not have a value. do not display work and main phone s a h ) m o ฺc deฺ e r u Gui t n cce dent If Job Title has a value.Foundations 5 . display a work and main phone y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.8 a . Siebel Open UI . simulate but in general JavaScript is a class-less language.com/3-ways-to-define-a-javascript-class/: It is important to note a tran y a that are n.no classes in the original JavaScript specification. In terms of inheritance. Functions can be used to M there noclasses. Everything is an object. Oracle and/or its affiliatesฺ Terminology • The presentation model's class instantiates the presentation model object with a unique name – In JavaScript there is only one instance of the class/object at a time • The constructor instantiates and defines the methods for the class • A Namespace object maintains a list of objects instantiated in the client cache sa ha ) om ฺ c ฺ ure Guide t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n From http://www. Siebel Open UI uses functions to simulate classes. Oracle and/or its affiliates.9 .Foundations 5 . objects inherit from objects. not classes from classes as in the "class"ical languages.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.phpied. All rights reserved. Copyright © 2015. 3. Oracle and/or its affiliatesฺ Implement a Presentation Model Customization 1.Foundations 5 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. 4 4. Siebel Open UI . Verify the object class does not yet exist Add the class to the namespace Define the file and parent file(s) for the class Implement a constructor function for the class – The constructor function includes your custom methods s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ More ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Example: Implement a ContactFormPM presentation model that extends the standard form applet presentation model by setting a property to TRUE or FALSE depending on whether or not the Job Title field is populated Copyright © 2015.10 a . 2. All rights reserved. see M hownotonadd // 1.11 . // The rest of your code goes here e e r d i whether tuthe classGhas u already } n e been implemented t cc den a // No else statement is required y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n SiebelAppFacade a tranis a namespace used to register all classes. Run this code only if the class does not yet exist if( typeof( SiebelAppFacade.Foundations 5 .your class to this namespace.ContactFormPM ) === "undefined" ) { Copyright © 2015. every presentation model file should start with an if statement that checks whether or not the class has already been implemented – Format: if (typeof(SiebelAppFacade. Oracle and/or its affiliatesฺ 1. Siebel Open UI ..yourClass) (typeof(SiebelAppFacade. Oracle and/or its affiliates. Verify the Object Class does not yet Exist • To avoid possible conflicts.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.yourClass)==='undefined') undefined ) { – Example code: a s a )h m ฺ ฺcodetermines The 'if' statement . All rights reserved.. In subsequent slides you will y a . 12 a .Namespace( "SiebelAppFacade. Add the Class to the Namespace • All new classes must be added to the SiebelAppFacade namespace – This is accomplished using the Namespace() function of the SiebelJS class – Format: SiebelJS.Namespace( "SiebelAppFacade. All rights reserved. Oracle and/or its affiliatesฺ 2.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Copyright © 2015.yourClass" ). Oracle and/or its affiliates.ContactFormPM" ).Namespace The Si b lJS N callll adds dd th the ฺc deฺ e r class to the SiebelAppFacade namespace u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non // 2. Siebel Open UI .Foundations 5 . – Example code: s a h ) m o Th SiebelJS. Add this class to the SiebelAppFacade namespace SiebelJS. y a defining. Parent Files: The parent file is found by examining the default presentation model for the object you are customizing. Oracle and/or its affiliates. All rights reserved. The rest of the code goes here do not use suffixes return "SiebelAppFacade. a s a )h m ฺco deฺ e r u Gui t n }).js.Foundations 5 . file name is contactformpmodel.Administration > Manifest Administration. Define the File and Parent File(s) for the Class • The define() method links the code to the manifest entries in the database – Format: define("yourFile". function () { Use relative paths for the files and // .13 . the M noHowever. n. For example. to clearly differentiate between the file and the object.ContactFormPM". navigate to Application . ["parentFile(s)"].for this example. function () { – It must return "SiebelAppFacade SiebelAppFacade. Copyright © 2015. Put in a define statement that defines the file and the // parent presentation model define( "siebel/custom/contactformpmodel".Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. while the object is ContactFormPM.. query for Name = DEFAULT FORM APPLET. Siebel Open UI .["siebel/pmodel"]. and verify that the default presentation model file is siebel/pmodel.. Oracle and/or its affiliatesฺ 3. cce dent a Return the class y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n File Names: By Siebel Open UI matches the file name to the object the file is n a traconvention. if you are customizing a form applet.className className" – Example code: // 3. Foundations 5 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Implement a Constructor Function for the Class 1. All rights reserved. 5. 3. 4. Oracle and/or its affiliatesฺ 4. Siebel Open UI .14 a . 2. Declare the class as a function Create the class constructor Specify the class as an extension of its parent class Add implementation code to the class Add the custom methods for the class s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. 15 ..Foundations 5 . use functions to create reusable objects.yourClass = (function() { //class implementation code goes here }()).. the () at the end is required as part of a function Copyright © 2015. Siebel Open UI . Oracle and/or its affiliatesฺ • Declare the class as a function of SiebelAppFacade – Format: SiebelAppFacade. declaration. MJavaScript no'class' Since the is actually a function.1 Declare the Class as a Function Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.ContactFormPM d C = ( f function(){ i (){ ฺco deฺ e r // .. ac @ Stud the ending parentheses are required y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n JavaScript has nconcept of classes such as in other languages like Java or C++. u Gui t n } ()). – Example: a s a )h // Declare the ContactFormPM class m Si b l SiebelAppFacade.Code that defines the class. ce ent Since the "class" is actually a function. All rights reserved. To simulate classes..4. everything a trno a y a in n-is an object. superclass. Oracle and/or its affiliatesฺ • Create the class constructor – The constructor should call the superclass constructor to instantiate the as-delivered object – Return the constructor at the end of your class declaration – Format: function yourClass(proxy) { SiebelAppFacade. Apply: JavaScript provides two mechanisms for invoking a function: call(). code written before IP 2014 used call(). In general. proxy).call( this.4. containing the "shadow" objects. which accepts an object and an array of arguments. You will see both used in code examples in this course and the documentation. and apply().2 Create the class Constructor Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. metadata.superclass. From a functional perspective there is no difference between the two methods. Call vs.Siebel data.Foundations 5 . Siebel Open UI .constructor. and M non – Example code: Copyright © 2015.yourClass.16 . which accepts an object and a list of arguments. call(this. s a h } ) a om ฺ c ฺ ure Guide t // Create the constructor and call the superclass constructor n cce dent function ContactFormPM( proxy ){ a SiebelAppFacade. All rights reserved.constructor. d hisuperclass constructor tthe an Call p } ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The proxy object the Siebel Open UI client proxy. engineers chose to switch to apply(). n a trarepresents y a .ContactFormPM. y@ s Stu e proxy). For IP 2014. Extend() function to specify that the class is an extension of its parent class – Allows you to use all the presentation model or physical renderer methods from the Siebel JavaScript API – Format: SiebelJS. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 4. All rights reserved. Siebel Open UI .Foundations 5 . SiebelAppFacade.ParentClass).ฺ e r i u Gu t Extend the default n nt model cce dpresentation e a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. SiebelAppFacade.PresentationModel ฺc de).Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.3 Specify the Class as an Extension of its Parent Class • Use the SiebelJS.Extend(ContactFormPM.17 a .Extend(yourClass. – Example code: s a h ) // Make ContactFormPM an extension of its parent class m o SiebelJS. 4 Add Implementation Code to the Class • Add the custom code that modifies the class' as-delivered behavior – If you add no additional code. add the Init() method using )h m yourClass. All rights reserved.Foundations 5 . Oracle and/or its affiliatesฺ 4.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. • • attributes to an object even after that object has been instantiated. Oracle and/or its affiliates. So if you have an existing object and you want to override the prototype. and applies to all instantiated M• Anprototype on can objects as well e as a all future utu e objects objects. Siebel Open UI . Therefore. So p prototyping ototyp g a allows o s you to add functions u ct o s o or Copyright © 2015. Most importantly. very much like public methods in "class-ful" languages. the class will behave exactly like the parent class – A good debug method is to test your "unmodified" unmodified class to verify that it works as expected — Verifies that your scaffolding is correct • Use prototyping to add API methods to your class a s a – For example. the prototyped function is visible outside of the original JavaScript file.prototype. you should prototype your methods th d tto make k th them available il bl tto be b used d with ith th the Si Siebel b l API API. It has several advantages: ya -tThe r a be added to an object at any point. A prototyped function or attribute can be overridden on an object-by-object basis. you can just declare that function or attribute in that object and it will override the prototype. including u Guid t n // the Init() function of the superclass… cce dent a } y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Prototyping: anprototype type in JavaScript is very powerful.18 .Init y p yp = function() () { co eฺ ฺ e r // … call your Init() code. AddMethod("NameOfMethodToOverride". ntu Gui cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Format: The n for the Init declaration is: a format a y r t a yourClass.Init.superclass. e r yourMethodName. consult "Presentation Model Methods for Applets" in Configuring Siebel Open UI. scope:this}). Available Methods to Override: The available methods that can be overridden depend on the object of your presentation model.JavaScript API course from Oracle University. if any this. For a full description of all presentation model methods. Oracle and/or its affiliatesฺ • The Init() function must: – Call the superclass Init() function to initialize the asdelivered class SiebelAppFacade. • The Init function may: – Include code that creates properties for the class.4.yourClass. sif – Include code that creates or overrides methods for the class. Oracle and/or its affiliates. "").AddProperty("yourPropertyName".call(this) . For example.19 .Foundations 5 . or consider taking the Siebel Open UI . Some implementations may also require the Setup method to be overridden. for a description of methods that can be overridden for an applet presentation model. This is true when you want to add additional processing of the initial response from the Siebel server. a h ) any om a ฺc deฺ this. {sequence:false.Init = function(){ M non– Invoke any other available methods Copyright © 2015. see "Classes and Methods of the Siebel Open UI Application Programming Interface" in Configuring Siebel Open UI . All rights reserved.prototype.4 Add Implementation Code to the Class Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . { sequence : false. Copyright © 2015. AddMethod: This function allows you to add your method to an existing API method. d FieldChange: This applet method changes the value of a field in the applet. SelectionChange. OnFieldChange. ShowSelection: This applet method is an internal proxy method that Siebel Open UI calls when it must display a record as the chosen record. Oracle and/or its affiliatesฺ • Example code: // In the Init() method. the ShowSelection() method is run. FieldChange() is called. scope : this } ). { sequence : false.Init.4. When a user updates a field in the UI.AddMethod( "ShowSelection". Add a property named "ShowJobTitleRelatedField" Call the superclass Init function this. e d this }.superclass. Use AddMethod to add a custom "SelectionChange" method that runs whenever ShowSelection() is run. Use AddMethod() so that your custom "OnFieldChange" method is called whenever FieldChange() is called.call( this ). Oracle and/or its affiliates. Siebel Open UI .20 . presentation model. a s a )h m ฺ ฺco applet Override the "ShowSelection" Similarly. add a property and two methods ContactFormPM. @ Stud y scope: this } ). from the ShowJobTitleRelatedField is a local property that can be manipulated by the this.AddMethod( "FieldChange".Foundations 5 .4 Add an Init Function Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.AddProperty( "ShowJobTitleRelatedField". Thus it is called when a record is di l displayed.Init = function(){ Declare the Init function SiebelAppFacade. All rights reserved. "" ). Whenever a user selects a new record. So the object a trThis a y a model the n-client now contains one additional property that is not part of the object model M on noserver. n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n AddProperty: n function stores the property as local data on the client.ContactFormPM.prototype. override the "FieldChange" e e r d i method with a locally-defined tu Gumethod method with OnFieldChange n e named SelectionChange c ent c a this. u n e nt G c Get the current value of the job title c a udecontrol ). or any additional custom methods you want to implement. @ t ( value ? true: y S this.5 Add the Custom Methods for the Class • For any methods you specified in the Init function.21 a . add the code for them below the Init function – Format: function CustomMethod() { //Code to implement the method } – Example code: as // Custom method that runs whenever a new record is selected ) h function SelectionChange(){ { om ฺ Get the applet controls c ฺ var controls = this.an his t p ฺ e } Set ShowJobTitleRelatedField ฺc tootrue usor false. All rights reserved. e control ide Gettu ther JobTitle var control = controls[ "JobTitle" ]. Oracle and/or its affiliatesฺ 4. Oracle and/or its affiliates. var value = this.ExecuteMethod( "GetFieldValue". e d false ) ). Siebel Open UI .Get( "GetControls" ).SetProperty( "ShowJobTitleRelatedField". depending on whether job title is set k n t ya nse a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 5 . 22 a .ContactFormPM"). a proxy).ContactFormPM) === "undefined"){ // 2. Run this code only if the class does not yet exist if(typeof(SiebelAppFacade.ContactFormPM = (function(){ Copyright © 2015.ContactFormPM.Namespace("SiebelAppFacade. Siebel Open UI . y@ s Stu e } d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non // Declare the ContactFormPM class SiebelAppFacade. Put in a define statement that defines the file and the // parent presentation model define("siebel/custom/contactformpmodel". // 3.superclass. ["siebel/pmodel"]. Add this class to the SiebelAppFacade namespace SiebelJS.call(this.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. function () { s a h ) m o ฺc deฺ e r // Create the constructor and call the superclass constructor u Gui t n function ContactFormPM(proxy){ cce dent SiebelAppFacade.constructor. Oracle and/or its affiliatesฺ Complete Example Page 1 of 3 // 1.Foundations 5 . // Then add the property and methods this. ""). false scope: this }). Oracle and/or its affiliates.prototype. { sequence : false. SiebelAppFacade. SelectionChange. n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. scope : this }).ContactFormPM.AddMethod("ShowSelection".Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. add a property and two methods ContactFormPM. this AddMethod("FieldChange" this. Oracle and/or its affiliatesฺ Complete Example Page 2 of 3 // Make ContactFormPM an extension of its parent class SiebelJS. s a h ) m o ฺc deฺ e r u Gui t }.AddProperty("ShowJobTitleRelatedField". OnFieldChange { sequence : false.Extend(ContactFormPM.23 a .PresentationModel).call(this).AddMethod( FieldChange . // In the Init() method.Init. OnFieldChange. Siebel Open UI .Foundations 5 .superclass. this.Init = function(){ // First call the superclass' constructor SiebelAppFacade. All rights reserved. ExecuteMethod("GetFieldValue".Foundations 5 .SetProperty( ShowJobTitleRelatedField . // set ShowJobTitleRelatedField to true function SelectionChange(){ var controls = this.GetName() === "JobTitle"){ this. set ShowJobTitleRelatedField // accordingly function OnFieldChange(control. var control = controls["JobTitle"]. } } return ContactFormPM. } ()). Oracle and/or its affiliates. control).Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. this SetProperty("ShowJobTitleRelatedField" this. }). (value ? true: false)). All rights reserved.ContactFormPM". return "SiebelAppFacade.SetProperty("ShowJobTitleRelatedField". } s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Complete Example: Page 3 of 3 // Our SelectionChange function: If JobTitle is not empty. Siebel Open UI . var value = this. value){ if(control.Get("GetControls"). (value ? true: false)) } // If the Job Title field is modified.24 a . Class constructor s a h ) m o ฺ ฺc properties e e 5.25 a . Siebel Open UI . Oracle and/or its affiliatesฺ 1.Review: Presentation Model Structure Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.rCustom d i u methods tand uare added n G e t cc detonthe Init() method a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Define the file and parent(s) ( ) 4. Verify that class does not exist 2.Foundations 5 . Oracle and/or its affiliates. All rights reserved. Add class to namespace 3. Siebel Open UI .26 . Oracle and/or its affiliates. All rights reserved. Oracle and/or its affiliatesฺ Lesson Highlights • To create a custom presentation model. create a JavaScript file and: – Verify the object class does not yet exist – Add the class to the namespace – Implement I l t a constructor t t function f ti for f the th class l • The constructor function should: – – – – Declare the class a Call the superclass constructor s a )h Specify the class as an extension of the presentationomodel m ฺc detoฺ the e Include an Init function that adds properties and methods r u Gui t n class cce dent a – Include the custom methods for the y@class tu e is d n a e th p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non S Copyright © 2015.Foundations 5 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ • Create a new presentation model s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . Oracle and/or its affiliates.Foundations 5 . All rights reserved.Practice Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.27 a . Oracle and/or its affiliatesฺ s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 6 Physical Renderer s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a . All rights reserved. 2 a . All rights reserved. you should be able to: • Describe the structure of a physical renderer file • Describe how to create a custom physical renderer file to customize the physical appearance of the application s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ Objectives After completing this lesson.Foundations 6 . desktop versus mobile a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015.3 a .Foundations 6 . Oracle and/or its affiliates. All rights reserved. th the same presentation t ti model) d l) tto b be displayed in different ways on different views – – – – Lists Forms Carousels And so forth s a h ) m o ฺc deฺ e r u Gui t n t different • Allows records to be displayed in different waysen on cce a @ Stud platforms y e d this n – For example. Oracle and/or its affiliatesฺ The Physical Renderer • Is responsible for constructing the User Interface (UI) • Can use native or third-party controls – For example. Siebel Open UI . many of the as-delivered controls are derived from the open source JQuery library • All Allows records d (th (thatt iis.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. consider taking Oracle University's Siebel Open UI . The developer writes the code for the control. Oracle and/or its affiliates. not concerning him. All rights reserved. p . The HTML template manager provides a method to generate HTML code for controls . For more information on plug-in wrappers and the HTML template manager.IP2014: ug wrappers appe s a allow o de developers e ope s to write te co controls t o s independent depe de t o of app applets.The developer attaches the control to applets based on a conditional function he or she writes.For example. Oracle and/or its affiliatesฺ A Physical Renderer Object • Is a client-side JavaScript object • Takes logical data and generates a physical rendering of it in HTML – Relies on an existing presentation model for its data – Provides a binding layer to the presentation model. binding HTML elements to presentation model structures • Generates the physical HTML – This rendering includes references to CSS style sheets for as h layout.Advanced JavaScript API course. Siebel Open UI . ets • Plug-in Copyright © 2015. colors.or herself with the implementation details of the underlying applet. .4 .Foundations 6 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. fonts. and so forth m) a ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n New Features a trinanIP2014: Siebel Open UI has significant updates to the physical renderer y a mechanism M nonin. - • This course focuses on "basic" customizations that involve changing the applet-level physical renderer. add the HTML code for the once the p plug-in g wrapper pp has g generated the control. All rights reserved.Foundations 6 . show them in a different format. Oracle and/or its affiliatesฺ Customizing the Physical Renderer Examples • Show or hide a field or applet based on a property value in the presentation model • Instead of showing sets of records in a list.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Siebel Open UI . desktop or mobile Copyright © 2015.5 a . for example: – A carousell – A timeline – And many more • Use platform-specific rendering code to provide a different as h look-and-feel depending on the platform m) ฺco deฺ e r u Gui t n • And many more cce dent a u – Most "branding" of the Siebel applications some y@ s Stinvolves e d i modification to physical renderer th an efiles p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non – For example. for example. Method invocation: All three methods. attaching a Physical Renderer method to a Presentation Model method so that once the Presentation M d l method Model th d completes l t (f (for example. extend the Init() method of the scaffold • To customize how controls are displayed. to show or hide a field in the UI). and the event helper are all in O l University's Oracle U i it ' Siebel Si b l O Open UI .Foundations 6 . the HTML template manager. Oracle and/or its affiliatesฺ How to Customize a Physical Renderer • Usually. you should extend an existing physical renderer rather than creating an entirely new one • Use a standard "scaffold" to build the extension – Details on the scaffold are on subsequent slides • To bind handlers to notifications from the presentation model. All rights reserved. extend the ShowUI() a method of the scaffold s a )h m • To bind data or events to a physical control. both a mouse click on a desktop machine and a tap on a touchpad are "down" events for the event helper. y a Binding n.to notifications: When an event occurs in the presentation model. Siebel Open UI . The example in this lesson is designed to update the UI immediately when a field value changes. applet) is loaded. the M nhandlers o value of a presentation model property changes. ShowUI(). extend o the ฺc deฺ e r BindData() or BindEvents() methods of the scaffold tu ui n tG e c c den a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n This lesson's example a tran extends an existing physical renderer using the Init() method. l to t update d t a value l in i the th metadata).Advanced Ad d JJavaScript S i t API course.6 . and BindEvents() are run once when the control (for example. Details on plug-in wrappers. Plug-in wrappers: Controls can be built using separate physical renderer files known as "plug-in wrappers". The Copyright © 2015. t d t ) the th Physical Ph i l R Renderer d method runs (for example.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a notification is sent to the physical renderer. Add AttachPMBinding() calls to the Init() method of the physical renderer to handle presentation model notifications. Oracle and/or its affiliates. BindData(). The correct method in this case is AttachPMBinding(). physical renderer must have an AttachPMBinding() call that monitors this notification and invokes a method. for example. Event Helper: As of IP2014 there is an EventHelper object that helps make events more abstract. Oracle and/or its affiliates.Foundations 6 . All rights reserved. Siebel Open UI . Oracle and/or its affiliatesฺ Example • Show or hide controls based on the value of the ShowJobTitleRelatedField property in the presentation model – Uses AttachPMBinding() to update the UI whenever the presentation model property is updated If Job Title has a value. de do not display work and mainpphone an e thi ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. display work and main phone s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu If Job Title does not have a value.7 a . Siebel Open UI . 2. 3.8 a . All rights reserved. Oracle and/or its affiliatesฺ Implement a Physical Renderer Customization 1. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Verify the object class does not yet exist Add the class to the namespace Define the file and parent file(s) for the class Implement a function for the class – The function includes your custom methods s a h Example: Implement a ContactFormPR physical renderer that extends the m) ฺco deฺ standard form f applet physical renderer by reading a property from f the e r ifields u certain t presentation model and using it to determine whether or not tonshow u G cce dent a y@ s Stu e d an e thi More p ฺ c s ฺ k to u n a ay ense m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. 4 4.Foundations 6 . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 1. Verify the Object Class Does Not Yet Exist • To avoid possible conflicts, every physical renderer file should start with an if statement that checks whether the class has already been implemented – Format: if (typeof(SiebelAppFacade.yourClass) (typeof(SiebelAppFacade.yourClass)==='undefined') undefined ) { – Example code: // 1. Run this code only if the class does not yet exist if( typeof( SiebelAppFacade.ContactFormPR ) === "undefined" ){ s a h ) m ... // The rest of your code goes here o The 'if' statement ฺ ฺc determines e e r } d whether the class has already i tu Gu n been implemented e cc dent // No else statement is required. a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 6 - 9 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 2. Add the Class to the Namespace • All new classes must be added to the SiebelAppFacade namespace – This is accomplished using the Namespace() function of the SiebelJS class – Format: SiebelJS.Namespace( "SiebelAppFacade.yourClass" ); – Example code: s a h ) m o ฺc deฺ e r The SiebelJS.Namespace call adds the u Gui t n class to the SiebelAppFacade namespace cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non // 2. Add the class to the SiebelAppFacade namespace SiebelJS.Namespace( "SiebelAppFacade.ContactFormPR" ); Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 6 - 10 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 3. Define the File and Parent File(s) for the Class • The define() method links the code to the manifest entries in the database – Format: define("yourFile", ["parentFile(s)"], function () { – It must return "SiebelAppFacade SiebelAppFacade.className className" – Example code: // 3. Put in a define statement that defines the file and the // parent physical renderer define( "siebel/custom/contactformphyrenderer", ["siebel/phyrenderer"], function () { Use relative paths for the files and do not use suffixes a s a )h m ฺco deฺ e r u Gui t // ... The rest of the code goes here n ceclass ent return "SiebelAppFacade.ContactFormPR"; cthe Return a @ Stud }); y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n File Names: By Siebel Open UI matches the file name to the object the file is n a traconvention, y a defining. n- for this example, to clearly differentiate between the file and the object, the M noHowever, file name is contactformphyrenderer.js, while the object is ContactFormPR. Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Parent Files: The parent file is found by examining the default presentation model for the object you are customizing. For example, if you are customizing a form applet, navigate to Application - Administration > Manifest Administration, query for Name = DEFAULT FORM APPLET, and verify that the default physical renderer file is siebel/phyrenderer. Siebel Open UI - Foundations 6 - 11 Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ 4. Implement a Function for the Class 1. 2. 3. 4 4. 5. Declare the class as a function Create the class constructor Specify the class as an extension of its parent class Add implementation code to the class Add the custom methods for the class s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI - Foundations 6 - 12 a 13 a . your class is implemented by being a self-invoking function. } ()). Oracle and/or its affiliates.4. … put your code here … })(): are self-invoking.ContactFormPR = ( function(){ { // .. – Example: s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Self-Invoking By default. JavaScript functions are not invoked until called.1 Declare the Class as a Function Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved..Code that defines the class.. Oracle and/or its affiliatesฺ • Declare the class as a function of SiebelAppFacade – Format: SiebelAppFacade. the ending parentheses are required Copyright © 2015. Thus.yourClass = (function() { //class implementation code goes here }()). and run when the file is downloaded to the client.Foundations 6 .. Siebel Open UI . Since the "class" is actually a self-invoking function. n a trFunctions: a y a Functions form M noinn-the (function () { // Declare the ContactFormPR class SiebelAppFacade. Oracle and/or its affiliatesฺ 4.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.superclass. it passes it the presentation model object – The constructor should use this to call the superclass constructor to implement all the required methods and attributes – Format: function yourClass(pm) pm = The presentation model object { SiebelAppFacade.ContactFormPR. Siebel Open UI . Call the superclass constructor cc dent a function ContactFormPR( pm ){ y@ s Stu e SiebelAppFacade.2 Create the Class Constructor • When Open UI calls the constructor.call( this.yourClass.superclass.constructor.constructor. s ha call(this. Oracle and/or its affiliates. pm). pm d i n h ). All rights reserved. ) } com ฺ ฺ e e r d i – Example code: tu Gu n e // 5.14 a . t a cฺp use Call the superclass constructor ฺ } k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015.Foundations 6 . All rights reserved.Extend(yourClass. Make ContactFormPR an extension of its parent class SiebelJS. s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Extend the parent presentation model or physical renderer Copyright © 2015.Foundations 6 .15 a . SiebelAppFacade.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. SiebelAppFacade.3 Specify the Class as an Extension of its Parent Class • Use the SiebelJS.ModelOrRenderer). Oracle and/or its affiliatesฺ 4. – Example code: // 6.PhysicalRenderer ). Oracle and/or its affiliates.Extend(ContactFormPR.Extend() function to specify that the class is an extension of its parent class – Format: SiebelJS. Siebel Open UI . Oracle and/or its affiliatesฺ 4.ContactFormPR. <MethodToCallIfItChanges>).customizing the Presentation Model.AttachPMBinding( "<PropertyName>". a s a )h m ฺco deฺ e r u Gui t n nttime there is cce devery The ModifyLayout method of this physical renderer will be executed e a @ ofSthe a change in value of the ShowJobTitleRelatedFieldyproperty tupresentation model e d an e this p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The ShowJobTitleRelatedField property is a custom property that was used as an example in a tran y a the on.16 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. – Example code: // Bind the ShowJobTitleRelatedField variable from the // presentation model to the ModifyLayout method of this object ContactFormPR. ModifyLayout ).superclass.4 Add Implementation Code to the Class • Extend the Init() method to call AttachPMBinding() for each notification handler – Format: this.call(this). M lesson non Copyright © 2015. Siebel Open UI . this.Init = function () { SiebelAppFacade.Foundations 6 .prototype.AttachPMBinding( "ShowJobTitleRelatedField".Init. All rights reserved. Oracle and/or its affiliates. 17 a .Foundations 6 . All rights reserved. Siebel Open UI . Oracle and/or its affiliatesฺ 4. add the code for them – Use this. Oracle and/or its affiliates.GetPM() to get controls and variables from the presentation model – Format: function CustomMethod() { //Code to implement the method } s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.5 Add the Custom Methods for the Class • For any custom methods you want to implement. } Show WorkPhoneNum and else{ FaxPhoneNum if the property is true $( "span#WorkPhoneNum_Label" # k h b l ) ).Get( "GetControls" ).GetPM(). Siebel Open UI .18 a . var WorkPhoneNum = controls[ "WorkPhoneNum" ]. var canShow = this. if( canShow ){ specifically. Oracle and/or its affiliates.GetInputName() + "']" ).Foundations 6 . and FaxPhoneNum controls $( "[name='" + WorkPhoneNum.hide().GetPM(). $( "span#FaxPhoneNum_Label" ).Get( "ShowJobTitleRelatedField" ). $( "span#FaxPhoneNum_Label" ).5 Add the Custom Methods for the Class Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. get the WorkPhoneNum $( "span#WorkPhoneNum_Label"More ).show().4. Oracle and/or its affiliatesฺ – Example code: Get the applet controls and the ShowJobTitleRelatedField property function ModifyLayout( ){ var controls = this.show(). $( "[name='" + FaxPhoneNum. } Otherwise hide them } s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.parent().GetInputName() + "']" ). () hid () $( "[name='" + WorkPhoneNum.hide().show().parent(). All rights reserved.GetInputName() + "']" ).show(). var FaxPhoneNum = controls[ "FaxPhoneNum" ].hide().hide().parent(). $( "[name='" + FaxPhoneNum.parent().GetInputName() + "']" ). Verify that the class does not exist 2. Siebel Open UI . Class s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d methods are added n within ththei class aCustom p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.19 a . Define manifest metadata 4. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 1.Foundations 6 .Review: Physical Renderer Structure Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Add the class to the namespace 3. All rights reserved. Oracle and/or its affiliatesฺ Lesson Highlights • To create a custom physical renderer.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.20 a . create a JavaScript file and: – – – – Verify the object class does not yet exist Add the class to the namespace D fi th Define the manifest if t record d ffor the th class l Implement a function for the class • The function should: Declare the class s a h ) Call the superclass constructor m o ฺc deฺ e Declare the class as an extension r u Gui t n t Extend the Init() method to handle presentation cce denmodel a notifications y@ s Stu e d i – Include the custom methods anfor thethclass – – – – cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015.Foundations 6 . Oracle and/or its affiliates. Siebel Open UI . All rights reserved. 21 a .Foundations 6 . Oracle and/or its affiliates. Siebel Open UI .Practice Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ • Create a new physical renderer s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non a . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. Oracle and/or its affiliatesฺ 7 Debugging s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. a . All rights reserved.Log() to log messages to the console • Use the debugger statement to add breakpoints to scripts s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.2 a . Siebel Open UI . you should be able to: • Use SiebelJS. Oracle and/or its affiliatesฺ Objectives After completing this lesson.Foundations 7 . Foundations 7 .3 a .Suggestions for Debugging a Script Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Log() statements to log script status messages – Use debugger statements to hard-code breakpoints – Use the browser's developer tools to perform additional debugging s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . All rights reserved. Oracle and/or its affiliatesฺ • If a script does not appear to be running correctly: – Use the browser's developer tools to verify that the script was downloaded to the client – Use SiebelJS. Mozilla Firefox.4 . Oracle and/or its affiliatesฺ Browser Developer Tools • Most modern browsers have built-in developer tools that provide: – An inspector to examine the HTML elements and CSS style — You can perform inline modification of the CSS rules to see how those changes affect the look look-and-feel and feel – An inspector to examine JavaScript and CSS files that have been downloaded to the client – A debugger to set breakpoints in the JavaScript code – A console to allow interaction with JavaScript objects has a ) m o • Browsers that provide built-in developer tools include ฺ ฺc Google e e r d i tu8 orGhigher u Chrome. and Internet Explorer n e t cc den a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Console: For n reasons.Foundations 7 .is not available for Siebel Open UI. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. this M functionality non Copyright © 2015. All rights reserved. Siebel Open UI . so a tsecurity a y r a . Open UI disables console access to JavaScript objects. All rights reserved. CTRL+Shift+I. Oracle and/or its affiliatesฺ Invoke Developer Tools • Each browser may have a different method of invoking the tools: – Google Chrome: F12.5 a . Oracle and/or its affiliates. or right-click – Microsoft Mi ft Internet I t t Explorer: E l F12 s a h ) m o ฺc deฺ e r u Gui t n cce dent a tu or Mozilla Firefox.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. y@ s Chrome S e In Google d thi and select Inspect element an right-click p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI .Foundations 7 . or right-click – Mozilla Firefox: CTRL+Shift+I. the Sources tab for Google Chrome • If your code does not appear to be working. Siebel Open UI . the first step is to verify if that th t it has h been b downloaded d l d d – Use the Errors icon to check for JavaScript errors s a h In Google Chrome. Oracle and/or its affiliatesฺ Verify the Script was Downloaded • Each developer tool has a method for determining the files that have been downloaded to the client – For example.Foundations 7 . All rights reserved.6 a . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. the Sources tab lists all JavaScript ) m and CSS files that have been downloaded o ฺc deฺ e r u Gui t n Click the Errors to see JavaScript nthet any cceicondwith e errors a associated current page y@ s Stu e d Verify that your tcustom hi JavaScript anhas p ฺ e ฺc o usbeen downloaded k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. innthis t a file is missing. Oracle and/or its affiliatesฺ Reasons for Failure to Download • There are several reasons your file(s) may fail to download. first make sure that the path to the n a trmanifest: a y a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. For this particular example.in the Manifest Files view. for example.Foundations 7 . All rights reserved. Finally. Then make sure the file is applied to the correct file M is included nothen Manifest Administration view. Siebel Open UI . check the Manifest Expressions to make object in Copyright © 2015. indicating an improperly-configured n ccemanifest e a @ Stud y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n Checking the If the file fails to download at all. the most common being: – An improperly-configured manifest – Errors in the JavaScript itself — The inspector Th i t informs i f you off JavaScript J S i t errors and d allow ll you tto examine them a s a )h m ฺco deฺ e r ucase Gui t Review the errors and the files they are in. the file name had a typo in it and hence the file could not be found.7 . sure that they are allowing the file to be downloaded. ExecuteMethod("GetFieldValue". Using the input.Foundations 7 . • The value of Postal Code is <Postal Code> The difference is whether you want to work with control names from the presentation model. name of the element s a h ) m o ฺc deฺ // Example of using the GetFieldValue() method of the presentation e r ithe control uthe name t u // model Use GetFieldValue() from the presentation model if you know of n G e nt var controls = this.Log() Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . cc a de u var PostalCode = controls["PostalCode"].Use SiebelJS. Using GetFieldValue() gets the current value from the presentation model.GetPM().8 . p this.Get("GetControls"). d You must write your code in such a way that this call is made after the page is fully loaded. All rights reserved. but prints to the inspector console – Use val() to get values of elements in the physical renderer – Use GetFieldValue() to get values of controls in the presentation model • Example code from AccountFormPR: // Example of using the input element of the physical renderer var strCityValue = $('input[aria-label="City"]').val(). di l iin practice. ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n This code example ya -tranis custom code related to the practice.Log() to log messages to the console – Acts like println(). Use val() if you know the SiebelJS.GetPM().Log("The value of City is " + strCityValue). ti thi this may di display l th the value l ffrom th the previously-selected i l l t d record. or element names from the physical renderer. Also be careful about order of execution. a Both M examples on produce the same results: The console will display n • The value of City is <City Name> a Copyright © 2015.Log("The value of PostalCodenis a e th PostalCode)). Oracle and/or its affiliates. y@ t e" + is S d SiebelJS. and is more robust.val() method reads the current value f from the th display. Oracle and/or its affiliatesฺ • Use SiebelJS. All rights reserved.Output of SiebelJS.9 a . consider adding the file name and line number to each log statement s a h ) m o ฺc deฺ e r Log statements are shown u errorGui t n along with warnings and nt ccinethe dconsole messages e a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates.Log() Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Oracle and/or its affiliatesฺ • Examine the console to see the output – Output from all log statements appears in execution order in the console – If you have log statements in multiple files at once.Foundations 7 . Oracle and/or its affiliatesฺ • Is used to hard-code breakpoints in your scripts – Useful if your developer tool does not include breakpoints. or if you only want to set breakpoints in a few source files • Usage: debugger. p ฺ e will stop execution at a debugger statement ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 7 . All rights reserved. Oracle and/or its affiliates. • The browser developer tool stops on the statement if the inspector is open – Behavior is exactly like a breakpoint set in the tool s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d i If the inspector the tool thdeveloper anis open.The debugger Statement Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.10 a . Siebel Open UI . Oracle and/or its affiliatesฺ Debugging Using Browser Developer Tools • Most browser developer tools provide standard debugging functionality: – – – – – Set and clear breakpoints Set watch expressions E Examine i th the callll stack t k Examine variables And so forth s a h ) m o ฺc deฺ e r Examine variables. and so forth en cc dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. review tu Gui the call stack. Siebel Open UI .11 a . All rights reserved. Oracle and/or its affiliates.Foundations 7 . Siebel Open UI . Oracle and/or its affiliates. and remove such h calls ll b before f going i tto production d ti • Avoid calls such as alert() that may be missed when going from testing to production – While debugger and SiebelJS. Oracle and/or its affiliatesฺ Recommendations • Become familiar with the developer tools in your browser of choice • Use code quality tools such as JSLint (http://www.Log() are "invisible" to as )h normal users.jslint.Log() sparingly. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 7 .12 a .com/) • Use debugger and SiebelJS. alert() displays an alert the end userm sees co ฺ ฺ e e • Test all browser and device combinations before moving to r d i tu Gu n e production nt cc a ude @ t y S e d an e this p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. 13 a . watch variables.Log() calls to verify that the code has reached certain points or to output variable values – Use debugger calls to hard-code breakpoints s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. and so forth – Use SiebelJS. Oracle and/or its affiliates. examine the stack.Lesson Highlights Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Oracle and/or its affiliatesฺ • To debug JavaScript code: – Use the browser's inspector to verify that the files have been downloaded. Siebel Open UI .Foundations 7 . 14 a . Oracle and/or its affiliatesฺ • Explore debugging options s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 7 . Siebel Open UI . Oracle and/or its affiliates.Practice Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a . Oracle and/or its affiliates. All rights reserved. Oracle and/or its affiliatesฺ 8 Cascading C di St Style l Sh Sheets t and d Open UI Themes s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Foundations 8 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.2 a . you should be able to: • Describe Cascading Style Sheet (CSS) Files • Identity the CSS rules associated with a UI element • Add style rules to an existing Siebel Open UI theme • Implement a new Siebel Open UI theme s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliatesฺ Objectives After completing this lesson. Siebel Open UI . All rights reserved. Siebel Open UI . Oracle and/or its affiliates.3 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. l <di <div> > elements l t Copyright © 2015.Foundations 8 . All rights reserved. Oracle and/or its affiliatesฺ Review: Cascading Style Sheets (CSS) • Consist of a set of styling rules that specify how content in an HTML document is to be displayed – Separates the document presentation from the document content • Allow a set of styling rules to apply to multiple web pages – Modifying the presentation of a large website can be performed by editing a single set of CSS files • Include rules that specify how to lay out block-level elementss defined in the HTML source ) ha om ฺ c ฺ ure Guide t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non – For F example. Foundations 8 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. ฺc deฺ e r i color: white. Oracle and/or its affiliates. …. Siebel Open UI . Oracle and/or its affiliatesฺ CSS Rules • Consist of one or more property value pairs that describe how an element in the HTML is to be rendered – The most basic format is: <Element> { attribute1: value1. } • Example: s a h ) BlueButton ( font-family: arial m o font-size: 12px. attribute2: value2. for that that element element for being styled cce dent background: blue } a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Styling information information tu Styling u HTML element n G font-weight: bold. All rights reserved.4 a . All rights reserved. color: red.Foundations 8 . Oracle and/or its affiliatesฺ More Advanced CSS Rules • The . Siebel Open UI . ฺc deฺ This styling applies the HTML e r color: red. prefix indicates styling information for HTML elements whose class attribute matches the string – Example: . } This styling applies to HTML elements that have their "class" attribute set to center • The # prefix specifies a specific element id s a h ) #para1 { m o text-align: center.5 a .center { text-align: text align: center. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. u Gui elements with ID = para1 t n } cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non – Example: Copyright © 2015. select. Arial c ฺ ฺ color: red. the font to rred Arial e e d i } tu Gu n e cc dent body. underline the text • Additional techniques include grouping selectors. s center the text } n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. select. input. oset elements set the font to red elements. input. y S e attribute d tofhi"center". using element types with classes. and so forth – Examples: as body. input. or textarea font-family: Arial. Oracle and/or its affiliatesฺ • A colon : is reserved to indicate an action on an element – Example: a:hover { text-decoration:underline.More Advanced CSS Rules Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. textarea { For body. m or textarea elements. td. Siebel Open UI .Foundations 8 . td. All rights reserved.6 a . } When a user hovers over element a.center { a For all body u with a "class" @ elements t text-align: center. ) h For body. td. select. include a font. url('. url('.svg#robotolight') format('svg'). Oracle and/or its affiliates. src: url('.ttf') format('truetype')../fonts/Roboto-Light-webfont.woff') format('woff'). } s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015..Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 8 .. font-style: normal. src: url('. Siebel Open UI . All rights reserved. url('. the @ sign is reserved to indicate something the browser must do – Import a file. and so forth – Example: Information on where the browser @font-face { can find the Roboto font family font-family: 'Roboto'./fonts/Roboto-Light-webfont. font-weight: 300./fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype').7 a ./fonts/Roboto-Lightwebfont./fonts/Roboto-Light-webfont... Oracle and/or its affiliatesฺ More Advanced CSS Rules • Finally.eot'). Foundations 8 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.mozilla. while a second might center it • "Specificity" Specificity determines which style is applied – The more specific the styling.8 . the last to be applied takes precedence. the "last to be applied" style m takes ) o ฺc deฺ precedence e r i uapply t u n – In Siebel Open UI.org/en-US/docs/Web/CSS/Specificity. https://developer. The !important tag: If the !important tag is used multiple times. Siebel Open UI . All rights reserved. non Copyright © 2015. Oracle and/or its affiliates. Style M Sheets. styling for a specific element ID takes precedence over class styling for that element a s a h • Within a specificity level. one style might left-align the text. consult any reliable web page on Cascading a tramore y a .for example. Oracle and/or its affiliatesฺ Conflicting CSS Styles • Multiple contradictory styles might apply to a single HTML element – For example. the higher its specificity – For example. this is any custom style you G cce dent a • Caveat: Styles marked with !important @ take tu precedence y S e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n Reference: For n information on specificity. All rights reserved. Oracle and/or its affiliatesฺ Location of CSS Files • All CSS files are in subdirectories of . a M non Copyright © 2015. Siebel Open UI . Custom CSS files should be placed in the custom directory to ensure they will not be overwritten by patches or updates..Foundations 8 .9 a . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.\<webserver>\public\<lang>\files – As-delivered Siebel Open UI CSS files are in this directory – Third-party files are in the 3rdParty subdirectory – Custom C t files fil should h ld be b placed l d iin th the custom t subdirectory bdi t s a h ) m o CSS files on the ฺc deฺ e Siebel Web Server r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The folder contains ya -tran CSS files for both the Open UI and the HI client. Browser: The browser used in the screenshots is Google Chrome Chrome.Foundations 8 . ya -tThe r a M non a The CSS files associated with the rules being applied Copyright © 2015. Other browsers will have different appearances. All rights reserved. Siebel Open UI .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ Examining CSS Rules • Use the Inspect Element functionality in the browser to display the CSS rules that render an Open UI element Right-click any element in the UI and select Inspect element s a h ) m o ฺc deฺ e r u Gui t Strikethrough text indicates styles n that t were overridden in another file n ccoreclass e a @ Stud y Some of the e dstylesthis n applied a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n Screenshot: anscreenshot is from the bottom of Accounts > My Accounts.10 . Oracle and/or its affiliates. All rights reserved. a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. l ffontt styles t l and d sizes. Oracle and/or its affiliates. i and d so fforth th – The look and style of various user interface elements such as menu buttons s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Themes are sometimes ya -tran referred to as skins.11 a .Foundations 8 . Oracle and/or its affiliatesฺ Theme • Is one or more cascading style sheets that implement a consistent look and feel for the user interface for a web application • Typically specifies: – A coordinated di t d sett off colors. Siebel Open UI . Themes for Siebel Open UI Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. tree.Foundations 8 . Oracle and/or its affiliates. Oracle and/or its affiliatesฺ • Siebel Open UI applications: – Are delivered with a small set of themes – Allow each user to select a theme • As-delivered themes include the Aurora theme for tab. and d side id menu s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.12 a . All rights reserved. Siebel Open UI . M Side non Copyright © 2015. All rights reserved. y a and Menu.Selecting a Different Theme Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Tree. Oracle and/or its affiliatesฺ • Each user can select one of the available themes – – – – – Navigate to Tools > User Preferences > Behavior Select the Navigation Control type Select a theme S Save your preferences f Refresh the page to apply the new theme a s a )h m Select a tab (horizontal) o ฺ or tree (vertical) tab layout reฺc e d Select a navigation control type i tu Gu n e cthemeent Select the desired c a Select a theme for the selected ud @ tabStlayout y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n Navigation Control a tran Type: Recall that the available navigation control types are Tab.13 .Foundations 8 . Oracle and/or its affiliates. Siebel Open UI . Foundations 8 . Siebel Open UI . Create a custom CSS file 2. Administer the list of values (LOV) to allow users to select the theme associated with the CSS file • During development. Register the CSS file with the application 3.Defining a Theme Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ • There are three steps to define a theme: 1. All rights reserved. it may be useful to test your changes by modifying an existing theme before creating a new one s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.14 a . 5.15 a . 3. Locate the styling rules Edit the rules Create the CSS file Administer the manifest Test the modified theme s a h ) Example: Modify the style of the applet header m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. 2. All rights reserved. 4 4.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI .Foundations 8 . Oracle and/or its affiliates. Oracle and/or its affiliatesฺ Modify an Existing Theme 1. Oracle and/or its affiliates.16 a . Locate the Styling Rules • Select the UI element to be modified • Use the Inspect element functionality to display the associated styling rules s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI . Oracle and/or its affiliatesฺ 1. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 8 . Foundations 8 .17 . All rights reserved. Edit the Rules • Locate the rules with the desired properties • Edit each rule inline – Modified styling is applied immediately – Allows developers to: — — Verify they have located the relevant CSS rule Determine the property changes required to implement a desired rendering change a s a )h m cothe eฺ ฺget Verify you e r id u result desired t u n G cce dent a Change color.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. permanent. and y@ s Stu e font of header inline d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The edits you n inline are not saved back to the CSS files. Siebel Open UI .rules by reloading the page in the browser. size. Oracle and/or its affiliatesฺ 2. Copyright © 2015. To make the changes the styling M original nonyou must copy the modified rules to a CSS file. Oracle and/or its affiliates. You can always revert back to a tmake a y r a . You will do this in the practice. Siebel Open UI .18 a . edit the rule to reduce the number of affected classes s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Create the CSS File: Copy the Modified Rules to a New File Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. not just the customized part • Copy the rules and paste them into a new . Oracle and/or its affiliatesฺ • Select the customized rules – Be sure to select the entire rule. Oracle and/or its affiliates.3.css file – Use a text editor of your choice • Optionally.Foundations 8 . All rights reserved. css. All rights reserved. You would need to update any relative file paths in — Modify the relative paths before saving the file Copyright © 2015.19 . if you created BlueSkin. Oracle and/or its affiliatesฺ 3. Siebel Open UI .Foundations 8 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. you could store the file in M nForonexample <webserver>\public\<lang>\files\custom. Create the CSS File: Save the File • All customer created CSS files should be stored separately from the as-delivered CSS files to minimize issues when the application is upgraded • Save the file in the custom CSS directory – Th The path th is i <webserver>\PUBLIC\<lang>\files\custom \ \ \ \ – Caveat: CSS files may contain relative path references to image files a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n The recommended a tranpractice is to store customer-created CSS files in a separate custom y a folder. the file. Oracle and/or its affiliates. Select the p ฺ cmodifyinguse are ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. Duplicate the platformdependent Theme record s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d n you thi 3. All rights reserved. Administer the Manifest • Add your custom file to the Manifest Files view • Add your custom file to the theme – Navigate to the Manifest Administration view – Duplicate the theme record – Add your file as an additional file to the theme 1.Foundations 8 .20 a . Oracle and/or its affiliatesฺ 4.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . Add your file atheme 2. 21 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. navigate to Tools > User Preferences > Behavior and select the modified theme • Reload the Siebel client web page to force the new . Siebel Open UI .css files fil tto b be d downloaded l d d tto th the b browser • Verify the application is rendered using the new theme s a h ) m Verify your theme is applied o ฺc deฺ e throughout the application r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved.Foundations 8 . Oracle and/or its affiliates. Test the Modified Theme • Clear the browser cache • If necessary.js and . Oracle and/or its affiliatesฺ 5. Siebel Open UI . Oracle and/or its affiliatesฺ 5. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.22 a . Oracle and/or its affiliates. Test the Modified Theme: Verify the Rules • Optionally use the element inspector to verify that the relevant styling rules are updated Custom CSS file s a h ) m o ฺc deฺ e r u Gui t Updated property n values appear cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 8 . Siebel Open UI . Oracle and/or its affiliatesฺ Create a Custom Theme 1. Oracle and/or its affiliates.Foundations 8 . Create the style sheets Add the theme to the theme list of values Administer the manifest Test the custom theme Example: Create a new theme (named wasabi) that displays green buttons s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. 3.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.23 a . All rights reserved. 2. 4 4. Foundations 8 . All rights reserved. Create the Style Sheets • For a new theme that differs significantly from an as-delivered Siebel theme. Oracle and/or its affiliatesฺ 1. M nonCopyright © 2015.\<webserver>\PUBLIC\<lang>\files. Siebel Open UI .24 a .css and are located in y a . it is very useful to examine an existing m theme o ฺc deฺ fil to review file i the h available il bl Si Siebel b l CSS classes l e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Existing Themes: a tranExisting themes end in theme. Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.. create the required style sheets using an appropriate editing tool • For a new theme that is a slight modification of an asdelivered Siebel theme: – Identify the rules to be modified – Edit the rules – Copy the rules into a custom CSS file s a h ) • In either case. Oracle and/or its affiliatesฺ 1.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Foundations 8 . new themes should start y a -to identify them as theme files. All rights reserved. } a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n File Names: While a tranthere are no enforced file naming conventions. with M "theme" non Copyright © 2015. Create the Style Sheets • Example: Modify the as-delivered Aurora theme to use light green buttons – Create a custom rule and save it as theme-wasabi.25 . Oracle and/or its affiliates. border-color: #385427.css – Allow the as-delivered Aurora theme to manage all other content .appletButton { Override applet button color color: #fff. Siebel Open UI . background-color: #38ff00. tree.Foundations 8 . Siebel Open UI . or a travalue y a side-oriented. NAVIGATION_TREE. or NAVIGATION_SIDE a s a )h • Clear the LOV cache m Parent LIC identifies for ฺco deฺ e which navigation type the r u Gui t theme is supported n cce dent a y@ s Stu e d an e thi p ฺ Create a new LOV value ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n You choose the n of the Parent LIC depending upon whether the theme is tab. All rights reserved. Add the Theme to the List of Values • Navigate to Administration . Oracle and/or its affiliatesฺ 2.If your theme applies to multiple navigation types.26 . Oracle and/or its affiliates.Data > List of Values • Create a new list of values entry and set: – Type = OUI_THEME_SELECTION – Display Value = user friendly name for the theme – Language-independent Code = theme name to be used in expressions – Parent LIC = NAVIGATION_TAB. n. Copyright © 2015. create multiple LOV records.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. M noeach one with Parent LIC type. Oracle and/or its affiliates.27 a . (OUI THEME SELECTION Preference ("Behavior".Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI . "DefaultTheme")) = "WASABI_THEME" s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Foundations 8 . Oracle and/or its affiliatesฺ 3. All rights reserved. Administer the Manifest • Add the theme to the Manifest Files view • Create an expression that identifies the theme based on the user's current settings – Example: LookupName (OUI_THEME_SELECTION. Galong t u Add yourntheme e on which t it depends any n ccfiles e a @ Stud y e d this n Add your theme expression a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. Administer the Manifest • In the Manifest Administration view. load that theme first Edit the platformdependent theme record s a h ) m o ฺc deฺ e r i with u file. Oracle and/or its affiliatesฺ 3. All rights reserved.28 a . Siebel Open UI . add the theme to the PLATFORM DEPENDENT themes – If your theme depends on another theme.Foundations 8 . Oracle and/or its affiliates.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. 29 a .Foundations 8 . Test the Custom Theme • Clear the browser cache • Select the new theme • Reload the Siebel client web page to force the new . ya -trathemes a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.js and .css files to be downloaded to the browser • Verify the application is rendered using the new theme s a h ) m o ฺc deฺ e r u Gui t n cce dent a Wasabi is y@ s Stu e now available d an e thi Wasabi has been p ฺ c s applied ฺ u k n o t ya nse a (m lice y e nd rable a P sfe k n Navigation: Set n under User Preferences > Behavior. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ 4. Siebel Open UI . All rights reserved. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.30 a . Siebel Open UI .Foundations 8 . Oracle and/or its affiliatesฺ Lesson Highlights • Siebel Open UI uses cascading style sheets to define the look and feel of elements in the client UI – Use the element inspector to examine and edit the rules • A theme is a collection of cascading style sheets that i l implement t a consistent i t t llook k and d ffeell ffor th the user iinterface t f ffor an application • Modify an existing theme by: – Creating an additional style sheet with the modifications – Adding the style sheet to the theme m) has co eฺ ฺ e r • Create a new theme by: u Guid t n – Creating one or more style sheets cce dent a – Administering the theme LOV ey@ Stu d this n a – Administering the theme's CSS ฺp usfiles e c ฺ k n e to a y a ens m ( y e lic e d n rabl a P sfe k n ya -tran a M non Copyright © 2015. All rights reserved. 31 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates.Foundations 8 . Siebel Open UI . All rights reserved. Oracle and/or its affiliatesฺ Practice • • • • Identify style sheets Locate styling rules Modify an existing theme style sheet Add a new style sheet to a theme s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non a . Oracle and/or its affiliatesฺ 9 Siebel Mobile Applications s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Oracle and/or its affiliatesฺ Objectives After completing this lesson. All rights reserved. you should be able to: • Define Siebel mobile applications • Describe the Siebel mobile application architecture • Describe the architecture of Siebel Disconnected Mobile applications • Enter and exit disconnected mode s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI Foundations 9 . Oracle and/or its affiliates.2 a . iPod. Oracle and/or its affiliatesฺ Siebel Mobile Applications • Are Siebel applications configured for use on mobile devices such as tablets and smart phones • Use the same Siebel Open UI framework as regular Siebel applications to render the mobile application in a mobile browser on a mobile device – Mobile devices must support the JS and HTML standards a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a fe can be used on mobile devices such as the iPhone. and so forth. common industry practice. Siebel Open UI Foundations 9 . k Papplications s n Siebel a Mobile n a smartphones. All rights reserved. iPad. y trand Android n Ma ntablets o mobile specific version of the standard desktop version of an application is a Configuring a mobile-specific The Siebel Service mobile application Copyright © 2015. Oracle and/or its affiliates. The URL for the mobile version usually differs from the URL for the standard version.3 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. and CSS files from the server are cached in the device's browser cache Users use the same browser and URL as in connected mode s a h – Work with Siebel data without a network connection ) m o ฺc is re – Synchronize S nchroni e Siebel data once a net network ork connection re-eฺ e r i u Gu d t established n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Data filters: Administrators can set data filters to determine what data is downloaded to a tran y a . JavaScript. Oracle and/or its affiliates.4 a . Siebel Open UI Foundations 9 . See Siebel Mobile Guide: Disconnected for more details on disconnected M nonthese configuring filters.mobile clients. All rights reserved. Oracle and/or its affiliatesฺ • Connected: – Users use their device's standards-compliant web browser to access the application using the appropriate URL – The architecture is the same as when using a desktop browser • Disconnected: Di t d – Application data. — Copyright © 2015.Mobile Application Modes Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI Foundations 9 . Pharma.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. a M non a Copyright © 2015. Finance. Finance Finance. and Service • Applications that support disconnected are: – Service and Pharma s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n Each Siebel mobile ya -tran application requires a separate license. Oracle and/or its affiliates. Sales. Adding disconnected support for Consumer Goods Goods. and Sales is on the product roadmap. Oracle and/or its affiliatesฺ As-Delivered Siebel Mobile Applications • Several as-delivered applications have been configured for connected mobile use: – Consumer Goods.5 . All rights reserved. Oracle and/or its affiliates. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.6 a . Oracle and/or its affiliatesฺ User Experience • Siebel mobile applications are configured to work like typical applications for mobile devices – Display smaller sets of data – Use touch navigation The navigation tree is only shown if the screen is wide enough s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu (Not shown) Only 8 e d fields in the form applet an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Only 5 records in the list applet Copyright © 2015. Siebel Open UI Foundations 9 . Oracle and/or its affiliates. and location integration – Adjusts page for landscape and portrait orientation s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi Touch to e-mail the contact p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Siebel Open UI Foundations 9 . phone. Oracle and/or its affiliatesฺ Features • Uses the mobile device's standards-based browser to access the application – The browser accesses a Siebel Web Server — Users see the same data in mobile or desktop applications • Supports S pports native nati e functionality f nctionalit – Gesture control. signature capture. and so forth – E-mail.7 a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved. Siebel Open UI Foundations 9 .8 a .js S e as the default d iform applet physical n h t a renderer ฺp use c ฺ k to n a ay ense m ( y e lic e d n rabl a k P nsfe This is a asnof IP2014 y ra Ma non-t Copyright © 2015.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ JavaScript Files for Siebel Mobile Applications • Siebel Open UI uses the same JavaScript files to support both mobile and desktop devices – Provides a consistent look-and-feel for all applications – Differences are implemented using Siebel Web Template files s a h ) m o ฺc deฺ e r u Gui t n cce dent a All tuapplications use y@ sphyrenderer. All rights reserved. Oracle and/or its affiliates. Siebel Open UI Foundations 9 .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. Oracle and/or its affiliatesฺ CSS Files for Siebel Mobile Applications • Siebel Open UI uses CSS classes specifically written to style mobile HTML pages – Look for classes with the words "mobile" or "touch" in them A section of theme-aurora.css specifying display options for touch devices s a h Styling for mobile applications ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.9 a . All rights reserved. 1 document on My Oracle Support.ShowWriteRecord = True .AppletSelectStyle = "Applet Select" . not used for new installations • Configure the application object manager as you would for Siebel Open UI by setting the server parameters: a s a )h m ฺco deฺ • In I addition ddi i set MobileApplication M bil A li i = TRUE e r u Gui t n – Optionally. In addition consult M nMobile o1511445.EnableInlineForList = Never .: Setup steps for Siebel Connected Mobile – HighInteractivity = TRUE – EnableOpenUI = TRUE — Copyright © 2015. set: . Oracle and/or its affiliatesฺ Enabling an Application Object Manager for Siebel pp Mobile Applications • If necessary. The more-detailed steps are: • Use new_compdef_sia to create the definitions of the mobile AOMs • Enable the appropriate mobile AOMs on the server . In addition to those shown above. run the new_compdef_sia script for your Siebel server to add the mobile AOMs to it – Also adds virtual directories for new AOMs to the Siebel Web Server – Only necessary for migrations. Oracle and/or its affiliates. set the SupportedMobileBrowser t parameter ce server n c e a to specify additional mobile devices @to support tud y S e d this The default value lists the currently-supported mobile devices n a p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n For details on n new_compdef_sia or setting additional parameters.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.Connected Applications" in Siebel Mobile Guide: Connected. All rights reserved.EnableSIFocusTracking = True • Configure virtual directories on the Siebel Web Server to allow users to access the mobile AOMs Siebel Open UI Foundations 9 .They are in the "Handheld Sync" component group • Set the mobile AOM parameters. Applications .Object Managers and Virtual Directories (Doc ID 1511445.10 .1). consult "Setting Up a trunning a y r a Siebel n. 11 a . Siebel Open UI Foundations 9 . Oracle and/or its affiliatesฺ Architecture of Siebel Mobile Applications • Siebel mobile applications must be configured specifically for mobile devices: – Are configured using Siebel Tools – Use mobile-tailored versions of several repository objects: — — — — Applets A l t Applet Web Templates Views View Web Templates Screens s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d More an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non — Copyright © 2015. Oracle and/or its affiliates. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliates. All rights reserved. applet not M does non "Mobile Pharma Account Form Applet Default" applet displayed in preview mode in Siebel Tools Copyright © 2015. Siebel Open UI Foundations 9 .12 . Oracle and/or its affiliatesฺ Mobile Applets • Siebel mobile applications include mobile applets tailored for mobile devices – Include fewer fields or columns to allow for better display on mobile devices a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n You can copy applet n used in a desktop application and it usually will display correctly if the a tan a y r a .Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015.have a large number of fields. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. <div> tags instead of explicit placements a s a )h m ฺco deฺ e r u Gui t "Mobile Pharma Account Form Applet n ce ent Default" uses mobile applet webc templates a @ Stud y e d this n a cฺp use ฺ k n e to a y a ens m ( y e lic e d n rabl a febased on standard applet web templates and usually display correctly k Pcannbe s n Mobile a applets tra ay as nthey as do not have too many fields.13 . Siebel Open UI Foundations 9 . Oracle and/or its affiliates. Mlong no Copyright © 2015. Oracle and/or its affiliatesฺ Mobile Applet Web Templates • Mobile applets reference mobile applet web templates that are specifically configured for mobile devices – Fewer fields per applet – Less padding and spacing – Siebel Si b l Open O UI formatting f tti — For example. .. Oracle and/or its affiliatesฺ Mobile Views • Are configured to contain the mobile applets for Siebel mobile applications • Are based on mobile view web templates – Include mobile applets The Pharma Account List View . u Open UInmobile e t cc den a y@ s Stu e d n mobile thi applets aincludes .14 a . Siebel Open UI Foundations 9 .and p ฺ e ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015..Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. All rights reserved..is based on the View Detail Map o ฺ ฺc (aeSiebel e Mobile view web template d r i tu webGtemplate).. Oracle and/or its affiliates... s a h ) m ..Mobile view. swt: The view web template for a mobile view s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015.15 a . Oracle and/or its affiliates. example <div> tags instead of explicit placements CCViewDetailMap_Mobile. Oracle and/or its affiliatesฺ Mobile View Web Templates • Are Siebel view web templates specifically configured to support mobile views – Fewer applets per view – Siebel Open UI formatting — For example. All rights reserved.Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI Foundations 9 . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Mobile Screens • Are configured to include the mobile views for a Siebel mobile application • Typically include only a small number of views The ePharma Account Mobile screen includes the Pharma Account List View - Mobile s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI Foundations 9 - 16 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Customizing the User Interface for Siebel Mobile pp Applications • The user interface for an as-delivered Siebel Mobile application is customized in the same way as desktop Siebel applications – Write the custom JavaScript code for the presentation model or the renderer — — Third-party mobile libraries such as JQuery provide a large selection of prebuilt customizations Copy the files into the custom directory Administer the manifest s a h ) m – Modify the styling rules in the CSS files o ฺc deฺ e r Use a desktop browser to inspect the UI elements u Gui t n Edit the corresponding rules cce dent a Save the edited rules in a new CSS y@files Stu e d Administer the CSS files, adding thito the theme an ethem p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non — — — — — Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI Foundations 9 - 17 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Siebel Disconnected Mobile Applications • Are Siebel applications that run without requiring a Siebel Server, or even a network connection • Run in a standard web browser – You do not need to install an application on your device • Have the same look-and-feel as connected mobile applications a s a )h m ฺco deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a k P nsfeMobile Applications versus Siebel Remote: Siebel's other n Siebel a Disconnected ra is "Siebel Remote". Siebel Remote is installed as an application on ay n-tsolution disconnected M no Windows machine, runs as a local application, and stores its data in a local your Microsoft Disconnected mobile applications look just like mobile applications Include a "Go offline" button to enter/exit disconnected mode Copyright © 2015, Oracle and/or its affiliates. All rights reserved. database. Siebel Disconnected Mobile is not OS-specific, and does not require the installation of an additional application. In addition, Siebel Remote is planned to be end-of-lifed in the future in favor of Siebel Disconnected Mobile Applications. Siebel Open UI Foundations 9 - 18 Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Siebel Disconnected Architecture • On entering disconnected mode, the application runs a script that caches application data: – JavaScript and CSS files in the standard browser cache – Application data is stored in the HTML5 data store Siebel Web Server Client Browser a s a )h Siebel m Database ฺco deฺ e r i u Data HTML5 t u n G t n cce Store e a @ Stud y e and d 1. Download is todata n h t a metadata client Continued … cฺp use Siebel k Server ฺ n o ya nse t a (m lice y e nd rable a fe standards-compliant browsers have a data store dedicated to kP s n HTML5adata store: Modern n traThis data store is limited in size; therefore, only a specified subset of ay content. HTML5 n M no data is downloaded to the store. Details on configuring a user and the data that is application Browser Cache Copyright © 2015, Oracle and/or its affiliates. All rights reserved. downloaded are on subsequent slides. Siebel Open UI Foundations 9 - 19 Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Siebel Disconnected Architecture • On subsequent attempts to access the application's URL, the browser reads from the cache and data store – No network connection is required – Data can be created, edited, updated, and removed Siebel Web Server No network connection Client Browser Browser Cache s a h ) data Siebel 2. Work with m o and Database ฺ in ฺc metadata e e r d client i HTML5 tu Data u n G e t n cc Store e a d y@ s Stu e d an e thi p ฺ Continued … s Siebel Serverkฺc u n o ya nse t a (m lice y e nd rable a P sfe k n The JavaScript an are stored in the browser cache. ya -trfiles a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI Foundations 9 - 20 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Siebel Disconnected Architecture • On leaving disconnected mode, the application connects to a Siebel Server and synchronizes the data – A network connection and a properly-configured Siebel Server is required Siebel Web Server Client Browser Browser Cache s a h ) Siebel m o Database ฺc deฺ e r i u Data HTML5 t u n G t n cce Store e a @ Stud y 3. Synchronize e d modified isdata and n h t a p ฺ e Siebel k Server ฺc o usmetadata with servers n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI Foundations 9 - 21 a Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015, Oracle and/or its affiliatesฺ Lesson Highlights • Siebel mobile applications use the same Siebel Open UI framework as the regular desktop application – Use mobile versions of web template files • Disconnected mobile applications: – Have an identical look-and-feel to connected mobile applications — Use same JavaScript, CSS files, and so forth – Store application data in the HTML5 data cache – Store metadata in the browser cache s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015, Oracle and/or its affiliates. All rights reserved. Siebel Open UI Foundations 9 - 22 a Oracle and/or its affiliatesฺ • Explore a mobile application s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non Copyright © 2015. Oracle and/or its affiliates. All rights reserved.Practice Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Siebel Open UI Foundations 9 .23 a . Unauthorized reproduction or distribution prohibitedฺ Copyright© 2015. Oracle and/or its affiliatesฺ s a h ) m o ฺc deฺ e r u Gui t n cce dent a y@ s Stu e d an e thi p ฺ ฺc o us k n ya nse t a (m lice y e nd rable a P sfe k n ya -tran a M non a .