The sfpegMessageListCmp component displays a conditional, contextualised and actionable list of end-user messages with customisable styles.
It may be used to display conditional contextual warnings or information messages, with a possible
call-to-action via a dedicated action button.
It may be also used to highlight a gradation in a KPI and track the progress of a process,
via dynamic icons and embedded progress bar.
The sfpegMessageListCmp component displays a variable list of messages (depending on conditions evaluated within the component), each message consisting in:
- a title contextualised text (blue zone)
- an optional progress bar or progress indicator (not shown here, between title and message)
- an optional contextualised message text (green zone)
- a optional (and possibly dynamic) icon (red zone)
- an optional action button (orange zone)
In the App Builder, the configuration of the sfpegMessageListCmp component is pretty simple
and mainly relies on selecting an applicable sfpegMessage__mdt custom metadata configuration
record in the Message Configuration property.
Additional properties enables to fine tune its display
- setting a CSS for the wrapping div (leveraging standard SLDS classes)
- activating debug mode
The sfpegMessage__mdt custom metadata provides most if not all configuration items for the sfpegMessageListCmp components.
Its main property is Message Display which contains a JSON list of message definitions.
Each message definition is a JSON object with the following properties:
header: main rich text message to displaymessage: additional rich text message informationvariant: global style to apply to the message- i.e. base, notif, info, infoLight, warning, warningLight, error, errorLight, success, successLight
- variant settings being possibly overriden by explicit specific properties, such as
iconName,iconSize,iconVariant,iconValue,msgClass
size(optional): width of the message as part of a 12 column grid (12 meaning 100% of the width, no size letting the message grow dynamically according to its content)pathorprogress(optional): activates the display of a progress bar / indicator between header and message- see examples below for details, configuration being based on the standard Lightning base component displayed
action(optional): activates the display of an action button via a JSON action definition containing:- the
nameof one action registered in the sfpegAction__mdt referenced in the main Message Actions property - a
labeloriconNamefor the button
- the
isHidden(optional): display condition for message, which should have a boolean value but may be alternatively defined as a string containing a Javascript formula evaluated at runtime by the component (no need then to define custom formula fields on the User or current Object).
If actions are used in the message list (via the action message property), a sfpegAction__mdt custom metadata record name
must be specified in the Message Actions property.
- This record should contain all the actions possibly triggered by the message list.
- see sfpegAction for details about available actions
Notes:
- Context merge is systematically applied to the Message Display property upon initial load/refresh (see sfpegMergeUtl component) to adapt the messages / display conditions to the display environment.
- This component leverages the sfpegIconDsp component to display icons. Custom SVG icons or dynamic ones may thus be referenced within the message configuration in addition to all standard SLDS ones.
- Beware to leverage fields that are safe in your
isHiddenconditions, as a possibly unsecure Javascripteval()statement when a string property is provided.
One typical use case in a process oriented record page is to display warnings each time a stage is reached without all recommended or mandatory data filled in.
By carefully setting isHidden properties according to the process stage and validation
conditions to move ahead, it is possible to rapidly inform users about important missing
information to finalize the process.
[
{
"variant": "warningLight",
"size": "12",
"header": "Attention: Canaux non sélectionnés!",
"message": "Veuillez sélectionner a minima un canal principal à l'étape <b>Canaux</b>.",
"isHidden": "'{{{RCD.Stage__c}}}' == 'CHANNEL' || '{{{RCD.SelectedChannels__c}}}' == ''"
},
{
"variant": "warningLight",
"size": "12",
"header": "Attention: Date d'envoi invalide!",
"message": "Merci de renseigner une date inférieure à la date de fin de la campagne mère et supérieure à la date du jour",
"isHidden": "'{{{RCD.Stage__c}}}' != 'SEND' || '{{{RCD.ScheduledDate__c}}}' ==''"
},
{
"variant": "warningLight",
"size": "12",
"header": "Attention: Pas de cibles sélectionnées!",
"message": "Veuillez ajouter a minima un membre à la campagne à l'étape <b>Sélection cible</b>.",
"isHidden": "'{{{RCD.Stage__c}}}' != 'SEND' || '{{{RCD.Stage__c}}}' != 'TARGET' || {{{RCD.TargetNumber__c}}} > 0"
}
]
Note: These messages may be combined with a dynamic Next Action (see sfpegActionBarCmp) to navigate between process stages.
For the following example,
the Message Display property of the custom metadata record should be configured as follows:
[
{
"iconVariant":"base-autocomplete",
"iconName":"dynamic:progress",
"iconValue":{{{RCD.ViewsRatio__c}}},
"iconTitle":"Current value is {{{RCD.Views__c}}}",
"header":"This is a progress ring option at {{{RCD.ViewsRatio__c}}}%",
"message":"Current value is {{{RCD.Views__c}}}",
"iconSize":"large",
"action":{"name":"edit","title":"EDIT","iconName":"utility:edit"},
"path": {
"value": "{{{RCD.Status__c}}}", "title": "Current value is {{{RCD.Status__c}}}",
"type": "base", "variant":"shaded",
"steps": [
{"label":"Draft","value":"Draft"},
{"label":"Under Review","value":"Under Review"},
{"label":"Live","value":"Live"},
{"label":"Archived","value":"Archived"}
]
},
"size":12
},
{
"iconName":"dynamic:score",
"iconValue":"positive",
"iconSize":"large",
"header":"This is a score option",
"size":6,
"iconTitle":"Current score is positive"
},
{
"iconName":"dynamic:strength",
"iconSize":"large",
"iconValue":"{{{RCD.ViewScore__c}}}",
"header":"This is a strength option",
"iconTitle":"Current strength is {{{RCD.ViewScore__c}}}",
"size":6
},
{
"iconName":"dynamic:trend",
"iconSize":"large",
"iconValue":"up",
"header":"This is a trend option",
"iconTitle":"Current trend is neutral",
"progress":{
"value":"{{{RCD.ViewsRatio__c}}}",
"variant":"circular",
"title":"Current value is {{{RCD.ViewsRatio__c}}}%",
"class":"slds-progress-bar__value_success"
},
"message":"These elements are still missing",
"action":{"name":"edit","iconName":"utility:edit","title":"EDIT","iconSize":"small","variant":"brand"},"size":12
}
]
Note: the value of a progress or path widget and the iconValue of a dynamic icon may be computed
via a formula field but should follow the format expected by the underlying Lightning base component.
See technical section for links to the appropriate sub-component used to get more detailed information.
Beware that some values are text ones and others numbers.
In the following test example, there is a single message presenting a summary of the current record, e.g.
for a Community in which the Record Type of the object should be emphasized instead of the Salesforce
Object Name.
the Message Display property of the custom metadata record should be configured as follows:
[{
"variant":"base",
"header":"{{{RCD.RecordType.Name}}} > {{{RCD.Name}}}",
"iconName":"standard:account",
"iconSize":"medium",
"size":12,
"msgClass":"slds-text-heading_large slds-text-title_bold"
}]
The Wrapping CSS Builder configuration parameter is set to the following value:
slds-box slds-box_small slds-theme_default
It relies on the sfpegMergeUtl utility component to contextualise the messages via merge tokens and on the sfpegIconDsp display component to display a wide range of static or dynamic icons.
It also uses the standard lightning-progress-indicator and lightning-progress-bar base components to respectively display a progress indicator (steps or path) and progress bar.