Configuring a Form Layout

The framework provides the capability to render a responsive form layout for a Siebel form applet based on JSON configuration embedded within a custom Presentation Model (PM). The JSON configuration uses the configuration options that are supported by the Oracle JET oj-c-form-layout component.

The framework also provides additional attributes that help bind Siebel applet controls to the configured layout. Use this configuration to define the structural layout of the form, while the rendering of individual controls continues to follow the corresponding Siebel control configuration.

The detailed documentation for the Oracle JET form layout component is available in the Oracle JET documentation. The following examples describe common customization use cases for configuring a form layout.

To configure form layout:

Create a custom Presentation Model (PM) file for the Siebel form applet. The custom PM must extend FormModelViewPM, which provides the base framework behavior for rendering a Siebel form applet through the Web Component Framework.

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.Init = function () {
            SiebelAppFacade.SimpleFormLayoutPM.superclass.Init.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 file "siebel/simpleformlayoutpm" with it by using the Applet "Files".
Review the JSON configuration. The following examples describe common customization use cases.

For more information, see the detailed documentation for the Oracle JET form layout component. The framework also provides additional attributes for binding with Siebel applet controls.

SiebelAppFacade.FormModelViewPM is the base JavaScript Presentation Model (PM) class for a Siebel form applet that is used with an Oracle JET component. Any custom PM must extend SiebelAppFacade.FormModelViewPM and declare dependency on siebel/formmodelviewpm as part of the define statement.
1. Use All Applet Controls
  
  Provide the following JSON specification to render a responsive form layout by using all applet controls that are mapped to the form applet:
```
{
  "reuseHeaderFooter": true,
  "maxColumns": 3,
  "direction": "row",
  "labelEdge": "inside",
  "userAssistanceDensity": "compact"
}
```
  The reuseHeaderFooter property is a Siebel-specific property. If it is set to true, then the header and footer template are reused and rendered through FormTemplateRenderer. If it is set to false, then the full form container is replaced.
  
  The properties maxColumns, direction, labelEdge, and userAssistanceDensity are configuration attributes of the Oracle JET oj-c-form-layout component.
  
  With this JSON configuration, the framework renders all applet controls that are configured for the applet in a responsive three-column layout.
2. Selective Controls or Client-side Layout Order Rendering
  
  The framework provides the layout attribute in the JSON specification to define the order in which the framework must place controls in the form layout. Use this attribute when you want to render only selected applet controls or when you want to control the client-side layout order explicitly.
  
  For example, the following JSON specification renders the applet controls that are identified through the field attribute in a responsive three-column form layout:
```
{
  "maxColumns": 3,
  "direction": "row",
  "labelEdge": "inside",
  "layout": [
    { "field": "Name" },
    { "field": "Designation" },
    { "field": "Email" },
    { "field": "Phone #" }
  ]
}
```
  The layout attribute accepts an array of objects. Each object in the array can map either to an applet control or to a nested form layout. When the type attribute is set to control, the field attribute is mapped to the corresponding Siebel applet control. When the type attribute is set to form, the object defines a nested form layout.
  
  The default value of the type attribute is control. Therefore, you can omit the type attribute when the entry maps directly to an applet control.
3. Expand Applet Control across columns
  
  The Oracle JET oj-c-form-layout component provides the capability to span a user interface control across multiple columns. Use the columnSpan attribute when a control must occupy more than one column in the responsive form layout.
  
  For example, the following JSON configuration indicates that the applet control Name must span two columns in a responsive two-column layout. In this case, the second row of the layout contains the Designation and Email controls.
```
{
  "maxColumns": 2,
  "direction": "row",
  "labelEdge": "inside",
  "layout": [
    { "field": "Name", "columnSpan": 2 },
    { "field": "Designation" },
    { "field": "Email" }
  ]
}
```
4. Nested Form Layout
  
  Use a nested form layout when a section of the overall form must be rendered as a separate form structure within the parent layout. In this case, set the type attribute to form and define a nested layout array for that section.
  The following example shows a responsive form layout that contains nested form sections:
```
{
  "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": "Street Address" },
        { "field": "City" },
        { "field": "State" },
        { "field": "Postal Code" }
      ]
    },
    {
      "type": "form",
      "layout": [
        { "field": "Work Phone #" },
        { "field": "Fax #" }
      ]
    }
  ]
}
```
  In this example, each object with type set to form defines a nested form layout within the parent form. This approach lets you create more complex responsive form structures while continuing to use the same JSON layout model.
  
  It is recommended that the JSON configuration use index-based mapping as much as possible so that a form layout can be reused for similar configurations. The JSON configuration defines only the structural layout of the responsive form. The rendering of each control depends on the Siebel control configuration and the control type that is mapped at run time.
5. Simple Form Section
  
  Use a simple form section when the form layout must group related controls into separate sections within the same responsive form. This approach is useful when the user interface must organize controls into functional sections while keeping the configuration easy to read and maintain.
```
{
  "maxColumns": 4,
  "direction": "row",
  "userAssistanceDensity": "compact",
  "layout": [
    {
      "type": "form",
      "columnSpan": 2,
      "maxColumns": 2,
      "layout": [
        { "field": "HTML Label 2", "columnSpan": 2, "uiType": "Label" },
        { "field": "SRNumber" },
        { "field": "Description" }
      ]
    },
    {
      "type": "form",
      "columnSpan": 2,
      "maxColumns": 2,
      "layout": [
        { "field": "Status" },
        { "field": "Priority" },
        { "field": "Owner" }
      ]
    }
  ]
}
```
  In this example, each section is defined as a nested form layout within the parent form. This configuration helps organize related controls into separate sections while continuing to use the same responsive layout model.
6. Multilevel Form Section
  
  Use a multilevel form section when the form layout must contain multiple nested form sections within the parent form. This approach is useful when the user interface must group related controls into separate logical sections while still preserving a responsive overall layout.
  The following example shows a multilevel form section configuration:
```
{
  "maxColumns": 4,
  "direction": "row",
  "userAssistanceDensity": "compact",
  "layout": [
    {
      "type": "form",
      "columnSpan": 2,
      "maxColumns": 2,
      "layout": [
        { "field": "HTML Label 2", "columnSpan": 2, "uiType": "Label" },
        { "field": "SRNumber" },
        {
          "type": "form",
          "columnSpan": 2,
          "maxColumns": 2,
          "layout": [
            { "field": "Status" },
            { "field": "Priority" }
          ]
        }
      ]
    },
    {
      "type": "form",
      "columnSpan": 2,
      "maxColumns": 2,
      "layout": [
        { "field": "Owner" },
        { "field": "Organization" }
      ]
    }
  ]
}
```
  In this example, the parent form contains multiple nested form sections, and some of those sections contain additional nested form layouts. This configuration helps organize complex form content into logical groups while continuing to use the same JSON-based layout model.