Build an Investor CRM using Appsmith on Google Sheets

vihar · June 1, 2021, 4:00pm

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

vihar · June 1, 2021, 4:00pm

armant · January 11, 2022, 8:10am

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

dancia · January 11, 2022, 8:49am

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}}”
}
}}

armant · January 11, 2022, 8:50am

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)

dancia · January 11, 2022, 8:54am

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
}
}}

armant · January 11, 2022, 9:00am

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)

armant · January 11, 2022, 9:05am

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

dancia · January 11, 2022, 9:09am

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

armant · January 11, 2022, 9:15am

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

dancia · January 11, 2022, 9:16am

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

armant · January 11, 2022, 9:22am

I’ve shared it with you

dancia · January 11, 2022, 9:30am

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

armant · January 11, 2022, 9:36am

I see it’s working now

dancia · January 11, 2022, 9:36am

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

armant · January 11, 2022, 9:38am

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

dancia · January 11, 2022, 9:48am

No question is silly 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

armant · January 11, 2022, 9:49am

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

dancia · January 11, 2022, 9:59am

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

armant · January 12, 2022, 9:15am

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")