Configuring a List Layout

The framework provides the capability to render table for a Siebel List Applet (or Hierarchical List Applet) based on JSON configuration embedded within (custom) Presentation Model. To render List, the framework uses Oracle JET Component "oj-table" and hence the JSON configuration can accept attributes specified by the component. The detailed documentation about the OJET form layout component can be found here.

SiebelAppFacade.ListModelViewPM is the base JavaScript PM class for Siebel List Applet to be used with Oracle JET Component. Any custom PM must extend from SiebelAppFacade.ListModelViewPM and declare dependency on "siebel/listmodelviewpm" as part of Define statement.

Let's consider few customizations scenario for rendering a List Applet:

Default List Configuration:

It is possible to simply configure "siebel/listmodelviewpm" as PM for the corresponding List Applet and it can render the List (or Hierarchical List) using Oracle JET Component. In this case, all the column controls configured for List and exposed via related Applet Web Template will be rendered, thus honoring the default configuration.

The framework provides the capability to render ojet table for a Siebel List 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-table.

Example:

The goal is to render a list with overriding new configuration, allowing custom configs for selected columns:
- Change default properties of JET Table, such as editMode, verticalGridVisible, display etc.
  Note: These properties are part of oj-table Documents.
- Update the Data-Column configuration via JSON for properties like headerText, resizable, UIType in Edit or Navigation Mode etc.
  Note: These properties are part of oj-table's columns property doc.
- All the columns configured in the ODH template will be rendered honouring the overriding config for the columns coming from JSON
  
  Here is a sample screenshot of how UI would appear for such use case:
Steps to follow for configuring JET List:
1. Create a custom PM file with the boilerplate code as - naming the PM as MyCustomListPM. Note that the custom PM must extend using ListModelViewPM for Standard Siebel List Applet.
```
define('siebel/mycustomlistpm',["siebel/listmodelviewpm"], function () {
    "use strict";

    SiebelJS.Namespace("SiebelAppFacade.MyCustomListPM");
    SiebelAppFacade.MyCustomListPM = (function () {
        function MyCustomListPM() {
            SiebelAppFacade.MyCustomListPM.superclass.constructor.apply(this, arguments);
        }
        SiebelJS.Extend(MyCustomListPM, SiebelAppFacade.ListModelViewPM);
        MyCustomListPM.prototype.RenderComponent = function () {
            this.AddProperty("SEBL_COMPONENT_CONFIG", JSON_PROPERTY_VALUE);
            SiebelAppFacade.MyCustomListPM.superclass.RenderComponent.apply(this, arguments);
        };

        return MyCustomListPM;
    })();
    return SiebelAppFacade.MyCustomListPM;
});
```
2. 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
  3. For the above record, associate a file "siebel/mycustomlistpm" with it using the Applet Files.
3. Configure JSON
```
{
    editMode: "rowEdit",                // Enables row-level editing mode
    horizontalGridVisible: "enabled",   // Show horizontal grid lines
    verticalGridVisible: "enabled",     // Hide vertical grid lines
    columns: [
        {
            field: "Parent Account Name",
            resizable: "disabled",
            templates: {"Edit": {"UIType": "JText"}}
        }
    ]
};
```
  Note: JSON provides configuration at two levels. At level one it has configuration of JET Table directly from the oj-table configuration options. Level two is the configuration of data columns or non-data columns in "columns" property of JET Table. The rendering of table is handled as per the configuration. If a column is configured as Text Field, it will be rendered as Text - similarly for List of Values or so on.
  
  Example: In the following column configuration, the field “Parent Account Name” is rendered as plain text in Table Navigation mode (overriding the server-side Link type). It uses the primitive web component for UIType “JText” instead of the default “Pick,” and sorting is disabled for this column.
  
  Note: key "field" is mandatory to pass for a data-column config.
```
{
    field: 'Parent Account Name',
    resizable: "disabled",
    templates: {"Edit": {"UIType": "JText"}}
},
```
Data Columns sequence as part of customisation:

It explains how to render a JET Table by overriding the ODH template’s column order and displaying only a selected subset of the template-provided columns.

The goal is to render a list with select columns along with some custom configuration for them:

We will be rendering only the columns which are mentioned in JSON. We will also be honoring the sequence of columns defined in "columns" property in JSON. To achive this we have introduced a top level JSON property "columnsSequenceOverride" we should be set to true.

Note: key "field" is mandatory to pass for a data-column to be part of table and key-value pair "templateName": "actionTemplate" is mandatory for inclusion of "Action Column" in Table.

JSON Config for this scenario will be:
```
const JSON_PROPERTY_VALUE = {
    columnsSequenceOverride: true,      // Override column sequence mentioned in ODH template
    editMode: "rowEdit",                // Enables row-level editing mode
    horizontalGridVisible: "enabled",   // Show horizontal grid lines
    columns: [
        {
            field: "Row Status",
        },
        {
            field: "Name",
            headerText: "Account Name",
        },
        {
            field: "Parent Account Name",
            resizable: "disabled",
            templates: {"Edit": {"UIType": "JText"}}
        },
        {
            field: "Sales Rep"
        },
        {
            field: "Main Phone Number"
        },
        {
            templateName: "actionTemplate"
        }
    ]
};
```
Configuration Tips

As the JET Components documentation targets Knockout-based components, note the following differences when using JET Components with our Preact-based rendering.
1. Prop naming: Convert JET’s kebab-case properties to Camel Case in Preact.
  - Example: vertical-grid-visible → verticalGridVisible
  - Example: selection-mode → selectionMode
2. If we have a property that accept an object, pass either an object literal or a backticked JSON string.
  - Example (preferred): selectionMode={anObject}, anObject will have key 'row' or/and 'column' .
Further customization of columns can be done using attribute configurations via the Oracle JET Columns configurations.