Configuring a Foldout Layout
This example will provide the details of configuring a functional (logical) Presentation Model (PM) component that interfaces with the Oracle JET (oj-sp-foldout-layout) component to render a Siebel Foldout Layout View.
Sample UI :
Configuring JSON
-
Use Json Template with 5 panels
Foldout Layout Json Template:{ "imports": [ "ojs/ojinputsearch", "oj-sp/foldout-layout/loader", "oj-sp/foldout-panel-summarizing/loader", "oj-sp/empty-state/loader", "oj-sp/horizontal-overview/loader", "ojs/ojlabelvalue", "oj-c/input-text", "ojs/ojformlayout", "siebel/listItemmodelview" ], "variables": { "Applet1": "<Applet Name #1>", //You can give different meaningful variable name. If you are using different variable name, make sure you modified in all the places. This applies to all the variables "Applet2": "<Applet Name #2>", "Applet3": "<Applet Name #3>", "Applet4": "<Applet Name #4>", "Applet5": "<Applet Name #5>", "Applet6": "<Applet Name #6>", "Applet7": "<Applet Name #7>", "AppletTitle": "<Siebel control to fetch for title (Note: Try to use same control name accross all the above applets. This will reduce configuring multiple variables for titles for different applets)>", "ViewAll": "<Siebel control to fetch for title (Note: Try to use same control name accross all the above applets. This will reduce configuring multiple variables for ViewAll for different applets)>", "PayBill": "<Siebel control for pay bill>" }, "component": "oj-sp-foldout-layout", "attributes": { "orientation": "horizontal", "displayMode": "light", "animate": "auto", "displayOptions": { "goToParent": false, "inFlowBack": true } }, "children": [ { "component": "div", "attributes": { "slot": "overview" }, "children": [ { "component": "$Applet:($var:Applet1)" } ] }, { "component": "div", "attributes": { "slot": "search" }, "children": [ { "component": "$Applet:()" } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet2,$var:ViewAll)", "secondaryActions": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:AppletTitle" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:AppletTitle,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } }, { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:ViewAll" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:ViewAll,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } } ] }, "onspAction": "$fn:execute($,SecondaryActionsHandler)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet2)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "info" }, "columns": [ { "overlineText": "", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "SR Number", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Updated", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet3,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet3,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet3,$var:ViewAll)", "secondaryActions": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet3", "$var:ViewAll" ], "combiner": ":" }, "label": "$fn:value($var:Applet3,$var:ViewAll,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet3,$var:ViewAll,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } } ] }, "onspAction": "$fn:execute($,SecondaryActionsHandler)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$Applet:($var:Applet3)" } ] }, { "component": "div", "attributes": { "slot": "recommendation" }, "children": [ { "component": "$Applet:($var:Applet7)" } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet4,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet4,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet4,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet4)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Order Number", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Last Updated Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet5,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet5,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet5,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet5)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "Asset Number", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Product Name", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Start Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet6,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet6,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet6,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet6)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "", //Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Description", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "Type Image", // Modify the value with siebel control name the one you want to display as per requirement "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] } ] } -
Add all the OJET components you plan to use under the imports object.
-
Declare all variables, such as Applets and controls with names common across different panels within the variables object.
-
Set the value of component to oj-sp-foldout-layout.
-
For the oj-sp-foldout-layout, specify all relevant attribute values (such as orientation, displayMode, animate, and displayOptions) within the attributes object.
-
Add applets or other OJET components under the children array object. The oj-sp-foldout-layout component supports three slots: overview, search, and default. In this case, only the overview and default slots will be used.
- Create a JSON object for each slot and add them to the children array.
- The overview slot should contain the oj-sp-horizontal-overview component, while the default slot should contain the oj-sp-foldout-panel-summarizing component.
Following is a payload snippet for configuring the foldout-layout JSON. In this configuration, you need to set the Applet name (e.g., Applet1) as the value of the component attribute.
For Slot – Overview
- The overview slot is configured with the oj-sp-horizontal-overview component,
which is implemented in a separate web component file named
horizontaloverviewwebcomponent.js. For details on configuring the horizontal overview applet, refer to the section Configuring JSON for Horizontal Overview Web Component. - After configuring the horizontal overview applet, configure the oj-sp-foldout-panel-summarizing OJET component. See the snippet below from the foldout-layout template JSON.
{ "component": "div", "attributes": { "slot": "overview" }, "children": [ { "component": "$Applet:($var:Applet1)" } ] }Default Slot with OJET Component
- Add multiple JSON objects for the oj-sp-foldout-panel-summarizing component.
- Update the Siebel control name as indicated in the comments. Modify the value to match the Siebel control name you want displayed, as required in the foldout-layout JSON template.
- Set the property AddProperty to
"SEBL_COMPONENT_CONFIG".
{ "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet2,$var:ViewAll)", "secondaryActions": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:AppletTitle" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:AppletTitle,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } }, { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:ViewAll" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:ViewAll,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } } ] }, "onspAction": "$fn:execute($,SecondaryActionsHandler)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet2)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "info" }, "columns": [ { "overlineText": "", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "SR Number", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Updated", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }
-
Set config JSON to property SEBL_COMPONENT_CONFIG::
this.AddProperty("SEBL_COMPONENT_CONFIG", { "imports": [ "ojs/ojinputsearch", "oj-sp/foldout-layout/loader", "oj-sp/foldout-panel-summarizing/loader", "oj-sp/empty-state/loader", "oj-sp/horizontal-overview/loader", "ojs/ojlabelvalue", "oj-c/input-text", "ojs/ojformlayout", "siebel/listItemmodelview" ], "variables": { "Applet1": "<Applet Name #1>", //You can give different meaningful variable name. If you are using different variable name, make sure you modified in all the places. This applies to all the variables "Applet2": "<Applet Name #2>", "Applet3": "<Applet Name #3>", "Applet4": "<Applet Name #4>", "Applet5": "<Applet Name #5>", "Applet6": "<Applet Name #6>", "Applet7": "<Applet Name #7>", "AppletTitle": "<Siebel control to fetch for title (Note: Try to use same control name accross all the above applets. This will reduce configuring multiple variables for titles for different applets)>", "ViewAll": "<Siebel control to fetch for title (Note: Try to use same control name accross all the above applets. This will reduce configuring multiple variables for ViewAll for different applets)>", "PayBill": "<Siebel control for pay bill>" }, "component": "oj-sp-foldout-layout", "attributes": { "orientation": "horizontal", "displayMode": "light", "animate": "auto", "displayOptions": { "goToParent": false, "inFlowBack": true } }, "children": [ { "component": "div", "attributes": { "slot": "overview" }, "children": [ { "component": "$Applet:($var:Applet1)" } ] }, { "component": "div", "attributes": { "slot": "search" }, "children": [ { "component": "$Applet:()" } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet2,$var:ViewAll)", "secondaryActions": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:AppletTitle" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:AppletTitle,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:AppletTitle,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } }, { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet2", "$var:ViewAll" ], "combiner": ":" }, "label": "$fn:value($var:Applet2,$var:ViewAll,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet2,$var:ViewAll,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } } ] }, "onspAction": "$fn:execute($,SecondaryActionsHandler)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet2)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "info" }, "columns": [ { "overlineText": "", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "SR Number", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Updated", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet3,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet3,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet3,$var:ViewAll)", "secondaryActions": { "$type": "$fn:array", "value": [ { "$type": "$fn:object", "value": { "id": { "$type": "$fn:join", "value": [ "$var:Applet3", "$var:ViewAll" ], "combiner": ":" }, "label": "$fn:value($var:Applet3,$var:ViewAll,DisplayName)", "icon": "oj-ux-ico-actions", "display": { "$type": "$fn:map", "value": "$fn:value($var:Applet3,$var:ViewAll,CanInvoke)", "mapper": "$fn:execute($,BooleanToOnDisabled)" } } } ] }, "onspAction": "$fn:execute($,SecondaryActionsHandler)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$Applet:($var:Applet3)" } ] }, { "component": "div", "attributes": { "slot": "recommendation" }, "children": [ { "component": "$Applet:($var:Applet7)" } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet4,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet4,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet4,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet4)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Order Number", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Last Updated Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet5,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet5,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet5,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet5)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "Asset Number", // Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Product Name", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Start Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "", "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] }, { "component": "oj-sp-foldout-panel-summarizing", "attributes": { "panelTitle": "$fn:value($var:Applet6,$var:AppletTitle,DisplayName)", "overflowActionLabel": "$fn:value($var:Applet6,$var:ViewAll,DisplayName)", "onspOverflowAction": "$fn:execute($var:Applet6,$var:ViewAll)" }, "children": [ { "component": "div", "attributes": {}, "children": [ { "component": "$WebComp:(ListItemModelView)", "attributes": { "pm": "$fn:Applet($var:Applet6)", "config": { "displayOptions": { "columnLayout": "one", "badgeSize": "medium" }, "selector": { "selectionMode": "single" }, "navigationAction": { "display": "on", "applyTo": "column1-primary" }, "badge": { "text": "Status", "position": "trailing", "style": "subtle", "status": "success| info | warning | error" }, "columns": [ { "overlineText": "", //Modify the value with siebel control name the one you want to display as per requirement "primaryText": "Description", // Modify the value with siebel control name the one you want to display as per requirement "secondaryText": "Date", // Modify the value with siebel control name the one you want to display as per requirement "tertiaryText": "", "metaText": "", "avatar": "Type Image", // Modify the value with siebel control name the one you want to display as per requirement "icon": { "class": "", "altText": "", "circleColor": "neutral" } } ], "primaryActions": { "display": "off", "control": {} }, "secondaryActions": [ { "display": "off", "control": {} } ] } } } ] } ] } ] })
Horizontal Overview JSON Template
-
Ensure all OJET components you plan to use are included under the imports object.
-
Declare all variables, such as those for Applets and control names within the variables object.
-
Set the component value to oj-sp-horizontal-overview.
-
Specify values for attributes such as id, itemTitle, displayMode, displayOptions, translations, badge, and onspShowDetails under the attributes object.
-
Add OJET components to the children array. The oj-sp-horizontal-overview component supports two slots: contextualInfo and search. In this case, only these two slots will be used.
-
Create a JSON object for each slot and add it to the children array, following the format shown in the template above.
-
Configure the contextualInfo slot, then configure the search slot using the oj-sp-smart-search component.
-
Update the Siebel control name as directed in the comments (modify the value to display the required Siebel control name according to the JSON template).
- Set the AddProperty to
"SEBL_COMPONENT_CONFIG".
{ "imports": [ "oj-sp/horizontal-overview/loader", "oj-sp/smart-search/loader", "ojs/ojlabelvalue", "ojs/ojformlayout" ], "variables": { "Applet": "<Applet Name>", "itemTitle": "Name", //Modify the value with siebel control name the one you want to display as per requirement "Status": "Status", //Modify the value with siebel control name the one you want to display as per requirement "AccountNumber": "Account Number", //Modify the value with siebel control name the one you want to display as per requirement "StreetAddress": "Address1", //Modify the value with siebel control name the one you want to display as per requirement "EmailAddress": "Main Email Address", //Modify the value with siebel control name the one you want to display as per requirement "PhoneNumber": "Main Phone Number", //Modify the value with siebel control name the one you want to display as per requirement "ButtonAccountDetails": "ButtonAccountDetails" //Modify the value with siebel control name the as per requirement }, "component": "oj-sp-horizontal-overview", "attributes": { "id": { "$type": "$fn:join", "value": [ "$var:Applet", "$var:ButtonAccountDetails" ], "combiner": ":" }, "itemTitle": "$fn:value($,$var:itemTitle,Value)", "displayMode": "light", "displayOptions": { "showDetails": "on" }, "translations": { "$type": "$fn:object", "value": { "showDetails": "$fn:value($,$var:ButtonAccountDetails,DisplayName)" } }, "badge": { "$type": "$fn:object", "value": { "text": "$fn:value($,$var:Status,Value)", "status": { "$type": "$fn:map", "value": "$fn:value($,$var:Status,Value)", "mapper": "$fn:execute($,StatusColor)" }, "style": "strong" } }, "onspShowDetails": "$fn:execute($,AccountDetailEvent)" }, "children": [ { "component": "div", "attributes": { "slot": "contextualInfo" }, "children": [ { "component": "oj-form-layout", "attributes": { "className": "oj-formlayout-full-width" }, "children": [ { "component": "div", "attributes": { "className": "oj-flex" }, "children": [ { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end" }, "children": [ "$fn:value($,$var:AccountNumber,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:AccountNumber,Value)" ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:StreetAddress,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ { "$type": "$fn:join", "value": [ "$fn:value($,$var:StreetAddress,Value)" ], "combiner": ", " } ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:EmailAddress,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:EmailAddress,Value)" ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:PhoneNumber,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:PhoneNumber,Value)" ] } ] } ] } ] } ] }, { "component": "div", "attributes": { "slot": "search" }, "children": [ { "component": "oj-sp-smart-search", "attributes": { "askHint": "Create a new service request" } } ] } ] } -
Set config JSON to property SEBL_COMPONENT_CONFIG.
this.AddProperty("SEBL_COMPONENT_CONFIG", { "imports": [ "oj-sp/horizontal-overview/loader", "oj-sp/smart-search/loader", "ojs/ojlabelvalue", "ojs/ojformlayout" ], "variables": { "Applet": "<Applet Name>", "itemTitle": "Name", //Modify the value with siebel control name the one you want to display as per requirement "Status": "Status", //Modify the value with siebel control name the one you want to display as per requirement "AccountNumber": "Account Number", //Modify the value with siebel control name the one you want to display as per requirement "StreetAddress": "Address1", //Modify the value with siebel control name the one you want to display as per requirement "EmailAddress": "Main Email Address", //Modify the value with siebel control name the one you want to display as per requirement "PhoneNumber": "Main Phone Number", //Modify the value with siebel control name the one you want to display as per requirement "ButtonAccountDetails": "ButtonAccountDetails" //Modify the value with siebel control name the as per requirement }, "component": "oj-sp-horizontal-overview", "attributes": { "id": { "$type": "$fn:join", "value": [ "$var:Applet", "$var:ButtonAccountDetails" ], "combiner": ":" }, "itemTitle": "$fn:value($,$var:itemTitle,Value)", "displayMode": "light", "displayOptions": { "showDetails": "on" }, "translations": { "$type": "$fn:object", "value": { "showDetails": "$fn:value($,$var:ButtonAccountDetails,DisplayName)" } }, "badge": { "$type": "$fn:object", "value": { "text": "$fn:value($,$var:Status,Value)", "status": { "$type": "$fn:map", "value": "$fn:value($,$var:Status,Value)", "mapper": "$fn:execute($,StatusColor)" }, "style": "strong" } }, "onspShowDetails": "$fn:execute($,AccountDetailEvent)" }, "children": [ { "component": "div", "attributes": { "slot": "contextualInfo" }, "children": [ { "component": "oj-form-layout", "attributes": { "className": "oj-formlayout-full-width" }, "children": [ { "component": "div", "attributes": { "className": "oj-flex" }, "children": [ { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end" }, "children": [ "$fn:value($,$var:AccountNumber,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:AccountNumber,Value)" ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:StreetAddress,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ { "$type": "$fn:join", "value": [ "$fn:value($,$var:StreetAddress,Value)" ], "combiner": ", " } ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:EmailAddress,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:EmailAddress,Value)" ] } ] }, { "component": "div", "attributes": { "className": "oj-flex-item oj-sm-padding-4x-end oj-typography-body-xs" }, "children": [ "$fn:value($,$var:PhoneNumber,DisplayName)", " ", { "component": "b", "attributes": { "className": "oj-sm-padding-1x-start" }, "children": [ "$fn:value($,$var:PhoneNumber,Value)" ] } ] } ] } ] } ] }, { "component": "div", "attributes": { "slot": "search" }, "children": [ { "component": "oj-sp-smart-search", "attributes": { "askHint": "Create a new service request" } } ] } ] })
Configure View Siebel Manifest
- In Manifest Files, create a new entry:
- Name:
siebel/foldoutlayoutmodelviewpm.js
- Name:
- In Manifest Administration, create a new entry:
- Type: View
- Usage Type: Presentation Model
- Name:
<View Name>
- For the above record, create an entry in Object Expression:
- Expression:
Redwood Theme - Level:
1
- Expression:
- For this record, associate the file
siebel/foldoutlayoutmodelviewpm.jswith it using the View Files tab.
Configure Horizontal Overview Applet Siebel Manifest
- In Manifest Files, create a new entry:
- Name:
siebel/horizontaloverviewwebcomponent.js
- Name:
- In Manifest Administration, create a new entry:
- Type: Applet
- Usage Type: Presentation Model
- Name:
<Applet Name>
- For the above record, create an entry in Object Expression applet:
- Expression:
Redwood Theme - Level:
1
- Expression:
- For this record, associate the file
siebel/horizontaloverviewwebcomponent.jswith it using the Applet Files tab.