+ Start a Discussion
Max PaqMax Paq 

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

 

Best Answer chosen by Max Paq
James LoghryJames 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.

All Answers

James LoghryJames 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.
This was selected as the best answer
Max PaqMax Paq
Thank you James,

Never worked on modal before but I like the idea a lot. Will give it a shot.