Configuring a Form Layout

The framework provides the capability to render responsive form layout for a Siebel Form Applet based on JSON configuration embedded within (custom) Presentation Model. The JSON configuration is simply the set of configuration options provided by the JET component oj-c-form-layout.

To configure Form Layout:

Create a custom PM file with the boilerplate code as, naming the PM as SimpleFormLayoutPM.

Note: The custom PM must extend using FormModelViewPM for Standard Siebel Form Applet.

define('siebel/simpleformlayoutpm', ['siebel/formmodelviewpm'], function () {
    SiebelJS.Namespace("SiebelAppFacade.SimpleFormLayoutPM");
    SiebelAppFacade.SimpleFormLayoutPM = (function () {
        function SimpleFormLayoutPM() {
            SiebelAppFacade.SimpleFormLayoutPM.superclass.constructor.apply(this, arguments);
        }

        SiebelJS.Extend(SimpleFormLayoutPM, SiebelAppFacade.FormModelViewPM);

        SimpleFormLayoutPM.prototype.RenderComponent = function () {
            this.AddProperty("SEBL_COMPONENT_CONFIG", JSON_PROPERTY_VALUE);
            SiebelAppFacade.SimpleFormLayoutPM.superclass.RenderComponent.apply(this, arguments);
        };

        return SimpleFormLayoutPM;
    })();

    return SiebelAppFacade.SimpleFormLayoutPM;
});

Go to the Manifest Administration View to configure the manifest.
1. Create a new entry in Applet "UI Objects":
  - Type: Applet
  - Usage Type: Presentation Model
  - Name: <Applet Name>
2. Create a record in "Object Expression" Applet:
  - Expression: "Redwood Theme"
  - Level: 1
For the above record, associate a file "siebel/simpleformlayoutpm" with it using the Applet "Files". Make sure that "siebel/simpleformalyoutpm" is already added in Files View.
Review the JSON configuration. You can find the configuration details for each use case below.
For more information, you can find the detailed documentation about the Oracle JET form layout component here. The framework also provides additional attributes for binding with Siebel Applet Controls.
Now, let’s review a few customization use cases:
SiebelAppFacade.FormModelViewPM is the base JavaScript Presentation Model (PM) class for Siebel Form Applet to be used with Oracle JET Component. Any custom PM must extend from SiebelAppFacade.FormModelViewPM and declare dependency on "siebel/formmodelviewpm" as part of the define statement.
1. 1. Use All Applet Controls: Provide following JSON specification for rendering the responsive form layout using all applet control mapped to Form Applet:
```
{              
	  "reuseHeaderFooter": true    
	  "maxColumns": 3,
         "direction": "row",
         "labelEdge": "inside",
   "userAssistanceDensity": "compact"
}
```
    Properties "maxColumns" (indicates number of columns), "direction" (indicates ordering of controls in row-first fashion), "labelEdge" (indicates placement of label for the UI controls) and "userAssistanceDensity" (indicates density of user assistance presentation) are the attributes specified for Oracle JET form layout component "oj-c-form-layout".
    With the above JSON, the framework can render all Applet Controls configured with the Applet in three column responsive layout.
  2. Selective Controls or Client-side Layout Order Rendering: The framework provides "layout" attribute in the JSON specification to provide the layout order which framework can use to place the controls. For example, the following JSON spec can simply render Applet controls specified with "field" attribute in three column responsive form layout.
```
{              
    "maxColumns": 3,
    "direction": "row",
    "labelEdge": "inside",
    "userAssistanceDensity": "compact",
    "layout": [
        {
            "type": "control",
            "field": "Name"
        },
        {
            "type": "control",
            "field": "Designation",
        },
        {
            "type": "control",
            "field": "Email",
        },
        {
            "type": "control",
            "field": "Phone #",
        },
        {
            "type": "control",
            "field": "State"
        },
        {
            "type": "control",
            "field": "Country",
        }
]};
```
    The attribute "layout" accepts array of objects. Each object in array can map to either Applet Control or nested Form Layout. When type is "control", it is assumed that field will be mapped to appropriate Siebel Applet Control. When "type" value is "form", the attributes will be used to generate nested form layout. Note that the default value for attribute "type" is control and hence it can be omitted from the above JSON configuration.
  3. Expand Applet Control across columns: Oracle JET form layout component provides the capability to span/expand UI component across columns. To achieve this, we must use "columnSpan" attribute (refer API spec of oj-c-form-layout). For example: The following JSON configuration indicates that Applet Control "Name" must span across two columns in the responsive two column layout. In this case, second row of layout will have "Designation" and "Email" control.
```
{              
    "maxColumns": 2,
    "direction": "row",
    "labelEdge": "inside",
    "userAssistanceDensity": "compact",
    "layout": [
        {
            "type": "control",
            "field": "Name",
            "columnSpan": 2
        },
        {
            "type": "control",
            "field": "Designation",
        },
        {
            "type": "control",
            "field": "Email",
        }
]};
```
    Use Index value instead of Control Name: Framework also provides the capability to map Applet control using the Index value as well. For example, if the index value of Siebel Applet Control is "10", we can provide JSON spec as (depicting only relevant part).
```
{
            "type": "control",
            "field": "#10",
            "columnSpan": 3
 }
```
  4. Nested Form:
```
{
  "maxColumns": 3,
  "direction": "row",
  "labelEdge": "inside",
  "userAssistanceDensity": "compact",
  "layout": [
    {
      "field": "M/M"
    },
    {
      "field": "Full Name Title",
      "columnSpan": 2
    },
    {
      "type": "form",
      "columnSpan": 2,
      "direction": "column",
      "layout": [
        {
          "field": "Personal City",
          "columnSpan": 2
        },
        {
          "field": "Personal Country"
        }
      ]
    },
    {
      "type": "form",
      "direction": "column",
      "layout": [
        {
          "field": "EmailAddress"
        },
        {
          "field": "WorkPhoneNum"
        }
      ]
    }
  ]
}
```
  It is recommended that JSON config must be created using Index based mapping as much as possible, so that a form layout can be re-used for similar configuration.
  
  Note:
  JSON provides only the structural layout of how the responsive form should appear. The rendering of control is handled as per the configuration. If a control is configured as Text Field, it will be rendered as Text - similarly for List of Values or so on.
  The UI controls react proactively to any state change (values, enabled/disabled etc) when triggered via Siebel OpenUI. It is strongly recommended not to handle any specific DOM manipulation or events via the PM. If need be, it must be done in corresponding JET component or customisation of JET components.
  The responsibilities of PM should be to provide sufficient bindings to JET components and handle events from it.