Enhance your Flows with Data Tables – Part 1

Lightning Flow Screen Components are a great way to add power to and improve the look of your Flows.  In this four -part series, I’ll show you how a single component, designed to display a list or table, can enhance your Flows.

The 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 the base 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
  • Can be used to display and inline edit a collection of records

Part 1: Selecting a Record

When I first built this flow, I used a Record Choice Set (Dynamic Record Choice) in my screen to present a list of records to make a selection from.

A common issue Admins run into with this type of input is that one is restricted to displaying just a single field from the record when presenting the selection.  Like many Admins, I created a new custom field in my object to combine the values of multiple other fields so I could show more information in my selection prompt.

Custom Formula Field for my Record Selection
Formula

This type of selection is awkward and you are not able to make the information line up from one record to the next.


Here’s what happens when I replace the Record Choice Selection with a Datatable Flow Screen Component.

See https://unofficialsf.com/datatable for complete information and instructions on this component.

My Flow looks up a collection of records to display in the table and passes that parameter to the component.

Note: Even though you are displaying a table for a single object, parameters are available for 8 standard or custom objects. This is to allow an Admin to easily use this component with no Lightning Component source code customization required.

sObject Collection Variable with records to display in the table

I define the structure of my table by providing field and formatting information for up to 10 columns.

Column Parameters – The first column can display an icon
Column Parameters – Field Name, Label & Type with Width & Alignment

Column Parameters – Only fieldName, label and type are required

When the user clicks Next, the component can pass a collection of the selected records back to the Flow.

Output Parameter – sObject Collection Variable with record(s) selected from the table

Now the user sees a formatted table with a checkbox available to make their selection.

Selecting a record with a datatable

The Flow then uses the values it needs from the selected record to complete its processing.


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.
Part 4 – Use a Datatable to inline edit a group of records.



230 thoughts on “Enhance your Flows with Data Tables – Part 1

    1. Hi Eric,

      icon
      It worked. It seems the setting just wasn’t saved. Other issues are all solved as follows:

      Data table for mobile
      “Wrap text” on each column is an immediate solution but I also referred to developer’s site.

      https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInAction

      I found 2 great options:
      – resizeColumnDisabled
      – minColumnWidth

      and also found a counter of selected rows.
      – selectedRowsCount
      This now prevent from choosing more or less than expected.

      I start learning the Lightning components from this data table and mesmerized by the Lightning magic… it was fun! Thank you for you post and support!

      Like

  1. Hi Eric,

    I am using it to select one record in the output. It is not showing me the error but I am not able to get the record values of the selected row.

    Can you please help me out.

    Thanks in Advance.

    Like

      1. Thanks, Eric for a quick response.

        I am using the collection variable for getting a selected record (for both lwc and aura version).

        The aura version is still not working. And lwc is throwing me some error.

        class java.util.ArrayList cannot be cast to class common.apex.runtime.SObjectRow (java.util.ArrayList is in module java.base of loader ‘bootstrap’; common.apex.runtime.SObjectRow is in unnamed module of loader org.eclipse.osgi.internal.loader.EquinoxClassLoader @60d1a32f)

        Please let me know if you think I may be missing some configuration.

        Thanks

        Like

      2. Erica,

        The selected record can be seen in the logs from both aura version and lwc version.
        But I am not able to use the record/values anywhere further.

        Thanks

        Like

      3. Here is the log.

        Lightning Component: show_member_recordList
        Screen component: c:datatableFSC
        Inputs:
        column01_fieldName = (Name)
        column01_icon = (standard:account)
        column01_label = (NAME)
        column02_fieldName = (MH_DOB__c)
        column02_label = (DOB)
        column03_fieldName = (Id)
        column03_label = (ID)
        column04_fieldName = (MH_Line_of_Business__c)
        column04_label = (LOB)
        mydata_standard1 = member_recordList ([{Id=0017A00000VjGMbQAN, Name=Test Member Hipaa, MH_DOB__c=1989-08-03 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=Medicare, MH_Medicaid_Id__c=00123456789, MH_SSN__c=123456789}, {Id=0017A00000Vk5eOQAR, Name=Test Member 2 Hipaa, MH_DOB__c=2020-04-10 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=MMP, MH_Medicaid_Id__c=MEDI987648, MH_SSN__c=null}])
        selectedRows_standard1 = selected_member ([[Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]])
        showButtons = (true)
        singleSelection = (1)
        Outputs:
        column01_editable = false
        column01_fieldName = Name
        column01_icon = standard:account
        column01_label = NAME
        column01_type = text
        column02_editable = false
        column02_fieldName = MH_DOB__c
        column02_label = DOB
        column02_type = text
        column03_editable = false
        column03_fieldName = Id
        column03_label = ID
        column03_type = text
        column04_editable = false
        column04_fieldName = MH_Line_of_Business__c
        column04_label = LOB
        column04_type = text
        column05_editable = false
        column05_type = text
        column06_editable = false
        column06_type = text
        column07_editable = false
        column07_type = text
        column08_editable = false
        column08_type = text
        column09_editable = false
        column09_type = text
        column10_editable = false
        column10_type = text
        hideShow = show
        keyField = Id
        mydata_standard1 = [[Account (MH_Medicaid_Id__c:00123456789, MH_MemberID__c:12345, MH_Line_of_Business__c:Medicare, Id:0017A00000VjGMbQAN, MH_SSN__c:123456789, MH_DOB__c:Thu Aug 03 00:00:00 GMT 1989, Name:Test Member Hipaa)], [Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]]
        mydata_standard2 = []
        mydata_standard3 = []
        mydata_standard4 = []
        mydata_standard5 = []
        mydata_standard6 = []
        selectedRows_standard1 = [[Account (MH_Medicaid_Id__c:00123456789, MH_MemberID__c:12345, MH_Line_of_Business__c:Medicare, Id:0017A00000VjGMbQAN, MH_SSN__c:123456789, MH_DOB__c:Thu Aug 03 00:00:00 GMT 1989, Name:Test Member Hipaa)]]
        selectedRows_standard2 = []
        selectedRows_standard3 = []
        selectedRows_standard4 = []
        selectedRows_standard5 = []
        selectedRows_standard6 = []
        showButtons = true
        singleSelection = 1

        Lightning Component: show_member_recordList_lwc
        Screen component: c:datatableLwcFsc
        Inputs:
        columnFields = (Name, MH_DOB__c, Id, MH_Line_of_Business__c)
        singleRowSelection = (true)
        tableData = member_recordList ([{Id=0017A00000VjGMbQAN, Name=Test Member Hipaa, MH_DOB__c=1989-08-03 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=Medicare, MH_Medicaid_Id__c=00123456789, MH_SSN__c=123456789}, {Id=0017A00000Vk5eOQAR, Name=Test Member 2 Hipaa, MH_DOB__c=2020-04-10 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=MMP, MH_Medicaid_Id__c=MEDI987648, MH_SSN__c=null}])
        Outputs:
        outputSelectedRows = selected_member ([[Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]])

        Like

      4. Debug Log

        Lightning Component: show_member_recordList
        Screen component: c:datatableFSC
        Inputs:
        column01_fieldName = (Name)
        column01_icon = (standard:account)
        column01_label = (NAME)
        column02_fieldName = (MH_DOB__c)
        column02_label = (DOB)
        column03_fieldName = (Id)
        column03_label = (ID)
        column04_fieldName = (MH_Line_of_Business__c)
        column04_label = (LOB)
        mydata_standard1 = member_recordList ([{Id=0017A00000VjGMbQAN, Name=Test Member Hipaa, MH_DOB__c=1989-08-03 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=Medicare, MH_Medicaid_Id__c=00123456789, MH_SSN__c=123456789}, {Id=0017A00000Vk5eOQAR, Name=Test Member 2 Hipaa, MH_DOB__c=2020-04-10 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=MMP, MH_Medicaid_Id__c=MEDI987648, MH_SSN__c=null}])
        selectedRows_standard1 = selected_member ([[Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]])
        showButtons = (true)
        singleSelection = (1)
        Outputs:
        column01_editable = false
        column01_fieldName = Name
        column01_icon = standard:account
        column01_label = NAME
        column01_type = text
        column02_editable = false
        column02_fieldName = MH_DOB__c
        column02_label = DOB
        column02_type = text
        column03_editable = false
        column03_fieldName = Id
        column03_label = ID
        column03_type = text
        column04_editable = false
        column04_fieldName = MH_Line_of_Business__c
        column04_label = LOB
        column04_type = text
        column05_editable = false
        column05_type = text
        column06_editable = false
        column06_type = text
        column07_editable = false
        column07_type = text
        column08_editable = false
        column08_type = text
        column09_editable = false
        column09_type = text
        column10_editable = false
        column10_type = text
        hideShow = show
        keyField = Id
        mydata_standard1 = [[Account (MH_Medicaid_Id__c:00123456789, MH_MemberID__c:12345, MH_Line_of_Business__c:Medicare, Id:0017A00000VjGMbQAN, MH_SSN__c:123456789, MH_DOB__c:Thu Aug 03 00:00:00 GMT 1989, Name:Test Member Hipaa)], [Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]]
        mydata_standard2 = []
        mydata_standard3 = []
        mydata_standard4 = []
        mydata_standard5 = []
        mydata_standard6 = []
        selectedRows_standard1 = [[Account (MH_Medicaid_Id__c:00123456789, MH_MemberID__c:12345, MH_Line_of_Business__c:Medicare, Id:0017A00000VjGMbQAN, MH_SSN__c:123456789, MH_DOB__c:Thu Aug 03 00:00:00 GMT 1989, Name:Test Member Hipaa)]]
        selectedRows_standard2 = []
        selectedRows_standard3 = []
        selectedRows_standard4 = []
        selectedRows_standard5 = []
        selectedRows_standard6 = []
        showButtons = true
        singleSelection = 1

        Lightning Component: show_member_recordList_lwc
        Screen component: c:datatableLwcFsc
        Inputs:
        columnFields = (Name, MH_DOB__c, Id, MH_Line_of_Business__c)
        singleRowSelection = (true)
        tableData = member_recordList ([{Id=0017A00000VjGMbQAN, Name=Test Member Hipaa, MH_DOB__c=1989-08-03 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=Medicare, MH_Medicaid_Id__c=00123456789, MH_SSN__c=123456789}, {Id=0017A00000Vk5eOQAR, Name=Test Member 2 Hipaa, MH_DOB__c=2020-04-10 00:00:00, MH_MemberID__c=12345, MH_Line_of_Business__c=MMP, MH_Medicaid_Id__c=MEDI987648, MH_SSN__c=null}])
        Outputs:
        outputSelectedRows = selected_member ([[Account (MH_Medicaid_Id__c:MEDI987648, MH_MemberID__c:12345, MH_Line_of_Business__c:MMP, Id:0017A00000Vk5eOQAR, MH_SSN__c:null, MH_DOB__c:Fri Apr 10 00:00:00 GMT 2020, Name:Test Member 2 Hipaa)]])

        Like

    1. Hi Eric,

      I also encounter the problem how to extract chosen Single record from the datatable.

      I set the contact table, and choose Single (1) and store in the output Selected records, however, the record seems not stored in the output selected records. It returns null.

      To extract 1 id, I loop the collection (single record) after the screen. or any other way we can refer the id chosen single record from screen in later nodes in the flow?
      https://drive.google.com/file/d/17XPU5yZnD0yBksZnzLG38a0I4J3pRpWI/view?usp=sharing

      Thanks for your advice.

      Like

      1. Right now, the only way to reference a single selected record is by adding a loop after the screen with the datatable. I will be updating the component in the future to support a single record variable.

        Like

  2. Eric,

    I am somewhat new to flows, but I am excited to use this data table component! I am having trouble getting the component to accept a record collection variable though. I created a variable with the ‘record’ data type, and checked ‘allow multiple values’. but it is not recognized as an option when I try to enter it in the ‘collection’ field of the component. It is only letting me select single variables, but tell me they are the incorrect data type. Any clues where I went wrong?

    Like

      1. I was trying to create a data table for a custom object, but was having trouble getting anything to work. However, after Installed the LWC version, I followed the steps to update the code for my object, and it worked great! TBH, i think it was something else in my flow causing the issue.
        Thanks!

        Liked by 1 person

  3. Great solution. Thank you for providing.
    I wonder whether you can offer a comment on the challenge I have.
    I have done the installation, and created the customization for a custom object per the instructions. Everything works beautifully. For me at least. Other users are seeing a very narrow column on the screen making it difficult to see the record columns. My screen is much wider and is respecting the column widths. I can’t find any help information on Flow screen widths, so I am wondering if it is tied to the datatable code.

    Thanks

    Like

      1. Thanks for the quick reply. That was done per the instruction, and renders well on my screen. The Flow Screen dialog box is reasonably wide. On other users with similar screen resolution, the flow screen is very narrow. This may not be related to data tables at all, but I can’t find any reason why a flow screen renders well for one profile and is unreadable for another. I was speculating that it MIGHT be related to the data table, but then it might not be.

        Like

  4. Hello Eric, I hope you’ve been well during this time. To start, I’d like to thank you for creating and maintaining this excellent component.

    I’m hoping you can help me understand how to make use of the following parameter, as I find myself not able to use it.

    Single or Multi-Row Selection (Set to 1 for Single)

    I’ve tried using a variable of Text type with default value of 1, also tried with Single. I can still select multiple records. I also tried typing in 1 or Single directly into the field but it errors out.

    Any thoughts on why I can’t get this parameter to work? Thanks in advance!

    Matt

    Like

      1. Thanks Eric.

        In red immediately below the field, it says ‘Enter a valid value’.

        I’ve tried entering 1, and also Single, however it provides the above error for both.

        Like

  5. Eric,

    I am using your excellent datatable component in a flow that I am developing. Everything is working well with one exception.

    I allow the user to select one or more rows using the dynamically-generated checkboxes at the beginning of each row. I am also using the preselected rows option to display some rows already checked. This allows users to deselect rows and select other rows.

    When there are two or more rows, everything works perfectly, allowing the user to change the selections. However, when only one row is available, instead of displaying a checkbox for selection, the component displays a radio button. This does not permit the user to deselect the preselected row.

    Is there any way to prevent the component from displaying a radio button instead of a checkbox for row selection when only one row is available?

    Like

  6. I am using datatable_Contact_v1.1 t to Get Records (Contacts) and display the table. However even after defining the output Selected Rows to a CollectionVariable the selected records are not passed. Debug log also doesn’t show any record as selected. Any thoughts

    Like

  7. Hi Eric,

    This is a great feature. I am looking to displayi images in the data table along with image name for user to select the images which they want to transfer.
    Presently I am using Record collection variable to display thumbnail images . Here I can display the image only, but I want to display in datatable to show more information about image.

    How can I achieve this?

    Like

  8. Hi Eric,
    Here are few issues I am facing.

    When I try to save any edit record it is not getting saved by default. Again I need to add update record in flow to update all edited records. Can you suggest how this can be corrected.

    Is there any way to support picklist fields also has editable fields ?

    Like

    1. The component is designed to pass the edited values back to the flow for you to do your own update records. Editing of picklist and lookup fields will be a future enhancement.

      Like

  9. Hi Eric,

    Are you aware of any issues with the Summer ’20 release that affects the selection of rows in this component? My implementation stopped working after the release was applied over the weekend.

    Like

      1. Hi Eric, I’m trying to figure out why I am not getting the lookup link. I am only getting a text field with the recordID (not clickable) even though the field is definitely a lookup. Is there something I have to do to enable having links?

        Like

      2. Thanks, Eric. Is there a way to get the link to appear for a non-master-detail relationship? I’m pulling in an opportunity product line with quantity and product but the product is a lookup (not master-detail) to the Product object.

        Like

      3. Product may be a unique case because of how OLI interacts with Pricebook records.. You could try creating a formula field in your OpportunityLineitem record to grab the content you are looking for from the Product record.

        On Fri, Sep 18, 2020 at 10:03 AM ericsplayground wrote:

        >

        Like

  10. Hey Eric,
    I was wondering if it was possible to change the date format? Right now it is coming in as YYYY-MM-DD and we need it to be DD/MM/YYYY.

    Like

      1. Hello again Eric,

        Updated to the new datatableV2, and it is pretty amazing, so thank you! I am still having trouble trying to get the date to display as DD/MM/YYYY. Any help would be awesome!

        Like

      2. Can you show me how you have configured your Column Type Attributes? Also, please confirm the field type you are trying to format.

        Like

      3. In my Sandbox environment I have:

        2:date, 3:date, 4:number

        2:{day:’numeric’, month:’numeric’, year:’numeric’}; 3:{day:’numeric’, month:’numeric’, year:’numeric’}; 4:{minimumFractionDigits:0}; 5:{currencyDisplayAs:symbol}

        In our Partial environment:
        2:date, 3:date, 4:number

        2:{day:’numeric’, month:’numeric’, year:’numeric’, time-zone:’UTC’}; 3:{day:’numeric’, month:’numeric’, year:’numeric’, time-zone:’UTC’} 4:{minimumFractionDigits:0}; 5:{currencyDisplayAs:symbol}

        They were the same, but in my sandbox it shows up as ‘DD/MM/YYY’ and in our partial it shows up as ‘YYYY-MM-DD’. They were setup the same, but I have been playing around with trying to get it to work.

        Liked by 1 person

  11. Are there any differences in the locale settings for the org or the user in those two orgs?

    Try removing the quotes on the attribute definition: {day:numeric, month:numeric, year:numeric}.

    Like

  12. Hello,

    I’m using the datatable v2, and I can’t get the table to load any date fields. Do you know what would cause this?

    Like

    1. The attributes for the date field should be “TypeAttributes” instead of “Other Attributes”. Move the attribute from Other to Type and it should display correctly.

      Like

      1. Thanks, Eric. Unfortuantely, I tried what you suggested and it’s still not working. Here is the attribute that I have populated in the Column TypeAttributes parameter:

        3:{day:numeric, month:numeric, year:numeric}

        Still not rendering the date field in the table.

        Like

  13. Has anyone experienced issues with users who have a different language? I’m using the older version and users using French are receiving a flow error and are unable to display the page. I don’t know whether this is flow in general or the data table, but this is the only screen flow they are having trouble with.
    [Great tool btw]

    Liked by 1 person

  14. Hi Eric,

    Love this component – I’ve been using it for all my recent screenflows after updating it to include B2B specific objects!

    I’ve hit a bit of a snag. Here’s the process:
    The user filters products they’d like to update the prices for (first screen).
    A Get Records element grabs those that match the filter fields.
    The Next screen shows those records in the datatable (just viewing, no selection).
    If the user looks at those products and realizes they need to change the filter, I want to allow them to go back, change it, run the Get again, and show the updated products in the datatable on the same screen.

    The issue I’m running into is that, once populated the first time with data, the datatable input collection is not updating to the “new” collection in the updated Get.
    Can you think of any workarounds to dynamically update the input collection to match the Get??

    Like

    1. You could disable the Previous button and then add an option (button) on the next screen to ask the user if they need to make changes. If so, go back to the beginning of the flow.

      Like

  15. Apologies for the truncated message – I had a more well thought-out post but it wouldn’t work previously lol.

    Firstly, I’m completely new to Salesforce, so my issue may be rudimentary but I’ve read through your posts and the one from UnofficialSF.com and still am not populating data in my table. Any assistance would be greatly appreciated. In any case, thanks so much for all you do and helping out. 🙂

    Like

    1. The first 2 thing I suggest checking are:
      1. You have values in the collection variable from a Get Records that you are passing into the datatable
      2. You have the exact API names for each of the field columns you are displaying. – Start to test this by trying to show just 1 field (column)

      Like

      1. Thanks so much for the quick reply! I’m not sure what you meant by passing the get records collection variable into the datatable (again, newbie), but I went ahead and just deleted by Get Records element to be sure.

        I’ll also delete my fields (columns) and try one at a time.
        -A

        Like

  16. Hi there,

    I was able to figure it out, thank you! Unfortunately, I have another issue lol. My table is populating data now (yay), but two of the fields are reporting only IDs and not the actual ‘names’. Any idea on how I can fix this?

    I’ve tried many combinations – Lookup as a ‘type’ (also Lookup(Company), Name as a ‘type’, text as a ‘type’, switching out AccountId and Company Name, entering only ‘name’ as the label, and others.

    Here are my screenshots: https://rockventures.box.com/s/57ie34sxkhdx9v34ap1om88tjbwl0fvy

    Like

      1. Hi Eric
        I’m currently using you component datableFSC to update a set of selected rows (your tuto part 2). Almost all if fine except I noticed the component does not work when trying to update a number typed column with a decimal number (1,5 example) known the field is declared Number(3, 1). Nothing happens at the entry validation but working when the number is an interger. Did you get faced to this issue ? Thank you by advance

        Like

      2. Hi Eric, Thanks for your article. Can i make a lookup field as a Hyperlink? is it possible or still not possible?
        I have tried as URL but again that make the field as URL.

        I am looking for similar kind of functionality which we usually have it on Lookup. Like you can click on it.

        Like

      3. In order for a lookup or master/detail field to display as a link, it must be “reparentable”

        Can you please elobrate on reparentable?

        and how to make it like that?

        Like

      4. Eric, Thanks for your response, But i do have Lookup field created there, and i didn`t see that reparentable option there? Am i missing something?

        Regards
        Abdullah

        Like

  17. I’m a little confused about the various versions or maybe I should call them “editions” of datatable. I have been working with datatableV2 version 2.47 for a few weeks now.

    I like the functionality, and have been trying to expand upon it. I am new to Lightning Web Components, so this is a bit challenging and I see that I am running into some of the limitations that are due to the underlying datatable component from Salesforce. One is the fact that we cannot make a checkbox appear instead of a radio button when there is only one record passed in.

    In any case, I see references here to datatableFSC, which I guess means Datatable Flow Screen Component, but isn’t datatableV2 a flow screen component as well? And now I am seeing a page for just Datatable, but it seems like it is exactly the same as datatableV2.

    This is the page for datatableV2: https://unofficialsf.com/datatablev2-lightning-web-component-for-flow-screens/ and this is the page for just Datatable: https://unofficialsf.com/datatable-lightning-web-component-for-flow-screens-2/ . Both are called “lightning-web-component-for-flow-screens” in the URL. And both point to the same repository on GitHub for installation: https://github.com/ericrsmith35/DatatableV2 . Have you renamed datatableV2 to just Datatable? And is datatableFSC something different?

    I have been working on datatableV2 for a few weeks now and I have made it possible to add new records, but I think I see why you have not done this yourself: there are a lot of pitfalls and limitations. But now I see there is a new version of datatable and I am confused as to whether it is now called just Datatable and if it is the same as datatableV2.

    I would like to get the latest code and apply my changes again to that code. Some day I may learn how to extend this code rather than modify the code you have provided. But for now I would like to know about the editions and which one I should download to work on the latest version of datatableV2 that I have been working with, which is 2.47.

    Like

    1. Jason,

      You are very thorough and observant. I have created 3 major versions of the Datatable component.

      My original version was an Aura Web Component called datatableFSC. This original version required that each and every object to be displayed in a datatable be hard-coded into the source code for the component.

      Starting in the Spring ’20 release, Salesforce provided a method that allowed users to specify the Object to use at the time of configuration for Lightning Web Components. I rewrote the datatable code from scratch as a Lightning Web Component in order to take advantage of this. That version is called datatableV2.

      The most recent innovation released by Salesforce is what the call Custom Property Editors (CPE). CPEs allow a developer to bypass the standard basic list of all component attributes in the Flow Builder and replace it with a Lightning Web Component that can present a logical and formatted interface for the user to configure the component. The CPE I developed for the Datatable component takes this even further by including a button that launches a separate Flow that displays a special Datatable the user can interact with to configure their Datatable. I like to refer to this as my Custom Column Configuration Wizard.

      Once installed, this component will appear as Datatable in the Flow Builder. DatatableV2 will still work with your existing Flows and can coexist with the new Datatable. All future enhancements will be made to this latest version of the component.

      Like

  18. Just installed v3 of DataTable and would like to use it for the Quote and QuoteLineItem objects but the 2 objects aren’t showing in the object dropdown.

    Like

  19. Sorry, one more question. How do I uninstall Datatable v2? It appears that some of the components in v2 are used by v3 so it doesn’t allow me to uninstall v2.

    Apex Class – SObjectController2
    Lightning Web Component Bundle – richDatatable
    Apex Class – SObjectController2

    Like

  20. This should be the last time you have to uninstall in order to upgrade. You need to go to Setup > Installed Packages > find the datatableV2 package and select uninstall. The may be existing flows that you will have to temporarily remove first as part of the uninstall process.

    Your best bet there would be to edit each of those flows to temporarily remove the datatableV2 components from the screens and save the flow. Then delete all of the older versions of that flow that still have the component in them. Then after installing the new datatableV3, add the new datatable back to the flows.

    Like

  21. I’m trying to use the wraptext function to show the full ‘description’ field from a case record. In the ‘Special Other Attributes’ field I’ve tried adding:

    Description:{wrapText: true, wrapTextMaxLines: 5}
    and
    2:{wrapText: true, wrapTextMaxLines: 5}

    Neither works. I would expect it to expand the row height to accomodate the full text in the Description field. What am I missing here?

    Like

    1. I’ll add that it seems to work okay with standard (255 length) text fields but bugs out with long text fields. The text overlaps neighboring columns rather than wrapping.

      Like

  22. Hi Eric,

    I am loving this component so far. I have been using it in a majority of our flows and it is working great! I have one question. Is there a way to paginate the datatable results into multiple sets of records? For instance, show multiple pages of 20 records?

    Thanks,

    Alex

    Like

    1. I have not built in support for pagination. Are you looking to support that in a single table instead of setting the “Table Height” and using the scroll bar?

      Like

  23. I really need the sections to show premium/standard items side by side. Is there a way to remove the header row altogether?

    Like

      1. I’m finding that even if I clear the colwidth in the Advanced Configuration, I still get a bar in the middle of the header.

        Like

  24. Hi Eric,

    I installed the latest version of datatable 3.3.2 and was trying to display a collection of Account records on the screen. I followed the steps and picked up Account Name and a text field to show in table.
    However on running the flow, the screen presented gives me the links of the records instead of the account names.

    Please let me know if I am missing anything here.

    Thanks,
    Divya

    Like

    1. In order for a lookup or master/detail field to display as a link, it must be “reparentable”

      In order to have the Datatable display a Lookup field as a link to the record rather than just the recordId value in the field, the running User must have Edit access to the object whose records are being displayed in the Datatable. For example, if you have a Datatable for Contact records and include the AccountId(Lookup) field, the running User needs to have Edit access for the Contact object in order for the AccountId field to show as a clickable link with the Account’s Name. Without Edit access to the Contact record, the Datatable will display, as unclickable, the Account’s recordId value. For information on how you can temporarily add then remove Edit access in a Flow, read the referenced Help Article and/or complete the referenced Trailhead.

      Help Article: Create a Flow That Can Activate or Deactivate a Session-Based Permission Set
      https://help.salesforce.com/articleView?id=sf.perm_sets_session_activate_flow.htm&type=5

      Trailhead: Session-Based Permission Sets and Security
      https://trailhead.salesforce.com/content/learn/modules/session_based_perms

      Like

      1. Thanks Eric for you response.
        I just have Account records and I have already got a collection of Account records in the flow which are being used as input for the datatable component. I don’t ned to show any other related records..just Account records. On picking Account Name(standard salesforce account name field) while configuring Columns, it shows proper Account Name like: BHP, Smith in Account Name column but after saving the config and activating the flows (flow is triggered from button). The screen shows the url link to reach the account records instead of the Account Names. I am the system admin and running the flow, so i have access to all the objects and fields.
        I have even unchecked the option Show navigation links on Name fields.

        Please let me know what I am missing.

        Thanks,
        Divya

        Like

  25. Hello Everyone,
    I am getting the following error after the latest upgrade to the Datatable package to 3.2.5 version:

    Please wait… Loading Field Details on the Datatable configure columns page. Cannot go further from here. The whole page on the flow gets stuck on that blank page. Not sure if anyone is facing this issue. How can we resolve it?

    Like

    1. If you see this error when trying to Configure Columns, try going to Setup > Security > Session Settings and unchecking “Enable clickjack protection for customer Visualforce pages with headers disabled“. Also, in your Setup > User settings, make sure both Debug Mode and Development Mode are Unchecked.

      Like

  26. Hi Eric,

    Any ideas on how to properly display the full list of picklist-values in a datatable with not very many records? We have a picklist with three values, and as long as there is less than ~3 records in the table it is very hard to scroll the picklist and select the value you want.

    I know there is documentation saying that you can allow the component to overflow it’s container – but as it also says, that extends the datatable horizontally (and in our case – into the activity section of the record), which would create a worse user experience than the picklist-troubles are 🙂

    Like

    1. You could try to let Salesforce fit the columns into the existing container rather than have all the widths hard-coded. You can do this by editing the Column Widths attribute in the advanced section and leave out at least one column or even clear the attribute completely.

      Like

  27. Hello Eric,
    first thanks for this great component.
    I get a strange error on this configuration:
    – Screenflow on a Custom Object.
    – Collection is a custom object, which is detail of Account Master/Detail.
    Datatable is displaying correctly. After selecting a record and go next, I get this error:
    Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your administrator with the error ID shown here and any other related details. Error ID: 1115696948-446120 (-414970662)
    and the datatable is displayed twice.
    I run as admin, so shouldn’t be a permission problem.

    Like

      1. Thank you Eric for your super quick answer. This way it works. We had GeoLocation Fields in!

        Like

  28. Hi Eric,

    Thanks for making this awesome component. I use it a lot. One thing I’m having a struggle with, though, is completely hiding the column label/header. I’ve tried using:
    1:hideLabel:true

    in Special Other Attributes and Special Cell attributes and it doesn’t work. Is it possible to completely hide the column header(s)?

    Like

    1. The table header will always show but you could provice a custom label for each column. Use a special character that won’t display such as a non-breakable space. Hold down the alt key and enter 0160 on the numeric keypad.

      Like

  29. Hey Eric,

    I am having difficulty changing column labels when Input data is Apex-Defined.

    From the documentation:
    “If you select the “Input data is Apex-Defined” or the “Input data is Serialized” checkbox, other attributes will be displayed including different selections for which records to display and which records are pre-selected.”

    I am assuming that column labels are included in the “other attributes displayed”?

    My ‘apex object’ is a text template similar to {“UnitPrice”:”{!UnitPrice}”}. This part is working (forgive me if I broke anything copying only a section of my text template.)

    Column Labels
    UnitPrice:Super Cool

    Thanks!

    Like

      1. Thanks for the prompt reply Eric! Sorry I couldn’t reciprocate, covid finally brought me low.

        Back on topic, defining the labels by column number also does not work. Worth noting that I am able to references the columns to set their width, just not labels.

        Like

  30. Hi Eric is there a list of allowable values and their meanings for “Special Type Attributes” and “Special Other Attributes”?

    I’m trying to display an href from an APEX-defined data type and hoping that this might be the way around my inability to do so.

    Like

      1. Thanks for the suggestion. The SLDS base component page mentions a few attributes but I don’t think it’s the same thing (https://www.lightningdesignsystem.com/components/data-tables/#site-main-content)

        Assuming the blog you are suggesting to check is this one: https://ericsplayground.wordpress.com/how-to-use-an-apex-defined-object-with-my-datatable-flow-component/ then there’s nothing there either

        I’ve also checked the unofficialsf docs which mentions Special Attributes, but these appear to be to allow you to apply slds-themes so are just for the presentation of the content, not how the content is handled. Unfortunately it looks like this might not be a solution to what I am looking for

        Like

      2. I’m using an APEX-defined Data Type so neither of those are available to me in the base object. You can only create primitives unfortunately

        I tried setting the column type in the datatable screen component to be richtext but it made no difference. It looks like text and url are the only possible options and neither of those works

        Like

Leave a reply to Eric Smith Cancel reply