Lightning Flow Screen Components are a great way to add power to and improve the look of your Flows. In this three-part series, I’ll show you how a single component, designed to display a list or table, can enhance your Flows.
Alex Edelstein’s unofficialsf.com website includes datatableFSC as one of many Flow Screen Components you can use for your own organization.
This component is derived from the datatable Lightning Base Component. I recently enhanced Alex’s component to be more powerful and Admin friendly.
I will be showing you some examples about how the Datatable component:
- Can be used in place of a Record Choice Set (Dynamic Record Choice) for selecting a record while displaying more than a single field
- Can be used to select multiple records from an object then perform additional actions on them
- Can be used to present your data in an interactive and visually enhanced format
Part 2: Acting on a Group of Records
In my company, we use Email to Case to generate Cases for our support team. An issue that comes along with enabling this feature, is that we tend to get quite a few Cases created as the result of junk emails. We don’t want just anybody to be able to delete a Case, so we have a process where any user can ‘flag’ a junk Case for deletion. A manager can then run a Flow that shows all of the flagged Cases and can make a final review before actually deleting the Cases.
I used the datatableFSC Flow Screen Component to present the list of flagged Cases and the Flow uses the collection of records selected by the manager to handle the deletions.
See https://unofficialsf.com/datatable for complete information and instructions on this component.
By not entering any values for the width or alignment parameters, I let the system use its defaults to handle the columns widths and alignments.
The records presented in the table are stored in the {!colCase} variable by the Get Cases Selected (Fast Lookup) node.
The datatableFSC component uses that collection variable to build and display the records for the table.
By defining an Output Parameter, the records selected by the user are passed back to the flow in the {!colCaseDelete} variable.
That variable is then used in the Delete Cases (Fast Delete) node.
The datatableFSC component provided a great way to present a formatted view of a list of records, select one or more from that list, and then use the flow to act on the selected records.
See the complete series on how you can use the datatable Flow Screen Component in your Lightning Flows.
Part 1 – Use a Datatable to present a dynamic choice for record selection in a Flow.
Part 2 – Use a Datatable in a Flow to select and act on a collection of records.
Part 3 – Use a Datatable to display a formatted, interactive table in your Flow.
Looks great, but why am I getting the The lightning:availableForFlowScreens interface doesn’t support these attribute types in the design resource: rednoses.asset[], rednoses.opportunity[], rednoses.account[], rednoses.case[], rednoses.contact[], rednoses.contract[]. error when installing?
LikeLike
I haven’t seen that error before. Is rednoses your domain name?
LikeLike
I just looked up that error message and found this issue. https://success.salesforce.com/issues_view?id=a1p3A000000BMPtQAO
Have you tried copying the source code directly into a new component using your Developer Console?
LikeLike
Hi,
Thank you sharing. I’ve installed the package.
I’m getting the following error:
This page has an error. You might just need to refresh it
. Action.prototype.finishAction Error [Action failed: c:datatableFSC$controller$init [Cannot read property ‘length’ of undefined] Callback failed: serviceComponent://ui.interaction.runtime.components.controllers.FlowRuntimeController/ACTION$runInterview] Failing descriptor: {flowruntime:flowRuntime}
Any help is much appreciated.
Thank you
LikeLike
I have resolved the error. Please use the new package link: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t1K000002ZpYJ
LikeLike
Thank you. You are a champion.
LikeLike
Works Great apart from when i select a row and check the check box I get the following error
This page has an error. You might just need to refresh it. Action failed: flowruntime:flowRuntime$controller$handleAttributeChange [Cannot read property ‘replace’ of undefined] Failing descriptor: {flowruntime:flowRuntime$controller$handleAttributeChange}
LikeLike
Can you post what you have entered for each of the Input and Output parameters? Did the error message include any line numbers?
LikeLike
Sure Eric and thanks very much for coming back to me so quickly.
I have two Custom objects, one called PMI (a wrapper object set of maintenance instructions) . and Maintenance Tasks ( a list of common tasks)
I have two Datatables, one to select the Wrapper PMI record and then one to select multiple Tasks.
With a single Datatable I get the error. basically as soon as I check the box/radio button.
My input parameters are as follows :-
in Design
in Component
In the Datatable Component in the flow :-
Datatable 1 . ( 3 Fields Displayed at Present in Table)
Collection – PMIG
{!PMI}
Column01_align __________C1
left
Column01_fieldName
PMI_Guide_Name__c
Column01_iconName
Enter value or search resources…
Column01_label
PM Name
Column01_type
text
Column01_width
Enter value or search resources…
Column02_align __________C2
left
Column02_fieldName
Name
Column02_label
PMI Name
Column02_type
text
Column02_width
Enter value or search resources…
Column03_align __________C3
left
Column03_fieldName
PM_Guide_Type__c
Column03_label
PM Type
Column03_type
text
Column03_width
Enter value or search resources…
Column04_align __________C4
then Output
Output Selected Accounts
Enter value or search resources…
Output Selected Assets
Enter value or search resources…
Output Selected Cases
Enter value or search resources…
Output Selected Contacts
Enter value or search resources…
Output Selected Contracts
Enter value or search resources…
Output Selected Main Tasks
Enter value or search resources…
Output Selected Opportunities
Enter value or search resources…
Output Selected PMIG
{!VAR_Selected_PMI_Rec}
Show or Hide Checkbox Column
Show
Single or Multi-Row Selection (Set to 1 for Single)
1
{!VAR_Selected_PMI_Rec} is a Single record Variable
I have put in console outputs and I can see it is selecting the correct record and the data is selected, but then the error message is displayed at the bottom of the screen when you run it from the cloud designer or you get the following on a lightning app page :-
A Component Error has occurred!
Message
[NoErrorObjectAvailable] Script error.
Component Descriptor
markup://c:datatableFSC
File Name
https://static.lightning.force.com/um5/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_proddebug.js
Function
newErrorHandler
Line
48393
Column
14
Stack Trace
newErrorHandler()@https://static.lightning.force.com/um5/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_proddebug.js:48393:14
errorHandlerWrapper()@https://static.lightning.force.com/um5/auraFW/javascript/UTUQWDA6y0FkeUe3edmJrQ/aura_proddebug.js:48409:25
Object.$handler$()@https://static.lightning.force.com/um5/auraCmpDef?aura.app=markup://one:one&_au=Xyse_SC1Qup0YitleS5Oeg&_ff=DESKTOP&_l=true&_l10n=en_US&_c=false&_style=350856775&_cssvar=true&_density=VIEW_ONE&flexipage=appHomeTemplateHeaderTwoColumnsEqualWidth&flowruntime=actionBar,actionBase,actionButton,actionSelected,body,checkboxInput,choiceUserInput,currencyInput,dataTypeLib,dateInput,dateTimeInput,displayText,dropDownInput,errorText,finalizePause,flowRuntime,flowRuntimeForFlexiPage,flowScreenInput,header,helpIcon,hideFromScreenReader,inputWrapper,inputWrapper2,interview,longTextInput,modalManager,multiCheckbox,numberInput,oneColumn,passwordInput,pauseFinalizedMessage,pauseScreen,picklistInput,picklistInputLwc,radioButtonInput,richTextWrapper,spinner,statusChange,textInput,twoColumn,utils,visibilityWrapper&lightning=flowSupport,progressBar,progressIndicator,progressStep&_uid=886329555:29:463
Many Thanks !!
LikeLike
Even though you are selecting and returning only a single record, the output variable still needs to be a collection variable. You can extract the single record using a Loop in your flow.
LikeLike
Hi eric, so I stripped it back to a single Datatable, only two columns of data and created a new Variable of type record that allows multiple records of the data table Im originally reading.
Same error.
LikeLike
Have you made sure lines 86-95 and 134-139 are not commented out in datatableFSCController.js?
LikeLike
Hi,
yes
Lines 85 -96
}
if(cmp.get(‘v.mydata_custom1’) && cmp.get(‘v.mydata_custom1’).length > 0){
cmp.set(‘v.mydata’, cmp.get(‘v.mydata_custom1’));
cmp.set(‘v.obj’, ‘custom1’);
cmp.set(‘v.preSelection’, cmp.get(‘v.selectedRows_custom1’));
console.log(i);
console.log(cmp.get(‘v.mydata’));
}
if(cmp.get(‘v.mydata_custom2’) && cmp.get(‘v.mydata_custom2’).length > 0){
cmp.set(‘v.mydata’, cmp.get(‘v.mydata_custom2’));
cmp.set(‘v.obj’, ‘custom2’);
cmp.set(‘v.preSelection’, cmp.get(‘v.selectedRows_custom2’));
console.log(i);
console.log(cmp.get(‘v.mydata’));
and
135
}
else if(obj == ‘custom1’){
cmp.set(“v.selectedRows_custom1”, selectedRows);
}
else if(obj == ‘custom2’){
cmp.set(“v.selectedRows_custom2”, selectedRows);
}
LikeLike
Have you set these values in the Input section?
Show or Hide Checkbox Column
Show
Single or Multi-Row Selection (Set to 1 for Single)
1
Have you tried a test flow with just a simple table from a standard object?
LikeLike
Yes Show set and 1 set.
Im doing that now Eric for account 🙂
LikeLike
How do I keep the format of my currency fields I am pulling in to the table?
LikeLike
set the column type parameter to “currency”
LikeLike
Thanks Eric! I had currency capitalized.
LikeLike
I will update the component to support that in the future.
LikeLike
In case anyone else is having a problem with the use of this component in Winter ’20:
I kept getting a fatal error when creating a new flow and trying to use this component. I’ve successfully used it on other flows. The problem I found is that, at the moment, you need to select the “Manually assign variables (advanced)” checkbox in the Get Records call to get the input collection. If you do it the new way available in Winter ’20, the flow will not save. It’s like it doesn’t recognize the new way as being a valid sObject collection variable in this component.
LikeLike
Thanks for the tip.
LikeLike