Actions

Each component actor can have two types of actions:

componentActions: actions against the whole component, for example, save and cancel buttons for a detail view
recordActions: actions against individual records in a component, for example, upload and preview button for each document category

Note:
Do not use the 'position' parameter for the recordActions.

Each action may have

render: string
enable: string

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Code JSON

"BorrowerDetailView": {
"category": "component",
"type": "detail-view",
"componentActions": [{
"name": "save",
"actionType": "save",
     	"label": "Save",

Code JSON

"BusinessDocumentQueueView": {
"category": "component",
"type": "queue-view",
"recordActions": [{
		"name": "preview",
		"actionType": "normal",
		"label": "<span class=\"fa fa-expand\"/>",
	},{
"name": "upload",
		"actionType": "upload",
		"label": "Upload",

Action types

There are the following four action types (actionType):

Save

Default Value

"actionType": "save",

General

Key	Value
`name`	unique name in the current component/actor
`actionType`	save
`label`
`style`	`“primary”`, `“secondary”`, `“normal”`, `“warning”`, `“iconic”`
Position	`top-left`, `top-right`, `bottom-left`, `bottom-right`
`remoteActionArguments`	key/value pairs, before the save request is sent, set certain fields with certain values, and then save. Value can be a variable expression, for example, `"remoteActionArguments": {"Guest_Account__c": "$global.attr(sessionId);"}`
`successHandler`	what happens if save succeeds
`failureHandler`	what happens if save fails Handler configuration will be introduced later.
`messages`	specific messages for the current save action `showSavingAnimation` (boolean) `savingAnimationText` `showSavingSuccess` (boolean) `hideSavingError` (boolean) `saveSuccessText` `saveFailureText`

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

Submit

Default Value

"actionType": "submit",

General

Key	Value
`name`	unique name in the current component/actor
`actionType`	submit
`label`
`style`	`“primary”`, `“secondary”`, `“normal”`, `“warning”`, `“iconic”`
Position	`top-left`, `top-right`, `bottom-left`, `bottom-right`
`remoteActionArguments`	key-value pairs submitted to remote custom API
remoteActionClassname	remote custom API name
remoteActionAPIname	for built-in user-management APIs only
remoteActionPrefix	remote custom API namespace
transaction	If a remote action is a transaction, a unique transaction Id is added to the remoteActionArguments when submitted. This attribute should be rarely used. Instead, users should depend on remoteActionArguments to encode the unique Id for each submission session.
Polling configurations	pollingPeriod: the time gap between two consecutive polls in milli-seconds pollingMaxTries
automatic	The action will be automatically triggered. Both data-model and component whose render evaluated as false cannot have automatic action because action won’t be rendered.
`successHandler`	what happens if submit succeeds
pendingHandler	what happens with PENDING response
`failureHandler`	what happens if submit fails
`messages`	specific messages for the current submit action `showSubmitAnimation` (boolean) `submitAnimationText` `showSubmitSuccess` (boolean) `hideSubmitError` (boolean) `submitSuccessText` `submitFailureText` `submitExpirationText`

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

Code JSON

"PollingPanel": {
  "category": "component",
  "type": "base-panel",
  "componentActions": [{
    "name": "polling-status",
    "actionType": "submit",
    "automatic": true,
    "remoteActionArguments": {"applicationId": "$this.attr(applicationId)"},
    "remoteActionClassname": "PortalApplicationStatus1",
    "successHandler": {
      "assignments": [{
        "field": "$nav(OfferDetailView).property(whereClause.applicationId);",
        "value": "$result;"      }],
      "next": "OfferPage"    },
    "failureHandler": {"next": "NoOfferPage"},
    "pollingPeriod": 3000,
    "pollingMaxTries": 3
  }]
}

Stringify objects

Submit action from the portal can have data from actors as individual remoteActionArgument, for example

Data in an actor is always in the array format, even the actor is a detail view, whose data is a single-element array.

Code JSON

“remoteActionArguments”: {
    “account”: “$this[0];”, // object from the first record of the current actor
    “accountList”: “$state(AccountListView);” // array of objects from the AccountListView actor
}

Status

Release Available	Status	Framework Name
2.7.1	Current	TBC

Upload

Default Value

"actionType": "upload",

General

REST call to upload files uses the sessionId from authenticated userInfo.

Key	Value
`name`	unique name within the actor
`actionType`	upload
`label`
`style`	`“primary”`, `“secondary”`, `“normal”`, `“warning”`, `“iconic”`
`uploadActionArguments`	one built-in key-value pair `attachmentParentId`
Position	`top-left`, `top-right`, `bottom-left`, `bottom-right`
`remoteActionArguments`	key-value pairs submitted to remote custom API
attachmentIds	Specify remote action to deal with the returned attachment Id(s). There are the following two built-in variables: `$uploadedAttachmentIds;` - if the remote action needs an attachment Id array `$uploadedAttachmentId;` - if the remote action needs a single attachment Id
remoteActionClassname	remote custom API name
remoteActionPrefix	remote custom API namespace
`successHandler`	if upload action or remote action succeeds
pendingHandler	if remote action returns PENDING stat
`failureHandler`	if upload action or remote action fails
`messages`	specific messages for the current upload action `uploadFailureText` `uploadFileTooLargeError` `showSubmitAnimation` (boolean) `submitAnimationText` `showSubmitSuccess` (boolean) `hideSubmitError` (boolean) `submitSuccessText` `submitFailureText` `submitExpirationText`

Code JSON

{
"name": "upload",
"actionType": "upload",
	"label": "Upload",
	"uploadActionArguments": {
		"attachmentParentId": "$this.attr(Attachment_Parent_Id__c);"	},
	"remoteActionArguments": {
		"documentCategoryId": "$this.attr(id);",
		"attachmentIds": "$uploadedAttachmentIds;"	},
	"remoteActionClassname": "PortalLinkAttachmentList",
…
}

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

Success handler of upload action

Code JSON

"AttachmentListView": {
  "category": "component",
  "type": "list-view",
  "property": {
    "structureName": "portal2demo_attachment_list_view"  },
  "componentActions": [{
    "name": "upload",
    "actionType": "upload",
    "label": "Upload",
    "uploadActionArguments": {
      "attachmentParentId": 
         "0014600000VEkGb"    },
    "successHandler": {
      "updates": [{
        "name": "$nav.reloads.add;",
        "value": "AttachmentListView"      }]
    }
  }]
}

Success handler of remote action

Code JSON

"recordActions": [{
  "name": "upload",
  "actionType": "upload",
  "label": "Upload",
  "uploadActionArguments": {
    "attachmentParentId": 
      "$this.attr(Attachment_Parent_Id__c);"  },
  "remoteActionArguments": {
    "documentCategoryId": "$this.attr(id);",
    "attachmentIds": "$uploadedAttachmentIds;"  },
  "remoteActionClassname": "PortalLinkAttachmentList1",
  "successHandler": {
    "assignments": [{
      "field": "$this.attr(clcommon__DocCat_Attachment_Associations__r);",
      "value": "$result;"    }]
  },
  "messages": {
    "uploadFileTooLargeError": "Cannot upload this file. The size is too large (> 25Mb).",
    "uploadFailureText": "Fail to upload"  }
}

Features

Multiple-File Upload

General

Upload action can be configured so that when users click an Upload button to open the file dialog, they can select multiple files to upload them at the same time.

Status

Release Available	Status	Framework Name
2.8.1	Current	TBC

Code JSON

{
  "name": "upload",
  "actionType": "upload",
  "property": {
    "multiple": true
    },
    "appearance": {
      "label": "Upload",
      "style": "primary"      },

Multiple-File Upload With Drag and Drop

General

Users can also drag files from the desktop and drop them to a "droppable" component or entry to upload. (Of course, there must be an Upload button associated with the component or entry.)

Status

Release Available	Status	Framework Name
2.8.1	Current	TBC

Droppable Component

Droppable Record

Code JSON

"appearance": {
  "droppableComponent": {
    "uploadActionName": "upload",
    "type": "FILE"    }
  
}

"componentActions": [{
  "name": "upload",
  "actionType": "upload",
  …}

Code JSON

"appearance": {
  "droppableRecord": {
    "uploadActionName": "upload",
    "type": "FILE"    
  }
  
}

"recordActions": [{
  "name": "upload",
  "actionType": "upload",
  …}

Normal

Default Value

"actionType": "normal",

General

Key	Value
`name`
`actionType`	normal
`label`
`handler`	what happens if this action is triggered

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

Features

Action Loading

Default Value

General

Only used by Amex for now

Code JSON

[
  {
    "name": "...",
    "actionType": "submit",
    "appearance": {
      "label": "Next",
      "style": "primary",
      "loading": "$global.attr(actionLoading); == true"    },
    "successHandler": {
      "assignments": [
        {
          "field": "$global.attr(actionLoading);",
          "value": false
        }
      ]
    },
    "handler": {
      "assignments": [
        {
          "field": "$global.attr(actionLoading);",
          "value": true
        }
      ]
    }
  }
]

Record action loading (cannot use global attribute)

Code JSON

{
  "name": "...", "actionType": "submit",
  "appearance": {
    "loading": "$this.attr(recordActionLoading); == true",
    "style": "tertiary iconic", "icon": "dls-icon-share"    
  },
  "successHandler": {
    "assignments": [{ "field": "$this.attr(recordActionLoading);", "value": false }]
    
  },
  "failureHandler": {
    "assignments": [{ "field": "$this.attr(recordActionLoading);", "value": false }]
    
  },
  "handler": {
    "assignments": [{ "field": "$this.attr(recordActionLoading);", "value": true }] },

Status

Release Available	Status	Framework Name
3.2	Current	TBC

Execution using JS

Default Value

General

The portal framework can be configured to trigger external JS code for certain use cases.

Status

Release Available	Status	Framework Name
3.2	Current	TBC

Implementation Example

When submission fails, if the form is long, scroll the page to the error message at the top of the form.

Code JSON

"componentActions": [{
  "name": "getting_started_save_and_continue",
  "actionType": "submit",
  "handler": {…}
  "remoteActionClassname": ..., "remoteActionArguments": {...},
  "failureHandler": {
    "executions": [{ "name": "$ext.scrollToError" }]
    
  },
}, …

((portalext, $) => {
  portalext.scrollToError = () => {
    $(".error-template")[0].scrollIntoView();
    
  };
})((window.portalext = window.portalext || {}), jQuery);

Save and Continue

Default Value

General

Use Cases

A user is in an application flow, and he decides to drop and come back to the application later.
Through a link in the notification email, where the id of his application is part of the URL. The id can be the application id if an application has been created, or an external id otherwise
For example https://c.na174.visual.force.com/apex/ConsumerDemo#a8E6g000000TucsEAC
Through a dashboard where the user can continue his pending applications.

State Transfer

Switch stage
- The state name is the stage name that the user just entered
Switch step/tab/accordion (container)
- The state name is a comma-separated string.
- The first part is the current stage.
- The following parts will be the name (or title if there is no name) of the current step/tab/accordion of all the containers in the current stage, from the ancestor to the descendant in case there is a stepper inside a stepper.
- For example: ApplicationTabs,personal

State Data

Data to be remembered and get retrieved to continue an application flow.
- Global data
- The name of the current stage
- Prerequisite of the current stage
- The current index of all the containers in the current stage
Need to enforce the good practice by decoupling actors

Code JSON

{
  "appName": "consumer_demo",
  "channel": "desktop",  // "channel": "phone" can be detected only when portal.js (not builder.js) is used.
  "stageName": "ApplicationTabs",
  "stagePrerequisite": {},
  "global": {
    "loanAmount": 20000,
    "applicationId": "a8E6g000000TucsEAC",
    "creditWorth": {
      "fields": {
        "genesis__CL_Product__c": "a0Y6g000001Dj9REAS",
        "genesis__CL_Purpose__r": {
          "Id": "a0Z6g0000017Vd7EAE",
          "Name": "Debt Consolidation"          
        },
        "genesis__Term__c": 40,
        "genesis__CL_Product__r": {
          "Id": "a0Y6g000001Dj9REAS",
          "clcommon__Product_Name__c": "Unsecured Consumer Loan",
          "RecordTypeId": "0126g00000181tlAAA"          
        },
        
      }
      
    },
    "firstName": "John"    
  },
  "containerCurrent": {
    "loanApplicationTabs": 2
    
  }
}

Configuration

Code JSON

"settings": {
  "saveContinue": {
    "enable": true,
    "id": "$global.attr(applicationId);", // This is the link Id.
    "excludedStages": [ "ChooseLoan", "Home" ]
    
  }
}

There are two ids associated with the save and continue session.
- The external Id is always the hash value in the URL.
  - https://...../...#externalId
- The link Id is specified in "settings" and has to be a global attribute ($global.attr(…);)
Action handler to resume the saveContinue state

Code JSON

"handler": {
  "executions": [{
    "name": "saveContinueResume",
    "value": ["$global.attr(applicationId);"] // The link Id or external Id to retrieve the state
    }]
}

Excluded Stage

Enter a stage that is excluded from save and continue
The URL hash is cleared: https://c.na174.visual.force.com/apex/ConsumerDemo#
The link id (e.g., "$global.attr(applicationId);") will be reset automatically.

Status

Release Available	Status	Framework Name
3.2	Current	TBC

File Upload Accept

Default Value

General

Upload action can specify accepted file types
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#attr-accept
- Unique file type specifiers (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers)
  - A valid case-insensitive filename extension, starting with a period (".") character. For example: .jpg, .pdf, or .doc.
  - A valid MIME type string, with no extensions.
  - audio/*, video/*, image/*

Code JSON

"componentActions": [{
  "name": "upload",
  "actionType": "upload",
  "property": {
    "multiple": true,
    "accept": "image/*,.pdf,text/plain"    
  },
  …
}]

Status

Release Available	Status	Framework Name
3.2	Current	TBC

File Upload maxSize

File Upload `maxSize`

General

Limiting the maximum file size a user can upload.

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Code JSON

"componentActions": [{
  "name": "upload",
  "actionType": "upload",
  "property": {
    "multiple": true,
    "accept": "image/*,.pdf,text/plain",
    "maxSize": 1000000
    
  },
  …
}]

Document Upload Enhancement

General

Each document has its own progress bar, complete status, and error message.
- When a document uploading is in progress, it can be canceled.
- A document error message can be closed.

Status

Release Available	Status	Framework Name
3.3	Current	MUI and Mint

Code JSON

Mint:
"settings": {
  "uploadText": {
    "completed": "Completed",
    "cancelInProgress": "Cancel",
    "removeError": "<span class=\"fa fa-times\"></span>"    
  }
}

Mui: removeError has to be the name of a material UI icon.
"settings": {
  "uploadText": {
    "completed": "Completed",
    "cancelInProgress": "Cancel",
    "removeError": "close"    
  }
}

Remote Action Processing

Extension for Remote Action Processing

General

Pre-processing is to process the data before it is sent to the remote API.
Post-processing is to process the data immediately after it is received as the remote API response. Then data can be consumed by the portal framework.

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Code JSON

"componentActions" / "recordActions" {
  …,
  "remoteActionClassname": "…",
  "remoteActionArguments": { … },
  "remoteActionProcess": {
    "pre": "$ext.preProcessMethod",
    "post": "$ext.postProcessMethod"    
  },
  …
}

labelTemplate of Action (Amex Only)

General

The real button is inserted inside the tag with class "placeholder".

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Code JSON

{ "name": "uploadBtn",
  …
  "appearance": {
    "labelTemplate": "<div style=\"cursor: auto\"><div class=\"pad-2\" style=\"border-width: 1px; border-style: dashed\"><span class=\"icon icon-md dls-icon-upload pad-2-r\"></span><span>Drag and Drop Files Here or </span><span class=\"placeholder\"></span></div><p class=\"pad-1-tb\">Files should be in PDF, JPG, or PNG format and cannot exceed 10MB</p></div>",
    "style": "tertiary",
    "label": "Select Files"    
  },...

Reload browser

General

To reload the page.

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Code JSON

"redirect": "$self;"

Action Extraction - queryName

General

Actor property does not include remote-action-related any more. Instead it refers to a query action using the queryName.

Status

Release Available	Status	Framework Name
3.4	Current	TBC

Code JSON

"property": {
  "structureName": "...",
  "queryName": "query1"}

Action Extraction - New actionType (query)

General

New actionType

query
No appearance because it won't be rendered
No handlers

Status

Release Available	Status	Framework Name
3.4	Current	TBC

Code JSON

"componentActions": [{
  "name": "query1",
  "actionType": "query",
  "remoteActionArguments": {...},
  "remoteActionClassname": "PortalGetAccountAPI"}]

Action Extraction - Actor query refers to componentAction

General

Actor query refers to componentAction

Status

Release Available	Status	Framework Name
3.4	Current	TBC

Action Extraction - Reference query refers to recordAction

General

Reference query refers to recordAction

Status

Release Available	Status	Framework Name
3.4	Current	TBC

Code JSON

"property": {
  "structureName": "...",
  "referenceQueryName": {
    "Broker_Name__r": "query1"  }
}

Match the relationName value

Code JSON

{
  "structureName": "...",
  "sections": [
    {
      "fields": [
        {
          "relationType": "reference",
          "fieldName": "Broker_Name__c",
          "relationName": "Broker_Name__r",
          "relationJson": {
            "sections": [...]
          },
          "fieldUi": {
            "fieldType": "reference",
            "label": "Broker Name"          }
        }
      ]
    }
  ]
}

In order to call remote API, relationJSON should NOT have tableName and whereClause!

Code JSON

"recordActions": [{
  "name": "query1",
  "actionType": "query",
  "remoteActionArguments": {...},
  "remoteActionClassname": "PortalGetReferenceAPI"}]

Document Upload - use ContentDocument

General

The attachment will be deprecated by SFDC down the line. Therefore we recommend using ContentDocument to store uploaded documents going forward.

Status

Release Available	Status	Framework Name
3.4	Current	TBC

Code JSON

componentActions: [{
  "property": {
    "uploadType": "document"  }
}]

If "uploadType": "document", the following three property keys can be added

contentLocation
- “S”: S-Document is located within the Salesforce (default value is not set)
- “E”: E-Document is located outside the Salesforce.
- “L”: L-Document is located on a social network and accessed via Social Customer Service.
visibility
- "AllUsers": The file is available to all users who have permission to see the file. (default value)
- "InternalUsers": The file is available only to internal users who have permission to see the file.
- "SharedUsers": The file is available to all users who can see the feed to which the file is posted.
shareType
- “V” (Viewer permission): The user can view, download and share the file. (default value)
- “C” (Collaborator permission): The user can view, download, share the file, edit the details, upload a new version, and change sharing settings.
- “I” (Inferred permission): The user’s permission is determined by the related record.

https://www.appseconnect.com/how-to-upload-a-document-in-salesforce-files-using-rest-api/

Document Upload Error Message

General

With the document uploaded as an attachment, the error message from the RESTful API can be displayed in the UI.

Status

Release Available	Status	Framework Name
3.5	Current	TBC

Code JSON

"componentActions": [{
  "name": "uploadDocsRacv",
  "actionType": "upload",
  "property": {},
  "messages": {
    "uploadFailureText": "$serverMessage;",
    "submitFailureText": "$serverMessage;"  }
}]

Action Layout

General

In the "appearance" section

componentTop: true – title and subTitle, if defined, are above the component content in the HTML flow.
componentTop: [actionName] - componentTop: true + the listed component actions will be displayed side-by-side above the component content in the HTML flow.
componentBottom: [actionName] - the listed component actions will be displayed side-by-side below the component content in the HTML flow.
recordTop: [actionName] - the listed record actions will be displayed side-by-side above the component content in the HTML flow.
recordBottom: [actionName] - the listed record actions will be displayed side-by-side below the component content in the HTML flow.

Status

Release Available	Status	Framework Name
3.5	Current	Mint and Ext only

Query with Post Process

General

Status

Release Available	Status	Framework Name
3.5	Current	TBC

Code JSON

In VF Page

"property": {
  "structureName": "contact_list_with_filtering",
  "queryProcess": {
    "post": "$ext.contactPostProcess"  }
}
"structure": {
  "structureName": "contact_list_with_filtering",
  "tableName": "contact",
  "whereClause": {
    "freeForm": "id != null"  },
  …
}

window.portalext = {};
window.portalext.contactPostProcess = (response) => {
	…
	return response;
}

Save with Pre/Post Process

General

Status

Release Available	Status	Framework Name
3.5	Current	TBC

Code JSON

In VF Page

"componentActions": [{
  "name": "save",
  "actionType": "save",
  "remoteActionProcess": {
    "pre": "$ext.saveContactPreProcess",
    "post": "$ext.saveContactPostProcess"  },
  …
}]

window.portalext = {};
window.portalext.saveContactPreProcess = (data) => {
  ...
  return data;
}
window.portalext.saveContactPostProcess = (response) => {
  …
  return response;
}

Upload Large Document

General

A document that is greater than 25 MB can be uploaded as content document

If maxSize is not specified, document size is limited to 25 MB.

Status

Release Available	Status	Framework Name
3.6	Current	TBC

Code JSON

"property": {
  "maxSize": 3000000000,
  "uploadType": "document"}

Actions

Action types

Implementation Example

Implementation Example

Stringify objects

Implementation Example

Features

Multiple-File Upload

Multiple-File Upload With Drag and Drop

Implementation Example

Features

Implementation Example

Use Cases

State Transfer

State Data

Configuration

Excluded Stage

File Upload maxSize

Extension for Remote Action Processing

labelTemplate of Action (Amex Only)

Reload browser

Code JSON

Code JSON

In This Article

File Upload `maxSize`