Build an Investor CRM using Appsmith on Google Sheets

In this tutorial, will help you build an essential Investor CRM, which will let you:

  • Build unique profiles for the fund and investor
  • Filter saved investors by fund specifications and interests levels
  • Track conversations, see the most recent interaction
  • Set deadlines and reminders for action items
  • Manage file sharing by keeping track of files shared with each investor

Hi there,

I’m currently busy with this, but I think I might have found a bug/issue.

When I try to save(insert a row) I get an error, I believe I followed the instructions correctly but I’m not sure seeing as the layout have changed a bit.

the error that I get are as follows:
UncaughtPromiseRejection: addNewInvestor failed to execute

AND

Plugin failed to parse JSON “{
“Investment Fund”: “asdfs”,
“Location”: “asdfsdf”,
“Name of Investor”: “sdfsdf”,
“Designation”: “asdfs”,
“Interesting Portfolio Companies”: “asdf”,
“Size of Fund”: “asdfsd”,
}” with error: Unable to parse request body. Expected a row object.

Any assistance would be greatly appreciated

Hi, can you try adding enclosing the JSON within mustache operator {{}} like below

{{
{
“Investment Fund”: “{{addFund.text}}”,
“Location”: “{{addLocation.text}}”,
“Name of Investor”: “{{addInvestorInput.text}}”,
“Designation”: “{{addDesignation.text}}”,
“Interesting Portfolio Companies”: “{{addPortifolio.text}}”,
“Size of Fund”: “{{addFundSize.text}}”,
“Website”: “{{addWebsite.text}}”,
“Notes”: “{{addNotes.text}}”,
“Interest Levels”: “{{addIntrests.text}}”
}
}}

And I get these errors in the browser console:
main.9996556e.chunk.js:1 TypeError: Cannot read properties of undefined (reading ‘name’)
at main.9996556e.chunk.js:1:2718407
at l (11.5cf7b031.chunk.js:2:3975835)
at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
at Generator.next (11.5cf7b031.chunk.js:2:3976260)
at p (11.5cf7b031.chunk.js:2:702342)
at c (11.5cf7b031.chunk.js:2:702674)
at T. (11.5cf7b031.chunk.js:2:699362)
at 11.5cf7b031.chunk.js:2:701934
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)
at c (11.5cf7b031.chunk.js:2:702674)
at T. (11.5cf7b031.chunk.js:2:699362)
at 11.5cf7b031.chunk.js:2:701934
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)
at c (11.5cf7b031.chunk.js:2:702674)
at T. (11.5cf7b031.chunk.js:2:699362)
at 11.5cf7b031.chunk.js:2:701934
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)
at W (11.5cf7b031.chunk.js:2:702130)
at 11.5cf7b031.chunk.js:2:698747
at m (11.5cf7b031.chunk.js:2:694997)
at T. (11.5cf7b031.chunk.js:2:698727)
at 11.5cf7b031.chunk.js:2:701934
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)
at c (11.5cf7b031.chunk.js:2:702674)
at u (11.5cf7b031.chunk.js:2:697047)
at e.put (11.5cf7b031.chunk.js:2:696512)
at Object.e.put (11.5cf7b031.chunk.js:2:696704)
at 11.5cf7b031.chunk.js:2:704241
at dispatch (11.5cf7b031.chunk.js:2:463433)
at 11.5cf7b031.chunk.js:2:121287
at 11.5cf7b031.chunk.js:2:697255
at d (11.5cf7b031.chunk.js:2:694914)
at y (11.5cf7b031.chunk.js:2:695103)
at p (11.5cf7b031.chunk.js:2:694963)
at T. (11.5cf7b031.chunk.js:2:697209)
at 11.5cf7b031.chunk.js:2:701934
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)
at Object.c [as cont] (11.5cf7b031.chunk.js:2:702674)
at y (11.5cf7b031.chunk.js:2:701193)
at Object.t.cont (11.5cf7b031.chunk.js:2:700733)
at p (11.5cf7b031.chunk.js:2:702387)
at W (11.5cf7b031.chunk.js:2:702130)
at 11.5cf7b031.chunk.js:2:701876
at m (11.5cf7b031.chunk.js:2:702891)
at p (11.5cf7b031.chunk.js:2:702402)

AND

Error: UncaughtPromiseRejection: addNewInvestor failed to execute
at main.9996556e.chunk.js:1:975623
at l (11.5cf7b031.chunk.js:2:3975835)
at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
at Generator.next (11.5cf7b031.chunk.js:2:3976260)
at p (11.5cf7b031.chunk.js:2:702342)
at c (11.5cf7b031.chunk.js:2:702674)
at u (11.5cf7b031.chunk.js:2:697047)
at Object.put (11.5cf7b031.chunk.js:2:695857)
at main.9996556e.chunk.js:1:972163
at l (11.5cf7b031.chunk.js:2:3975835)
at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
at Generator.next (11.5cf7b031.chunk.js:2:3976260)
at p (11.5cf7b031.chunk.js:2:702342)
at c (11.5cf7b031.chunk.js:2:702674)
at u (11.5cf7b031.chunk.js:2:697047)
at Object.put (11.5cf7b031.chunk.js:2:695857)
at Object._broker (main.9996556e.chunk.js:1:973234)
at Worker.a (11.5cf7b031.chunk.js:2:679518)

Sorry about my earlier response. Can you try this?

{{
{
“Investment Fund”: addFund.text,
“Location”: addLocation.text,
“Name of Investor”: addInvestorInput.text,
“Designation”: addDesignation.text,
“Interesting Portfolio Companies”: addPortifolio.text,
“Size of Fund”: addFundSize.text,
“Website”: addWebsite.text,
“Notes”: addNotes.text,
“Interest Levels”: addIntrests.text
}
}}

1 Like

Ok did it in the query/Api builder, and did a run, and get a response:

{

"message":

"Inserted row successfully!"

}

In the Gsheet all the values are null.
BUT, if I try doing it from the modal, it gives a pop-up errors message:
UncaughtPromiseRejection: addNewInvestor failed to execute

the console gives me this:

Error: UncaughtPromiseRejection: addNewInvestor failed to execute
    at main.9996556e.chunk.js:1:975623
    at l (11.5cf7b031.chunk.js:2:3975835)
    at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
    at Generator.next (11.5cf7b031.chunk.js:2:3976260)
    at p (11.5cf7b031.chunk.js:2:702342)
    at c (11.5cf7b031.chunk.js:2:702674)
    at u (11.5cf7b031.chunk.js:2:697047)
    at Object.put (11.5cf7b031.chunk.js:2:695857)
    at main.9996556e.chunk.js:1:972163
    at l (11.5cf7b031.chunk.js:2:3975835)
    at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
    at Generator.next (11.5cf7b031.chunk.js:2:3976260)
    at p (11.5cf7b031.chunk.js:2:702342)
    at c (11.5cf7b031.chunk.js:2:702674)
    at u (11.5cf7b031.chunk.js:2:697047)
    at Object.put (11.5cf7b031.chunk.js:2:695857)
    at Object._broker (main.9996556e.chunk.js:1:973234)
    at Worker.a (11.5cf7b031.chunk.js:2:679518)

Had to remove website, notes & interest levels as they weren’t defined

“Website”: addWebsite.text,
“Notes”: addNotes.text,
“Interest Levels”: addIntrests.text

In the query/api builder I get this response:

{

"message":

"Inserted row successfully!"

}

BUT in the deployed app, I get this:

Error: UncaughtPromiseRejection: addNewInvestor failed to execute
    at main.9996556e.chunk.js:1:975623
    at l (11.5cf7b031.chunk.js:2:3975835)
    at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
    at Generator.next (11.5cf7b031.chunk.js:2:3976260)
    at p (11.5cf7b031.chunk.js:2:702342)
    at c (11.5cf7b031.chunk.js:2:702674)
    at u (11.5cf7b031.chunk.js:2:697047)
    at Object.put (11.5cf7b031.chunk.js:2:695857)
    at main.9996556e.chunk.js:1:972163
    at l (11.5cf7b031.chunk.js:2:3975835)
    at Generator._invoke (11.5cf7b031.chunk.js:2:3975623)
    at Generator.next (11.5cf7b031.chunk.js:2:3976260)
    at p (11.5cf7b031.chunk.js:2:702342)
    at c (11.5cf7b031.chunk.js:2:702674)
    at u (11.5cf7b031.chunk.js:2:697047)
    at Object.put (11.5cf7b031.chunk.js:2:695857)
    at Object._broker (main.9996556e.chunk.js:1:973234)
    at Worker.a (11.5cf7b031.chunk.js:2:679518)
(anonymous) @ main.9996556e.chunk.js:1
l @ 11.5cf7b031.chunk.js:2
(anonymous) @ 11.5cf7b031.chunk.js:2
(anonymous) @ 11.5cf7b031.chunk.js:2
p @ 11.5cf7b031.chunk.js:2
c @ 11.5cf7b031.chunk.js:2
y @ 11.5cf7b031.chunk.js:2
o @ 11.5cf7b031.chunk.js:2
t.cont @ 11.5cf7b031.chunk.js:2
p @ 11.5cf7b031.chunk.js:2
c @ 11.5cf7b031.chunk.js:2
y @ 11.5cf7b031.chunk.js:2
o @ 11.5cf7b031.chunk.js:2
t.cont @ 11.5cf7b031.chunk.js:2
p @ 11.5cf7b031.chunk.js:2
c @ 11.5cf7b031.chunk.js:2
u @ 11.5cf7b031.chunk.js:2
put @ 11.5cf7b031.chunk.js:2
(anonymous) @ main.9996556e.chunk.js:1
l @ 11.5cf7b031.chunk.js:2
(anonymous) @ 11.5cf7b031.chunk.js:2
(anonymous) @ 11.5cf7b031.chunk.js:2
p @ 11.5cf7b031.chunk.js:2
c @ 11.5cf7b031.chunk.js:2
u @ 11.5cf7b031.chunk.js:2
put @ 11.5cf7b031.chunk.js:2
_broker @ main.9996556e.chunk.js:1
a @ 11.5cf7b031.chunk.js:2

Can you show how you are calling the insert api in the modal /form on the app?

OK

in the modal('Modal1"), in the confirm button(“Button3”), under Events of the button, in onClick, I selected Execute a quary, then selected addNewInvestor

Thank you for sharing details. Could you invite me to your app - dancia@appsmith.com so that I can take a look?

I’ve shared it with you

You would need to give me edit access (Developer role) so that I can see how things are set up on the app.

I see it’s working now

Hi Armant, it appears to be working fine now. I just redid {{addNewInvestor.run()}} on the onClick event of the Confirm button. Must have been some typo in the api call

silly question, should the modal not automatically close after a submit?

No question is silly :slight_smile: So you can use the onSuccess parameter of the run() function to specify the modal to close after the record is inserted. Here’s some documentation on that Query - Appsmith

something like this
Screenshot 2022-01-11 at 3.21.38 PM

I also noticed that if you try to do another submit the data from the previous submit is still there, even though the “Reset on submit” option is selected in the input field properties

I believe the reset on submit for the input widget works differently as shown here - Input - Appsmith

You can reset the modal when you click the Confirm button like this
Screenshot 2022-01-11 at 3.28.58 PM

This works, and it’s got success and error popup messages:
(if anyone else reads this and wants to know and add the functionality to their app)

{{addNewInvestor.run(
() => { showAlert("It Was Successful", "success"); resetWidget('Modal1');closeModal('Modal1') }, 
() => { showAlert("Oops, Something went wrong","error"); },
{}
)}}

And if you want to update the table after you edited or deleted a record just add

;getInvestorDetails.run();
right after:
() => { showAlert("Success", "success")

1 Like