Configuring a View Layout

Similar to applets, Siebel views can be configured to render by using Oracle JET or Spectra components through a custom Presentation Model (PM). In this approach, the JSON specification is provided through the PM property SEBL_COMPONENT_CONFIG.

SiebelAppFacade.BaseViewModelViewPM is the base JavaScript Presentation Model (PM) class for a Siebel view that is used with an Oracle JET component. Any custom PM must extend SiebelAppFacade.BaseViewModelViewPM and declare a dependency on siebel/baseviewmodelviewpm as part of the define statement.

Traditionally, Open UI applet controls can be rendered only within the applet boundary. By using this framework, that limitation is removed, and applet controls can be rendered anywhere in the view.

Solution Overview

The framework provides a declarative JSON approach in which the developer defines the bindings between Siebel Open UI and Oracle JET or Spectra components, the HTML structure that the Oracle JET or Spectra component expects, and the JSON structure that represents the markup and attribute definitions of the component. The framework then builds the HTML markup and generates the bindings.

Key Features

• Reduced boilerplate, because most rendering can be defined through JSON instead of custom JavaScript.
• Out-of-the-box integration with Siebel Open UI, including applets, applet controls, Presentation Model (PM) methods, and PM properties.
• Support for reusing existing applets, whether they are defined through this JSON framework, implemented through JavaScript, or provided out of the box.
• Support for value manipulation functions within the JSON specification.
• Support for variables for reuse and simplification of configuration.

Examples:

• Mini Label and Value Pair

  The following example shows how to render the display name and value of a Siebel control in a simple view-level structure.

  {
    "imports": [],
    "variables": {
      "Applet": "SIS Account List Applet"
    },
    "component": "div",
    "children": [
      "$fn:value($var:Applet, Account Name, DisplayName)",
      " : ",
      {
        "component": "b",
        "children": [
          "$fn:value($var:Applet, Account Name, Value)"
        ]
      }
    ]
  }
  

  This example uses shorthand $fn:value(...) bindings for both DisplayName and Value.

• Simple Form by Using oj-c-input-text and Variables

  The following example demonstrates how variables can be used to simplify view-level configuration. This example is not the recommended approach for rendering a full form, because FormModelViewPM is available for that purpose. It is included here to demonstrate the flexibility of the framework.

  {
    "imports": [
      "oj-c/input-text",
      "oj-c/form-layout"
    ],
    "variables": {
      "Applet": "Account Address Applet",
      "width": "md:6"
    },
    "component": "oj-c-form-layout",
    "attributes": {
      "direction": "row"
    },
    "children": [
      {
        "component": "oj-c-input-text",
        "attributes": {
          "label-hint": "$fn:value($var:Applet, Street Address, DisplayName)",
          "value": "$fn:value($var:Applet, Street Address, Value)",
          "class": "$var:width"
        }
      },
      {
        "component": "oj-c-input-text",
        "attributes": {
          "label-hint": "$fn:value($var:Applet, City, DisplayName)",
          "value": "$fn:value($var:Applet, City, Value)",
          "class": "$var:width"
        }
      },
      {
        "component": "oj-c-input-text",
        "attributes": {
          "label-hint": "$fn:value($var:Applet, Postal Code, DisplayName)",
          "value": "$fn:value($var:Applet, Postal Code, Value)",
          "class": "$var:width"
        }
      }
    ]
  }
  

  This example demonstrates variable substitution through $var: and binding to applet controls through $fn:value(...).

• Foldout Layout with Embedded Applets

  The following example shows how a view layout can reuse existing Siebel applets within a Spectra foldout layout.

  {
    "imports": [
      "oj-sp/foldout-layout/loader",
      "oj-sp/foldout-panel-summarizing/loader"
    ],
    "component": "oj-sp-foldout-layout",
    "attributes": {
      "default-expand": "false"
    },
    "children": [
      {
        "component": "oj-sp-foldout-panel-summarizing",
        "attributes": {
          "summary": "Account Info",
          "illustration": "oj-ux-ico-contact"
        },
        "children": [
          {
            "component": "$Applet(Account Entry Applet)"
          }
        ]
      },
      {
        "component": "oj-sp/foldout-panel-summarizing",
        "attributes": {
          "summary": "Recent Orders",
          "illustration": "oj-ux-ico-order"
        },
        "children": [
          {
            "component": "$Applet(Order Entry - Line Items List Applet)"
          }
        ]
      }
    ]
  }
  

  This example shows how existing applets can be embedded as child elements within a view-level component layout.

• Horizontal Overview by Using join and map

  The following example shows how to build a view-level overview layout by using longform functions such as join and map.

  {
    "imports": [
      "oj-sp/horizontal-overview/loader",
      "oj-sp/empty-state/loader"
    ],
    "variables": {
      "statusMapMethod": "$fn:execute($, MapStatusToColor)"
    },
    "component": "oj-sp-horizontal-overview",
    "attributes": {
      "layout": "wrap"
    },
    "children": [
      {
        "$type": "$fn:join",
        "value": [
          "$fn:value($, Account Name, Value)",
          "$fn:value($, Status, Value)"
        ],
        "combiner": " - "
      },
      {
        "$type": "$fn:object",
        "value": {
          "component": "oj-badge",
          "attributes": {
            "color": {
              "$type": "$fn:map",
              "value": "$fn:value($, Status, Value)",
              "mapper": "$var:statusMapMethod"
            },
            "label": "$fn:value($, Status, Value)"
          }
        }
      },
      {
        "component": "oj-button",
        "attributes": {
          "label": "Open Record",
          "on-oj-action": "$fn:execute($, OpenRecord)"
        }
      }
    ]
  }
  

  This example demonstrates the use of longform functions to compose values and derive presentation attributes dynamically.

• Recommendation Card

  The following example shows how static values, variables, and dynamic bindings can be combined in a Spectra recommendation card.

  {
    "imports": [
      "oj-sp/recommendation-card/loader"
    ],
    "variables": {
      "color": "neutral"
    },
    "component": "oj-sp-recommendation-card",
    "attributes": {
      "cardTitle": "$fn:value($, cardTitle, DisplayName)",
      "description": "$fn:value($, Description, DisplayName)",
      "displayOptions": {
        "illustration": "on"
      },
      "recommendedAction": {
        "$type": "$fn:object",
        "value": {
          "label": "$fn:value($, Pay Bill, DisplayName)"
        }
      },
      "onspRecommendedAction": "$fn:execute($, Pay Bill)",
      "themeMode": "$var:color",
      "backgroundColor": "$var:color",
      "layout": "fitContent"
    },
    "children": []
  }
  

  This example demonstrates the use of variables, static attributes, and dynamic bindings in a view-level component configuration.

  You can also place object definitions in the variables section and reference them by using $var: when reuse is required.

Nested Function Call

Function calls can be nested in the JSON specification. For example:

$fn:value($, $fn:property($, Property1), Value)

In this example, the control name that is passed as the second argument to $fn:value(...) is resolved from the PM property Property1.

Note: If an applet name, control name, or property contains an unbalanced parenthesis and must be used in a $fn: expression, define that value in the variables section and reference it through $var:

Component Registration and Use in JSON Configuration

A reusable component that is registered in the ModelViewFactory can be referenced from the JSON configuration.

Use the following syntax to reference a registered component:

{
  "component": "$fn:component(TestModelView)",
  "attributes": {
    "pm": "$fn:Applet($)",
    "config": {}
  }
}

Note: Earlier configurations might use $WebComp:(TestModelView) to reference a registered component. Use $fn:component(TestModelView) for new configurations.

Consolidating in the PM

1. Create a custom PM that extends SiebelAppFacade.BaseViewModelViewPM.

2. Set the SEBL_COMPONENT_CONFIG property in the Init method.

   define('siebel/custom/customviewpm', ['siebel/baseviewmodelviewpm'], function () {
       SiebelJS.Namespace('SiebelAppFacade.CustomViewPM');
       SiebelAppFacade.CustomViewPM = (function () {
   
           function CustomViewPM() {
               SiebelAppFacade.CustomViewPM.superclass.constructor.apply(this, arguments);
           }
   
           SiebelJS.Extend(CustomViewPM, SiebelAppFacade.BaseViewModelViewPM);
   
           CustomViewPM.prototype.Init = function () {
               SiebelAppFacade.CustomViewPM.superclass.Init.apply(this, arguments);
   
               var JSON_CONFIG = {
                   "imports": [],
                   "container": "",
                   "variables": {},
                   "component": "...",
                   "attributes": {},
                   "children": []
               };
   
               this.AddProperty("SEBL_COMPONENT_CONFIG", JSON_CONFIG);
           };
   
           return CustomViewPM;
       }());
   
       return SiebelAppFacade.CustomViewPM;
   });
   

Manifest Configuration

The view or applet, depending on what configuration the developer is writing, must be configured in the manifest so that the correct custom PM is loaded.