Snippets

Aura Helper Snippets

Aura Helper has more than 200 snippets for Aura, JavaScript and SLDS to create to many code units in seconds:

Aura

Aura Attribute

Create Aura Attribute Code Unit (aura:attribute)

Documentation

Activation: aura.attribute

Snippet

<aura:attribute name="${1:name}" type="${2:type}" default="${3:defValue}" access="${4:access}" description="${5:description}"/>

Aura Handler

Create Aura Handler Code Unit (aura:handler)

Documentation

Activation: aura.handler

Snippet

<aura:handler name="${1:name}" value="${2:value}" action="{!c.${3:jsAction}}" />

Aura Init Handler

Create Initialization Component Aura Handler Code Unit (aura:handler)

[Documentation](https://developer.salesforce.com/docs/component-library/bundle/aura:valueInit/documentation

Activation: aura.initHandler

Snippet

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

Aura Event Handler

Create Aura Component Event Handler Code Unit (aura:handler)

Documentation

Activation: aura.eventHandler

Snippet

<aura:handler name="${1:name}" event="c:${2:event}" action="{!c.${3:jsAction}}" />

Aura App Event Handler

Create Aura Application Event Handler Code Unit (aura:handler)

Documentation

Activation: aura.appEventHandler

Snippet

<aura:handler event="c:${1:event}" action="{!c.${2:jsAction}}"/>

Aura Location Change Handler

Create Aura Location Change Handler Code Unit (aura:handler)

Documentation

Activation: aura.onLocationChange

Snippet

<aura:handler event="aura:locationChange" action="{!c.${1:jsAction}}"/>

Aura System Error Handler

Create Aura System Error Handler Code Unit (aura:handler)

Documentation

Activation: aura.onSystemError

Snippet

<aura:handler event="aura:systemError" action="{!c.${1:jsAction}}"/>

Aura Value Changed Handler

Create Aura Value Changed Handler Code Unit (aura:handler)

Documentation

Activation: aura.onValueChanged

Snippet

<aura:handler name="change" value="{!${2:value}}" action="{!c.${3:jsAction}}"/>

Aura Destroy Handler

Create Aura Component Destroy Handler Code Unit (aura:handler)

Documentation

Activation: aura.onDestroy

Snippet

<aura:handler name="destroy" value="{!this}" action="{!c.${1:jsAction}}"/>

Aura Render Handler

Create Aura Component Render Handler Code Unit (aura:handler)

Documentation

Activation: aura.onRender

Snippet

<aura:handler name="render" value="{!this}" action="{!c.${1:jsAction}}"/>

Aura Register Event

Create Aura Event Registration Code Unit (aura:registerEvent)

Documentation

Activation: aura.registerEvent

Snippet

<aura:registerEvent name="${1:name}" type="c:${2:type}" />

Aura Render If

Create Aura Render If Code Unit (aura:renderIf)

Documentation

Activation: aura.renderIf

Snippet

<aura:renderIf isTrue="{!${1:isTrue}}">
	${0:<!-- Code when is true -->}
	<aura:set attribute="else">
		<!-- Code when is false -->
	</aura:set>
</aura:renderIf>

Aura If

Create Aura If Code Unit (aura:if)

Documentation

Activation: aura.if

Snippet

<aura:if isTrue="{!${1:isTrue}}">
	${0:<!-- Code when is true -->}
	<aura:set attribute="else">
		<!-- Code when is false -->
	</aura:set>
</aura:if>

Aura Iteration

Create Aura Iteration Code Unit (aura:iteration)

Documentation

Activation: aura.iteration

Snippet

<aura:iteration items="{!${1:items}}" var="${2:item}">
	${0:<!-- Code for repeat -->}
</aura:iteration>

Ltng

Lightning Style

Create ltng Required Code Unit for CSS Styles (ltng:require)

Documentation

Activation: ltng.style

Snippet

<ltng:require styles="${1:cssStyle}">

Lightning Script

Create ltng Required Code Unit for load scripts (ltng:require)

Documentation

Activation: ltng.script

Snippet

<ltng:require script="${1:cssStyle}">

Lightning Style After Load

Create ltng Required Code Unit for CSS Styles with afterScriptsLoaded attribute (ltng:require)

Documentation

Activation: ltng.styleAfterLoad

Snippet

<ltng:require styles="${1:cssStyle}">

Lightning Script After Load

Create ltng Required Code Unit for load scripts with afterScriptsLoaded attribute (ltng:require)

Documentation

Activation: ltng.scriptAfterLoad

Snippet

<ltng:require script="${1:cssStyle}" afterScriptsLoaded="{!c.${2:jsAction}}">

Force

Force Record View

Create Force Record View Code Unit (force:recordView)

Documentation

Activation: force.recordView

Snippet

<force:recordView recordId="{!${1:recordId}}" />

Force Record Edit

Create Force Record Edit Code Unit (force:recordEdit)

Documentation

Activation: force.recordEdit

Snippet

<force:recordEdit aura:id="${1:auraId}" recordId="{!${2:recordId}}"/>

Force Record Data

Create Force Record Data Code Unit (force:recordData)

Documentation

Activation: force.recordData

Snippet

<force:recordData aura:id="${1:auraId}" recordId="{!${2:recordId}}" fields="${3:fields}" targetFields="${4:targetFields}" targetError="${5:targetError}"/>

Force Output Field

Create Force Output Field Code Unit (force:outputField)

Documentation

Activation: force.outputField

Snippet

<force:outputField value="{!${1:field}}"/>

Force Input Field

Create Force Input Field Code Unit (force:inputField)

Documentation

Activation: force.inputField

Snippet

<force:inputField value="{!${1:field}}"/>

Force Canvas App

Create Force Canvas App Code Unit (force:canvasApp)

Documentation

Activation: force.canvasApp

Snippet

<force:canvasApp developerName="${1:devName}" namespacePrefix="${2:nsPrefix}"/>

Force Chatter

Force Chatter Feed

Create Force Chatter Feed Code Unit (forceChatter:feed)

Documentation

Activation: forceChatter.feed

Snippet

<forceChatter:feed type="${1:type}"/>

Force Chatter Publisher

Create Force Chatter Publisher Code Unit (forceChatter:publisher)

Documentation

Activation: forceChatter.publisher

Snippet

<forceChatter:publisher context="${1:context}"/>

Force Community

Force Community App Launcher

Create Force Community App Launcher Code Unit (forceCommunity:appLauncher)

Documentation

Activation: forceCommunity.appLauncher

Snippet

<forceCommunity:appLauncher/>

Force Community Notifications

Create Force Community Notifications Code Unit (forceCommunity:notifications)

Documentation

Activation: forceCommunity.notifications

Snippet

<forceCommunity:notifications/>

Force Community Route Link

Create Force Community Route Link Code Unit (forceCommunity:routeLink)

Documentation

Activation: forceCommunity.routeLink

Snippet

<forceCommunity:routeLink id="{!${1:id}}" class="{!${2:cssClass}}" title="${3:title}" label="${4:label}" routeInput="{!${5:routeInput}}" onClick="{!c.${6:jsAction}}"/>

Force Community Wave Dashboard

Create Force Community Wave Dashboard Code Unit (forceCommunity:waveDashboard)

Documentation

Activation: forceCommunity.waveDashboard

Snippet

<forceCommunity:waveDashboard dashboardId="{!${1:dashboardId}}"/>

Lightning

Lightning Accordion

Create Lightning Accordion Code Unit (lightning:accordion)

Documentation

Activation: ltn.accordion

Snippet

<lightning:accordion aura:id="${1:auraId}" activeSectionName="${2:activeSection}">
	$0
</lightning:accordion>

Lightning Accordion Section

Create Lightning Accordion Section Code Unit (lightning:accordionSection)

Documentation

Activation: ltn.accordionSection
Alternative Activation: ltn.accSection

Snippet

<lightning:accordionSection name="${1:sectionName}" label="${2:sectionLabel}">
	<aura:set attribute="actions">
		$0
	</aura:set>
	<aura:set attribute="body">
		
	</aura:set>
</lightning:accordionSection>

Lightning Avatar

Create Lightning Avatar Code Unit (lightning:avatar)

Documentation

Activation: ltn.avatar

Snippet

<lightning:avatar src="${1:imgSource}" initials="${2:initials}" fallbackIconName="${3:iconName}" alternativeText="${4:altText}"/>

Lightning Breadcrums Section

Create Lightning Breadcrums Section Code Unit (lightning:breadcrumbs)

Documentation

Activation: ltn.breadcrumbs

Snippet

<lightning:breadcrumbs>
	$0
</lightning:breadcrumbs>

Lightning Breadcrum

Create Lightning Breadcrum Code Unit (lightning:breadcrumb)

Documentation

Activation: ltn.breadcrumb

Snippet

<lightning:breadcrumb label="${1:label}" href="${2:path}"/>

Lightning Button

Create Lightning Button Code Unit (lightning:button)

Documentation

Activation: ltn.button

Snippet

<lightning:button variant="${1:variant}" label="${2:label}" title="${3:title}" onclick="{!c.${4:jsAction}}" />

Lightning Button Brand

Create Lightning Button Brand Code Unit (lightning:button)

Documentation

Activation: ltn.buttonBrand

Snippet

<lightning:button variant="brand" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />

Lightning Button Neutral

Create Lightning Button Neutral Code Unit (lightning:button)

Documentation

Activation: ltn.buttonNeutral

Snippet

<lightning:button label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />

Lightning Button Destructive

Create Lightning Button Destructive Code Unit (lightning:button)

Documentation

Activation: ltn.buttonDestructive

Snippet

<lightning:button variant="destructive" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />

Lightning Button Success

Create Lightning Button Success Code Unit (lightning:button)

Documentation

Activation: ltn.buttonSuccess

Snippet

<lightning:button variant="success" label="${1:label}" title="${2:title}" onclick="{!c.${3:jsAction}}" />

Lightning Button Group

Create Lightning Button Group Code Unit (lightning:buttonGroup)

Documentation

Activation: ltn.buttonGroup
Alternative Activation: ltn.buttonGrp

Snippet

<lightning:buttonGroup>
	${0:<!-- Put your buttons here -->}
</lightning:buttonGroup>

Lightning Button Icon

Create Lightning Button Icon Code Unit (lightning:buttonIcon)

Documentation

Activation: ltn.buttonIcon

Snippet

<lightning:buttonIcon iconName="${1:iconName}" variant="${2:variant}" onclick="{!c.${3:jsAction}}" alternativeText=${4:altText}/>

Lightning Button Icon Stateful

Create Lightning Button Icon Stateful Code Unit (lightning:buttonIconStateful)

Documentation

Activation: ltn.buttonIconStateful

Snippet

<lightning:buttonIconStateful iconName="${1:iconName}" selected="{!${2:selected}}" onclick="{!c.${3:jsAction}}" alternativeText=${4:altText} />

Lightning Button Menu

Create Lightning Button Menu Code Unit (lightning:buttonMenu)

Documentation

Activation: ltn.buttonMenu

Snippet

<lightning:buttonMenu aura:id="${1:auraId}" onselect="{!c.${2:jsAction}}" alternativeText="${3:altText}">
	${0:<!-- Put your menu items here (lightning:menuItem) -->}
</lightning:buttonMenu>

Lightning Button Stateful

Create Lightning Button Stateful Code Unit (lightning:buttonStateful)

Documentation

Activation: ltn.buttonStateful

Snippet

<lightning:buttonStateful labelWhenOff="${1:labelOff}" labelWhenOn="${2:labelOn}" labelWhenHover="${3:labelHover}" iconNameWhenOff="${4:iconOff}" iconNameWhenOn="${5:iconCheck}" iconNameWhenHover="${6:iconHover}" state="{!c.${7:jsAction}}" onclick="{!c.${8:jsAction}}"/>

Lightning Card

Create Lightning Card Code Unit (lightning:card)

Documentation

Activation: ltn.card

Snippet

<lightning:card footer="${1:cardFooter}" title="${2:cardTitle}">
	<aura:set attribute="actions">
	</aura:set>
	${0:<!-- Put your card body here -->}
</lightning:card>

Lightning Carousel

Create Lightning Carousel Code Unit (lightning:carousel)

Documentation

Activation: ltn.carousel

Snippet

<lightning:carousel disableAutoRefresh="${1:false}" disableAutoScroll="${2:false}">
	${0:<!-- Put your Carousel images here (lightning:carouselImage) -->}
</lightning:card>

Lightning Carousel Image

Create Lightning Carousel Image Code Unit (lightning:carouselImage)

Documentation

Activation: ltn.carouselImage

Snippet

<lightning:carouselImage src="${1:imageSource}" header="${2:imageHeader}" description="${3:imageDesc}" alternativeText="${4:altText}" href ="${5:link}">

Lightning Checkbox Group

Create Lightning Check Box Group Code Unit (lightning:checkboxGroup)

Documentation

Activation: ltn.checkboxGroup
Alternative Activation: ltn.checkboxGrp

Snippet

<lightning:checkboxGroup name="${1:groupName}" label="${2:groupLabel}" options="{!${3:options}}" value="{!${4:value}}" onchange="{!c.${5:jsAction}}"/>

Lightning Click to Deal Service

Create Lightning Click to Dial Service Code Unit (lightning:clickToDialService)

Documentation

Activation: ltn.clickToDialService

Snippet

<lightning:clickToDialService aura:id="${1:auraId}"/>

Lightning Click to Deal

Create Lightning Click to Dial Code Unit (lightning:clickToDial)

Documentation

Activation: ltn.clickToDial

Snippet

<lightning:clickToDial value="${1:value}" recordId="{!${2:recordId}}" params="${3:parameters}"/>

Lightning Combobox

Create Lightning Combobox Code Unit (lightning:combobox)

Documentation

Activation: ltn.combobox

Snippet

<lightning:combobox name="${1:name}" label="${2:label}" value="${3:startValue}" placeholder="${4:placeholder}" options="{!${5:value}}" onchange="{!c.${6:jsAction}}"/>

Lightning Container

Create Lightning Container Code Unit (lightning:container)

Documentation

Activation: ltn.container

Snippet

<lightning:container aura:id="${1:auraId}" src="${2:contentSource}" onmessage="{!c.${3:jsAction}}" onerror="{!c.${4:jsAction}}"/>

Lightning Data Table

Create Lightning Data Table Code Unit (lightning:datatable)

Documentation

Activation: ltn.datatable

Snippet

<lightning:datatable keyField="${1:keyField}" data="{!${2:dataSet}}" columns="{!${3:columns}}" hideCheckboxColumn="${4:true}"/>

Lightning Dual List Box

Create Lightning Dual List Box Code Unit (lightning:dualListbox)

Documentation

Activation: ltn.dualListBox

Snippet

<lightning:dualListbox name="${1:listName}" label="${2:label}" sourceLabel="${3:sourceLabel}" selectedLabel="${4:selectedLabel}" fieldLevelHelp="${5:help}" options="{!${6:value}}" onchange="{!c.${7:jsAction}}"/>

Lightning Dynamic Icon Ellie

Create Lightning Dynamic Icon Ellie Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconEllie

Snippet

<lightning:dynamicIcon type="ellie" alternativeText="${1:altText}"/>

Lightning Dynamic Icon EQ

Create Lightning Dynamic Icon EQ Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconEQ

Snippet

<lightning:dynamicIcon type="eq" option="${1:playOrStop}" alternativeText="${2:altText}"/>

Lightning Dynamic Icon Score

Create Lightning Dynamic Icon Score Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconScore

Snippet

<lightning:dynamicIcon type="score" option="${1:positiveOrNegative}" alternativeText="${2:altText}"/>

Lightning Dynamic Icon Strength

Create Lightning Dynamic Icon Strength Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconStrength

Snippet

<lightning:dynamicIcon type="strength" option="${1:value}" alternativeText="${2:altText}"/>

Lightning Dynamic Icon Trend

Create Lightning Dynamic Icon Trend Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconTrend

Snippet

<lightning:dynamicIcon type="trend" option="${1:neutralUpOrDown}" alternativeText="${2:altText}"/>

Lightning Dynamic Icon Waffle

Create Lightning Dynamic Icon Waffle Type Code Unit (lightning:dynamicIcon)

Documentation

Activation: ltn.dynamicIconWaffle

Snippet

<lightning:dynamicIcon type="waffle" alternativeText="${1:altText}"/>

Lightning File Card

Create Lightning File Card Code Unit (lightning:fileCard)

Documentation

Activation: ltn.fileCard

Snippet

<lightning:fileCard fileId="{!${1:fileId}}" description="${1:description}"/>

Lightning File Upload

Create Lightning File Upload Code Unit (lightning:fileUpload)

Documentation

Activation: ltn.fileUpload

Snippet

<lightning:fileUpload name="${1:altText}" label="${2:label}" multiple="${3:false}" accept="{!${4:extensionList}}" disabled="${5:false}" recordId="{!${6:recordId}}" onuploadfinished="{!c.${7:jsAction}}"/>

Lightning Flexi Page Region Info

Create Lightning Flexi Page Region Info Code Unit (lightning:flexipageRegionInfo)

Documentation

Activation: ltn.flexipageRegionInfo

Snippet

<lightning:flexipageRegionInfo width="{!${1:extensionList}}"/>

Lightning Flow

Create Lightning Flow Code Unit (lightning:flow)

Documentation

Activation: ltn.flow

Snippet

<lightning:flow aura:id="${1:auraId}" onstatuschange="{!c.${2:jsAction}}"/>

Lightning Formatted Address

Create Lightning Formatted Address Code Unit (lightning:formattedAddress)

Documentation

Activation: ltn.formattedAddress

Snippet

<lightning:formattedAddress street="{!${1:street}}" city="{!${2:city}}" country="{!${3:country}}" province="{!${4:province}}" postalCode="{!${5:postalCode}}"/>

Lightning Formatted Address Map

Create Lightning Formatted Address With Map Code Unit (lightning:formattedAddress)

Documentation

Activation: ltn.formattedAddressMap

Snippet

<lightning:formattedAddress street="{!${1:street}}" city="{!${2:city}}" country="{!${3:country}}" province="{!${4:province}}" postalCode="{!${5:postalCode}}" showStaticMap="true"/>

Lightning Formatted Date

Create Lightning Formatted Date Code Unit (lightning:formattedDateTime)

Documentation

Activation: ltn.formattedDate

Snippet

<lightning:formattedDateTime value="{!${1:timeInMillis}}" year="${2:numeric}" month="${3:short}" day="${4:2-digit}" weekday="${5:long}"/>

Lightning Formatted Time

Create Lightning Formatted Time Code Unit (lightning:formattedDateTime)

Documentation

Activation: ltn.formattedTime

Snippet

<lightning:formattedDateTime value="{!${1:timeInMillis}}" hour="${2:2-digit}" minute="${3:2-digit}" second="${4:2-digit}" hour12="${5:false}"/>

Lightning Formatted Date Time

Create Lightning Formatted Date Time Code Unit (lightning:formattedDateTime)

Documentation

Activation: ltn.formattedDateTime

Snippet

<lightning:formattedDateTime value="{!${1:timeInMillis}}" year="${2:numeric}" month="${3:numeric}" day="${4:numeric}" hour="${5:2-digit}" minute="${6:2-digit}" second="${7:2-digit}" hour12="${8:false}"/>

Lightning Formatted Email

Create Lightning Formatted Email Code Unit (lightning:formattedEmail)

Documentation

Activation: ltn.formattedEmail

Snippet

<lightning:formattedEmail value="{!${1:email}}" />

Lightning Formatted Location

Create Lightning Formatted Location Code Unit (lightning:formattedLocation)

Documentation

Activation: ltn.formattedLocation

Snippet

<lightning:formattedLocation latitude="{!${1:latitude}}" longitude="{!${2:longitude}}"/>

Lightning Formatted Name

Create Lightning Formatted Name Code Unit (lightning:formattedName)

Documentation

Activation: ltn.formattedName

Snippet

<lightning:formattedName aura:id="${1:auraId}" firstName="{!${2:firstName}}" middleName="{!${3:middleName}}" lastName="{!${4:lastName}}" informalName="{!${5:informalName}}" suffix="{!${6:suffix}}" salutation="{!${6:salutation}}"/>

Lightning Formatted Name Short

Create Lightning Formatted Name Short Code Unit (lightning:formattedName)

Documentation

Activation: ltn.formattedNameShort

Snippet

<lightning:formattedName aura:id="${1:auraId}" firstName="{!${2:firstName}}" middleName="{!${3:middleName}}" lastName="{!${4:lastName}}" informalName="{!${5:informalName}}" suffix="{!${6:suffix}}" salutation="{!${6:salutation}}" format="short"/>

Lightning Formatted Number Decimal

Create Lightning Formatted Decimal Number Code Unit (lightning:formattedNumber)

Documentation

Activation: ltn.formattedNumberDecimal

Snippet

<lightning:formattedNumber value="{!${1:value}}" minimumSignificantDigits="{!${2:minimumSignificantDigits}}" style="decimal"/>

Lightning Formatted Number Currency

Create Lightning Formatted Currency Code Unit (lightning:formattedNumber)

Documentation

Activation: ltn.formattedNumberCurrency

Snippet

<lightning:formattedNumber value="{!${1:value}}" currencyCode="{!${3:currencyCode}}" currencyDisplayAs="${4:code}" style="currency"/>

Lightning Formatted Number Percent

Create Lightning Formatted Percent Code Unit (lightning:formattedNumber)

Documentation

Activation: ltn.formattedNumberPercent

Snippet

<lightning:formattedNumber value="{!${1:value}}" minimumSignificantDigits="{!${2:minimumSignificantDigits}}" style="percent"/>

Lightning Formatted Phone

Create Lightning Formatted Phone Code Unit (lightning:formattedPhone)

Documentation

Activation: ltn.formattedPhone

Snippet

<lightning:formattedPhone value="{!${1:value}}"/>

Lightning Formatted Rich Text

Create Lightning Formatted Rich Text Code Unit (lightning:formattedRichText)

Documentation

Activation: ltn.formattedRichText

Snippet

<lightning:formattedRichText value="{!${1:value}}"/>

Lightning Formatted Text

Create Lightning Formatted Text Code Unit (lightning:formattedText)

Documentation

Activation: ltn.formattedText

Snippet

<lightning:formattedText value="{!${1:value}}" linkify="${2:true}"/>

Lightning Formatted URL

Create Lightning Formatted Text Code Unit (lightning:formattedUrl)

Documentation

Activation: ltn.formattedUrl

Snippet

<lightning:formattedUrl value="{!${1:value}}"/>

Lightning Help Text

Create Lightning Help Text Code Unit (lightning:helptext)

Documentation

Activation: ltn.helptext

Snippet

<lightning:helptext content="${1:helpText}"/>

Lightning Icon

Create Lightning Icon Code Unit (lightning:icon)

Documentation

Activation: ltn.icon

Snippet

<lightning:icon iconName="${1:iconName}" alternativeText="${2:altText}" size="${3:size}"/>

Lightning Input Date

Create Lightning Input Date Code Unit (lightning:input)

Documentation

Activation: ltn.inputDate

Snippet

<lightning:input type="date" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input DateTime

Create Lightning Input DateTime Code Unit (lightning:input)

Documentation

Activation: ltn.inputDateTime

Snippet

<lightning:input type="datetime" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Time

Create Lightning Input Time Code Unit (lightning:input)

Documentation

Activation: ltn.inputTime

Snippet

<lightning:input type="time" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Color

Create Lightning Input Color Code Unit (lightning:input)

Documentation

Activation: ltn.inputColor

Snippet

<lightning:input type="color" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input File

Create Lightning Input File Code Unit (lightning:input)

Documentation

Activation: ltn.inputFile

Snippet

<lightning:input type="file" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" multiple="${4:false}" accept="${5:extensionList}" onchange="{!c.${6:jsAction}}"/>

Lightning Input Text

Create Lightning Input Text Code Unit (lightning:input)

Documentation

Activation: ltn.inputText

Snippet

<lightning:input aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Email

Create Lightning Input Email Code Unit (lightning:input)

Documentation

Activation: ltn.inputEmail

Snippet

<lightning:input type="email" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Password

Create Lightning Input Password Code Unit (lightning:input)

Documentation

Activation: ltn.inputPassword
Alternative Activation: ltn.inputPwd

Snippet

<lightning:input type="password" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Telephone

Create Lightning Input Telephone Code Unit (lightning:input)

Documentation

Activation: ltn.inputTelephone

Snippet

<lightning:input type="tel" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input URL

Create Lightning Input URL Code Unit (lightning:input)

Documentation

Activation: ltn.inputUrl

Snippet

<lightning:input type="url" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Number

Create Lightning Input Number Code Unit (lightning:input)

Documentation

Activation: ltn.inputNumber

Snippet

<lightning:input type="number" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}" placeholder="{!${5:placeholder}}"/>

Lightning Input Checkbox

Create Lightning Input Checkbox Code Unit (lightning:input)

Documentation

Activation: ltn.inputCheckbox
Alternative Activation: ltn.inputChk

Snippet

<lightning:input type="checkbox" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>

Lightning Input Checkbox Button

Create Lightning Input Checkbox Button Code Unit (lightning:input)

Documentation

Activation: ltn.inputCheckboxButton
Alternative Activation: ltn.inputChkBtn

Snippet

<lightning:input type="checkbox-button" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>

Lightning Input Toggle

Create Lightning Input Toggle Code Unit (lightning:input)

Documentation

Activation: ltn.inputToggle

Snippet

<lightning:input type="toggle" aura:id="${1:auraId}" name="${2:name}" label="${3:label}"/>

Lightning Input Radio Button

Create Lightning Input Radio Button Code Unit (lightning:input)

Documentation

Activation: ltn.inputRadio

Snippet

<lightning:input type="radio" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="${4:value}"/>

Lightning Input Search

Create Lightning Input Search Code Unit (lightning:input)

Documentation

Activation: ltn.inputSearch

Snippet

<lightning:input type="search" aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="{!${4:value}}"/>

Lightning Input Address

Create Lightning Input Address Code Unit (lightning:inputAddress)

Documentation

Activation: ltn.inputAddress

Snippet

<lightning:inputAddress addressLabel="${1:addressLabel}" streetLabel="${2:streetLabel}" cityLabel="${3:cityLabel}" countryLabel="${4:countryLabel}" provinceLabel="${5:provinceLabel}" postalCodeLabel="${6:postalCodeLabel}" street="{!${7:street}}" city="{!${8:city}}" country="{!${9:country}}" province="{!${10:province}}" postalCode="{!${11:postalCode}}" fieldLevelHelp="${12:helpText}"/>

Lightning Input Field

Create Lightning Input Field Code Unit (lightning:inputField)

Documentation

Activation: ltn.inputField

Snippet

<lightning:inputField fieldName="${1:fieldApiName}"/>

Lightning Input Location

Create Lightning Input Location Code Unit (lightning:inputLocation)

Documentation

Activation: ltn.inputLocation

Snippet

<lightning:inputLocation label="${1:label}" latitude="${2:latitude}" longitude="${3:longitude}"/>

Lightning Input Name

Create Lightning Input Name Code Unit (lightning:inputName)

Documentation

Activation: ltn.inputName

Snippet

<lightning:inputName aura:id="${1:auraId}" label="${2:label}" firstName="{!${3:firstName}}" middleName="{!${4:middleName}}" lastName="{!${5:lastName}}" informalName="{!${6:informalName}}" suffix="{!${7:suffix}}" salutation="{!${8:salutation}}" options="{!${9:salutationOptions}}"/>

Lightning Input Rich Text

Create Lightning Input Rich Text Code Unit (lightning:inputRichText)

Documentation

Activation: ltn.inputRichText

Snippet

<lightning:inputRichText value="{!${1:value}}" placeholder="{!${2:placeholder}}"/>

Lightning Input Rich Text Bottom Toolbar

Create Lightning Input Rich Text With Bottom Toolbar Code Unit (lightning:inputRichText)

Documentation

Activation: ltn.inputRichTextBottom

Snippet

<lightning:inputRichText value="{!${1:value}}" placeholder="{!${2:placeholder}}" variant="bottom-toolbar"/>

Lightning Layout

Create Lightning Simple Layout Code Unit (lightning:layout)

Documentation

Activation: ltn.layout

Snippet

<lightning:layout>
	${0:<!-- Put the content Here -->}
</lightning:layout>

Lightning Layout Space Center

Create Lightning Layout with Horizontal Align Space and Vertical Align Center Code Unit (lightning:layout)

Documentation

Activation: ltn.layoutSpaceCenter

Snippet

<lightning:layout horizontalAlign="space" verticalAlign="center">
	${0:<!-- Put the content Here -->}
</lightning:layout>

Lightning Layout Space Stretch

Create Lightning Layout with Horizontal Align Space and Vertical Align Stretch Code Unit (lightning:layout)

Documentation

Activation: ltn.layoutSpaceStretch

Snippet

<lightning:layout horizontalAlign="space" verticalAlign="stretch">
	${0:<!-- Put the content Here -->}
</lightning:layout>

Lightning Layout Spread Center

Create Lightning Layout with Horizontal Align Spread and Vertical Align Center Code Unit (lightning:layout)

Documentation

Activation: ltn.layoutSpreadCenter

Snippet

<lightning:layout horizontalAlign="spread" verticalAlign="center">
	${0:<!-- Put the content Here -->}
</lightning:layout>

Lightning Layout Spread Stretch

Create Lightning Layout with Horizontal Align Spread and Vertical Align Stretch Code Unit (lightning:layout)

Documentation

Activation: ltn.layoutSpreadStretch

Snippet

<lightning:layout horizontalAlign="spread" verticalAlign="stretch">
	${0:<!-- Put the content Here -->}
</lightning:layout>

Lightning Layout Item

Create Lightning Basic Layout Item Code Unit (lightning:layoutItem)

Documentation

Activation: ltn.layoutItem

Snippet

<lightning:layoutItem size="${1:size}" padding="around-small">
	${0:<!-- Put the content Here -->}
</lightning:layoutItem>

Lightning List View

Create Lightning List View Code Unit (lightning:listView)

Documentation

Activation: ltn.listView

Snippet

<lightning:listView aura:id="${1:auraId}" objectApiName="${2:objApiName}" listName="${3:listName}" rows="${4:rowsNumber}" showSearchBar="${5:true}" showActionBar="${6:false}" enableInlineEdit="${7:true}" showRowLevelActions="${8:false}"/>

Lightning Map

Create Lightning City Map Code Unit (lightning:map)

Documentation

Activation: ltn.map

Snippet

<lightning:map mapMarkers="{!${1:placeholder}}" center="{!${2:center}}" zoomLevel="{!${3:zoomLevel}}" markersTitle="{!${4:markersTitle}}" showFooter="${5:true}"/>

Lightning Menu Item

Create Lightning Menu Item Code Unit (lightning:menuItem)

Documentation

Activation: ltn.menuItem

Snippet

<lightning:menuItem label="${1:label}" value="${2:value}" iconName="${3:iconName}"/>

Lightning Menu Item URL

Create Lightning Menu Item for URL Code Unit (lightning:menuItem)

Documentation

Activation: ltn.menuItemUrl

Snippet

<lightning:menuItem label="${1:label}" href="${2:url}" iconName="${3:iconName}"/>

Lightning Navigation Service

Create Lightning Navigation Service Code Unit (lightning:navigation)

Documentation

Activation: ltn.navigation

Snippet

<lightning:navigation aura:id="${1:auraId}"/>

Lightning Navigation Item API

Create Lightning Navigation Item API Code Unit (lightning:navigationItemAPI)

Documentation

Activation: ltn.navigationItemApi

Snippet

<lightning:navigationItemAPI aura:id="${1:auraId}"/>

Lightning Omni Toolkit API

Create Lightning Omni Toolkit API Code Unit (lightning:omniToolkitAPI)

Documentation

Activation: ltn.omniToolkitApi

Snippet

<lightning:omniToolkitAPI aura:id="${1:auraId}"/>

Lightning Output Field

Create Lightning Output Field Code Unit (lightning:outputField)

Documentation

Activation: ltn.outputField

Snippet

<lightning:outputField fieldName="${1:fieldAPIName}"/>

Lightning Overlay Library

Create Lightning Overlay Library Code Unit (lightning:overlayLibrary)

Documentation

Activation: ltn.overlayLibrary

Snippet

<lightning:overlayLibrary aura:id="${1:auraId}"/>

Lightning Path

Create Lightning Path Code Unit (lightning:path)

Documentation

Activation: ltn.path

Snippet

<lightning:path aura:id="${1:auraId}" recordId="{!${2:recordId}}" variant="${3:linear}" hideUpdateButton="${4:false}" onselect="{!c.${5:jsAction}}"/>

Lightning Picklist Path

Create Lightning Picklist Path Code Unit (lightning:picklistPath)

Documentation

Activation: ltn.picklistPath

Snippet

<lightning:picklistPath aura:id="${1:auraId}" recordId="{!${2:recordId}}" variant="${3:linear}" picklistFieldApiName="${4:fieldAPIName}" onselect="{!c.${5:jsAction}}"/>

Lightning Pill

Create Lightning Pill Code Unit (lightning:pill)

Documentation

Activation: ltn.pill

Snippet

<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}"/>

Lightning Pill URL

Create Lightning Pill URL Code Unit (lightning:pill)

Documentation

Activation: ltn.pillUrl

Snippet

<lightning:pill label="${1:label}" href="${2:url}"/>

Lightning Pill Avatar

Create Lightning Pill with Avatar Code Unit (lightning:pill)

Documentation

Activation: ltn.pillAvatar

Snippet

<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}">
	<aura:set attribute="media">
		<lightning:avatar src="${4:avatarSource}" fallbackIconName="${5:icon}" variant="${6:circle}"  alternativeText="${7:altText}"/>
	</aura:set>
</lightning:pill>

Lightning Pill Avatar URL

Create Lightning Pill URL with Avatar Code Unit (lightning:pill)

Documentation

Activation: ltn.pillAvatarUrl

Snippet

<lightning:pill label="${1:label}" href="${2:url}">
	<aura:set attribute="media">
		<lightning:avatar src="${3:avatarSource}" fallbackIconName="${4:icon}" variant="${5:circle}"  alternativeText="${6:altText}"/>
	</aura:set>
</lightning:pill>

Lightning Pill Icon

Create Lightning Pill with Icon Code Unit (lightning:pill)

Documentation

Activation: ltn.pillIcon

Snippet

<lightning:pill label="${1:label}" onremove="{!c.${2:jsAction}}" onclick="{!c.${3:jsAction}}">
	<aura:set attribute="media">
		<lightning:icon iconName="${4:icon}" alternativeText="${5:altText}"/>
	</aura:set>
</lightning:pill>

Lightning Pill Icon URL

Create Lightning Pill URL with Icon Code Unit (lightning:pill)

Documentation

Activation: ltn.pillIconUrl

Snippet

<lightning:pill label="${1:label}" href="${2:url}">
	<aura:set attribute="media">
		<lightning:icon iconName="${3:icon}" alternativeText="${4:altText}"/>
	</aura:set>
</lightning:pill>

Lightning Pill Container

Create Lightning Pill Container Code Unit (lightning:pillContainer)

Documentation

Activation: ltn.pillContainer

Snippet

<lightning:pillContainer items="{!${1:items}}"/>

Lightning Progress Bar

Create Lightning Progress Bar Code Unit (lightning:progressBar)

Documentation

Activation: ltn.progressBar

Snippet

<lightning:progressBar value="{!${1:value}}" size="{!${2:medium}}"/>

Lightning Progress Bar Ciruclar

Create Lightning Progress Bar Circular Code Unit (lightning:progressBar)

Documentation

Activation: ltn.progressBarCircular

Snippet

<lightning:progressBar value="{!${1:value}}" size="{!${2:medium}}" variant="circular"/>

Lightning Progress Indicator

Create Lightning Progress Indicator Code Unit (lightning:progressIndicator)

Documentation

Activation: ltn.progressIndicator

Snippet

<lightning:progressIndicator currentStep="{!${1:currentStep}}" type="base" variant="base">
	${0:<!-- Put yout Progress Steps here (lightning:progressStep) -->}
</lightning:progressIndicator>

Lightning Progress Indicator Path

Create Lightning Progress Indicator like Path Code Unit (lightning:progressIndicator)

Documentation

Activation: ltn.progressIndicatorPath

Snippet

<lightning:progressIndicator currentStep="{!${1:currentStep}}" type="path" variant="base">
	${0:<!-- Put yout Progress Steps here (lightning:progressStep) -->}
</lightning:progressIndicator>

Lightning Quick Action API

Create Lightning Quick Action API Code Unit (lightning:quickActionAPI)

Documentation

Activation: ltn.quickActionApi

Snippet

<lightning:quickActionAPI aura:id="${1:auraId}"/>

Lightning Quip Card

Create Lightning Quip Card Code Unit (lightning:quipCard)

Documentation

Activation: ltn.quipCard

Snippet

<lightning:quipCard parentRecordId="{!${1:parentRecordId}}"/>

Lightning Radio Group

Create Lightning Radio Group Code Unit (lightning:radioGroup)

Documentation

Activation: ltn.radioGroup

Snippet

<lightning:radioGroup name="${1:name}" label="${2:label}" options="{!${3:options}}" value="{!${4:value}}" type="radio"/>

Lightning Radio Group Button

Create Lightning Radio Group like Button Code Unit (lightning:radioGroup)

Documentation

Activation: ltn.radioGroupBtn

Snippet

<lightning:radioGroup name="${1:name}" label="${2:label}" options="{!${3:options}}" value="{!${4:value}}" type="button"/>

Lightning Record Edit Form for Create

Create Lightning Record Edit Form for Create a new record Code Unit (lightning:recordEditForm)

Documentation

Activation: ltn.recordEditFormForCreate

Snippet

<lightning:recordEditForm objectApiName="${1:objectApiName}" onload="{!c.${2:jsAction}}" onsubmit="{!c.${3:jsAction}}" onsuccess="{!c.${4:jsAction}}"/>
	${0:<!-- Put the input fields here (lightning:inputField) -->}
</lightning:recordEditForm>

Lightning Record Edit Form for Edit

Create Lightning Record Edit Form for Edit a record Code Unit (lightning:recordEditForm)

Documentation

Activation: ltn.recordEditForm

Snippet

<lightning:recordEditForm recordId="{!${1:recordId}}" objectApiName="${2:objectApiName}" onload="{!c.${3:jsAction}}" onsubmit="{!c.${4:jsAction}}" onsuccess="{!c.${5:jsAction}}"/>
	${0:<!-- Put the input fields here (lightning:inputField) -->}
</lightning:recordEditForm>

Lightning Record Form

Create Lightning Record Form Code Unit (lightning:recordForm)

Documentation

Activation: ltn.recordForm

Snippet

<lightning:recordForm recordId="{!${1:recordId}}" objectApiName="{!${2:objectApiName}}" layoutType="${3:layoutType}" columns="${4:columns}" mode="${5:mode}"/>

Lightning Record View Form

Create Lightning Record Form Code Unit (lightning:recordViewForm)

Documentation

Activation: ltn.recordViewForm

Snippet

<lightning:recordViewForm recordId="{!${1:recordId}}" objectApiName="{!${2:objectApiName}}">
	${0:<!-- Put the output fields here (lightning:outputField) -->}
</lightning:recordViewForm>

Lightning Relative Date Time

Create Lightning Relative Date Time Code Unit (lightning:relativeDateTime)

Documentation

Activation: ltn.relativeDateTime

Snippet

<lightning:relativeDateTime value="{!${1:value}}"/>

Lightning Select

Create Lightning Select Code Unit (lightning:select)

Documentation

Activation: ltn.select

Snippet

<lightning:recordViewForm aura:id="${1:auraId}" name="${2:name}" label="${3:label}" value="${4:selectedValue}">
	<aura:iteration items="{!${5:options}}" var="option">
		<option text="{!${6:option.label}}" value="{!${7:option.id}}" selected="{!${8:option.selected}}"/>
	</aura:iteration>
</lightning:recordViewForm>

Lightning Slider

Create Lightning Slider Code Unit (lightning:slider)

Documentation

Activation: ltn.slider

Snippet

<lightning:slider label="${1:label}" value="{!${2:value}}" size="${3:medium}"/>

Lightning Spinner

Create Lightning Spinner Code Unit (lightning:spinner)

Documentation

Activation: ltn.spinner

Snippet

<lightning:spinner alternativeText="${1:altText}" size="${2:medium}"/>

Lightning Tab

Create Lightning Tab Code Unit (lightning:tab)

Documentation

Activation: ltn.tab

Snippet

<lightning:tab label="${1:label}" id="${2:tabId}">
	${0:<!-- Put your tab content here -->}
</lightning:tab>

Lightning Tab Set

Create Lightning Tab Set Code Unit (lightning:tabset)

Documentation

Activation: ltn.tabset

Snippet

<lightning:tabset selectedTabId="${1:tabId}">
	${0:<!-- Put your tabs here -->}
</lightning:tabset>

Lightning Text Area

Create Lightning Text Area Code Unit (lightning:textArea)

Documentation

Activation: ltn.textArea

Snippet

<lightning:textArea name="${1:name}" label="${2:label}" value="{!${3:value}}" placeholder="${4:placeholder}"/>

Lightning Tile

Create Lightning Tile Code Unit (lightning:tile)

Documentation

Activation: ltn.tile

Snippet

<lightning:tile label="${1:label}" href="${2:url}">
	${0:<!-- Put your content here -->}
</lightning:tile>

Lightning Tile Icon

Create Lightning Tile with Icon Code Unit (lightning:tile)

Documentation

Activation: ltn.tileIcon

Snippet

<lightning:tile label="${1:label}" href="${2:url}">
	<aura:set attribute="media">
		<lightning:icon iconName="${2:iconName}"/>
	</aura:set>
	${0:<!-- Put your content here -->}
</lightning:tile>

Lightning Tile Avatar

Create Lightning Tile with Avatar Code Unit (lightning:tile)

Documentation

Activation: ltn.tileAvatar

Snippet

<lightning:tile label="${1:label}" href="${2:url}">
	<aura:set attribute="media">
		<lightning:avatar src="${3:avatarSource}" fallbackIconName="${4:iconName}" alternativeText="${5:altText}"/>
	</aura:set>
	${0:<!-- Put your content here -->}
</lightning:tile>

Lightning Tree

Create Lightning Tree Code Unit (lightning:tree)

Documentation

Activation: ltn.tree

Snippet

<lightning:tree header="${1:header}" items={!${2:items}}/>

Lightning Tree Grid

Create Lightning Tree Grid Code Unit (lightning:treeGrid)

Documentation

Activation: ltn.treeGrid

Snippet

<lightning:treeGrid columns="{!${1:columns}}" data="{!${2:data}}" expandedRows="{!${3:expandedRows}}" keyField="${4:keyField}"/>

Lightning Unsaved Changes

Create Lightning Unsaved Changes Code Unit (lightning:unsavedChanges)

Documentation

Activation: ltn.unsavedChanges

Snippet

<lightning:unsavedChanges aura:id="${1:auraId}" onsave="{!c.${2:jsAction}}" ondiscard="{!c.${3:jsAction}}"/>

Lightning Utility Bar API

Create Lightning Utility Bar API Code Unit (lightning:utilityBarAPI)

Documentation

Activation: ltn.utilityBarApi

Snippet

<lightning:utilityBarAPI aura:id="${1:auraId}"/>

Lightning Vertical Navigation

Create Lightning Vertical Navigation Code Unit (lightning:verticalNavigation)

Documentation

Activation: ltn.verticalNavigation

Snippet

<lightning:verticalNavigation selectedItem="{!${1:selectedItem}}"/>
	${0:<!-- Put your Navigation Sections and Items here -->}
</lightning:verticalNavigation>

Lightning Vertical Navigation Item

Create Lightning Vertical Navigation Item Code Unit (lightning:verticalNavigationItem)

Documentation

Activation: ltn.verticalNavigationItem

Snippet

<lightning:verticalNavigationItem label="${1:label}" name="${2:name}"/>

Lightning Vertical Navigation Item Badge

Create Lightning Vertical Navigation Item Badge Code Unit (lightning:verticalNavigationItemBadge)

Documentation

Activation: ltn.verticalNavigationItemBadge

Snippet

<lightning:verticalNavigationItemBadge label="${1:label}" name="${2:name}" badgeCount="{!${3:badgeCount}}"/>

Lightning Vertical Navigation Item Icon

Create Lightning Vertical Navigation Item Icon Code Unit (lightning:verticalNavigationItemIcon)

Documentation

Activation: ltn.verticalNavigationItemIcon

Snippet

<lightning:verticalNavigationItemIcon label="${1:label}" name="${2:name}" iconName="${3:iconName}"/>

Lightning Vertical Navigation Overflow

Create Lightning Vertical Navigation Overflow Code Unit (lightning:verticalNavigationOverflow)

Documentation

Activation: ltn.verticalNavigationOverflow

Snippet

<lightning:verticalNavigationOverflow>
	${0:<!-- Put your Navigation Sections and Items here -->}
</lightning:verticalNavigationOverflow>

Lightning Vertical Navigation Section

Create Lightning Vertical Navigation Section Code Unit (lightning:verticalNavigationSection)

Documentation

Activation: ltn.verticalNavigationSection

Snippet

<lightning:verticalNavigationSection label="${1:label}">
	${0:<!-- Put your Navigation Items here -->}
</lightning:verticalNavigationSection>

Lightning Vertical Workspace API

Create Lightning Workspace API Code Unit (lightning:workspaceAPI)

Documentation

Activation: ltn.workspaceAPI

Snippet

<lightning:workspaceAPI aura:id="${1:auraId}">

Lightning Community

Lightning Community Back Button

Create Community Back Button Code Unit (lightningcommunity:backButton)

Documentation

Activation: ltnCommunity.backButton

Snippet

<lightningcommunity:backButton iconName="${1:iconName}" class="${1:cssClass}" onnavigationcomplete="{!c.${3:jsAction}}"/>

Lightning Snapin

Lightning Snapin Minimized API

Create Lightning Snapin Minimized API Code Unit (lightningsnapin:minimizedAPI)

Documentation

Activation: ltnSnapin.minimizedAPI

Snippet

<lightningsnapin:minimizedAPI aura:id="${1:auraId}"/>

Lightning Snapin Prechat API

Create Lightning Snapin Prechat API Code Unit (lightningsnapin:prechatAPI)

Documentation

Activation: ltnSnapin.prechatAPI

Snippet

<lightningsnapin:prechatAPI aura:id="${1:auraId}"/>

Lightning Snapin Settings API

Create Lightning Snapin Settings API Code Unit (lightningsnapin:settingsAPI)

Documentation

Activation: ltnSnapin.settingsAPI

Snippet

<lightningsnapin:settingsAPI aura:id="${1:auraId}"/>

UI

UI Action Menu Item

Create UI Action Menu Item Code Unit (ui:actionMenuItem)

Documentation

Activation: ui.actionMenuItem

Snippet

<ui:actionMenuItem aura:id="${1:auraId}" label="${2:label}" click="{!c.${3:jsAction}}"/>

UI Button

Create UI Button Code Unit (ui:button)

Documentation

Activation: ui.button

Snippet

<ui:button aura:id="${1:auraId}" buttonTitle="${2:buttonTitle}" label="${3:label}" class="button" press="{!c.${4:jsAction}}"/>

UI Checkbox Menu Item

Create UI Checkbox Menu Item Code Unit (ui:checkboxMenuItem)

Documentation

Activation: ui.checkboxMenuItem

Snippet

<ui:checkboxMenuItem aura:id="${1:auraId}" label="${2:label}"/>

UI Input Checkbox

Create UI Input Checkbox Code Unit (ui:inputCheckbox)

Documentation

Activation: ui.inputCheckbox

Snippet

<ui:inputCheckbox aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}"/>

UI Input Currency

Create UI Input Currency Code Unit (ui:inputCurrency)

Documentation

Activation: ui.inputCurrency

Snippet

<ui:inputCurrency aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" change="{!c.${4:jsAction}}" updateOn="${5:keyup}"/>

UI Input Date

Create UI Input Date Code Unit (ui:inputDate)

Documentation

Activation: ui.inputDate

Snippet

<ui:inputDate aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" displayDatePicker="${4:true}"/>

UI Input Date Time

Create UI Input Date Time Code Unit (ui:inputDateTime)

Documentation

Activation: ui.inputDateTime

Snippet

<ui:inputDateTime aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" displayDatePicker="${4:true}"/>

UI Input Email

Create UI Input Email Code Unit (ui:inputEmail)

Documentation

Activation: ui.inputEmail

Snippet

<ui:inputEmail aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>

UI Input Number

Create UI Input Number Code Unit (ui:inputNumber)

Documentation

Activation: ui.inputNumber

Snippet

<ui:inputNumber aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" updateOn="${4:keyup}"/>

UI Input Phone

Create UI Input Phone Code Unit (ui:inputPhone)

Documentation

Activation: ui.inputPhone

Snippet

<ui:inputPhone aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>

UI Input Radio

Create UI Input Radio Code Unit (ui:inputRadio)

Documentation

Activation: ui.inputRadio

Snippet

<ui:inputRadio aura:id="${1:auraId}" name="${2:name}" label="${3:label}" change="{!c.${4:jsAction}}" value="${5:false}"/>

UI Input Secret

Create UI Input Secret Code Unit (ui:inputSecret)

Documentation

Activation: ui.inputSecret

Snippet

<ui:inputSecret aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>

UI Input Select

Create UI Input Select Single Selection Code Unit (ui:inputSelect)

Documentation

Activation: ui.inputSelect

Snippet

<ui:inputSelect class="single" aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}">
	<aura:iteration items="{!${4:items}}" var="${5:item}">
		<ui:inputSelectOption text="${6:text}"/>
	</aura:iteration>
</ui:inputSelect>

UI Input Select Multiple

Create UI Input Select Multiple Selection Code Unit (ui:inputSelect)

Documentation

Activation: ui.inputSelectMultiple

Snippet

<ui:inputSelect multiple="true" class="multiple"  aura:id="${1:auraId}" label="${2:label}" change="{!c.${3:jsAction}}">
	<aura:iteration items="{!${4:items}}" var="${5:item}">
		<ui:inputSelectOption text="${6:text}"/>
	</aura:iteration>
</ui:inputSelect>

UI Input Select Dynamic

Create UI Input Select Dynamic Code Unit (ui:inputSelect)

Activation: ui.inputSelectDynamic

Snippet

<ui:inputSelect class="dynamic" aura:id="${1:auraId}" change="{!c.${2:jsAction}}"/>

UI Input Select Option

Create UI Input Select Option Code Unit (ui:inputSelectOption)

Documentation

Activation: ui.inputSelectOption

Snippet

<ui:inputSelectOption text="${1:text}"/>

UI Input Text

Create UI Input Text Code Unit (ui:inputText)

Documentation

Activation: ui.inputText

Snippet

<ui:inputText aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" updateOn="${4:keyup}"/>

UI Input Text Area

Create UI Input Text Area Code Unit (ui:inputTextArea)

Documentation

Activation: ui.inputTextArea

Snippet

<ui:inputTextArea aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}" rows="${4:nRows}"/>

UI Input URL

Create UI Input URL Code Unit (ui:inputURL)

Documentation

Activation: ui.inputURL

Snippet

<ui:inputURL aura:id="${1:auraId}" label="${2:label}" value="{!${3:value}}"/>

UI Menu

Create UI Menu Code Unit (ui:menu)

Documentation

Activation: ui.menu

Snippet

<ui:menu>
	${0: <!-- Put your menu items here -->}
</ui:menu>

UI Menu Item Separator

Create UI Menu Item Separator Code Unit (ui:menuItemSeparator)

Documentation

Activation: ui.menuItemSeparator

Snippet

<ui:menuItemSeparator/>

UI Menu List

Create UI Menu List Code Unit (ui:menuList)

Documentation

Activation: ui.menuList

Snippet

<ui:menuList aura:id="${1:auraId}" class="actionMenu" >
	${0: <!-- Put your menu items here -->}
</ui:menuList>

UI Menu Trigger Link

Create UI Menu List Code Unit (ui:menuTriggerLink)

Documentation

Activation: ui.menuTriggerLink

Snippet

<ui:menuTriggerLink aura:id="${1:auraId}" label="${2:label}"/>

UI Message Confirmation

Create UI Confirmation Message Code Unit (ui:message)

Documentation

Activation: ui.messageConfirm

Snippet

<ui:message title="${1:title}" severity="confirm" closable="${2:true}">
	${0:<!-- Put your message here -->}
</ui:message>

UI Message Information

Create UI Information Message Code Unit (ui:message)

Documentation

Activation: ui.messageInfo

Snippet

<ui:message title="${1:title}" severity="info" closable="${2:true}">
	${0:<!-- Put your message here -->}
</ui:message>

UI Message Warning

Create UI Warning Message Code Unit (ui:message)

Documentation

Activation: ui.messageWarning

Snippet

<ui:message title="${1:title}" severity="warning" closable="${2:true}">
	${0:<!-- Put your message here -->}
</ui:message>

UI Message Error

Create UI Error Message Code Unit (ui:message)

Documentation

Activation: ui.messageError

Snippet

<ui:message title="${1:title}" severity="error" closable="${2:true}">
	${0:<!-- Put your message here -->}
</ui:message>

UI Output Checkbox

Create UI Output Checkbox Code Unit (ui:outputCheckbox)

Documentation

Activation: ui.outputCheckbox

Snippet

<ui:outputCheckbox aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Currency

Create UI Output Currency Code Unit (ui:outputCurrency)

Documentation

Activation: ui.outputCurrency

Snippet

<ui:outputCurrency aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Date

Create UI Output Date Code Unit (ui:outputDate)

Documentation

Activation: ui.outputDate

Snippet

<ui:outputDate aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Date Time

Create UI Output Date Time Code Unit (ui:outputDateTime)

Documentation

Activation: ui.outputDateTime

Snippet

<ui:outputDateTime aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Email

Create UI Output Email Code Unit (ui:outputEmail)

Documentation

Activation: ui.outputEmail

Snippet

<ui:outputEmail aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Number

Create UI Output Number Code Unit (ui:outputNumber)

Documentation

Activation: ui.outputNumber

Snippet

<ui:outputNumber aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Phone

Create UI Output Phone Code Unit (ui:outputPhone)

Documentation

Activation: ui.outputPhone

Snippet

<ui:outputPhone aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Rich Text

Create UI Output Rich Text Code Unit (ui:outputRichText)

Documentation

Activation: ui.outputRichText

Snippet

<ui:outputRichText aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Text

Create UI Output Text Code Unit (ui:outputText)

Documentation

Activation: ui.outputText

Snippet

<ui:outputText aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output Text Area

Create UI Output Text Area Code Unit (ui:outputTextArea)

Documentation

Activation: ui.outputTextArea

Snippet

<ui:outputTextArea aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Output URL

Create UI Output URL Code Unit (ui:outputURL)

Documentation

Activation: ui.outputURL

Snippet

<ui:outputURL aura:id="${1:auraId}" value="{!${2:value}}"/>

UI Radio Menu Item

Create UI Radio Menu Item Code Unit (ui:radioMenuItem)

Documentation

Activation: ui.radioMenuItem

Snippet

<ui:radioMenuItem label="${1:label}"/>

UI Scroller Wrapper

Create UI Scroller Wrapper Code Unit (ui:scrollerWrapper)

Documentation

Activation: ui.scrollerWrapper

Snippet

<ui:scrollerWrapper>
	${0:<-- Put your content here -->}
</ui:scrollerWrapper>

JavaScript

Aura Controller Function

Create a standard controller function Code Unit

Activation: js.controllerFunction

Snippet

${1:funcName} : function(${2:component}, ${3:event}, ${4:helper}){
	$0
},

Aura Function

Create a standard Aura function Code Unit

Activation: js.function

Snippet

${1:funcName} : function(${2:params}){
	$0
},

JSON Pretty

Add code for print a JSON Object pretty in console

Activation: js.JSONPretty

Snippet

JSON.stringify(${1:json}, null, ${2:indenLevel})

Print JSON Pretty

Add code for print a JSON Object pretty in console

Activation: js.JSONPrettyConsole
Alternative Activation: js.PrintJSONPretty

Snippet

console.log(JSON.stringify(${1:json}, null, ${2:indenLevel}));

SLDS

SLDS Modal Dialog

Create a base Modal Dialog Code Unit with Salesforce Lightning Design System (SLDS)

Documentation

Activation: slds.modal

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
						<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
					</svg>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<button class="slds-button slds-button_neutral">${4:Cancel}</button>
				<button class="slds-button slds-button_brand">${5:Save}</button>
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Lightning

Create a base Modal Dialog Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)

Documentation

Activation: slds.modalLtn

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<lightning:icon iconName="utility:close" size="large"/>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<lightning:button label="${4:Cancel}" title="${4:Cancel}" onclick="{!c.${5:jsAction}}" />
				<lightning:button variant="brand" label="${6:Save}" title="${6:Save}" onclick="{!c.${7:jsAction}}" />
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Tagline

Create a base Modal Dialog with Tagline Code Unit with Salesforce Lightning Design System (SLDS)

Documentation

Activation: slds.modalTagline

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
						<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
					</svg>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
				<p>${4:Tagline Text}</p>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<button class="slds-button slds-button_neutral">${5:Cancel}</button>
				<button class="slds-button slds-button_brand">${6:Save}</button>
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Tagline Lightning

Create a base Modal Dialog with Tagline Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)

Documentation

Activation: slds.modalTaglineLtn

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<lightning:icon iconName="utility:close" size="large"/>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
				<p>${4:Tagline Text}</p>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<lightning:button label="${5:Cancel}" title="${5:Cancel}" onclick="{!c.${6:jsAction}}" />
				<lightning:button variant="brand" label="${7:Save}" title="${7:Save}" onclick="{!c.${8:jsAction}}" />
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Headless

Create a base Modal Dialog Headless Code Unit with Salesforce Lightning Design System (SLDS)

Documentation

Activation: slds.modalHeadless

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
						<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
					</svg>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<button class="slds-button slds-button_neutral">${3:Cancel}</button>
				<button class="slds-button slds-button_brand">${4:Save}</button>
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Headless Lightning

Create a base Modal Dialog Headless Code Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)

Documentation

Activation: slds.modalHeadlessLtn

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<lightning:icon iconName="utility:close" size="large"/>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer">
				<lightning:button label="${3:Cancel}" title="${3:Cancel}" onclick="{!c.${4:jsAction}}" />
				<lightning:button variant="brand" label="${5:Save}" title="${5:Save}" onclick="{!c.${6:jsAction}}" />
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Footless

Create a base Modal Dialog Footless Code Unit with Salesforce Lightning Design System (SLDS)

Documentation

Activation: slds.modalFootless

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
						<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
					</svg>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Footless Lightning

Create a base Modal Dialog Code Footless Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)

Documentation

Activation: slds.modalFootlessLtn

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<lightning:icon iconName="utility:close" size="large"/>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Directional

Create a base Modal Dialog Directional Code Unit with Salesforce Lightning Design System (SLDS)

Documentation

Activation: slds.modalDirectional

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
						<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
					</svg>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer slds-modal__footer_directional">
				<button class="slds-button slds-button_neutral">${4:Skeep this Step}</button>
				<button class="slds-button slds-button_brand">${4:Save &amp; Next}</button>
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SLDS Modal Dialog Directional Lightning

Create a base Modal Dialog Code Directional Unit with Salesforce Lightning Design System (SLDS) and Lightning elements (Buttons, icon...)

Documentation

Activation: slds.modalDirectionalLtn

Snippet

<div style="height:640px">
	<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
		<div class="slds-modal__container">
			<header class="slds-modal__header">
				<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="${1:Close}">
					<lightning:icon iconName="utility:close" size="large"/>
					<span class="slds-assistive-text">"${2:Close}"</span>
				</button>
				<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">"${3:Header Text}"</h2>
			</header>
			<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
				${0:<!-- Put yout modal content here -->}
			</div>
			<footer class="slds-modal__footer slds-modal__footer_directional">
				<lightning:button label="${4:Skeep this Step}" title="${4:Skeep this Step}" onclick="{!c.${5:jsAction}}" />
				<lightning:button variant="brand" label="${6:Save &amp; Next}" title="${6:Save &amp; Next}" onclick="{!c.${7:jsAction}}" />
			</footer>
		</div>
	</section>
	<div class="slds-backdrop slds-backdrop_open"></div>
</div>

SALESFORCE PERMISSIONS

METADATA TOOLS

WORKING WITH GIT

DOCUMENTING PROJECT

AURA HELPER FRAMEWORK