Portal Framework

  • Updated

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

"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.

"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.

Portal-Modularization-II .png

Appearance

Component

 
"appearance": {
  "titles": [{
    "title": "...",
    "name": "info"    
  }, {
    "title": "...",
    "name": "addr"    
  }, {
    "title": "Summary",
    "name": "summary"    
  }]
}
 
"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).

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

Query Default New

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

{
  "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

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

"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

Application Map1.png
Application Map2.png

  • 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.

    Application-map.png

  • 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.

    application-map-search.png

In This Article