Aug 31, 2022 09:43 PM
Im attempting to make an app that will allow the user to select a value from a dropdown, and then the table will filter the records for that value.
I’ve gotten the dropdown working, however for whatever reason the last return has an error and will not work. The problem function is the one that will update the records. How can I resolve this return error?
Solved! Go to Solution.
Sep 01, 2022 05:44 PM
What you’ve actually created is a React component, not just a function. The reason that it’s displaying an error is because you’re missing a closing parenthesis for your preceding forEach
method call. It should sit immediately after the closing curly brace that you have above the return
line.
That aside, while what you’re trying to do might technically work, a better way to have the dropdown trigger a function is to use a useEffect
hook. This hook will live inside the same component as the dropdown, and will be triggered when the value
state changes. Here’s the basic setup:
// ... code before the component's return
useEffect(() => {
// The code to run
}, [value])
// ... existing component return minus the line beginning with "{<ApplyFilter ..."
Long story short, the useEffect
hook allows you to trigger a function when one or more pieces of state are changed. These triggering state values are added in the final array passed to useEffect
. In this case, you want to trigger when the value
state changes, so that ending array becomes [value]
. Any time that value
changes—e.g. when changed via the setValue
call when an option is selected—the arrow function passed to useEffect
will run.
I’m also seeing some issues with the contents of the function that you want to run.
updateRecordAsync
—but it’s missing the await
keyword. In this case you’re not doing anything after the record updates, so it might still work. If not, let us know and we can help you figure out a way around it.await
keyword to perform the update asynchronously—this takes a long time. A better way is to create an array containing all updates, and then use updateRecordsAsync
(notice that “Records” is plural) to perform the update in batches; e.g.while (updates.length)
await table.updateRecordsAsync(updates.splice(0, 50))
useRecords
. This will allow you to always have the latest record data any time you access it. Add let records = useRecords(table)
at the top of your main component (it won’t work inside of a function), and then use the records
variable inside the function passed to the useEffect
hook.true
to check the box or false
to uncheck it.I think that’s all of the problem stuff that I’m seeing (I’m short on time, so I apologize in advance if I’ve missed something).
Sep 01, 2022 05:44 PM
What you’ve actually created is a React component, not just a function. The reason that it’s displaying an error is because you’re missing a closing parenthesis for your preceding forEach
method call. It should sit immediately after the closing curly brace that you have above the return
line.
That aside, while what you’re trying to do might technically work, a better way to have the dropdown trigger a function is to use a useEffect
hook. This hook will live inside the same component as the dropdown, and will be triggered when the value
state changes. Here’s the basic setup:
// ... code before the component's return
useEffect(() => {
// The code to run
}, [value])
// ... existing component return minus the line beginning with "{<ApplyFilter ..."
Long story short, the useEffect
hook allows you to trigger a function when one or more pieces of state are changed. These triggering state values are added in the final array passed to useEffect
. In this case, you want to trigger when the value
state changes, so that ending array becomes [value]
. Any time that value
changes—e.g. when changed via the setValue
call when an option is selected—the arrow function passed to useEffect
will run.
I’m also seeing some issues with the contents of the function that you want to run.
updateRecordAsync
—but it’s missing the await
keyword. In this case you’re not doing anything after the record updates, so it might still work. If not, let us know and we can help you figure out a way around it.await
keyword to perform the update asynchronously—this takes a long time. A better way is to create an array containing all updates, and then use updateRecordsAsync
(notice that “Records” is plural) to perform the update in batches; e.g.while (updates.length)
await table.updateRecordsAsync(updates.splice(0, 50))
useRecords
. This will allow you to always have the latest record data any time you access it. Add let records = useRecords(table)
at the top of your main component (it won’t work inside of a function), and then use the records
variable inside the function passed to the useEffect
hook.true
to check the box or false
to uncheck it.I think that’s all of the problem stuff that I’m seeing (I’m short on time, so I apologize in advance if I’ve missed something).
Sep 06, 2022 06:06 PM
I’ll do my best to come back to this, but I’m tied up with a lot of other stuff right now. If anyone else can jump in and help, please do.
Sep 06, 2022 06:13 PM
I’ve found the update records and the splice has an issue where I’m unable to have it update further than 50 records. Thus my extension works but only up to the first 50 (or less if the splice is set to a lower number) records, all other records do not get updated even when increasing the splice number
Sep 06, 2022 09:17 PM
This 50-record limit for updates is listed in the documentation, though I’m not sure if it’s in the custom extension docs. It’s definitely in the scripting API docs. The way to work with this limit is to use a loop like this:
while (updates.length) {
await table.updateRecordsAsync(updates.splice(0, 50))
}
This will perform the updates in batches of 50 records at a time.