tsalb / lwc-utils Goto Github PK

Borrowing from my other repo wiki, I should incorporate these into its own wiki page to highlight the so what of this repo:

14. The following things are kind of difficult in LWC:
    • Event messaging for complex apps are hard, so I solved that.
    • Datatables are hard, so I solved that.
    • Dialogs / modals so hard, so I solved that.

The goal here will be better surface the design pattern elements of this repo to developers who browse the wiki, the so what.

When embedding the SOQL Datatable on an Account Lighting Record Page and entering in a SOQL string (any string) I get a spinner in the App Builder interface. When I check it out on a live record page I get the following error: Attempt to de-reference a null object Class.DataTableService.getTableCache: line 202, column 1

I am running this as an admin and as a quick check I granted access to the DataTableService class to myself via a Permission Set.

Running this in my Winter 21 Developer Edition box.

in soqldatatable, it looks like row numbers only display until the 99th record.

screenshot: https://i.imgur.com/8HqsRrh.png

Need a pipeline schema/naming convention for bi directional comms.

It's possible to pass in whatever kind of query string you'd like when using the SOQL datatable, but there is also a line that would escape quotes from being used. Because that value isn't assigned, it's still possible to pass in values with extra dynamism, like in the test_query_has_advanced_where_filter_should_return_response test:

String queryString = 'SELECT Name FROM User WHERE Name LIKE \'%BlahBlahBlah%\' LIMIT 1';

It wouldn't be possible to do such powerful lookups using SOQL datatable without these previously unescaped strings being supported, but this is also an avenue for potential SOQL injection.

The support for escaped strings should either be documented in the Readme (with the SOQL injection caveat) or the feature could also be removed entirely.

When a soqldatatable is embedded on a flexipage, with buttons configured to call a flow and pass in the selected records as a collection, it would be useful if the flow could access fields on parent objects.

For example, if a datatable shows a list of Contacts, when passing them to a flow I'd like the flow to be able to access Account fields (the same as if the Contacts were fetched using a Get Records). This way, when looping through the collection of Contacts, I could use something like {!Loop_thru_Contacts.Account.Website}.

The same goes for custom objects, let's say my object has a lookup field to Contact, I'd like to use {!Loop_thru_records.Contact__r.Email} within a loop.

If it helps performance, I'd be open to specifying in the configuration which lookup fields I'd want to reference that way, so that it doesn't need to include fields from every lookup object on the record.

Let me know if any more details would be helpful. Thank you!

For soqlDatatable there will never be support for inner / child queries.

The rationale here is that it's not possible to have polymorphic cell data types if the "alignment" of the parent and child columns (fields) are different.

I should:

• Add a user friendly error message, something like "Child / Inner SOQL is not supported" if it detects you are trying.
• Update the README

For the collection datatable it is currently not possible to set a custom relative hight leading to issues with UX as seen in video attached.

Right now column creation respects FLS, but the actual SOQL powering this component does not. So, this is a bit of security by obscurity. They can't see the data since there is no column definition, but the data is still getting returned by query.

Look for ways to enhance security in DataTableService.cls with stripInaccessible and perhaps other techniques.

Waiting on Salesforce's official parity answer to overlaylibrary as I feel the official sample repos "popup" is not a good enough.

As of now, if you run a flow from a button, when you click Finish, it restarts from the beginning of the flow. You need to use DialogAutoCloser in your screen (and probably hide the Finish button) to get the modal to close. It would be nice to have the option for Finish to close the modal, since that's how flows work elsewhere in SF.

I've noticed this on and off and haven't yet pinpointed the problem. Sometimes when searching to edit a lookup field, no results are shown even though they exist (nor does the toast that says no results display). Refreshing the page seems to fix it.

Currenty, when a picklist field is displayed in a Datatable, it displays the API Name instead of the Value/Label.

In the example above, it displays 60 instead of 60 min (But it does display 60 min in the picker)

Hi! I have a number of questions about setting up Action Configurations, figured I can ask them here to get answers and maybe get the readme updated too if you think it should be. Thanks!

1. On Datatable Config, is Type supposed to contain Actions / Lookups / both? It’s not clear from the tooltip what that field is for. (Why not make it a picklist so it’s easier to understand? )

2. On Datatable Action Config, what do the different Types do? I'm guessing that Row Actions are for selecting record(s) and running something, but what are the others?

3. Do I need to choose a Row Action Name? Would that be only if the Type is Row Action?

4. For Flow API name and LWC Name – am I supposed to enter just one of those? Should it be a Flow if Row Action is custom_flow and same if LWC?

I can kind of try to guess the answers to these by looking at the example configs, but I think it would be a better experience if the tooltips and/or the readme gave more info about them.

Thank you!

Hi folks, just a note to point out that without a namespace there will likely be some conflicts due to naming of various components in this package, (eg: datatable, a super popular component in UnofficialSF's arsenal....). Would be great if a namespace could be added..

Two issues: When using the edit-row action via custom metadata type within soqlDatatable, the record-form pops up just fine within the modal, however:

• When clicking "Cancel", the modal does not close
• When clicking "Save", an error occurs
  

Hey James, great stuff. I was looking at the code, and noticed this:

which returns null for some conditions, but that is not longer valid code in later version of LWC.

normally, what you can do now is to have a HTML file with empty template. import it, and return it instead of null, that should have the same effect.

Hi, first of all, thanks for this wonderful library !

We've played with it in a scratch org, and are now looking at the cleanest way to use it within our SFDX packages.

What would you recommend as the best way to use it while :

• Not deploying all of the examples
• Still being able to pull your upstream changes

Would you recommend cloning force-app/main/default in our SFDX repository (Maybe as a git submodule) as a separate package, but adding manually everything that is an example to the .forceignore file ? Or would you have another cleaner way to do so in mind ?

Thanks a lot !

Right now when soqlDatatable receives the onrefreshsoqldatatable message service evt, it does not correctly execute handleRefresh in a way that starts the spinner.

The fix is to:

Do this in the template instead:

onrefreshsoqldatatable={handleMessageRefresh}

Remove all references in setting spinner at the soqlDatatable level

// this.showSpinner = true; // delete this line, not comment out

And finally, give it its own handler instead of trying to reuse the same.

  handleMessageRefresh() {
    // This event is through messageService, so we need to mimic the actual button click
    this.baseDatatable.refreshTable();
  }

  handleRefresh() {
    // This event is bubbled from playDatatable, so spinner was set there
    this.refreshTable();
  }

ETA roughly end of month or april.

When using a button on SOQL Datatable to run a flow (in a modal), if you want the modal to close when the flow is done, you need to add DialogAutoCloser to the last screen. It would be nice if there was a flow action that could do the same thing, when we don't want to display that component to the user.

TY

I added a parent's custom text field to the datatable but Fuzzy Search doesnt appear to grab it - are parent fields not supported yet?

When displaying data which doesn't fit on the screen, you need to scroll to the bottom to see the Save and Cancel buttons. This is a little confusing and also annoying. Can that be fixed?

I'd like to configure a datatable (on flexipage) so that it shows each user a list of their records - either via record owner, or via a custom User lookup field. I don't see a way to do that currently.

(Current use case is showing sales reps a dynamic list of calls to make.)

Temporary workaround: create a boolean formula field on the object that compares the running user to the lookup field and filter on that.

Thanks!

The feature that shows how many records are shown in the datatable is a nice one. I'm thinking it would be a better UX if the number was blank until the table finished loading. The way it is now, it shows (0) while it loads the records, and then updates to the correct number, and I'm thinking that might be confusing.

Thanks!

It would be great to have more than 2 table actions at the top of a datatable

Problem

There appears to be a difference in lifecycle rendering methods when Debug Mode is enabled for Lightning Components that leaves <c-picklist> without the value for fieldDescribe handed down from datatablePicklistCell via datatableEditableCell. If Debug Mode is off, the value is correctly handed down from parent to child and the picklist editable cell renders as expected. In Debug Mode, an error is silently raised (which can only be viewed by adding a constructor and debugger statement in picklist.js ....) alerting you that fieldDescribe is trying to be assigned without the value having been set in the parent yet:

Proposed Solution

Since the issue only affects people in Debug Mode, let's just update the readme to let people know that this is expected behavior while debugging, and doesn't affect the production-level component.

When using the collection datatable component I noticed that when displaying 'AccountId' from a vanilla Get Records on Contact, it appears as such:

I'm using the latest version of collection datatable.

It would be nice to have the option to choose "all" for sortable/editable fields, instead of typing each one manually.

Can we get a feature for "card mode", which displays the component like other OOTB components - with padding around the datatable and with the label in bold?

I have a soql datatable on a record page which has a button that calls a flow and passes in the selected records. Since fields from parent records aren't included during the handoff, I'm going to run my own query inside the flow to fetch them. What do you think about passing in a text-collection of record ids in addition to the record collection? That would save a step (extracting their Ids from the collection) in my flow.

Currently, it is not clear that there are two actions that come configurable for you (per row action on a SOQL Datatable):

• edit_row
• delete_row

See here:

• lwc-utils/utils-core/main/default/objects/Datatable_Action_Config__mdt/fields/Row_Action_Name__c.field-meta.xml

  Line 15 in 7b35d37

  <fullName>edit_row</fullName>

• lwc-utils/utils-core/main/default/lwc/datatable/datatable.js

  Line 514 in 7b35d37

  case 'delete_row': {

It would be a good idea to surface these two better (outside of recipes) and straight into the wiki!

When displaying a picklist field in the collection datatable, the value of the picklist is not displayed initially.

When editing the picklist you can select a value, however that value is not shown in the datatable afterwords.

It would be nice to have the option to override column labels in some situations.

1. When providing instructions on setting up Flow Variables - make sure you note that the variables must have 'Input' checked.
2. Put in big red letters that Row-actions are not supported in Flow screens.

Combines #45:

Would love to have the option to output both the selected/edited rows and the rows that were not selected into separate collections.

When displaying a collection of record to end user, I want to do work to any records selected by the user and identify the ones they did not select for a separate task.

There is currently a way to do this in flow using two loops and a decision to pull any records not in the selected collection out into a new collection.

and #61:

What do you think about passing in a text-collection of record ids in addition to the record collection? That would save a step (extracting their Ids from the collection) in my flow.

when try to load record page getting this error

I'd like to use CollectionDatatable to display custom metadata records. I use CMDT to store field mappings for some apex code that syncs fields between two objects, and it would be nice to build my own custom UI for managing those.

I would pair it with https://github.com/jongpie/CustomMetadataSaver to actually save new/edited records to the server (since you can't DML them within flow).

Thanks!

Would love to have the option to output both the selected/edited rows and the rows that were not selected into separate collections.

When displaying a collection of record to end user, I want to do work to any records selected by the user and identify the ones they did not select for a separate task.

There is currently a way to do this in flow using two loops and a decision to pull any records not in the selected collection out into a new collection.

Is there a way to have a datatable refresh its data when a flow modal closes (or alternatively, when the flow in the modal updates a record in the datatable)?

I display a list of contacts and my user can click a row action to open a modal to view/edit more fields. If they edit a field and then close the modal, the datatable still shows the old data. Wondering if there's a trick to force it to reload the data (maybe even just the data in those rows).

TIA

Can I check if the ServiceRecordEvent actually needs to be registered in the markup of EventService.cmp?

If you rapidly clear and set values in Search it will not clear correctly if you do it too fast. Root cause is I should really put both the "set back to original" and the "set filtered value" in the same debouncer.

Here is the fix:

  // datatable.js

  ...
  
  handleSearch(event) {
    if (!this.tableData || !this._fuseData) {
      return;
    }
    const searchText = event.detail.value;

    // Debounce the entire search key enter process, guards against rapid filtering and clearing of input
    window.clearTimeout(this._delaySearch);
    // eslint-disable-next-line @lwc/lwc/no-async-operation
    this._delaySearch = setTimeout(() => {
      if (!searchText) {
        this.tableData = this._originalTableData;
        return;
      }
      if (searchText.length >= 2) {
        const results = this._fuseData.search(searchText);
        // Not sure why fuse returns hits higher than score, filter it out again here
        const indexHits = results.filter(obj => obj.score <= SEARCH_THRESHOLD).map(obj => obj.refIndex);
        // Even if there are no hits, we want that UX feedback to the user
        this.tableData = this._originalTableData.filter((row, index) => indexHits.includes(index));
      }
    }, 350);
  }

ETA end of month or april

The ability to sort and filter the datatable would be a great addition!

When editing a lookup field, if you search for a value and then click on the matching one, you still need to click again outside the cell in order for the change to "register". Is there any way to eliminate the second click? It's confusing until you figure out why your record isn't marked as "Edited" and is also a little clumsy.

TIA

#24 is a really neat feature I'd love to have documented, we should get the README updated with some usage steps and instructions for all to see.

Not that important yet to create a PR for it, but we can use this thread to dump pictures and hash out what kind of examples to show users this is now possible (and any limitations should be called out as well).

FYI @jamessimone

Where: Aggregate SOQL Datatable Tab - 2nd datatable
Complete message:
fetchTableCache error
Attempt to de-reference a null object Class.DataTableService.getColumnData: line 317, column 1 Class.DataTableService.getTableCache: line 197, column 1

Installed Utils and then Recipes.

This is in a Trailhead Org (if it matters).

Place your FAQs here!

• My app page datatable has a button that launches a flow. How do I get the modal to go away when the flow is finished?
• I want to call a flow via a button on my flexipage datatable. How do I pass in the selected record(s)?
• In SOQL Datatable in a Flow, what does the 'Record Id' field do?

Hi! Seems like links to lookup fields on parent records don't work. They redirect to sf.com/undefined.

For example: if I'm displaying a list of records which have a lookup field to Contact, and I want to display the Contact's Account, the Account displays correctly but if you click it you are sent to a bad link.

Here's example soql:
SELECT Name, Contact__c, Contact__r.AccountId FROM MyCustomObj__c

The Contact__ field link works fine but the Account one doesn't.

TY!

Hi,

I'm trying to add a Quick Action (Aura Component) that includes my own LWC Component, and this LWC component would include a soqlDatatable.

If I add <c:soqlDatatable></c:soqlDatatable> to the Aura component directly, it works, but if I add it to my LWC component, nothing gets rendered.

Do you have any idea why ? (I do not have any error in the console or logs)

Thanks

<!--  lwc/myComponent.html -->
<template>
  <p>The table below should be displayed but does not.</p>
  <c:soqlDatatable query-string="SELECT Id FROM Account"></c:soqlDatatable>
</template>

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <!-- The datatable works fine here -->
    <c:soqlDatatable queryString="SELECT Id FROM Account"></c:soqlDatatable>

    <!-- The component loads, but not the datatable -->
    <c:myComponent></c:myComponent>
</aura:component>	

Wherever I put the SOQL Datatable it always renders a horizontal scrollbar letting me scroll literally 1px.
This is from a record page in my developer edition org:

The scrollbar disappears when I manually reduce one of the columns sizes.
Has anyone had this before?

It would be nice to set a custom percentage when limiting height relative to screen. Right now the only option is 60%, but for some pages a lower or higher number would make more sense.

Thanks!