Category Archive Salesforce Lightning

Bynayakdillip

Introduction to salesforce survey(spring 18)

salesforce survey(spring 18)

  • 1.its available in spring 18
  • 2.Component available for community builder
  • Let’s create a survey for creating the survey you need to enabled survey

    setup–>Survey–>survey setting–>Enabled

    After the Enabled survey, you need to visit all tab its showing survey Tab.

    After clicking the survey tab you need to click New survey

    survey–>New Survey

    it redirects to survey builder

    You need to give survey name and put all the question then your thank you page.

    After creating all the steps you need to active same then on the top, there is link send button its help you send the URL .

    Here my result
    Beer Survey(surveyName=beer_drinking_survey)






    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

    Bynayakdillip

    Navigate to lightning from visualforce page

    On visualforce page you need to add below code.If you need to redirect to lightning page on button click or page load .You use below code

    <script>
     window.onload=function(){ 
     //get record ID
            var recordid='{!$CurrentPage.parameters.Id}';//Its depend open your record id
    if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
                setTimeout(function(){
                    // Salesforce1 navigation(Lightning Experience)
                    sforce.one.navigateToURL('/'+recordid);
                }, 10);
    }
    }
    </script>
    
    Bynayakdillip

    Create Hello World Lightning Component

    Hello World Lightning Component

    Step:-1: Login to Salesforce dev Org

    https://login.salesforce.com/

    Step:-2 Open Developer Console

    Step:3 Create Lightning Component
    File–>New–>Lightning Component

    After Click on the lightning component, Enter Name and Description for the component.

    Paste the below code over the component

    <!--HelloWorldCMP-->
    <aura:component >
    	<p> Hello World </p>
    </aura:component>
    

    Also, you can add CSS on Click Style

    CSS CODE

    .THIS {
        width:100px;
        height:100px;
    }
    

    Step:-3 Create Lightning Application page For test the Lightning Componenet
    File–>New–>Lightning Application

    After click on the Lightning Application, Enter Name and Description for the page

    Step:-4 Use your created Component over lightning application page

    <aura:application >
    	<c:HelloWorldCMP></c:HelloWorldCMP>
    </aura:application>
    

    Paste the below code

    Step:-5 preview the page on click preview button

    Output:-

    Bynayakdillip

    salesforce lightning navigate to record

    $A.get(“e.force:navigateToSObject”) help you to navigate the sobject record for more detail please check below example

    Apex Controller Class

    public with sharing class AccountsController {
    @AuraEnabled
    public static list getAllAccounts()
    {
    return [select id,name,phone from account where phone!=null];
    }
    }
    

    Component

    <aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="AccountsController" >
    	<aura:attribute name="accounts" type="list"></aura:attribute>
         <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        <aura:iteration var="account" items="{!v.accounts}">
            <lightning:card variant="Narrow" title="{!account.Name}">
            <aura:set attribute="actions">
                <lightning:button name="details" label="Details" onclick="{!c.goToRecord}"  />
            </aura:set>
            <aura:set attribute="footer">
                <lightning:badge label="{!account.Name}"/>
            </aura:set>
            <p>
               <a onclick="{!c.goToRecord}">{!account.Name}</a> 
            </p>
            <p>
                {!account.Phone}--{!account.Id}
            </p>
        </lightning:card>
        </aura:iteration>
    </aura:component>
    

    Controller JS

    ({
        doInit : function(component, event, helper) {
            
            var action=component.get("c.getAllAccounts");
            action.setCallback(this,function(response){
                
                var state=response.getState();
                if(state==="SUCCESS")
                {
                    component.set("v.accounts",response.getReturnValue());
                }
                
                
                
            });
            $A.enqueueAction(action);
    		
    	},
        goToRecord:function(component, event, helper)
        {
            
            var sobjectEvent=$A.get("e.force:navigateToSObject");
            sobjectEvent.setParams({
                
                "recordId": component.get("account.Id")
    
            });
            sobjectEvent.fire();
            
        }
        
    })
    

    Made a lightning app using Lightning app builder to run it

    Bynayakdillip

    How do I change the background theme in Lightning App Builder?

    In Setup–>Themes and Branding in the Quick Find box, then select Themes and Branding, and select Hide.