Siebel Open UI: Presentation Model (PM) and Physical Renderer (PR)

1. Presentation Model (PM)

The Presentation Model acts as the middle layer between the data model and the user interface. It defines the behavior and logic of the applet without directly interacting with the DOM.

Key Responsibilities

• Manages the state and business logic of the applet.
• Handles data binding between the back-end and UI.
• Defines client-side logic, such as validations and interaction rules.

Example

define("custom/PM/CustomAppletPM", ["siebel/pmodel"], function (PModel) {
  return PModel.extend({
    Init: function () {
      PModel.prototype.Init.apply(this, arguments);
      this.AddProperty("CustomProperty", "DefaultValue");
    },
    Setup: function () {
      this.AttachEventHandler("OnFieldChange", function (fieldName, value) {
        if (fieldName === "Status" && value === "Closed") {
          alert("You cannot edit a closed record!");
        }
      });
    },
  });
});
  

2. Physical Renderer (PR)

The Physical Renderer handles the visual representation of the applet. It is responsible for rendering data onto the DOM and managing user interactions.

Key Responsibilities

• Controls the appearance and behavior of the applet in the browser.
• Manages interactions with the DOM, including event listeners.
• Enables integration with third-party UI libraries (e.g., jQuery).

Example

define("custom/PR/CustomAppletPR", ["siebel/phyrenderer"], function (Renderer) {
  return Renderer.extend({
    Init: function () {
      Renderer.prototype.Init.apply(this, arguments);
    },
    ShowUI: function () {
      Renderer.prototype.ShowUI.apply(this, arguments);
      this.GetContainer().append("<button id='customBtn'>Click Me</button>");
    },
    BindEvents: function () {
      this.GetContainer().on("click", "#customBtn", function () {
        alert("Button clicked!");
      });
    },
  });
});
  

3. Interaction Between PM and PR

• PM-to-PR Communication: PM updates the PR whenever data or state changes.
• PR-to-PM Communication: PR notifies the PM about user interactions.

4. Summary Table

Aspect	Presentation Model (PM)	Physical Renderer (PR)
Focus	Business logic and data handling	UI rendering and DOM manipulation
Interaction	Communicates with back-end and PR	Communicates with PM and DOM
Customization	Field validations, dynamic behavior	Custom layouts, visual enhancements
Technology	JavaScript (client-side logic)	JavaScript, HTML, CSS
Example	Field validation logic	Adding a custom button to UI