1

I have a first component, that display a list of records. In that component I have another component, displaying a modal with a form, and a validate button. The purpose of this form i to add a record to the list.

So when I lauch the app, the first component is displyed, the other is display=none, and when I click on a button to add a record the second component is displayed (with display=block).

When I click on the save button on the second component, the component is again display=none and the first component only is displayed. But Here the list is not refreshed with the newly added record. How can I refresh the first component when the second is closed ?

Here is what I want : enter image description here

2

There are similar things going on in my app. For example, a user could click a "close" icon on one component, which causes it to destroy itself, and also causes another component to move a toggle switch to an off position.

I elected to use events to handle these. I considered using bound attributes or methods, but decided to try and make the components more standalone and not need a bunch of variable bindings or method calls. The event mechanism allows me to send an event when a component does something (such as "I'm being closed") and have other components listen for that and take action. That way, the component that initiates the event doesn't have to worry about communication channels with recipients (such as attributes or method calls), it just fires an event, and it's up to other components to listen for those if they're interested. I happen to use application events instead of component events, only because I didn't want to concern myself with bubbling order. To me, application events were easier to work with, so that's what I stuck with.

If you wanted to go with an event approach, your Component 2 could fire some kind of "Validation complete" event at the end of the validation logic. The event could also contain attribute values, if those are needed for recipients to do their processing. Component 1 could listen for those events and based on the event, attributes, and/or target, take appropriate action, such as refreshing itself.

Hope this info helps!

1

At the end of your last method called in the component 2 controller (or helper), you'll want to call something like:

component.set("v.newItem",newItem);

where "newItem" is an attribute that's been declared in component 1. You may also need to set an attribute for "v.items" if the "newItem" has been added to a list of items using a method called in your form. In which case, "items" would also be an attribute you'd declare in component 1.

See the Lightning Components Basics Module for an example that demonstrates this in practice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.