Siebel Open UI Framework

What is Open UI?

Siebel Open UI modernizes the user interface with HTML5, CSS3, and JavaScript (replacing ActiveX controls). It enables responsive design, browser compatibility, and extensive customization without modifying core Siebel code.

Key Benefits

• Modern UX: Clean, responsive interface works on desktop, tablet, mobile browsers
• No Plugins: Pure HTML5 (no ActiveX, Silverlight, or Flash)
• Browser Support: Chrome, Firefox, Safari, Edge
• Customizable: JavaScript/CSS-based customizations (easier than legacy ActiveX)
• Performance: Client-side rendering reduces server load

Architecture

Open UI Customization

1. Physical Renderer (PR)

• Purpose: Controls how controls render (HTML markup)
• Example: Customize how phone number field displays (add click-to-dial icon)
• Language: JavaScript

2. Presentation Model (PM)

• Purpose: Business logic for UI behavior (event handling)
• Example: When user selects product, auto-populate price field
• Language: JavaScript

3. CSS Theming

• Purpose: Visual styling (colors, fonts, spacing)
• Example: Apply corporate branding (blue theme, company logo)
• Language: CSS3

4. Manifest Files

• Purpose: Register custom JS files with Siebel
• File: siebel/custom/myapp-manifest.js
• Content: Declares custom Physical Renderers, Presentation Models

Common Customizations

Example 1: Click-to-Dial

// Physical Renderer: Add phone icon next to phone field
if (typeof(SiebelAppFacade.PhoneNumberPR) === "undefined") {
  SiebelJS.Namespace("SiebelAppFacade.PhoneNumberPR");
  SiebelAppFacade.PhoneNumberPR = (function() {
    function PhoneNumberPR(pm) {
      SiebelAppFacade.PhoneNumberPR.superclass.constructor.call(this, pm);
    }
    SiebelJS.Extend(PhoneNumberPR, SiebelAppFacade.TextPR);
    
    PhoneNumberPR.prototype.ShowUI = function() {
      var value = this.GetPM().Get("GetFormattedFieldValue");
      var html = '' + value + '';
      html += '📞';
      this.GetEl().html(html);
    };
    return PhoneNumberPR;
  }());
}
                    

Result: Phone numbers display with clickable phone icon

Example 2: Inline Validation

• Scenario: Validate email format before saving
• PM Code: On field change, check regex /^[^@]+@[^@]+\.[^@]+$/
• Result: Red border + error message if invalid email

Example 3: Custom Dashboard Widget

• Use case: Embed Chart.js graph showing sales pipeline
• Implementation: Create custom applet, render chart in PR using Chart.js library
• Data: Fetch from Siebel via AJAX, populate chart

Responsive Design

• Desktop (1920px): 3-column layout, full navigation sidebar
• Tablet (768px): 2-column layout, collapsible sidebar
• Mobile (375px): 1-column stack, hamburger menu
• CSS Media Queries:

  @media (max-width: 768px) {
    .siebel-applet { width: 100%; }
    .siebel-list { font-size: 14px; }
  }
                              

Performance Best Practices

Debugging Open UI

• Browser DevTools: Chrome Inspector → Console tab (view JavaScript errors)
• Network Tab: Inspect AJAX calls to Siebel server (JSON payloads)
• Breakpoints: Set breakpoints in custom JS files
• Siebel Logs: Server-side logs in siebsrvr/log/ directory

Example: Corporate Branding Customization