Monthly Archive March 2018

Bynayakdillip

upload multiple file in salesforce lightning

upload multiple file in salesforce lightning

Here I am going to explain how you upload multiple files in the lightning component as well as how you used same in the lightning community.

Create new lightning component with forceCommunity:availableForAllPageTypes implements

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="RecordId" type="String"   default="0017F00000WVzKl"/> 
    <lightning:fileUpload label="Upload File(.pdf, .png,.jpg)"
                          name="fileUploader" 
                          multiple="true" 
                          accept=".pdf, .png,.jpg"
                          recordId="{!v.RecordId}" 
                          onuploadfinished="{!c.handleUploadFinished}" />
    
</aura:component>

Note:Pass your own Record ID like Account RecordID:- 0017F00000WVzKl.i have pass here

Controller JS

({
    handleUploadFinished : function(component, event, helper) {
        
        // Get the list of uploaded files
        var uploadedFiles = event.getParam("files");
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "File "+uploadedFiles[0].name+" Uploaded successfully."
        });
        toastEvent.fire();
    }
})

Now Drag your component over community builder then publish it. after successfully publish you can upload file



Also, you can check the files over account object with attached file according to your record ID.

Bynayakdillip

Full calendar lightning salesforce

FullCalendar calender implementation in salesforce lightning application

Here i explain where you can use this lighting component

  • 1.Lightning Community
  • 2.Lightning Salesforce Page

Before creating the component you need to download full calendar and add into the static Resource

Here I have created one apex controller class where I fetch account information with start Date, End Date, Name and ID

public class AccountClass {
    @AuraEnabled
    public static list<Account> getAllAccounts()
    {
        list<Account> accountList=[select id,name,Start_Date__c,Last_Date__c  from account where Start_Date__c!=null limit 10];
        return accountList;
    }

}

Step:-2
Create markup for component

<aura:component controller="AccountClass" implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >
    <ltng:require styles="{!$Resource.fullcalender     + '/fullcalendar390/fullcalendar.css'}"
                  scripts="{!join(',',
                           $Resource.fullcalender  + '/fullcalendar390/lib/jquery.min.js',
                           $Resource.fullcalender  + '/fullcalendar390/lib/moment.min.js',
                           $Resource.fullcalender  + '/fullcalendar390/fullcalendar.js'
                           )}"
                  afterScriptsLoaded="{!c.afterScriptsLoaded}" />
    <ltng:require styles="/resource/fullcalender/fullcalendar390/fullcalendar.css"/>
    
    
    <aura:attribute name="accountList" type="object[]"></aura:attribute>
    
    <div id="calendar"></div>
</aura:component>

Step:3
Create component controller here

({
    afterScriptsLoaded: function(cmp,evt,helper){
        var accountList = cmp.get("v.accountList");
        if(!accountList.length)
        {
            helper.fetchEvents(cmp);
        }
    },

})

Step:4
Create component helper class here

({
    loadDataToCalendar :function(component,data){  
        //Find Current date for default date
        var d = new Date();
        var month = d.getMonth()+1;
        var day = d.getDate();
        var currentDate = d.getFullYear() + '/' +
            (month<10 ? '0' : '') + month + '/' +
            (day<10 ? '0' : '') + day;
        
       
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            defaultDate: currentDate,
            editable: true,
            eventLimit: true,
            events:data
        });
    },
    
    formatFullCalendarData : function(component,events) {
        var josnDataArray = [];
        for(var i = 0;i < events.length;i++){
            josnDataArray.push({
                'title':events[i].Name,
                'start':events[i].Start_Date__c,
                'end':events[i].Last_Date__c,
                'id':events[i].Id
            });
        }
        return josnDataArray;
    },
    
    fetchEvents : function(component) {
        var action = component.get("c.getAllAccounts"); 
        var self = this;
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS"){
                var josnArr = self.formatFullCalendarData(component,response.getReturnValue());
                self.loadDataToCalendar(component,josnArr);
                component.set("v.accountList",josnArr);
            }
        });
        
        $A.enqueueAction(action); 
    }, 
})

Step:5 For testing the component here i have create one lightning app

<aura:application >
	<c:FullCalendercmp ></c:FullCalendercmp>
</aura:application>

Step:6:For Testing the component for lightning community bold.I have just added the component over community page its look like this

If you have any issue share me on the comment box I will help you.

Bynayakdillip

How to create a Community Lightning Component

Building Custom Lightning Components for salesforce Communities

Step:-1 Create Apex Class HelloWorld.apxc

public class HelloWorld {
@AuraEnabled
    public static string getUserName()
    {
        return userinfo.getName();
    }
}

Step:-2 Create Lightning Component with name UserInfoComponent.cmp

<aura:component controller="HelloWorld" implements="forceCommunity:availableForAllPageTypes" access="global" >
	<aura:attribute name="userName" type="string"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <p>Hello <b>{!v.userName}</b>,How Are You</p>
</aura:component>

Step:-3 Create Component Controller for doInit Action

({
    doInit : function(component, event, helper) {
        helper.getUserRecord(component);	
    }
})

Step:-4 Create Component helper for doInit

({
    getUserRecord : function(component) {
        var action=component.get("c.getUserName");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var userName = response.getReturnValue();
                component.set("v.userName",userName);
            }
        });
        $A.enqueueAction(action);
        
        
    }
})

Step:5 Open Community builder drag the particular component from the custom component


Step:6 Publish the site

After Publish it look like

you can visit below link how to create community site
how-to-create-community-site-using-salesforce

Bynayakdillip

How to create community site using salesforce

Step:-1 Search Communities To Enable
From setup,enter communities setting in the quick search box.Then select communities setting

Step:-2 Enable Communities then save
Select a domain for your communities.then check Availability after check its show the message “success !Domain name available” .Then save

Step:-3 Create Communities
Click on the New Community button its redirect to lighting bolt where you chose the template

Step:-4 Choose one of the template Like
i.Customer Service (Napili)
ii.Customer Account Portal
More……
Also, you can create your own template

Step:-5 Here i have choose sale –>partner central

Step:6 After chose the template. you need to click on the “Get Started ” button , Pass the name then click the create button

Its take few time to build

step:6 once its created its redirect to the community work space

step-7 Click on the builder to build publish the site.on the right corner after customization you need to publishing the site

Step:-8 After successfully published its sows like this