Hi All,
As I promised in my last
post, I have chosen my topic on Lightning Components with Lightning Design
System. I build a Lightning Application by using several lightning components
for Managing Contacts.
I am using Lighting Design System package in my component for design:
ContactListProcess.cmp: On this I have displayed a button “New Contact”, and a List
of Contacts with some actions for Edit and Delete contacts. For Displaying the
contacts in the list, I am using ContactProcess.cmp
like we have ExpenseTracker app in the “Lightning Components Developer’s Guide”.
On Click of this “New
Contact” button I am rendering a Form to create a new contact with Submit and
Cancel buttons. On click of submit button it will create a contact and will add
in the Contact list below and on click of Cancel button it will hide the form
again. I am using the inputLookup component on this form to provide the Lookup
functionality. The source and reason is specified below in my post.
After filling up the form, I
have saved the record and got in my contact list.
On click of edit button, the
application will display the form which we are displaying on click of “New
Button” and populate all the values from the selected record to the above form.
So that we could make changes and save the contact.
On Click of delete, we are
simply deleting the record from the list and from the database.
Here is a list of resources for
that application:
Resources
|
Description
|
ManageContacts
Bundle
|
|
ManageContactsLightning.app
|
The top-level component
that contains all other components
|
ContactListProcess
Bundle
|
|
ContactListProcess.cmp
|
A collection of Lightning
input components to collect user input and To Display a List of Contacts
|
ContactListProcessController.js
|
A client-side controller
containing actions to handle user interactions on the ContactListProcess
|
ContactListProcessHelper.js
|
A client-side helper
functions called by the controller actions
|
ContactListProcessRenderer.js
|
To Render the changes on
Click of the New Contact Button like for display/hide the input form
|
ContactProcess
Bundle
|
|
ContactProcess.cmp
|
A collection of Lightning
output components to display data from contact records and related actions
|
ContactProcessController.js
|
A client-side controller containing
actions to handle user interactions on the display of the contact list
|
Apex
Class
|
|
NewContactController. apxc
|
Apex controller that loads
data, inserts, or updates an contact record
|
Event
|
|
NewContactEvent.evt
|
The event fired when an contact
item is edited from the display of the contact list
|
ContactDeleteEvent.evt
|
The event fired when an contact
item is deleted from the display of the contact list
|
Other
Resources
|
|
inputLookup Component
|
As with Lightning in
Winter-16, we don’t have the inputLookup component yet, so I found a resource
online by Enrico Murru,
which I have applied. It’s again a bundle of resources and will require some
customization in its code like changes in the controller and some extra events
based on your functionality. Thanks Enrico Murru for this nice component.
|
If you wish to try your
hands, I have given the required list of resources above and for inputLookup component;
you could get it from the link below:
Hope this will be helpful for you. If you need any guidance, you could contact me anytime. I
will be happy to help.
It will be little Trichy to
listen the events and getting parameters from that events but the
ExpenseTracker application could help you to get the functional tips.
My Next post will be on
Lightning Design System / Lightning Connect / Lightning Experience / Lightning
Components or a mix of these topics with Visualforce.
I will try to post something
related to the certifications which are recently introduces by salesforce as
many of you asked me in last some days.
Thanks for the nice response
on my posts. Let me know if you need to hear on something specific. I will try
to prioritize that topic.
For Code or any help, feel
free to contact me. Keep trying your hands on Salesforce updates and Lightning.
Happy coding J
Regards,
Amit Goyal
Email: amitgoyal09@gmail.com
Skype: amitgoyal09
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.