Scribd Logo
Upload

Welcome to Scribd!

  • Aura Component Code Book

    Uploaded by

    sairam
    7 views114 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    7 views114 pages

    Aura Component Code Book

    Uploaded by

    sairam

    Copyright:

    © All Rights Reserved
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 114
    Salesforce Lightning Advance Code Book Please DONOT Share this Master Code Book with anyone. This document is only for Capital info Solution, HydéFabad.student’s and trainees only. By Rupom Chakraborty Sr.Solution Architect «Capital CE Ere Run an eee Pe ce) Lae EL RL ye) RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - htning - Code Book - By Rupom Chakraborty SFDC Ughenng aur componerz aura sppeatON| Tightng btn Tightnng:batonGug ghunng: Batonens Tightnng: ageing & Compound mre Cl Tighenng np [Simple &Compoundineret Cal Tight opt [Simple &Corspouna net Ca sing surat Sigie uncon Cascacng Sie Sets Progran for Objet sOiyecs weg suri Tightnng tout lightning yout Te arma reper Tighe. ans Tosa Spl tate By ar To] server Side Contvoler 33¢ [Dapiny tnd Aecoanewiow PDS] Sc[ Creating an Account by passing a oe ‘SC. sabe Tk igen] rogram for Pl iphnra let] Fikes Dame Valves Diplo, count dante blac Create & Dspay Assunta in aba Tom ‘reete Dopey Accountgetalbusing on Min tsar form ropa RE 7p Eve SearcRan acount &dipny Coma, Soper Dea Ds Tox ses Dp Gao Fede Mea Pose rogtaneing Based DS force corsa very bray & Dyrarec COnMBOTER Dynamic Conponets utile Component Dynamic Conpanets-Mastile Components Destroy Conoonert terface Action Oe RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: Salesforce - ightning - Code Book - By Rupom Chakraborty Taian er wag TOE Action verde ung 3 terface wih Ate erface With Method Teac wth Evert Tighting Toten Rendeve Tightnng Component in VF objec) lightnng Conponentn WE FameworPassng Vue] RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty SFDC-Lightning: What is Salesforce Lightning? Iisa collection of tool & technology that provides better efficiency, user experience & reusability ofresBurces. : Iisa predefined element in thelightning wth an extension of “.emp" .Componentse the fuRetional units of aura, which encapsulates modular & reusable sections of UL Itconsists of bundle of elements “Applcation(xM) ControllerJavesrit) Helper(avascrpt) style(c38) Documentation(Documentation) Renderer{iavascript) Design(Jevascript) V6 (Icon) Scaler Vector Graphics Syntax: ‘Navigation: ‘Setup Developer Console -File->New-DLightting Component ->" LC_1205_Ex Component”-3Ok Program: Program toillustrate the Component Event. ‘Component: LC_1205_Ex_ Componentiemp “ : 1tid@ predefne¥eomoonent with an extension of “ape”. Creationof an application consists of an bundle of elements ‘pplication ControllerJavasrit) Helper(avascript) style(ess) Documentation(Documentation) Renderer{iavascript) SVG (Jeon}-Sealar Vector Graphics Syntax: ‘ RUPOM CHAKRABORTY - Capital Info Solutions Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty Navigation: Setup->Developer Console -File->New-DLightning Application->" LA_1205_Ex Application” Ok Program: Program to illustrate the Application Event. Component: LA_1205 Ex Application.app ‘ chiscboki ‘this is my first ightring Application Program ‘Output: CS _ & stightning20-dev-ed.lightning.force.com/c/LC_1205_Ex Application.app Hai... this is my frst lightning component Program. Hai... this is my frst lightning Application Program. ‘Types of buttons: > Standard button > Icon button, > Menu button or > Stateful button aura:set: {tis used to customize the cardile,til@/actions/body/footer. Svntax: Program: Program to illustrate the Lightning buttons. Component: LC_1205_Ex_lightningBins.cmp RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 shtning - Code Book - By Rupom Chakraborty Salesforce - ‘aurascomponent > 'brand!” label="Brand"/> ‘destructive"label="Destructive'/> Output: . a Draw _-a= Lightning:buttonGroup: ‘Todisplay the collection of buttons together. Syntax: Program: Progam tBillustrate the Lightning buttonGroup. ‘Component'LC_1205_Ex.tightringBinGroup.cmp “quraitompohent > clightring:card iconName="standard:account"> ‘ ‘Accountebr/> ‘cb>New Accounte/b> ‘ lightning:button variant="neutrallabel="Neutral"/> lightningbutton vaiant="brand” Iabel="Bran ightning:button vaiant="destructve" label="Destrucive”/> RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty lightning:button variant="inverse" label="inverse"/> Alain LA_1205 bx lehtnngnGroupapp lication extends="forcesids"> To display the list of buttons in dropdown format. Syntax: ightning:menuSubheader To display the list of buttons in dropdown format. lightning rmenaiterd > Program: To ilusratethe dhe of buttons, buttonMenu, buttonGroup in Leed object. ‘Component; LC_1305 Ueadex.cmp “ “elightning:card iconName="standard:lesd"> RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty Titlec/b> Companye/b> Phone Emallc/b>cbr/> Director of Vender Relations Famers Coop. of Florida 18506444200 bertha@fcof.net romponent> ‘ aura:attribute {tis used to create the properties for Application Component. interface or Event, Syntax: scaufaatiribure> /airaatribute> Ea ‘© Component get{“v.ttributeName");-> Pass data from component to controller. ‘© Component set('.attributeName’, value);-> Pass data from controller tocomponent. ‘© Attributes are reffered as ->"(Wv.attributeName}” RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - shtning - Code Book - By Rupom Chakraborty It creates an HTML input element. Types of input Values: Date, Date/Time, Time, color, file, text, email, checkbox, radioButton, search, search input with hidden label, searchinput spinner, validating input, max length, URL, password, telephone, number, checkboxbutton, toggle. Program-1: Program to illustrate the Lightning input. ‘Component: LC_1405_Ex_Uightninginput ‘ ‘lightning:card iconName="custom:custom11" title="Types of Light lightnng:nputlabe="Date of registration” type="Date"/> ‘Application: LA_1405_6x_Lightninginput. app» ‘<:LC_1405_Ex_Lightninglaput /> Output: +7 6 8 mpenananmntnnt eh se ener nee .— Program-2: Simple & Compound Interest Calculation. Component: LC_1405_IntrestCal.cmp - RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - shtning - Code Book - By Rupom Chakraborty - < ‘ Output: ain =e Program-3: Simple & Compound Interest Calculation Using by aurasid, Component: LC_1S0S_InterestCalByiD.cmp - Interest Calculation” onttafie="customicustom11"> "decimal" label="Affount! auraiid="amt'/> “decimal” labeltRate OF Interest” aura:id="rin"/> “decimal” label="Yerm" aura:id="term"/> “decimal” label="inferest Accumulated at the end of term aura:d "decimal" label-"Total Maturity Amount” aura:id="Totlamt"/> inter" /> Calls)" iconName="utilitysall/> -dightning:button labels"compound Interest" onctick="('c.CallC}"iconName="utlity:call"/> - ‘ Program-A: Simple & Compound Interest Calculation Using by au Component: LC_1505_InterestCalByIDSingleFun.cmp ~ ightning-card tile="Interest Calculation” iconName="custom:custom11"> -lightning:input abel="Total Maturity Amount” aura:d="Totlamt”type="deeimal"/> ‘Controller: LA_1505_InterestCalBy1DSingleFuncontrollerjs| « Calle : function(component, event, helper) { var evnt = event.getSource(); var aid = evnt.getocalld(; ‘var A= component find("amt”).get("vwvalue”); vvar R= component find("rinr").get("v.value"); var T = component.fine("term").get(".value"); var N=7°12; var INR = parseint(A)*parselnt(R)*1/100; ‘component. find(“ineTerm") set('y value” INR); iffaid=='IButn’) { var totalamt=parselnt{INF)*parselni(N); ‘component.find"Totlamt’) set("v.value”totalamt, console. log(aids" is fired with accumulated interest at ond term "+INR+" & Total Maturity Amount is: “stotalemt}; vartotalamt-(parseint{iNA)tpaPéeint(N))-A: ‘component.find("Totlamt") set("v.value”,totalamt}; console log(aid¢¥is fred’ with accumuiated interest at end of the term "sINR¢" & Total Maturity Amount is: "stotalamt); ) cise 1 ‘COmporientfind(“amt" set(v.value",""); ‘comPonentfindine")set('v.value”,") ‘comporient.find("term').set{"v-value ‘component.fin“inrTerm”) set("v.value",""); ‘component.find("Totlamt")set("v.value”."*); console log(aid+" is fred with accumuiated interest at end of the term "¥INRé" & Total Maturity Amount is: “sotalamt); ) , » RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - shtning - Code Book - By Rupom Chakraborty Application: LA_1505_nterestCalBylOSingleFun.app Output: 2 em ais ** Bee conein aura:i It renders the content within the tag if the isTrue attribute @valuates totcue. ‘Syntax: True False Program: Program forillustration of auraif. Component: LC_1805,Auralf.cmp, “ ‘ lightning tard titles" Caleulator”iconName="utilty:company"> Alightning: button label="calculate” iconName="utilit:add" onciick="{lc.Cal}"/> “Aightning:button label="Clear"iconName="utility-lear" onclick="{le.Clesr}"/> isTrue="{Iv.flag)">
    “Amount: {Iv-amount}ep>

    Year: {Ivyeari

    RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty Rate: (Ivratep>/p> Cal : function(component, event, helper] { vvar A= component find(‘amt") get("v.value"); var ¥= component find\"year”).get("v.value"): vvar R= componentyfind"rate").get("v.value"); vvar Res=(A"Y"R)/100; iffRes>o} { ‘component.set(v.flag"true); ) ‘component.set("vamount”A); ‘component. set("v year’); ‘component set("vrate’,R); component set("winterest"\Res); 1 ‘lear: function{component, event, helper) ( ‘component. set("v.amoun ‘component. set(“v year’ ‘component. set("vrate ‘component. set(“vinterest » » Application: C_1805_AuralfController ape ‘ ‘Output: RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty Cascading Style Sheets (CSS): CSS used for describing the presentation of web pages, colors Jayouts & fonts Outer Element: This.box { } Sinner Element: Thie bor { ) Programn-£2Program for illustration of CSS. Component: LC 2205, CalCSs.cmp ‘ ‘urzattribute nam
    RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty ‘ cb>Employee Detalls - "submit" variant="brand” onclick="{c-showMe)" class="btnSubmit"/> “dear” onclck="!c. Clear) class="btnclezr” < <

    Controller: L¢_2205_CalcSSController.js « showMe : function(component, event, helper) ( ‘component. set("vempname”,"Surekha"); ‘component set("vempage""29"); ‘component. set("v.empsalary’,"40000"); ‘console /og("Employee Name: "); » ‘lear: function(component, event, helper) ( ‘component. set("vempname” ‘component. set("vempage",); ‘component. set("v.empsalary", ) » ‘Style: -THS.bor { rmargin-Jeft0ps) smargin-fght: 5p: rmargitetopS0p, rargn-botioms0px; border.Spx solid green: ‘backgrounc:orchid; padding 209% ‘Width:800px; height 400px; ) TH tite ‘ colorbive; background:lavender; paddine-200%: border2pxsolidred; RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty width:700; height:400; ) ‘THIS btaSubmit { color:res; backpround:yellow; border:2px dotted darkorchid; width 0px; height:40px, d THIS btaClear { coloritghtgseen; backgroundtightpink; border:2px solid blue; width Oop; height:40px; ) THIS .InputEleCSS { colorisaddlebrown; background-wheat; border:1px solid blue; width 700px: height-40p; ) Application: LC_2205_CalCSS.app - - Program-2: Program for creation of salesforce login page. RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty ‘Component: LC_1805_SFLoginPg.cmp ‘ < ‘
    -dightning:input label=" userName” type="text"/> <


    ‘Forgot your Password?  nbsp; nbsp; nbsp; nbsp; nbsp;    ‘Use Custom Domain
    cbr/> Nota Customer?  “lightning:button label="Try for free” />
    Controller: L¢_1805_SFLoginPgController js « _myAction : function(component, evehhelper) { ) » THIS left paral ‘ vwiathzo0; height 500, floatettz ‘Margin:0 000; ) THIS Lge { float:leh; smargin:90px 140px 180px 140px, border:groove; padding-top: 20px; padding-right: 20x padding-bottom: 20px; RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty padding-left: 209%; d -THIS.right_pane! { wiatn:s00; ‘eight:800; margin:0 000; float:right; y hoe \ t oe ~~ padding-bottom: SOpx; padding-left: 30px; OS amps oS = wi ‘SObjects: ‘© Primitive Datatypes-> + Standard Objects: > [Used Fer initalization ie Creating a new data] RUPOM CHAKRABORTY - Capital Info Solutions ‘Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286 Salesforce - Lightning - Code Book - By Rupom Chakraborty > [Used for holding data Le from contoller to component}. ‘© Custom Objects:-> Program-1: Program for sObjects. ‘Component: LC_2305_sObject.emp - ‘cauracattribute name="name” type="string”/> <Account and Contact Detalls Ivacesphone}"/> "Recount Email values"v.2¢e Email) > ‘Contact Detals’> ntact FifstName" Value="{l.con FirstName)"/> rogram-2: Program for sObjecté using, aurBit. Component: LC_1905_LayoutsOBect.cmp ‘ ‘ sclightnirg:layoutitem size="12" padding="around-smal”> “ Controller: LC_1905_SScWithsObjectStaticLayoutController « saveAcc :function{component, evert, helper) ( var names component get('v.name"); ‘var phone= component.get('v.phone"); industry= component get('.industry"); = component get('v.rating” var fax-component.get"v.fax"); var action = component.get("c.CreateAcc”), ‘acton.setParams(("name":rame," phone”:phone, "industry"industry Fating” ating, "far:fax)); ‘action. setCallback(this,function(responsel{ ‘var Res = response getReturnValue(); component set{"v flag” true) ‘component set("v.esuit” Res); ‘console-log("Account Created:'+Res) ese ( console logt'Account Created failed’; ) »: SAenquevesction(action); » clearAcc :function(component, event helper) ( component selfty nari" nul; ‘component set{"vphone” nl); comporent set(pvindustry nul {Componentiett rate. nul); comport set('vfax’ ul); component et("vflag’ fae): component set("vresut",nul; RUPOM CHAKRABORTY - Capital Info Solutions Shyamala Plaza, Behind Mythrivanam, Amerpet, Hyderabad, Telangana State, INDIA. Ph: 8686864286

    You might also like