Sample JSON Structure for UI Definition

A sample JSON spec for the PM property ("SEBL_COMPONENT_CONFIG") would appear as below:

{
	"imports": [
		"...",
		"..."
	],
	"variables": {
		"key": "value"
	},
    "container": "...",
 	"component": "div",
	"attributes" {
		"class": "siebui-applet-title"
	},
	"children": [
		{
			"component": "...",
			"attributes": { ... },
			"children": [ { ... }, { ... } ]
		}
	]
}

The various properties in JSON specifications are as:

imports:

Define List of Strings of required modules to be loaded for the 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:

Define key-value pair that can be referenced anywhere within the configuration using the `$var`:

Definition of variables:

{	
	"variables": {
        "Applet": "Customer 360 Dashboard Account Form Applet",
        "itemTitle": "Name",
        "StreetAddress": "Street Address",
        "City": "City"
	}
}

container: Ideally, this is not a required field. DOM element selector can be defined where the component will be rendered.

If not defined, the default selector is used. For example, "container":"#s_A2_div".
JSON specifications configuration Recursive at N-levels
- component
  1. The Component (e.g. div, oj-sp-foldout-layout)
    - "component": "oj-sp-foldout-layout"
  2. or, Reference to Applet
    1. "component": "$Applet(AppletName)"
    2. This means that we want to do the applet rendering at that place in the DOM.
  3. or, Reference to a component registered in Model-View Factory
    1. "component": "$WebComp:(ComponentName)"
    2. This means that it is a special component registered in the ModelView factory.
    3. The "attributes" defined will be passed as prop to the defined component.
- attributes:
  - A Pair of HTML attribute key and value which the component expects (more on this in later sections).
Dynamic Data Binding with Siebel OpenUI
- Shorthand Syntax: Data Binding with Siebel OpenUI
  Note: The AppletName (AppletPM) (or ViewPM) can almost always be referenced with " $ " symbol which signifies the PM you are writing the configuration for. This is helpful when you don't want to write the current AppletName again and can just directly reference the Applet context in which the configuration is written for.
  The places where the AppletName can't be referenced will be called out in the documentation below.
  The AppletName and ControlName can almost always be referenced via the Applet and Control index ( eg. " #1 ", " #2 ") this signifies that we are interested in the Applet and Control not by their name but by the View Web-Template Item and Applet Web-Template Item, although this feature is not complete yet.
  1. literals
    1. Literals are static values which is not a Open UI binding, it can be a string, array, object, boolean, number.
    2. If the top level object is a literal, the whole object hierarchy is treated as literal.
  2. $fn:value
    1. Define binding to get data from an Applet Control, this can be the controls DisplayName, Value, CanInvoke property.
    2. 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)
  3. $fn:property
    1. Define binding to get data from a PM Property.
    2. Possible Syntax:
      
      $fn:property(AppletName , PropertyName)
      
      $fn:property($ , PropertyName)
      
      $fn:property(#1 , PropertyName)
  4. $fn:execute
    1. Define binding to execute a Control Method or PM Method.
    2. This will also be used for Business Service execution binding.
    3. Possible Syntax:
      
      $fn:execute(AppletName , ControlName)
      
      $fn:execute(AppletName , PMMethodName)
      
      $fn:execute(AppletName , #2)
      
      $fn:execute(#1 , #2)
      
      $fn:execute($ , PMMethodName)
  5. $fn:Applet
    1. Define binding to reference to some PM.
    2. Used inside attributes definition then it gets resolved to the Applet's PM.
    3. Possible Syntax:
      
      $fn:Applet(AppletName)
      
      $fn:Applet($)
- Longform Syntax: Functions for combining / building / manipulating dynamic data
  The Placeholder, <Can be any dynamic value from ShortHand or LongForm Syntax> indicates that you can use any value. For example:
  - $fn:execute( AppletName, MethodName )
  - $fn:property( AppletName, PropertyName )
  - $fn:Applet( AppletName )
  - $fn:value( AppletName, ControlName, CanInvoke )
  - { "$type": "$fn:join", "value": [ ... ], "combiner" : ", " }
  - { "$type": "$fn:map", "value": "...", "mapper" : "$fn:execute($, SomePMMethod)" }
  1. $type: It is a decision factor to know if the defined data is a dynamic data or static data.
  2. join
    1. Value needs to be constructed from a list of element
    2. combiner: : specify the combiner (e.g. use space to join the list of element)
    3. join definition:
```
{
          "$type": "$fn:join",
          "value": [
            "<Can be any dynamic value from ShortHand or LongForm Syntax>",
            "<Can be any dynamic value from ShortHand or LongForm Syntax>"
          ],
          "combiner": ", "
   }
```
  3. map
    1. Value gets mapped to another value using the defined mapper.
    2. map definition:
```
{
          "$type": "$fn:map",
          "value": "<Can be any dynamic value from ShortHand or LongForm Syntax>",
          "mapper": "$fn:execute($, SomePMMethod)"
        }
```
  4. object
    1. An object constructed from dynamic values.
    2. object definition:
```
{
          "$type": "$fn:object",
          "value": {
            "key1": "<Can be any dynamic value from ShortHand or LongForm Syntax>",
            "key2": "<Can be any dynamic value from ShortHand or LongForm Syntax>"
          }
        }
```
  5. array
    1. An array constructed from dynamic values
    2. array definition:
```
{
          "$type": "$fn:array",
          "value": [
            "<Can be any dynamic value from ShortHand or LongForm Syntax>",
            "<Can be any dynamic value from ShortHand or LongForm Syntax>"
          ]
        }
```

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`
Build Address from City, State and Postal	`{ "$type": "$fn:join", "value": [ "$fn:value($var:Applet, City, Value)", "$fn:value($var:Applet, State, Value)", "$fn:value($var:Applet, Postal Code, Value)" ], "combiner": ", " }`	`Redwood Shores, CA, 94065`
Map Status value to oj-badge color	`{ "$type": "$fn:map", "value": "$fn:value($var:Applet, Status, Value)", // MapStatusToColor Method returns "danger", "warning", etc. "mapper": "$fn:execute($var:Applet, MapStatusToColor)" }`	danger
Build Object	`{ "$type": "$fn:object", "value": { "id": "$fn:value($var:Applet, Id, Value)", "name": "$fn:value($var:Applet, Account Name, Value)", "canSubmit": "$fn:value($var:Applet, Submit, CanInvoke)" } }`	`{ "id": "1-ABC123", "name": "Acme Corp", "canSubmit": true }`
Build Array	`{ "$type": "$fn:array", "value": [ "$fn:value($, Phone #, Value)", "$fn:value($, Email Address, Value)", "$fn:value($, Website, Value)" ] }`	`[ "+1 650 123 4567", "info@acme.com", "https://www.acme.com" ]`
Mix-and-match	`{ "$type": "$fn:object", "value": { "title": { "$type": "$fn:join", "value": [ "$fn:value($, Account Name, Value)", "$fn:value($, Status, Value)" ], "combiner": " • " }, "badgeColor": { "$type": "$fn:map", "value": "$fn:value($, Status, Value)", "mapper": "$fn:execute($, MapStatusToColor)" } } }`	`{ "title": "Acme Corp • Active", "badgeColor": "success" }`
Complex One	{ "$type": "$fn:object", "value": { "header": { "$type": "$fn:join", "value": [ "$fn:value($, Account Name, Value)", { "$type": "$fn:join", "value": [ "$fn:value($, Status, Value)", "$fn:property($, Tier)" ], "combiner": " \| " } ], "combiner": " — " }, "meta": { "$type": "$fn:object", "value": { "id": "$fn:value($, Id, Value)", "view": "$fn:property($, ViewName)" } }, "canActions": { "$type": "$fn:object", "value": { "canEdit": "$fn:value($, EditMethod, CanInvoke)", "canDelete": "$fn:value($, DeleteMethod, CanInvoke)" } }, "primaryAction": { "$type": "$fn:object", "value": { "label": "$fn:value($, Pay Bill, DisplayName)", "invoke": "$fn:execute($, Pay Bill)" } }, "badges": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "label": "$fn:value($, Industry, DisplayName)", "value": "$fn:value($, Industry, Value)" } }, { "$type": "$fn:object", "value": { "label": "$fn:value($, Revenue, DisplayName)", "value": "$fn:value($, Revenue, Value)", "color": { "$type": "$fn:map", "value": "$fn:value($, Revenue, Value)", "mapper": "$fn:execute($, RevenueToColor)" } } } ] }, "contacts": { "$type": "$fn:map", "value": "$fn:property($, PrimaryContacts)", "mapper": "$fn:execute($, NormalizeContacts)" } } }	{ "header": "Acme Corp — Active \| Gold", "meta": { "id": "1-ABC123", "view": "Account Detail View" }, "canActions": { "canEdit": true, "canDelete": false }, "primaryAction": { "label": "Pay Bill", "invoke": "OK" }, "badges": [ { "label": "Industry", "value": "Manufacturing" }, { "label": "Revenue", "value": "$12,000,000", "color": "success" } ], "contacts": [ { "name": "Jane Doe", "role": "Primary", "phone": "+1 650 111 2222" }, { "name": "John Roe", "role": "Billing", "phone": "+1 650 333 4444" } ] }

Points on Children Definition

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

For rendering something like the following, notice that AppletControl-DisplayName becomes the text content in the div, and AppletControl-Value is the text content in the b tag.

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

The configuration looks like this,

{
            "component": "div",
            "children": [
                // The below can be full fledged long form syntax with $fn:join, $fn:map and others
                "$fn:value($, Control, DisplayName)",
                " ",
                {
                    "component": "b",
                    "children": [
                        "$fn:value($, Control, Value)"
                    ]
                }
            ]
        }