2

In LWC development, I have a form and onsubmit I call the handler handleSubmit()

 <lightning-record-edit-form
       record-id={recordId}
       object-api-name={objectApiName}
       onsubmit={handleSubmit}>

In the JS controller, i have the following function:

handleSubmit(event){
    event.preventDefault();
    const fields = event.detail.fields;

    //do things 
}
  • In Javascript, objects can have any type/number of attributes, is there anywhere we are able to see a conventional/default structure of the event? Is there a base standard for the event object and its attributes?
  • I use event.detail.fields because I saw this in an example, but it would have taken me a long time to manually find that I should use event.detail.fields. How does one know which attributes to access?
  • I am learning Javascript, but logging objects to console in chrome is different than java / Salesforce. If I console.log(event);, I there is a lot of getters / setters / target / handler, etc... and it is hard to click through to find info i want. Any insight on best practices to visualize js objects (even links towards any documentation on this would be extremely helpful me master this concept of JS
Improve this question

1 Answer 1

Reset to default
1

In Javascript, objects can have any type/number of attributes, is there anywhere we are able to see a conventional/default structure of the event? Is there a base standard for the event object and its attributes?

In general, you need to check the documentation. For standard events (e.g. 'click' or 'mouseover'), use the MDN, and for custom events (e.g. on any LWC), check the component's documentation. Custom properties will always be in 'detail' (this is a standard convention specified by Web Components CustomEvent).

I use event.detail.fields because I saw this in an example, but it would have taken me a long time to manually find that I should use event.detail.fields. How does one know which attributes to access?

The documentation. To give a specific example, check lightning-record-edit-form. In the documentation tab, you'll see "Custom Events" near the bottom (all components with custom events have this), which explains the parameters, type, and what they represent. This shows the CustomEvent 'error' for when an error event fires (specified by onerror).

onerror documentation

I am learning Javascript, but logging objects to console in chrome is different than java / Salesforce. If I console.log(event);, I there is a lot of getters / setters / target / handler, etc... and it is hard to click through to find info i want. Any insight on best practices to visualize js objects (even links towards any documentation on this would be extremely helpful me master this concept of JS

This is a side effect of Locker Service that protects components from each other. The best way to get out all the items, if you want to debug, is to JSON.stringify(event), or any other variable, for that matter.

Improve this answer
1
  • Thanks for the detailed answer sfdcfox. big fan of your contributions on the exchange :). JS is tough to learn coming from a stricter typed languages (i.e, Java, ...). JS is tough because anything could be anything, so it's hard to keep track / memorize all the conventions / frameworks. I will continue to trek on and through developing more LWC and apps I will hopefully master it soon! Commented Mar 19, 2021 at 13:47

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.