Lightning component to open (and close) another component

Hi everyone,

I am trying to write a Lightning component bundle that would allow me to display to display a list or record and when a record is clicked it "opens" a form to enter data.

An example of what I am trying to achieve would be

1. A user select an account.
2. A list of contact associated with thi account is displayed (currently done with <aura:iteration>).
3. When the user click on a contact it opens a form.
4. The user enter data in the form press save and a record (related to the contact) is created.
5. When the record is created the form is closed and the user is back to the screen with the account and the list of contacts.

I think I have 1,2 and 4 down but I am lost on how to have 3 and 5 work.

Thank you for your help,

Max

November 16, 2015
·
Like
0
·
Follow
2

Best Answer chosen by Max Paq

James Loghry
Hi Max,

For #3 and #5, I would include the form in a div / modal. If you're interested in how a modal would work, refer to the modal component at http://www.lightningdesignsystem.com. When you click on the contact, you would call a helper / controller method that toggles the modal to display via CSS. Here's an example of how to toggle a lightning design system modal:

({ toggleModal : function(component, event) { var modal = component.find('modal'); $A.util.toggleClass(el,'slds-hide'); } })

Your save button for the related record probably calls an AuraEnabled Apex method. In the callback in your controller, you would simply call the toggleModal method again to hide the modal.

I can provide some more examples on this if you need, but hopefully that gets you started at least thinking about how you can approach your challenge.