Enhance your Flows with Data Tables – Part 2

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.

Only fieldName, label and type are Required
Default Table Format

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.



Advertisements

23 thoughts on “Enhance your Flows with Data Tables – Part 2

  1. 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?

    Like

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

    Like

  3. 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}

    Like

      1. 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 !!

        Like

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

    Like

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

      Like

      1. 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);
        }

        Like

  5. 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?

    Like

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

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s