+ 33 (0)173031595 - +41 22 593 48 76/77 contact@apsynergy.com

Lorsqu’on doit aller au delà des fonctionnalités standards dans le Napili template de Community Cloud, on ne peut simplement créer une page Visualforce. Par contre, on a la possibilité de créer une composant Lightning pour obtenir une interface graphique personnalisée.
Nous avons établi qu’un composant Lightning est aussi souple qu’une page Visualforce. Il est possible de déployer des operations de type CRUD pour norte composant ou notre App Lightning. Plus bas vous trouverez en quelques étapes un exemple de code pour créer un composant Lightning.

1 : Créer le composant Lightning.
2 : Nommer décrire et vérifier la configuration du composant en fonction de votre besoin technique.
3 : Vous pouvez voir une page avec plusieurs boutons sur le côté droit de la page.
4 : Voici les étapes de base pour créer un enregistrement contact en utilisant un composant Lightning.

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>
               <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>
            </div>
            <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>
               <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>
            </div>
            <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>
               <div class="slds-form-element slds-size--1-of-2"></div>
            </div>
         </div>
      </fieldset>
   </form>
</aura:component>

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.
      });
      $A.enqueueAction(action);
}

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

public class DemoContactController{
    @AuraEnabled
    public static Map<String, Object> SaveContact(String strContact) {
        Map<String, Object> mapResult = new Map<String, Object>();
         try{
            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;
   }
}