Actions – Symphonix

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

Example 27. Code JSON

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

Example 28. 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

Example 29. 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

Note

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

Example 30. 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`

Example 31. 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

Example 32. 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

Example 33. 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

Example 34. 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

Example 35. Code JSON

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

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

Example 36. 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

Note

Only used by Amex for now

Example 37. 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)

Example 38. 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.

Example 39. 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

Example 40. 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

Example 41. 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

Example 42. 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/*

Example 43. 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`

General

Limiting the maximum file size a user can upload.

Status

Release Available	Status	Framework Name
3.3	Current	TBC

Example 44. 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

Example 45. 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

Example 46. 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

Example 47. 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

Example 48. 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

Example 49. 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

Example 50. 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

Example 51. Code JSON

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

Note

Match the relationName value

Example 52. Code JSON

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

Note

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

Example 53. 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

Example 54. 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

Example 55. 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

Example 56. Code JSON

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

Configure Timeout for custom remote action API calls

General

By default, all the API calls are set to timeout after 30sec in Portal. But Salesforce allows a max of 120sec.
Now one can configure timeout at each action level or at the application level in global settings.
This will help the developers in the cases where an API takes more than 30secs to respond and need the API call to happen in a single call.

Example 57. Code JSON

Indiviual Action level
"componentActions": [{
  "name": "submitAction",
  "actionType": "submit",
  "remoteActionTimeOut": 30000
  …
}]

Example 58. Code JSON

Global application level
"settings": {
"remoteActionTimeOut": 30000,
...
}

Status

Release Available	Status	Framework Name
3.8	Current	TBC

Confirmation dialog

Certain actions need to be confirmed first, such as deletion, using a modal dialog.

When users click the confirmation button, the modal dialog is closed and the action is triggered (handler).
When users click the cancel button, the modal dialog is closed and nothing happens.

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

In the following example, if a user clicks Skip, a Confirmation dialog box appears.

Code JSON

"componentActions": [{
  "name": "cancel",
  "actionType": "normal",
  "label": "Skip",
  "confirmation": {
    "type": "prompt",
    "title": "Are you sure?",
    "content": "<p>No providing financial information will dramatically decrease the possiblity that you will be offered a loan.</p><p>Are you sure that you want to skip the financial informaiton step?</p>",
    "showConfirmButtons": true,
    "confirmText": "Yes",
    "cancelText": "No"
  },
  "handler": {
    "assignments": [{
      "field": "$nav(ApplicationSteps).appearance(current);",
      "value": 2
    }]
  }
},

Dynamic Actions

In the data aggregation component, records are from multiple data tables. The behavior on each record can be different.

For example, a list view with accounts from loan__Loan_Account__c, cllease__Lease_Account__c, and collect__Loan_Account__c
When clicking a record, the corresponding detail view should be open based on the record’s source.

Status

Release Available	Status	Framework Name
Initial	Current	MUI and Mint

Implementation Example

Let’s form three component JSONs for three detail views:

basic_contracts_v2.json
loan_basic_contracts_v2.json

lease_basic_contracts_v2.json

{
        "structureName": "basic_contracts_v2",
        "tableName": "collect__Loan_Account__c",
        "whereClause": {
                "freeForm": " id = ':id'"       },
}

{
        "structureName": "loan_basic_contracts_v2",
        "tableName": "loan__Loan_Account__c",
        "whereClause": {
                "freeForm": " id = ':id'"       },
}

{
        "structureName": "lease_basic_contracts_v2",
        "tableName": "cllease__Lease_Account__c",
        "whereClause": {
                "freeForm": " id = ':id'"       },
}

Then, use addOnFields key to add action-specific data to each data model.

"loanAccountDataModel": {
  "category": "component",
  "type": "data-model",
  "property": {"structureName": "loan_account_data_model_v2",
    "addOnFields": {"detail_view_structure_name": "loan_basic_contracts_v2"}}
},
"leaseAccountDataModel": {
  "category": "component",
  "type": "data-model",
  "property": {"structureName": "lease_account_data_model_v2",
    "addOnFields": {"detail_view_structure_name": "lease_basic_contracts_v2"}}
},
"collectAccountDataModel": {
  "category": "component",
  "type": "data-model",
  "property": {"structureName": "collect_account_data_model_v2",
    "addOnFields": {"detail_view_structure_name": "basic_contracts_v2"}}
},

clickRecord handler can use the addOnFields value to dynamically set the structureName of the detail view.

"generalHandlers": {
  "clickRecord": {
    "assignments": [
      {
        "field": "$nav(accountDetailView).property(structureName);",
        "value": "$args[0].attr(DetailViewStructure);"      },
      {
        "field": "$nav(accountDetailView).property(whereClause.id);",
        "value": "$args[0].attr(id);"      }
    ],
    "next": "DetailPage"  }
}

Popup

Any actor can be displayed using a popup and can interact with other actors.

When the actionType of an action is ‘context’, it can have the popup attribute. When the action is clicked, a non-blocking popup shows up. The popup can include content and actions defined in the same actor.

Usage: menu button with dropdown options.

Popup Specification

Example 59. Code JSON

"componentActions": [{
  "name": "foo",
  "actionType": "context",
  "popup": {
    "direction": "bottom",
    "anchor": "cursor",
    "width": 200,
    "height": 100,
    "margin": 50,
    "borderColor": "#48ce94",
    "backgroundColor": "#ffffff",
    "content": "Lorem ipsum dolor sit amet consectetur."    
  }
  
}, ...]

Actions in Popup

Example 60. Code JSON

"componentActions": [{
  "name": "foo",
  "actionType": "context",
  "popup": {...}
  
}, ... {
  "name": "baz",
  "actionType": "normal",
  "context": "foo"  
}]

Popup Configuration

Popup

Action

"AccountPopup": {
  "mode": "popup",
  "category": "component",
  "type": "queue-view",
  …
  "generalHandlers": {
    "clickRecord": {
      "assignments": [{
        "field": "$state(LoanPanel).attr(account);",
        "value": "$this.attr(Name);"        
      }],
      "updates": [{
        "name": "$popup.remove;",
        "value": "AccountPopup"        
      }]
      
    }
    
  }

“LoanPanel”: {
  ...
  "componentActions": [{
    "name": "searchAccount",
    "actionType": "normal",
    "appearance": {
      "label": "...",
      "style": "..."      
    },
    "handler": {
      "updates": [{
        "name": "$popup.add;",
        "value": "AccountPopup"        
      }]
      
    }
    
  }]
  
}
}

Features

Overlay Dimension

Default Value

General

Dimension works for layout as well (both Mui and Mint)

width (recommended), minWidth, and maxWidth
height, minHeight, and maxHeight

Example 61. Code JSON

"overlays": [
  {
    "name": "...",
    "children": [...],
    "width": "400px",
    "maxHeight": "300px"  }
]

Status

Release Available	Status	Framework Name
3.6	Current	Mui and Mint

Mui Popover

Status

Release Available	Status	Framework Name
3.6	Current	MUI

General

Popover can be triggered by the action with the actionType of context.
Any overlay can be triggered as popover.

Component Action

Overlay

Example 62. Code JSON

"componentActions": [{
  "name": "...",
  "actionType": "context",
  "popup": {
    "direction": "bottom",
    "anchor": "right",
    "overlay": "PopoverContainer"  }
}]

Example 63. Code JSON

"overlays": [{
  "name": "PopoverContainer",
  "children": [...],
  "width": "300px",
  "maxHeight": "200px"}]

Popover Positions

Code JSON	Output
Example 64. Code JSON "componentActions": [{ "popup": { "direction": "bottom", "anchor": "right", "overlay": "DocumentPreviewContainer" },… }]
Example 65. Code JSON "popup": { "direction": "bottom", "overlay": "DocumentPreviewContainer"}
Example 66. Code JSON "popup": { "direction": "bottom", "anchor": "left", "overlay": "DocumentPreviewContainer"}
Example 67. Code JSON "componentActions": [{ "popup": { "direction": "top", "anchor": "right", "overlay": "DocumentPreviewContainer" },… }]
Example 68. Code JSON "popup": { "direction": "top", "overlay": "DocumentPreviewContainer"}
Example 69. Code JSON "popup": { "direction": "top", "anchor": "left", "overlay": "DocumentPreviewContainer"}
Example 70. Code JSON "componentActions": [{ "popup": { "direction": "left", "anchor": "top", "overlay": "DocumentPreviewContainer" },… }]
Example 71. Code JSON "popup": { "direction": "left", "overlay": "DocumentPreviewContainer"}
Example 72. Code JSON "popup": { "direction": "left", "anchor": "bottom", "overlay": "DocumentPreviewContainer"}
Example 73. Code JSON "componentActions": [{ "popup": { "direction": "right", "anchor": "top", "overlay": "DocumentPreviewContainer" },... }]
Example 74. Code JSON "popup": { "direction": "right", "overlay": "DocumentPreviewContainer"}
Example 75. Code JSON "popup": { "direction": "right", "anchor": "bottom", "overlay": "DocumentPreviewContainer"}

Popover Dimension

Popover dimension includes
- width, minWidth, and maxWidth
  - Width or maxWidth is required.
- height, minHeight, and maxHeight
  - height or maxHeight is required.

Example 76. Code JSON

"overlays": [
  {
    "name": "...",
    "children": [...],
    "width": "400px",
    "maxHeight": "300px"  }
]

Overlay Dimension

Dimension works for layout as well (both Mui and Mint)
- width (recommended), minWidth, and maxWidth
- height, minHeight, and maxHeight

Example 77. Code JSON

"overlays": [
  {
    "name": "...",
    "children": [...],
    "width": "400px",
    "maxHeight": "300px"  }
]

Click Away

Status

Release Available	Status	Framework Name
4.2	Current	MUI

General

A Portal Administrator can configure Popover or pop-up that is closed when a user clicks outside the popover (on the Overlay). When this configuration is set to true, if there are multiple popovers, a user can open only one popover at a time. When this configuration is set to false, the existing behavior of closing the popover on clicking on it is retained.

Use the following configuration in Global Settings:

Note

The following configuration is handled globally and if you set it to true, the configuration is applicable to all the actors on the VF page.

Example 78. Code JSON

"popover": {
        "clickAway": true
    }

Note

Status

Action types

Save

Default Value

General

Status

Implementation Example

Submit

Default Value

General

Status

Implementation Example

Stringify objects

Note

Status

Upload

Default Value

General

Status

Implementation Example

Features

Multiple-File Upload

General

Status

Multiple-File Upload With Drag and Drop

General

Status

Normal

Default Value

General

Status

Implementation Example

Features

Action Loading

Default Value

General

Note

Status

Execution using JS

Default Value

General

Status

Implementation Example

Save and Continue

Default Value

General

Use Cases

State Transfer

State Data

Configuration

Excluded Stage

Status

File Upload Accept

Default Value

General

Status

File Upload maxSize

General

Status

Document Upload Enhancement

General

Status

Remote Action Processing

Extension for Remote Action Processing

General

Status

labelTemplate of Action (Amex Only)

General

Status

Reload browser

General

Status

Action Extraction - queryName

General

Status

Action Extraction - New actionType (query)

General

Status

Action Extraction - Actor query refers to componentAction

File Upload `maxSize`