Sample JSON Structure for UI Definition

The SEBL_COMPONENT_CONFIG property in the Presentation Model (PM) defines the client-side structure that the Siebel Web Component Framework uses to render a user interface by using Oracle JET components. This JSON specification identifies the component to render, the attributes and bindings to apply, and the child content that must be composed within the layout.

Use this JSON specification to define the structure of a Siebel view or applet declaratively, without requiring user interface rendering logic to be implemented in a Physical Renderer. The framework interprets the JSON definition at run time, resolves the configured bindings to Siebel metadata and data, and then renders the corresponding Oracle JET components.

The following sections describe the properties that you can use in the SEBL_COMPONENT_CONFIG JSON specification.

A sample JSON specification for the Presentation Model property SEBL_COMPONENT_CONFIG appears as follows:

{
  "container": "#optional_container_selector",
  "imports": [],
  "variables": {},
  "componentDef": {},
  "component": "",
  "attributes": {},
  "children": []
}

container

Use the optional container property to specify the DOM selector where the framework must mount the rendered content. If you do not specify this property, then the framework uses the default run-time container behavior for the corresponding object.

Definition of container:
```
{
  "container": "#optional_container_selector"
}
```
imports

Use the imports property to specify the modules that must be loaded before the framework renders the user interface. These modules typically include Oracle JET components and supporting layout modules that are required by the JSON configuration.
Definition of imports:
```
{
  "imports": [
    "oj-sp/foldout-layout/loader",
    "oj-sp/foldout-panel-summarizing/loader",
    "oj-sp/empty-state/loader",
    "oj-sp/horizontal-overview/loader",
    "oj-c/input-text",
    "ojs/ojformlayout"
  ]
}
```
variables

Use the variables property to define key-value pairs that can be referenced anywhere within the configuration by using the $var: syntax.
Definition of variables:
```
{
  "variables": {
    "Applet": "Customer 360 Dashboard Account Form Applet",
    "itemTitle": "Name",
    "StreetAddress": "Street Address",
    "City": "City"
  }
}
```
componentDef

Use the componentDef property to define reusable component configurations within the JSON specification. This property helps you centralize repeated user interface fragments and reuse them across the same configuration instead of redefining the same structure multiple times. Each entry in componentDef defines a reusable component name, the parameters that it accepts, and the configuration that the framework must render when that component is referenced.

You can reference a reusable component that is defined in componentDef by using the $fn:component(...) syntax. Parameter values that are passed to the reusable component can be accessed within the component definition by using the $fn:param(...) syntax.

The config object in componentDef follows the same JSON semantics as the main configuration object. It can contain keys such as variables, component, children, attributes, and other supported configuration properties.

Use $fn:component to reference a reusable component that is defined in componentDef. When the framework evaluates $fn:component(ComponentName), it resolves the corresponding reusable component definition and renders the configuration that is associated with that component.
Definition of componentDef:
```
{
  "componentDef": {
    "ReusableComponent": {
      "params": ["data"],
      "config": {
        "component": "div",
        "children": [
          "$fn:param(data)"
        ]
      }
    }
  }
}
```
component

Use the component property to specify the HTML element, Oracle JET component, applet reference, or registered component that the framework must render.
As an HTML element or Oracle JET component:
```
"component": "oj-sp-foldout-layout"
```
As a reference to an applet:
```
"component": "$Applet:(AppletName)"
```
This syntax indicates that the framework must render the referenced applet at that location in the DOM.
As a reference to a component that is registered in the Model-View Factory:
```
"component": "$fn:component(ComponentName)"
```
This syntax indicates that the framework must render a special component that is registered in the Model-View Factory.

Note: Older configurations might use $WebComp:(ComponentName), such as $WebComp:(TextModelView), to reference a registered component. This syntax is retained for backward compatibility, but for new configurations use $fn:component(ComponentName).
attributes

Use the attributes property to define the properties, HTML attributes, and configuration values that the framework must apply to the component that is being rendered. Attribute values can be specified as static values or by using supported binding expressions, depending on the configuration requirement.
Definition of attributes:
```
{
  "attributes": {
    "class": "oj-flex",
    "label-edge": "start"
  }
}
```
children

Use the children property to define the child content that the framework must render within the parent component. The children property can contain static text, nested component definitions, or supported dynamic expressions. This property allows you to build the user interface hierarchically through nested JSON structures.
Definition of children:
```
{
  "children": [
    "Customer Details",
    {
      "component": "div",
      "attributes": {
        "class": "oj-flex-item"
      },
      "children": [
        "Account Name"
      ]
    }
  ]
}
```

Points on Children Definition

The children array can directly take dynamic values, as described earlier, by using both long-form and shorthand syntax.

For rendering content such as the following example, notice that AppletControl-DisplayName becomes the text content in the div tag and AppletControl-Value becomes the text content in the b tag.

<div>
  AppletControl-DisplayName
  <b>
    AppletControl-Value
  </b>
</div>

The corresponding JSON configuration appears as follows:

{
  "children": [
    "$fn:value($, #1, DisplayName)",
    {
      "component": "b",
      "children": [
        "$fn:value($, #1, Value)"
      ]
    }
  ]
}

Dynamic Data Binding with Siebel Open UI

The Siebel Web Component Framework supports dynamic data binding so that JSON configuration can reference Siebel metadata, control values, Presentation Model properties, and derived values at run time. This binding model allows the framework to render content declaratively while continuing to use the Siebel Open UI Presentation Model as the source of data and behavior.

Dynamic binding can be specified by using shorthand syntax for common expressions or long-form syntax for advanced composition. These bindings can be used in properties such as children, attributes, and other configuration nodes where run-time values must be resolved.

Note: The AppletName (AppletPM) or ViewPM can almost always be referenced by using the "$" symbol, which indicates the Presentation Model for which the configuration is being written. This is useful when you do not want to repeat the current applet name and instead want to directly reference the current applet context. The AppletName and ControlName can also often be referenced by using the applet and control index, such as "#1" and "#2". This indicates that the reference uses the View Web Template Item or Applet Web Template Item position rather than the object name.

Shorthand Syntax: Data Binding with Siebel OpenUI

Use shorthand syntax when the binding expression can be represented directly without using a long-form object definition. Shorthand syntax is useful for common binding patterns and keeps the JSON configuration concise and readable.
- literals
  Literals are static values that do not use an Open UI binding expression. A literal can be a string, array, object, Boolean value, or number.
  If the top-level object is a literal, then the entire object hierarchy is treated as a literal.
- $fn:value
  Define binding to get data from an Applet Control. This can be the control's DisplayName, Value, or CanInvoke property.
  Possible syntax:
  - $fn:value(AppletName, ControlName, Value)
  - $fn:value(AppletName, ControlName, DisplayName)
  - $fn:value(AppletName, ControlName, CanInvoke)
  - $fn:value($, ControlName, Value)
  - $fn:value($, #2, DisplayName)
- $fn:property
  Define binding to get data from a PM Property.
  Possible syntax:
  - $fn:property(AppletName, PropertyName)
  - $fn:property($, PropertyName)
  - $fn:property(#1, PropertyName)
Longform Syntax

Use longform syntax when the binding requires additional configuration, multiple inputs, or composition logic that cannot be expressed conveniently through shorthand syntax. In longform syntax, the binding is represented as an object, and the $type property identifies the function that the framework must evaluate.

Longform syntax is useful when you want to build expressions by combining values, passing parameters, mapping arrays, or invoking functions that require named arguments.
- $type
  Use the $type property to identify the binding function that the framework must evaluate for a longform expression. The value of $type determines how the remaining properties in the object are interpreted.
  Definition of $type by using a join function:
```
{
  "$type": "$fn:join",
  "value": [
    "$fn:value($var:Applet, Account Name, DisplayName)",
    "$fn:value($var:Applet, Account Name, Value)"
  ],
  "combiner": ": "
}
```
  The framework evaluates the object according to the function specified in $type.
- $fn:param
  Use $fn:param to access a parameter value that is passed into a reusable component definition or function context. This binding is typically used inside componentDef so that a reusable component can consume values supplied by the caller.
  Possible syntax:
  - $fn:param(ParameterName)
    Example:
```
{
  "componentDef": {
    "ReusableComponent": {
      "params": ["data"],
      "config": {
        "component": "div",
        "children": [
          "$fn:param(data)"
        ]
      }
    }
  }
}
```
- $fn:object
  Use $fn:object to build a dynamic object value within the JSON configuration. This binding is useful when the framework must construct an object at run time by resolving one or more bound values instead of using a fully static literal object.
  In this syntax, the framework evaluates the values that are defined in the object and returns the resulting object for use in the configuration.
  Possible syntax:
  - $fn:object(ObjectDefinition)
    Longform example:
```
{
  "$type": "$fn:object",
  "value": {
    "label": "$fn:value($, Account Name, DisplayName)",
    "value": "$fn:value($, Account Name, Value)"
  }
}
```
    In this example, the framework evaluates the bound values and returns an object that contains the resolved label and value.
- $fn:array
  Use $fn:array to build a dynamic array value within the JSON configuration. This binding is useful when the framework must construct an array at run time by resolving one or more bound values instead of using a fully static literal array.
  In this syntax, the framework evaluates the values that are defined in the array and returns the resulting array for use in the configuration.
  Possible syntax:
  - $fn:array(ArrayDefinition)
    Longform example:
```
{
  "$type": "$fn:array",
  "value": [
    "$fn:value($, FirstName, Value)",
    "$fn:value($, LastName, Value)",
    "$fn:value($, Email, Value)"
  ]
}
```
    In this example, the framework evaluates the bound values and returns an array that contains the resolved values.
- $fn:map
  Use $fn:map to evaluate one or more values and transform them by using a mapper function. This binding is useful when the rendered output must be derived from the source value instead of displayed directly.
  Possible syntax:
  - $fn:map(valueArray, mapperFunction)
    Longform example:
```
{
  "$type": "$fn:map",
  "value": [
    "$fn:value($, FirstName, Value)",
    "$fn:value($, LastName, Value)"
  ],
  "mapper": "$fn:execute($, BuildDisplayName)"
}
```
    This example evaluates multiple values and passes them to the mapper so that the final rendered value can be derived from the source data.
    $fn:map can also accept multiple input values. In this case, the framework evaluates each value in the value array and passes the resolved values to the mapper function so that the final output can be derived from multiple inputs.
    Example:
```
{
  "$type": "$fn:map",
  "value": [
    "$fn:value($, City, Value)",
    "$fn:value($, State, Value)",
    "$fn:value($, Postal Code, Value)"
  ],
  "mapper": "$fn:execute($, BuildAddress)"
}
```
    In this example, the mapper uses multiple resolved values to derive the final rendered output.
- $fn:join
  Use $fn:join to combine multiple values into a single rendered string by using a delimiter or separator. This binding is useful when the displayed value must be composed from multiple fields.
  Possible syntax:
  - $fn:join(valueArray, combiner)
    Longform example:
```
{
  "$type": "$fn:join",
  "value": [
    "$fn:value($var:Applet, Account Name, DisplayName)",
    "$fn:value($var:Applet, Account Name, Value)"
  ],
  "combiner": ": "
}
```
    This example joins the display name and the value into a single string.
- $fn:execute
  Use $fn:execute to invoke a method in the Presentation Model and use the returned value in the JSON configuration. This binding is useful when the rendered value must be computed through custom logic instead of being taken directly from a control or property.
  Possible syntax:
  - $fn:execute(AppletName, MethodName)
  - $fn:execute($, MethodName)
    You can use $fn:execute(...) directly, or as part of another longform binding such as $fn:map.

Example on Dynamic Data

The following table provides JSON configuration samples:

Description	JSON Config	Output
Joining DisplayName and Value of Control	`{ "$type": "$fn:join", "value": ["$fn:value($var:Applet, Account Name, DisplayName)", "$fn:value($var:Applet, Account Name, Value)"], "combiner": ": " }`	Account Name: Acme Corp
Joining City, State, and Postal Code	`{ "$type": "$fn:join", "value": ["$fn:value($var:Applet, City, Value)", "$fn:value($var:Applet, State, Value)", "$fn:value($var:Applet, Postal Code, Value)"], "combiner": ", " }`	San Francisco, CA, 94105
Mapping Status value to badge color	`{ "$type": "$fn:map", "value": ["$fn:value($var:Applet, Status, Value)"], "mapper": "$fn:execute($var:Applet, MapStatusToColor)" }`	danger or warning or another mapped value
Accessing a parameter value by using $fn:param	`"$fn:param(data['Order Number'])"`	1-ABC123
Mapping multiple values by using map	`{ "$type": "$fn:map", "value": ["$fn:value($, FirstName, Value)", "$fn:value($, LastName, Value)"], "mapper": "$fn:execute($, BuildDisplayName)" }`	John Smith
Build Object	`{ "$type": "$fn:map", "value": ["$fn:value($, Account Name, Value)", "$fn:value($, Location, Value)"], "mapper": "$fn:execute($, BuildObject)" }`	Object output returned by the mapper
Build Array	`{ "$type": "$fn:map", "value": ["$fn:value($, Phone, Value)", "$fn:value($, Email, Value)"], "mapper": "$fn:execute($, BuildArray)" }`	Array output returned by the mapper
Mix-and-match	`Combination example that uses shorthand and longform bindings together in the same JSON definition`	Mixed rendered output
Complex One	`Composite example that combines $fn:join, $fn:map, $fn:param, and $fn:execute in one configuration`	Derived composite output

Note: Existing shorthand bindings continue to be supported. Use longform syntax when the binding requires named properties, composition logic, mapper functions, or reusable parameterized configuration. For new JSON definitions, prefer the syntax that best balances readability and functional clarity for the use case.