+ 33 (0)1 73 03 15 95 - +41 (0)22 809 49 09

When you need to go beyond what is available as standard in the Napili template, Visualforce is not an option, however Lightning components give you the possibility to provide a custom user interface in Napili. It turns out Lightning component is as powerful as Visualforce pages. We can implement logic to perform CRUD operations from our Lightning component or app. Below you will find a few steps and methods in order to create a Lightning component.

1: Create Lightning Component [Developer Console>New>Lightning Component].
2: Provide a name, description and check the component configuration as per your requirement.
3: Now you will be able to see a page and a bundle of controls on the right side.
4: Here are the basic steps for creating a contact record using a Lightning component.

1: Component: [component.cmp]

<aura:component controller="DemoContactController">
   <aura:attribute name="contact" type="Contact" />
   <form class="slds">
      <fieldset class="slds-form--compound">
         <div class="form-element__group">
            <div class="slds-form-element__row">
               <div class="slds-form-element slds-size--1-of-2">
                  <label class="slds-form-element__label" for="input-01">Last Name*</label>
                  <force:inputField class="slds-input" value="{!v.contact.LastName}" />
               <div class="slds-form-element slds-size--1-of-2">
                  <label class="slds-form-element__label" for="input-02">First Name</label>
                  <force:inputField class="slds-input" value="{!v.contact.FirstName}" />
            <div class="slds-form-element__row">
               <div class="slds-form-element slds-size--1-of-2">
                  <label class="slds-form-element__label" for="input-02">Email</label>
                  <force:inputField class="slds-input" value="{!v.contact.Email}" />
               <div class="slds-form-element slds-size--1-of-2">
                  <label class="slds-form-element__label" for="input-01">Account</label>
                  <force:inputField class="slds-input" value="{!v.contact.Account}" />
            <div class="slds-form-element__row">
               <div class="slds-form-element slds-size--1-of-2 flo-right">
                  <ui:button class="slds-button slds-button--neutral" label="Save" press="{!c.save}"/>
               <div class="slds-form-element slds-size--1-of-2"></div>

2: Client Controller (Javascript): [componentController.js]

save: function(component, event, helper) {
      var action  = component.get("c.SaveContact");
      var contact = component.get("v.contact");
      action.setParams({strContact: JSON.stringify(contact)});
      action.setCallback(this, function(event, result) { 
           //stuff after your result either success or fail will go here.

3: Server Controller (Apex): [DemoContactController.cls]

public class DemoContactController{
    public static Map<String, Object> SaveContact(String strContact) {
        Map<String, Object> mapResult = new Map<String, Object>();
            Contact contactToInsert = (Contact)JSON.deserialize(strContact, Contact.class);
            insert contactToInsert;
            mapResult.put('isSuccess', true);
            mapResult.put('message', 'Saved Successfully.');
        }catch(Exception ex){    
            mapResult.put('isSuccess', false);
           mapResult.put('message', ex.getMessage().unescapeHtml4());
       return mapResult;