Portal Framework

2.8

No more communityPrefix in NavigationJSON
- CommunityPrefix is read from the backend and stored in userInfo.
More third-party JS libraries are removed from the bundle portal.min.js and builder.min.js

<head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext"/>
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    </head>
    <body>
        <script src="../../soap/ajax/29.0/connection.js" type="text/javascript"></script>
        <script src="../../soap/ajax/29.0/apex.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.13.3/math.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.4/purify.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.min.js"></script>             
        <script crossorigin="anonymous" src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js"></script>
    </body>

2.7.1 to 2.8 DOM Changes

<div class="control"><div class="input-main">…
<div class="entries"><div class="record-container"><div data-style-id="record">...

Portal Utility

cd to src/utility
node builder-loader.js <username> <password> <securityToken>
- To load the navigation JSONs, component JSONs, and default layouts under src/applications/editor to a specific SFDC org.
- Security token is optional.
- For example
  node builder-loader.js min@portaltraining.com merc1235 XF7Rx0NGnnRWuJ3izSZhG5S1
node builder-loader.js <username> <password> <securityToken> true
- For sandbox
node builder-cleaner.js
- To check unused builder-related component JSONs that are not referred by any builder-related navigation JSON.
The following 2 converters convert the branding configuration of existing portal applications from 2.7 to 2.8, which will be moved to VF page eventually.
cd to src/utility
node builder-converter-27-to-271.js <username> <password> <securityToken>
node builder-converter-271-to-28.js <username> <password> <securityToken>

2.9

Portal Modularization

Remove cross-actor dependency

$currentStage

Actors can get value from the current stage prerequisites.
Actors can set the value to the current stage prerequisites through assignments

Copy

"property": {
  "structureName": "account_detail_view",
  "whereClause": { "accountId": "$currentStage.attr(highlightedAccountId);" }
  
}
"generalHandlers": {
  "clickRecord": {
    "assignments": [{
      "field": "$currentStage.attr(highlightedAccountId);",
      "value": "$args[0].attr(id);"      
    }]
    
  }}
"successHandler": {
  "assignments": [{
    "field": "$currentStage.attr(highlightedAccountId);",
    "value": "$result.attr(id);"    
  }],

autoHighlightedId

List / queue / card views may have autoHighlightedId, which supports variables.

Copy

"appearance": {
  ...
  "autoHighlightedId": "$currentStage.attr(highlightedAccountId);",
}

Steps / Tabs Enhancements

Steps / Tabs may have unique names.
Steps / Tabs may have componentActions, which may belong to specific steps/tabs.

Appearance Component

Copy

"appearance": {
  "titles": [{
    "title": "...",
    "name": "info"    
  }, {
    "title": "...",
    "name": "addr"    
  }, {
    "title": "Summary",
    "name": "summary"    
  }]
}

Copy

"componentActions": [{
  "name": "infoNext",
  "actionType": "normal",
  "appearance": {
    "label": "Next",
    "style": "primary",
    "belongTo": "info"    
  }
}, {
  "name": "addrBack",
  "actionType": "normal",
  "appearance": {
    "position": "bottom-left",
    "label": "Back",
    "style": "secondary",
    "belongTo": ["addr"]
    
  }
}]

current can be assigned not only a number value as tab/step index but also a string value as the unique tab/step name.
- Of course, the tab/step with the unique name should be visible (render should be true).

Copy

URL: https://.../demo?startStep=dInfo

"global": { "startStep": "$url(startStep);" }

{
  "current": "$global.attr(startStep);",
  "titles": [
    { "name": "bInfo", "title": "Borrower Information" },
    { "name": "cbInfo", "title": "Co-Borrower Information" },
    { "name": "dInfo", "title": "Documents" },
    { "name": "sInfo", "title": "Summary" }
    ]
}

Cross-Actor Validation

See Actor Validation.

Query Default New

Actor will get and display a new record if it cannot retrieve any existing record from the backend

Copy

{
  "structureName": "account_detail_view",
  "tableName": "account",
  "whereClause": { "freeForm": "id = ':accountId'" },
  …
}

"property": {
  "whereClause": { "accountId": "$global.attr(highlightedAccountId);" },
  "structureName": "account_detail_view",
  "queryWithDefaultNew": true
}

2.10

Builder Loader Enhancement

When executing builder-loader.js from the command line, the first two arguments are username and password to a SFDC org
The rest three named arguments are optional
- Org's security token: token=n1UdUj31razvjVRmuEsmHCYt3
- Sandbox or not: sandbox=true (If sandbox is true, the login URL is https://test.salesforce.com)
- namespace prefix: prefix=testApplication (__ added at the end automatically if not provided)
  - If prefix is not specified, the default namespace prefix is clcommon__
  - If prefix is set as prefix=, the namespace prefix is an empty string.
For example
- $ node builder-loader.js min@portal.playground merc1237 prefix=testApplication token=n1UdUj31razvjVRmuEsmHCYt3
- $ node builder-loader.js min@portal.playground merc1237 prefix=sandbox=true token=n1UdUj31razvjVRmuEsmHCYt3

Mui Branding

2.9 upgrade: `clcommon__css_configuration__c`

clcommon__content__c
- Inside layoutMapping > ClsAppLayoutOne > styleSpecification, change path and cssSelector to category
- Refer to the latest applayout1style.json
clcommon__branding__c
- Only keep theme and fontFamilies
- Refer to the latest style.mui.json

Style converter (Mui Only)

node builder-converter-29-to-210.js username password token=token pageId=pageId
For example
- node builder-converter-29-to-210.js min.wu-tfb-dev@q2ebanking.com merc1235 token=XWu8vjvKR7HH13JO5cAHszis3 pageId=BorrowerPortal

4.4

Performance improvement when saving Portal framework using Portal Builder

When saving a Portal, with more than 800 actors and/or more than 400 actions, the process of saving became prolonged and resulted in APEX timeout issues. This occurred because the Portal was passing all actors and actions to the back-end to re-create the entire Portal Configuration Document.

In Portal Framework version 4.4, only the newly added or modified actors, actions, component structures, and static contents are passed to the back-end to update the Portal Configuration Document upon selecting Save. This enhancement significantly reduces the time in saving the Portal configurations to the back-end.

To enable this functionality, a new flag called dirtyActor is introduced. This flag indicates whether an actor, action, component structure, or static content has been altered or remains unchanged during development. This is then used to pass only the changed configurations to the back-end when the Portal Administrators select Save.

Stats

A Portal was tested twice with a Portal Configuration Document of 4.03 MB in size with the JSON structure of the Portal Configuration Document having 1140 actions, 680 actors, 1 navigation structure, 48 static contents, 280 component structures, 9 disclosure definitions, and 1 CSS configuration. The Portal worked without throwing any errors or issues and reached the following CPU time limits:

Maximum CPU Time	Maximum Heap Size
3811 out of 10000	0 out of 6000000
4006 out of 10000	0 out of 6000000

Features

Updatable Field (Ext only)

General

Using Ext renderer, the portal framework should rarely update the field value. The field value should be updated by the JS layer.
However, there are use cases that changing one field needs to update the value of another field through the fieldChange handler. In this case, the field should be marked as extUpdatable in the actor's appearance

Status

Release Available	Status	Framework Type
3.2	Current	TBC

Code JSON

Copy

"appearance": {
  "extUpdatable": [ ... ]
}

Amex Tooltip Enhancement

General

Support tooltip placement
- top, bottom, left, right
- right is the default placement
Syntax:
- title: text{{{tooltip}}}position
- tooltip: {{{tooltip}}}position

Status

Release Available	Status	Framework Type
3.3	Current	TBC

Application Map

Status

Release Available	Status	Framework Type
3.6	Current	MUI & Mint
4.3	Current	MUI & Mint

General

Under the Global Settings, clicking Application Map opens a left-hand sidebar that includes the stage and actor structure of the portal application.

Note:

Need to update the builder configuration using

node builder-loader.js username password token=security_token

Actors are grouped by stages.
If an actor is in a certain stage, clicking the actor goes to the corresponding stage.
If an actor is in a certain tab/step, clicking the actor opens the corresponding tab/step.
Note:
You may need to scroll to see the tab/step
If an actor is in a certain overlay, clicking the actor opens the corresponding overlay.
Data in actors may not be properly loaded because, in the real application flow, the data in an actor may depend on another actor.
With the Portal 4.3 release, a search bar is available at the top of the Application Map that allows you to search for stages, actors, and overlays. The search text is highlighted within the Application Map while typing.

Portal Framework

2.8

2.7.1 to 2.8 DOM Changes

Portal Utility

2.9

Portal Modularization

Remove cross-actor dependency

$currentStage

autoHighlightedId

Steps / Tabs Enhancements

Cross-Actor Validation

Query Default New

2.10

Builder Loader Enhancement

Mui Branding

2.9 upgrade: clcommon__css_configuration__c

Style converter (Mui Only)

4.4

Performance improvement when saving Portal framework using Portal Builder

Stats

Features

Updatable Field (Ext only)

Amex Tooltip Enhancement

Application Map

In This Article

2.9 upgrade: `clcommon__css_configuration__c`