How to run JS function with dependencies

[dapper moon]

Hello,
I am building a page where I have a client list in table widget with client details form, which shows detailed information about selected client. Also there is another table on the page which contains list of client's documents. In the database there is "documents" table which contains client_id, file_id, file_name fields. Files themselves are stored in S3. In Appsmith I have JS function GetUserFiles which gets list of S3 files and matching them to the SQL query for the list of the files of currently selected user. This function is a data source for Documents table widget.
The problem: this GetUserFiles function does not produce data unless I run it manually. I have setup trigger from Users table to run it whenever a table row is selected, however it does not have any effect.
I think I need to setup dependencies between quesries contributing to resulting data, but can't find out how to do this.
What I am doing wrong?
Thanks

[sage barn]

Hello! I Am AppyScripture, your dedicated support bot for Appsmith queries. If
your GetUserFiles JavaScript function does not automatically run when a row is
selected in your Users table, it could be that the function is not being
triggered correctly or it's missing a dependency. Here are a few steps to
troubleshoot and resolve common issues: - Check if the correct Table Row
Selected event is configured: Make sure that the "onRowSelected" event of the
Users table is set up to call the GetUserFiles function. - Add dependencies to
the JS function: Make sure that the JavaScript function is dependent on the
selected row data. You can reference the selected row in your JS function to
create this dependency. - Make sure the JS function is called: If the JS
function is not being called, ensure that the function itself is error-free and
its call statement from the "onRowSelected" event handler is written correctly.

• Check for errors: Use Appsmith's debugger to check for possible errors when
  the function is supposed to run. Without being able to see the exact
  configuration of your Appsmith application, those are some general
  recommendations. If after trying these steps you're still facing issues, please
  provide me with more details such as the name of the table widget, the exact
  structure of your GetUserFiles JavaScript function, and how you have configured
  the onRowSelected event for the Users table. This will allow me to give you more
  specific advice. If this is an urgent matter or if you are feeling frustrated, I
  can assign a human agent to further assist you. If you don't find my response
  helpful, you can request to speak to a human agent

[dapper moon]

Hi! Thanks for replying.

• Attached is the trigger setup in Users table - it should call documents and getUserFiles. The main problem that according to the logs getUserFiles.myFun1 function is NOT called, while documents is called successfully
• When I run the function manually it works as expected.
• Here is the code from the function in question itself: it receives input data from "documents" Postgres query and listFiles S3 query. The
• When I open the windows for the first time or refresh it I get this error: "TypeError: getUserFiles: "getUserFiles.userDocuments" is undefined . Please fix getUserFiles.myFun1." But i guess this is normal, because the default User selected when window open doen;t have any associated documents. Further when i change selection to another user - there is no error. There are no other errors.

Please advise?

[sage barn]

Since you've shared that the GetUserFiles function is not being called but the
documents query is, it may be worth checking if the trigger setup is correct in
your Users table. Let's troubleshoot this step by step. - Ensure that the
JavaScript function is directly linked to the "onRowSelected" trigger. If
getUserFiles.myFun1 is not being called, it might be that the linkage is broken
or not set up correctly. - Review the getUserFiles.myFun1 function to make
sure it has the correct parameters set to be triggered by the row selection
event in the Users table. - You mentioned that "getUserFiles.userDocuments" is
undefined, which implies a possible reference issue. Verify that the
"userDocuments" property exists and is populated correctly before being used in
your function. Because you're experiencing the "undefined" error on initial load
or refresh, consider adding a null check or conditional logic to handle cases
when "userDocuments" is not yet defined due to not having a user selected.
Unfortunately, since the actual function code and trigger configuration were
shared via external links, which I cannot access as a bot, I'm unable to review
your actual code. Could you please include the snippet of the JavaScript
function here? Ensure not to share sensitive information. Additionally, check
the order of operations in your page load. It is necessary that the "documents"
query which populates "getUserFiles.userDocuments" must be completed before the
JavaScript function attempts to use this data. If the data is not yet available
when the function runs, you might see the error you described. If you’ve tried
these steps and the issue persists, I can take a closer look at your function
code if you provide it directly in the chat. Please keep in mind to maintain the
code format for readability. If you don't find my response helpful, you can
request to speak to a human agent

[dapper moon]

Here is my function code:
`export default {
// The function combines list of file names and matching them with signed URLs from S3. It is further used for visualizing user files preview selector
combinedData: [],
userDocuments: {},
s3Files: {},
myFun1 () {
// Data from my queries are stored in "userDocuments" and "s3Files"
this.userDocuments = documents.data;
this.s3Files = listFiles.data;

    // Loop through the documents data
    for(let i = 0; i < this.userDocuments.length; i++) {
        // Find the corresponding file in the s3Files data
        let s3File = this.s3Files.find(file => file.fileName === this.userDocuments[i].filename);

        // If a matching file is found, add the filename and signed URL to the combinedData array
        if(s3File) {
            this.combinedData.push({
                fileName: this.userDocuments[i].filename,
                                    clientId: this.userDocuments[i].user_id,
                                    fileId: this.userDocuments[i].id,
                signedUrl: s3File.signedUrl,
                                  urlExpiry: s3File.urlExpiryDate
            });
        }
    }
    return this.combinedData;
    }

}`

[dapper moon]

@sage barn hi! Did you see my message above?

[sage barn]

Someone from our team will reach out to you on this thread. If you change your
mind, you can ask to speak to an AI agent at any time.

[dapper moon]

Dear @sage barn can I get a responce please?

[dapper moon]

Hey @sage barn, any chance to reply?

[sage barn]

Hello @dapper moon!

Since you want your UI to react to changes in this data you should be using the
appsmith
store
instead of local JS variables. Please review those docs and make the necessary
changes to your code and it will work as you envision here.

Thank you for your ongoing support and patience. We aim to provide you with
helpful assistance and hope we have addressed your question adequately.

Please take a moment to share your experience with our support team.
https://survey.frontapp.com/v2/09a400bf433bc9676d67/97d311e777249f649b014d3b4c5fae63
[https://survey.frontapp.com/v2/09a400bf433bc9676d67/97d311e777249f649b014d3b4c5fae63]

[dapper moon]

Hi!
I have no problem with data, but have problem with calling the function. Could you please elaborate how store can help with that?
I thought that JS functions can be called from other objects and trigger allows me to configure that. 3 triggers on the screenshot are fired successfully, but the 4th one for the JS function - is not.
So I am tryign to understand what I am doing wrong...
If I am talking to the bot, may a human agent have a look please? )

[sage barn]

Hello!

The screenshot you sent looks good to me. What error are you getting from the
function? Or do you suspect it isn't being called at all? If that's the case,
can you add a console.log() statement to the top of your function and look for
it when triggering this action? This will help us figure out if it's even being
called.

[dapper moon]

Hello, the problem was caused by the fact that data provided by one query appeared after the second query finished working. So the result was always empty.
In order to fix that I created a JS function which calls first query and waits for its result and only after that calls the second. It works correclty now. But such a solution seems complicated to me. Is there a way to set dependencies for execution sequence between queries and JS functions?

[sage barn]

Hello! I'm Amelia with Appsmith Support. 👋
I have reviewed the screenshots you have sent and the problem is that in the
onRowSelected event, you were running the queries Transactions, documents,
and the getUserFiles function in parallel instead of running them in sequence.
Since you use the responses of these 2 queries in your JS function, the function
needs to run only after the queries have finished running.
Please read the following documents that should help you implement it correctly:

• https://docs.appsmith.com/core-concepts/writing-code/javascript-promises)

https://www.appsmithcommunity.com/article/knowledgebase/how-do-i-use-asyncawait-javascript
[https://www.appsmithcommunity.com/article/knowledgebase/how-do-i-use-asyncawait-javascript]

Let me know if you have further questions or issues.

[dapper moon]

Hi Amelia, I have already done exactly that - wrote a small async function. Though it would be great to have the same possibility in IDE, 'cause the only thing my function does is waiting for one trigger before calling another. Anyway, I have solved my problem.
Thank you!