SlideShare a Scribd company logo
1 of 22
Siebel Open UI Architecture
Presented by TechOneStop
Techonestop.in
In a vision to make TECHNOLOGY simple for u
techonestop.in1
Open UI Architecture Overview
techonestop.in2
It includes all elements of traditional Siebel client, plus few Open UI
specific components.
1)Application Object Manager(AOM)
2)Siebel Web Template(SWT) files
3)JavaScript(JS) files
4)Cascading Style Sheet (CSS) files
5)Open Ui client
a)Proxy
b)Presentation Model
c)Physical Renderer
6)Manifest files
Application Object Manager (AOM)
techonestop.in3
• Most important server component in Siebel
• In Open UI, it behaves exactly the same way, like our traditional siebel
• Processes user requests with the help of other components like Data
Manager, Siebel Web Engine
• Open UI parameters:
 EnableOpenUI = TRUE
 HighInteractivity = TRUE
• For webclient, Add two parameters under OM component
• For Dedicated, add two in [InfraUIFramework] section of client cfg file
Siebel Web Template(SWT) files
techonestop.in4
• HTML file with Siebel tags, provides empty placeholders for Views,
Applets, controls and other objects of siebel
• Open UI uses newer version of SWT files which no longer contain any
explicit layout information
Original SWT files has explicit tags like tables, boundaries where Open
UI swt files has ‘div’ tag, which allows css files to control the layout
• SWT files are on siebel server under siebsrvrWEBTEMPL
 WEBTEMPL folder contains original swt files
OUIWEBTEMPL folder, under WEBTEMPL contains open ui SWT
files
CUSTOM folder, under OUIWEBTEMPL contains all custom SWT
files
For siebel developer web client, path is clientWEBTEMPL
Cascading Style Sheet (CSS) files
• Style language that defines the layout of web pages, example like font,
color, height, width and many more.
• Benefits of CSS file:
Reusable, one css file could be used for multiple web pages
Modify style definition in one place and change will be reflected in
all web pages
Different layout for different media types like print, mobile, desktop
• Easy to build, notepad is sufficient to write css file
• CSS file path:
On the web server under webmasterfiles<lang> and
eappwebPUBLIC<lang>FILES
 For siebel developer client, path is clientPUBLIC<lang>files
techonestop.in5
Java Script (JS) files
• Enhance the interactivity features of web pages
• Extensively used in Open UI to render the application in web browser
• Oracle provided JS files to deliver Open UI functionalities, customers can
also add their own JS file to leverage the functionalities
• With Javascript, JQuery also can be used
• JS files are on siebel server under siebsrvrpublic<lang><build>SCRIPTS
 SCRIPTS folder contains original (High Interactivity) JS files
 siebel folder, under SCRIPTS contains open ui related vanilla JS files
 custom folder, under SCRIPTSsiebel contains all custom js files
3rdparty folder, under scripts contains all 3rd party provided js files
• For siebel developer web client, path is client<lang><build>SCRIPTS
techonestop.in6
Open UI client
• Open UI client is an engine which runs within the browser on the client to
provide better and enhanced user interface
 Binds data to the presentation layout
 Caches data locally
 Applies client side business logic
• Consists of 3 elements
 Client Proxy
 Presentation Model (PM)
 Physical Renderer (PR)
techonestop.in7
Client Proxy
• Provides the interface to the back end siebel data
• Gets runtime data and metadata from siebel server whenever required
Runtime data is the actual data from siebel database that users see in
view/applet
Metadata specifies the column name and other details like required,
readonly and so on
• Provides data back to the siebel server
• Provided by oracle and must not be modified by customers
techonestop.in8
Presentation Model
•Javascript file to handle metadata and runtime data, coming from siebel
server and displays those in list or form applet in the client.
• Determine what logic should be applied
• Client side scripting without requiring the need of siebel server
• Capture client interaction
 Did the user leave a control?
 Did the user click a link?
•Collection of
 Properties: Contains information about current state of each user
interaction. for example, open ui currently shows or hides a field
 Method: Implement characteristic that modifies the state of an object.
For example, if user chooses a field value, then apply method to hide
another field
• Supports different logic for different platform
techonestop.in9
Physical Renderer
• Javascript files to build the enhanced user interface
• Can display the same set of records in different ways
 List Applet
 Carousal
 Calendar
 Mind Map
• Supports different behavior for Desktop versus Mobile device
techonestop.in1
Manifest File
• Uses an unique key to determine which javascript file/s to download to the
client
• Earlier version Open UI innovation pack 2013 (8.1.1.11) has three manifest
files under seibsrvrOBJECTS
 Core_manifest.xml: As delivered listing of JS files and should not be
modified by customers
 Custom_manifest.xml: Specifies key name and javascript file mappings
 Manifest_extensions.map: Place to register Applet/key combination
• From Open UI innovation pack 2013, instead of modifying manifest file,
configure it in Open Ui client, under Administration-Application > Manifest
Administration
techonestop.in1
ActiveX Vs Open UI Architecture
* Provided by Oracle Corp
techonestop.in1
Example
Example: An user clicks on ‘My Opportunities’ to navigate to the My
Opportunities View
Step 1: Presentation model passes the request to the client proxy
Step 2: Proxy send the request to Siebel server
Step 3: Siebel server process the request and send results back to proxy
Step 4: proxy reads the manifest and download all required files
Step 5: Presentation model applies the business logic on result set and send
to physical renderer
Step 6: Physical Renderer prepares the final HTML file with the reference of
CSS files
Step 7: Result is presented to the user
techonestop.in1
Step 1
Step 1: Presentation model passes the request to the client proxy
- Presentation model captures the event (here, on mouse click) and sends
the request to client proxy
techonestop.in1
Step 2
Step 2: Proxy sends the request to Siebel server
- Proxy checks the client cache memory for the necessary data to fulfill
client request
- If it finds data, directly go to Step 4, otherwise sends the request to
Application Object manager on Siebel Server to get the record set
techonestop.in1
Step 3
Step 3: Siebel server process the request and send results back to proxy
- Application object manager processes the request and sends back record
set to proxy
• Metadata: object definitions for Columns, Applets, Views and all
• Runtime data: Comes from siebel database which is actual user data
techonestop.in1
Step 4
Step 4: Proxy reads the manifest and download all required files
- Proxy checks manifest files and downloads all JS and corresponding CSS
files to display opportunity records
techonestop.in1
Step 5
Step 5: Presentation model applies the business logic on result set and send
to physical renderer
- Once all data is received and files are downloaded, Proxy sends notification
to Presentation Model
- Presentation model applies business logic on received data, based upon JS
files
techonestop.in1
Step 6
Step 6: Physical Renderer prepares the final HTML file with the reference of
CSS files
- Once business logics are applied on all data, Presentation model sends the
notification to Physical Renderer to generate the HTML files with the
reference of CSS files
techonestop.in1
Step 7
Step 7: Result is presented to the user
- The final HTML web page, embedded with JavaScript, CSS and Data is
displayed in the browser
techonestop.in2
Q n A
Questions/Doubts ???
-Write it here
OR
-Visit our facebook community
page ‘TechOneStop’
OR
- Visit ‘www.techonestop.in’
techonestop.in21
Thank You !!!
- For more interesting features,
visit ‘www.techonestop.in’
techonestop.in22

More Related Content

Viewers also liked

Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
Suresh Patidar
 
Oracle Siebel CRM Desktop
Oracle Siebel CRM DesktopOracle Siebel CRM Desktop
Oracle Siebel CRM Desktop
Divya Malik
 
Project audit & review checklist
Project audit & review checklistProject audit & review checklist
Project audit & review checklist
Ram Srivastava
 

Viewers also liked (20)

PHP CODING STANDARDS
PHP CODING STANDARDSPHP CODING STANDARDS
PHP CODING STANDARDS
 
Coding Standard And Code Review
Coding Standard And Code ReviewCoding Standard And Code Review
Coding Standard And Code Review
 
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
PHPcon Poland - Static Analysis of PHP Code – How the Heck did I write so man...
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Modern Static Code Analysis in PHP
Modern Static Code Analysis in PHPModern Static Code Analysis in PHP
Modern Static Code Analysis in PHP
 
Refactoring Legacy Code
Refactoring Legacy CodeRefactoring Legacy Code
Refactoring Legacy Code
 
Component Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex MoldovanComponent Based UI Architecture - Alex Moldovan
Component Based UI Architecture - Alex Moldovan
 
Modern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web DevelopmentModern UI Architecture_ Trends and Technologies in Web Development
Modern UI Architecture_ Trends and Technologies in Web Development
 
Code review guidelines
Code review guidelinesCode review guidelines
Code review guidelines
 
UI Architecture & Web Performance
UI Architecture & Web PerformanceUI Architecture & Web Performance
UI Architecture & Web Performance
 
Selenium Architecture
Selenium ArchitectureSelenium Architecture
Selenium Architecture
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding style
 
Oracle Siebel CRM Desktop
Oracle Siebel CRM DesktopOracle Siebel CRM Desktop
Oracle Siebel CRM Desktop
 
AngularJS application architecture
AngularJS application architectureAngularJS application architecture
AngularJS application architecture
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Siebel CRM: Open UI
Siebel CRM: Open UISiebel CRM: Open UI
Siebel CRM: Open UI
 
Project audit & review checklist
Project audit & review checklistProject audit & review checklist
Project audit & review checklist
 
Code Reviews - PHP Unconference Europe 2013
Code Reviews - PHP Unconference Europe 2013Code Reviews - PHP Unconference Europe 2013
Code Reviews - PHP Unconference Europe 2013
 

More from Tech OneStop

More from Tech OneStop (6)

Top 10 Interesting and Amazing facts about Sri Lanka
Top 10 Interesting and Amazing facts about Sri LankaTop 10 Interesting and Amazing facts about Sri Lanka
Top 10 Interesting and Amazing facts about Sri Lanka
 
Top 10 Interesting and Amazing facts about Nepal
Top 10 Interesting and Amazing facts about NepalTop 10 Interesting and Amazing facts about Nepal
Top 10 Interesting and Amazing facts about Nepal
 
Siebel Open UI Debugging (Siebel Open UI Training, Part 7)
Siebel Open UI Debugging (Siebel Open UI Training, Part 7)Siebel Open UI Debugging (Siebel Open UI Training, Part 7)
Siebel Open UI Debugging (Siebel Open UI Training, Part 7)
 
How to remove showing posts with label message
How to remove showing posts with label messageHow to remove showing posts with label message
How to remove showing posts with label message
 
Customizing the Presentation Model and Physical Renderer in Siebel Open UI
Customizing the Presentation Model and Physical Renderer in Siebel Open UICustomizing the Presentation Model and Physical Renderer in Siebel Open UI
Customizing the Presentation Model and Physical Renderer in Siebel Open UI
 
Siebel Open UI Roadmap 2014
Siebel Open UI Roadmap 2014Siebel Open UI Roadmap 2014
Siebel Open UI Roadmap 2014
 

Recently uploaded

Recently uploaded (20)

Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

Siebel Open UI Training (Session 2): Siebel Open UI Architecture

  • 1. Siebel Open UI Architecture Presented by TechOneStop Techonestop.in In a vision to make TECHNOLOGY simple for u techonestop.in1
  • 2. Open UI Architecture Overview techonestop.in2 It includes all elements of traditional Siebel client, plus few Open UI specific components. 1)Application Object Manager(AOM) 2)Siebel Web Template(SWT) files 3)JavaScript(JS) files 4)Cascading Style Sheet (CSS) files 5)Open Ui client a)Proxy b)Presentation Model c)Physical Renderer 6)Manifest files
  • 3. Application Object Manager (AOM) techonestop.in3 • Most important server component in Siebel • In Open UI, it behaves exactly the same way, like our traditional siebel • Processes user requests with the help of other components like Data Manager, Siebel Web Engine • Open UI parameters:  EnableOpenUI = TRUE  HighInteractivity = TRUE • For webclient, Add two parameters under OM component • For Dedicated, add two in [InfraUIFramework] section of client cfg file
  • 4. Siebel Web Template(SWT) files techonestop.in4 • HTML file with Siebel tags, provides empty placeholders for Views, Applets, controls and other objects of siebel • Open UI uses newer version of SWT files which no longer contain any explicit layout information Original SWT files has explicit tags like tables, boundaries where Open UI swt files has ‘div’ tag, which allows css files to control the layout • SWT files are on siebel server under siebsrvrWEBTEMPL  WEBTEMPL folder contains original swt files OUIWEBTEMPL folder, under WEBTEMPL contains open ui SWT files CUSTOM folder, under OUIWEBTEMPL contains all custom SWT files For siebel developer web client, path is clientWEBTEMPL
  • 5. Cascading Style Sheet (CSS) files • Style language that defines the layout of web pages, example like font, color, height, width and many more. • Benefits of CSS file: Reusable, one css file could be used for multiple web pages Modify style definition in one place and change will be reflected in all web pages Different layout for different media types like print, mobile, desktop • Easy to build, notepad is sufficient to write css file • CSS file path: On the web server under webmasterfiles<lang> and eappwebPUBLIC<lang>FILES  For siebel developer client, path is clientPUBLIC<lang>files techonestop.in5
  • 6. Java Script (JS) files • Enhance the interactivity features of web pages • Extensively used in Open UI to render the application in web browser • Oracle provided JS files to deliver Open UI functionalities, customers can also add their own JS file to leverage the functionalities • With Javascript, JQuery also can be used • JS files are on siebel server under siebsrvrpublic<lang><build>SCRIPTS  SCRIPTS folder contains original (High Interactivity) JS files  siebel folder, under SCRIPTS contains open ui related vanilla JS files  custom folder, under SCRIPTSsiebel contains all custom js files 3rdparty folder, under scripts contains all 3rd party provided js files • For siebel developer web client, path is client<lang><build>SCRIPTS techonestop.in6
  • 7. Open UI client • Open UI client is an engine which runs within the browser on the client to provide better and enhanced user interface  Binds data to the presentation layout  Caches data locally  Applies client side business logic • Consists of 3 elements  Client Proxy  Presentation Model (PM)  Physical Renderer (PR) techonestop.in7
  • 8. Client Proxy • Provides the interface to the back end siebel data • Gets runtime data and metadata from siebel server whenever required Runtime data is the actual data from siebel database that users see in view/applet Metadata specifies the column name and other details like required, readonly and so on • Provides data back to the siebel server • Provided by oracle and must not be modified by customers techonestop.in8
  • 9. Presentation Model •Javascript file to handle metadata and runtime data, coming from siebel server and displays those in list or form applet in the client. • Determine what logic should be applied • Client side scripting without requiring the need of siebel server • Capture client interaction  Did the user leave a control?  Did the user click a link? •Collection of  Properties: Contains information about current state of each user interaction. for example, open ui currently shows or hides a field  Method: Implement characteristic that modifies the state of an object. For example, if user chooses a field value, then apply method to hide another field • Supports different logic for different platform techonestop.in9
  • 10. Physical Renderer • Javascript files to build the enhanced user interface • Can display the same set of records in different ways  List Applet  Carousal  Calendar  Mind Map • Supports different behavior for Desktop versus Mobile device techonestop.in1
  • 11. Manifest File • Uses an unique key to determine which javascript file/s to download to the client • Earlier version Open UI innovation pack 2013 (8.1.1.11) has three manifest files under seibsrvrOBJECTS  Core_manifest.xml: As delivered listing of JS files and should not be modified by customers  Custom_manifest.xml: Specifies key name and javascript file mappings  Manifest_extensions.map: Place to register Applet/key combination • From Open UI innovation pack 2013, instead of modifying manifest file, configure it in Open Ui client, under Administration-Application > Manifest Administration techonestop.in1
  • 12. ActiveX Vs Open UI Architecture * Provided by Oracle Corp techonestop.in1
  • 13. Example Example: An user clicks on ‘My Opportunities’ to navigate to the My Opportunities View Step 1: Presentation model passes the request to the client proxy Step 2: Proxy send the request to Siebel server Step 3: Siebel server process the request and send results back to proxy Step 4: proxy reads the manifest and download all required files Step 5: Presentation model applies the business logic on result set and send to physical renderer Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files Step 7: Result is presented to the user techonestop.in1
  • 14. Step 1 Step 1: Presentation model passes the request to the client proxy - Presentation model captures the event (here, on mouse click) and sends the request to client proxy techonestop.in1
  • 15. Step 2 Step 2: Proxy sends the request to Siebel server - Proxy checks the client cache memory for the necessary data to fulfill client request - If it finds data, directly go to Step 4, otherwise sends the request to Application Object manager on Siebel Server to get the record set techonestop.in1
  • 16. Step 3 Step 3: Siebel server process the request and send results back to proxy - Application object manager processes the request and sends back record set to proxy • Metadata: object definitions for Columns, Applets, Views and all • Runtime data: Comes from siebel database which is actual user data techonestop.in1
  • 17. Step 4 Step 4: Proxy reads the manifest and download all required files - Proxy checks manifest files and downloads all JS and corresponding CSS files to display opportunity records techonestop.in1
  • 18. Step 5 Step 5: Presentation model applies the business logic on result set and send to physical renderer - Once all data is received and files are downloaded, Proxy sends notification to Presentation Model - Presentation model applies business logic on received data, based upon JS files techonestop.in1
  • 19. Step 6 Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files - Once business logics are applied on all data, Presentation model sends the notification to Physical Renderer to generate the HTML files with the reference of CSS files techonestop.in1
  • 20. Step 7 Step 7: Result is presented to the user - The final HTML web page, embedded with JavaScript, CSS and Data is displayed in the browser techonestop.in2
  • 21. Q n A Questions/Doubts ??? -Write it here OR -Visit our facebook community page ‘TechOneStop’ OR - Visit ‘www.techonestop.in’ techonestop.in21
  • 22. Thank You !!! - For more interesting features, visit ‘www.techonestop.in’ techonestop.in22